can't change text color

  • pinkieboadicea · Member ·

    Dear All,

    I’m new to CSS, but I’m using what seems like some pretty basic, pretty valid code here.

    I used the “inspect element” in Firefox to establish that I want to change my .post class. The code here successfully changes my background from white to a darker color:

    div.post {
	background-color: rgba(255,255,255,0.1);
}

    I looked it up and the below code should also change my text to white

    div.post {
	background-color: rgba(255,255,255,0.1);
	color: white;
}

    But while playing with the colors settings in the editor and choosing “pick colors to match header” will sometimes randomly change the color of the main body text, I can’t figure out how to override this and pick a color that can actually be read.

    Tips? Help?

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    Hi @pinkieboadicea, we need to look at the original CSS and determine where the colors are set for the different elements. In the case of the content text color, this theme author used some very specific CSS classes as you will see in the first rule below. The second rule is the one you reference above to change the background color on the posts. The third is to change the color of linked text, which as the dark orange and not readable, including the post titles. You can change colors as desired. 

    .posts .post-content p, .posts .post-content li, .posts .post-content dt, .posts .post-content dd, .posts .post-content address, .posts .post-content th, .posts .post-content td {
    color: #fff;
}
.post {
    background: rgba(255,255,255,0.1);
}
.post a, .post-meta, .post-meta a {
    color: #fff !important;
}
  • pinkieboadicea · Member ·

    Hi Happiness Engineer! (love that title).

    So, I’m using the Baskerville theme at the moment. I really don’t know anything about CSS/html and am doing all of this trial and error.

    The code you printed — can I paste that into my CSS editor in the customize pane and just change the #fff to whatever color I want? Or do I need to do more research for this to work?

    Most appreciated.

  • thesacredpath · Member ·

    @pinkieboadicea, yes you can. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the custom CSS.

  • pinkieboadicea · Member ·

    Hi Sacredpath,

    So I pasted your code into my CSS editor…. but it seems like there is a `{‘
    missing somewhere (I counted and they don’t add up. Also, I couldn’t “paste” from this forum so I had to paste from the forum e-mail alert, but it didn’t paste right so I’m transposing, really).

    I’ve got this going on right now:

    `.posts .post-content p, .posts .post-content li, .post {
    color: #ffefef;
    }

    .post {
    background: rgba(255,255,255,0.1);
    }

    .post a, .post-meta, .post-meta a {
    color: pink !important;
    }’

    It seems to work. So, thank you!

    Also, why is CSS code so redundant? It looks like you have to call 3 objects just to turn link colors a different color. What gives?

  • thesacredpath · Member ·

    Hi, and sorry for the issue. Emails have different encoding so pasting from the email will cause issues. You should be able to highlight and copy the code from the forum. What happens when you try?

    If you want, I can paste it in for you. Just let me know.

  • The topic ‘can't change text color’ is closed to new replies.