19 {{ upvoteCount | shortNum }}
19 {{ upvoteCount | shortNum }}

CSS to change text color - WP / Headway Theme

by AllanWard
14 replies
  • WEB DESIGN
    • |
I've got a WP blog using Headway theme.

I've set up the front page so the excerpt from my latest post is at the top of the page, below it is a blurb about the site, and below that are excerpts from previous blog posts.

I want to make the latest post box stand out a bit more by giving it a darker background and lighter text. The rest of the page is a lighter background / darker text.

In Headway I've given the box a Custom CSS Class called featured. I've used this code to change the color of the box:

.Featured{
background-color: #6bd82b;
}

What code do I add to change the color of the text to white? I tried 'color: #ffffff; and that didn't do anything.

Thanks in advance for any help you can give me.

Allan
PS don't laugh at my very basic understanding of CSS - I'm learning
#change #color #css #headway #headway theme #text #theme
  • Profile picture of the author ernestrategos
    I guess it's bloggerbusinessplan website from your signature, both use the theme you mention...

    try:

    .category-featured-post{
    background-color: #6bd82b;
    }
    Signature

    Read one of my latest blog posts:
    https://www.eagleblogging.com/write-...ost-today.html

    {{ DiscussionBoard.errors[5510723].message }}
    • Profile picture of the author AllanWard
      Thanks for that. It's actually a different site (I've got too many!).

      Just to clarify - the code I pasted works ok to change the background colour of the leaf. What I'm wanting to do is then change the text color. I'm sure it's simple...
      {{ DiscussionBoard.errors[5510822].message }}
  • Profile picture of the author sodevious
    Could you post the link to the site?
    {{ DiscussionBoard.errors[5510869].message }}
  • Profile picture of the author AllanWard
    Sure: MySuperAdvice.com

    It's the top box I'm trying to style : Super Choice - Choosing your super fund

    Thanks
    {{ DiscussionBoard.errors[5511090].message }}
  • Profile picture of the author webpeon
    the font color is currently being set in the .entry-title class, you could just change the font color there but i have no idea what impact that'll have on other areas youve used that class
    Signature
    Web 2 Mobile
    The Future of The Web
    {{ DiscussionBoard.errors[5511274].message }}
    • Profile picture of the author AllanWard
      If I change it using Firebug at the .entry-content level, it changes all the text on the page, not just the text in the box.

      I'm going to post this over at the Headway forum as well. This is getting past the fun stage, into the frustrating stage.

      Thanks
      {{ DiscussionBoard.errors[5511342].message }}
  • Profile picture of the author webpeon
    yeah figured as much, theres lots of inherits to filter through I wasnt liking my chances of it being that easy...

    you could just span the title by replacing
    Super Choice - Choosing your super fund
    with
    <span style= "color:#fff">Super Choice - Choosing your super fund</span>

    however not the best option as it removes using the css stylesheet as a common point for any site modifications you do, although if its only that one title that needs changing its probably your quickest fix
    Signature
    Web 2 Mobile
    The Future of The Web
    {{ DiscussionBoard.errors[5511501].message }}
  • Profile picture of the author AdamMc
    Possibly not the best way of doing it, but if you want to specifically change the text colour without effecting other parts of the site you could try the following:

    Add to your css file:
    p.white { color: #FFF }
    .entry-title.white { color:#fff }

    Then in your HTML:

    Change:
    <h2 class="entry-title">
    To:
    <h2 class="entry-title white">

    Change:
    <p>Super choice has been around for a while ... etc. This means that… <button code></p>
    To:
    <p class="white">Super choice has been around for a while... etc. This means that…</p>
    <p><button code></p>

    You'd have to move code for the 'Continue Reading' button outside the p.white tag to prevent it from turning white. Hope this helps,

    Adam
    {{ DiscussionBoard.errors[5511670].message }}
  • Profile picture of the author ernestrategos
    SOLVED

    I Tested:

    .entry-title {
    color: white !important;
    }
    It changes ALL the post headers to white, so no use.

    .entry-summary {
    color: white !important;
    }
    It changes the text, the problem is it foes it in ALL posts

    tried:
    .entry-content {
    color: white !important;
    }
    But changes ALL text to white
    and I tested some others possibilities, selector, etc...

    Then I tested

    #block-16 * {
    color: white;
    }

    This did the trick!!    , THEN remember to style the text of the 'continue reading' button individually (Remember the header is also a link), good luck!
    Signature

    Read one of my latest blog posts:
    https://www.eagleblogging.com/write-...ost-today.html

    {{ DiscussionBoard.errors[5512708].message }}
  • Profile picture of the author Teriss
    And they call it a "Drag and Drop theme". That's the same situation I've had, not worth the money, overly advertised as easy, but you have to delve into a year of learning code -trial by error with that system. I've got a free theme that's much easier to use.
    {{ DiscussionBoard.errors[5512863].message }}
  • Profile picture of the author ernestrategos
    @Teriss :

    You're right, some things that should have worked did not; not only CSS specificity issues, but naming problems, so...
    Signature

    Read one of my latest blog posts:
    https://www.eagleblogging.com/write-...ost-today.html

    {{ DiscussionBoard.errors[5513039].message }}
    • Profile picture of the author AllanWard
      Thanks everyone for your help.
      @Ernestrategos - your solution worked (I had tried that before but without an '*').

      The Headway forum gave me another solution that works even better as it allows me to give the Title one color and the text another.
      .Featured div.entry-content p {color:#ffffff;}
      .Featured .entry-title {color:#ffffff;}

      Thanks again for your help.

      Regarding Teriss' comment -Headway is marketed as a drag and drop theme and I do think it does that well. It's simple for an idiot like me to set up different page designs on my blogs depending on the content I want displayed. Where it gets a bit complicated is when I want to do things like this text box color. If I was happy with the same color on every box, no problem. But what I wanted to do did require some CSS. Headway's Live CSS Editor makes it easy for me to add this code and instantly see if it works.

      So for me (someone with very little CSS and HTML knowledge), it does the job. For you guys who probably know a bit more than me, it may not be as user friendly as it should be. Which is a shame because it has a lot of potential.

      Thanks again for your comments.
      {{ DiscussionBoard.errors[5514966].message }}
  • Profile picture of the author ernestrategos
    I'm glad you found your solution!
    Anything else you need you know you can count on the CSS police

    Godspeed
    Signature

    Read one of my latest blog posts:
    https://www.eagleblogging.com/write-...ost-today.html

    {{ DiscussionBoard.errors[5515173].message }}
    • Profile picture of the author AllanWard
      Thanks. I'm sure I'll be back here on a regular basis.
      {{ DiscussionBoard.errors[5515472].message }}

Trending Topics