WordPress.org

Forums

BlogoLife
[resolved] Changing Font Color in Blogolife Theme (10 posts)

  1. dcardona
    Member
    Posted 1 year ago #

    I'm having a heck of a time finding the code which changes the color of the body font. I found a few contenders, but when I changed the values in my child theme, it strangely made no difference. What am I missing?

    I want to change from #666666/(102, 102, 102)
    to #c8c8c8c/(200, 200, 200)

    http://www.ampperformance.us/

  2. Andrew
    Forum moderator
    Posted 1 year ago #

    What CSS did you try?

  3. dcardona
    Member
    Posted 1 year ago #

    I tried in turn

    adding
    color: #c8c8c8;
    to

    body {
    	font-family: 'Oswald', sans-serif;
    }

    changing

    p {
    	color: #666;
    	line-height: 20px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size:  15px;
    }

    to
    p {
    color: #c8c8c8;
    line-height: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    }
    and changing

    .entry-content {
    	margin: 20px;
    	color: #666;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size:  15px;
    	line-height:30px;
    }

    to

    .entry-content {
    	margin: 20px;
    	color: #c8c8c8;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size:  15px;
    	line-height:30px;
    }
  4. Andrew
    Forum moderator
    Posted 1 year ago #

    1. Open your website in Chrome (browser).
    2. Right click on the text you want to style.
    3. Select 'Inspect element'.
    A new toolbar appears showing you the HTML on the left-hand side and the CSS on the right-hand side.

    You can just look at the CSS on the right-hand side to understand what you need to target (.entry-content p).

  5. dcardona
    Member
    Posted 1 year ago #

    Yes, on line 368 in the stylesheet. That's another one I tried. But again, no change.

  6. Andrew
    Forum moderator
    Posted 1 year ago #

    I'm not suggesting you change the theme's files.

    CSS works by targeting HTML elements and in CSS these are called "Selectors". You can use a browser developer tool like Firebug or the one built in to chrome to find these Selectors out more easily than searching them in the original stylesheet.

    You need to use create new styles in your Custom CSS plugin that override old styles from your theme.

  7. dcardona
    Member
    Posted 1 year ago #

    Thank you for your help, but I am not changing the files in the theme. I am using a child theme. I found the selectors by inspecting the elements, but when I edit the child theme stylesheet to override the parent, no changes are implemented.

  8. Andrew
    Forum moderator
    Posted 1 year ago #

    You got it working then?

  9. dcardona
    Member
    Posted 1 year ago #

    No. I have still been unable to make the changes I want.

  10. Andrew
    Forum moderator
    Posted 1 year ago #

    You've got this style in your Child Theme style.css file:

    .entry-content p {
    	color: #000000;
    	line-height:25px;
    	margin-bottom: 10px;
    }

    Change the "color" style.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic