Changing all text color in Twenty Fourteen theme

  • chron0saurus · Member ·

    Hello,

    I have tried to figure out how to change the color of my text on my site from black to navy – specifically, this color:

    #092b5a

    I have added CSS, changed it, removed it, and it stays black. I have searched on the forum and in Google to see if someone else has figured out this answer, but I see nothing out there. Essentially, I want all the non-link text – widgets, content, etc. – to be that color.

    Right now, the only CSS I have in my editor is the following:

    A:link {
	COLOR: #092b5a;
}

A:visited {
	COLOR: #092b5a;
}

A:hover {
	COLOR: #BDD7CD;
}

    Can someone help me with this? I do have the Custom Design feature upgraded.

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

  • thesacredpath · Member ·

    First off, I would suggest not using uppercase in CSS unless the existing CSS is using it for a specific selector, and never use uppercase for the declarations, such as color, line-height, etc.).

    The links throughout the Twenty Fourteen theme are declared in several places. Linked post titles (like on your main page) are declared with these selectors:

    .entry-title a
.entry-title a:hover
.entry-title a: visited

    The color for the date link under the title (date) is declared here:

    .entry-meta a
.entry-meta a:hover
.entry-meta a:visited

    There are more places as well. You can use the following with the important attribute to force things. I’ve use bright colors for demonstration purposes. You can edit the color codes as desired.

    a, a:link, a:visited {
    color: #cc0000 !important;
}
a:hover {
    color: #00ff3b !important;
}

    If you are not yet familiar with the web inspector tool in your browser, take a look at our support document on How to Find Your Theme’s CSS, which has some brief screencasts to get you started using it. It makes working with CSS much easier.

  • chron0saurus · Member ·

    Thanks! That helped me to change the links. However, the content text and all widget text is still black. Is there any way to change that, or is that the same no matter what? I’ve tried inspecting the element in Chrome but it’s hard for me to tell exactly what the element is.

  • thesacredpath · Member ·

    Add these and then edit the color codes as desired. I’ve intentionally used some bright colors for demonstration purposes.

    body, button, input, select, textarea {
    color: #CC0000;
}
#secondary, .primary-sidebar .widget blockquote, .primary-sidebar .widget .wp-caption, .primary-sidebar .widget_twentyfourteen_ephemera .entry-meta a, .primary-sidebar .entry-meta, .footer-sidebar .widget blockquote, .footer-sidebar .widget .wp-caption, .footer-sidebar .widget_twentyfourteen_ephemera .entry-meta a, .footer-sidebar .entry-meta, .site-footer, .site-info, .site-info a {
    color: #008000;
}
html, .p-author .profile .p-name, .custom-timeline-owner-profile .p-name, .cards-base p, .cards-base p a, .timeline-header .custom-timeline-summary, .timeline-header .custom-timeline-summary a:link, .timeline-header .custom-timeline-summary a:visited, .timeline-header .summary, .timeline-header .summary a:link, .timeline-header .summary a:visited, .p-author a.profile:hover .p-name, .p-author a.profile:focus .p-name {
    color: #FFA500;
}

    I also see the background on the tags below the posts is pretty dark making the tag text difficult to read. Add the following and change the color in border-right (which creates the pointy left end) and background-color to the same color of your choice.

    .entry-meta .tag-links a:before {
    border-right: 8px solid #767676;
}
.entry-meta .tag-links a {
    background-color: #767676;
}

    One thing I’ll mention is that changing colors in the Twitter Timeline widget is a little difficult since the bulk of that is controlled by Twitter. The black text that remains I’ve never had any luck finding a way to change.

  • chron0saurus · Member ·

    Thanks! I think that did the trick. I appreciate your help and input!

  • thesacredpath · Member ·

    You are welcome.

  • The topic ‘Changing all text color in Twenty Fourteen theme’ is closed to new replies.