Search code examples
htmlcsscolorstumblrtextcolor

CSS not changing text color?


I've looked around for answers to this question, and I haven't been able to find any. I'm trying to change the color of the text of my description. I have the following CSS:

.description {
position:fixed;
overflow:auto;
width:200px;
height:130px;
margin-left:115px;
margin-top:235px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
opacity:1;
text-align:center;
font-family:'calibri';
font-size:10px;
color:{color:Title};
background-color:{color:border};
z-index:1;
}

And the corresponding div stuff (sorry, I'm not that good with the lingo yet.)

<div class="description">
{block:Description}<div class="text">{Description}</div>{/block:Description}</div>

Now, the border color is #8f8f8f and the title color is #ffffff at the moment. However, the text color is showing up as the border color instead of the title color. If I change the background-color to something else (for example, the background color), the text color stays #8f8f8f. I've also tried making a whole new thing dedicated to description color in the meta name section at the top, as well as changing it from {color:Title} to something like {color:background} or similar things to that.

What I would like to know is: why is the text color not showing up as the title color, and how can I fix this?

Thanks to anybody who helps.


Solution

  • Recheck your code. Your Meta Tag should look something like this:

     <meta name="color:title" content="#ffffff"/>
    

    And then your CSS should be:

    .description {
      position:fixed;
      overflow:auto;
      width:200px;
      height:130px;
      margin-left:115px;
      margin-top:235px;
      border-bottom-left-radius:15px;
      border-bottom-right-radius:15px;
      opacity:1;
      text-align:center;
      font-family:'calibri';
      font-size:10px;
      color:{color:title};
      background-color:{color:border};
      z-index:1;
    }
    

    And then you have the text wrapped in another class named text. See yourself:

    <div class="description">
     {block:Description}<div class="text">{Description}</div>{/block:Description}
    </div>
    

    So Text that gets filled in with the {Description} variable will have the class "text" applied to it. That overwrites the styles from the "description" before that, because it follows it. So if there's a .text class in you CSS and there's "color: whatever" in this, that will overwrite your color from ".description" in this case.

    So in your CSS there should also be:

    .text {
          color:{color:title};
    }
    

    If you want all text inside an element with the class="text" to have that text color. Element could be

    <div class="text">XYZ</div> 
    

    for example.