Need help? Check out our Support site, then

Different Fonts/Colors for Different Pages

  1. I'd like to be able to show a different set of fonts/colors for different pages on my site and am curious if there's a way to do that with the Custom Design upgrade. My question is, can I utilize CSS code to show a different fonts/colors for different pages?

    My specific example would be with the site and having a different header and body fonts/colors for the Church and Preschool sections of the site. Any assistance you may be able to provide would be greatly appreciated... thanks!

    The blog I need help with is

  2. Hey jbpaul17 -

    This is possible. The WordPress has a built in function called the body_class function that generates all sorts of different CSS classes that you can hook into and target with CSS.

    Looking at your site with Google Chrome's web developer tools I can see that your preschool site has, among others, a class assigned to the body tag called page-id-9.

    This CSS class is unique to that particular page and you can use it to style elements on that page only.

    For example -

    .page-id-9 .entry-title {
    	color: salmon;
    	font-family: impact;

    Would change the page title to the font family impact and the color salmon, only on your pre-school page. Using that method you should be able to drill down and style the page how you'd like.

    One thing to note, I see that a lot of your content is wrapped in <span> elements with classes assigned directly in the post editor. These are called inline styles, they will override any custom CSS that you add. You'll want to remove them if you start working with custom CSS styles.

    I hope this helps.

  3. @5mutek

    Thanks for the CSS details and the tip on the sprawl of <span> elements on many pages. Some <span> elements came from importing a non-WordPress site and others appear to come from editing the text color/font in the WordPress visual editor. Either way, I've cleared those out.

    Final question, what's the CSS command/parameter/? to set the font for the on-page text and not just the page title?

    Many thanks!

  4. Hi there,

    It would be similar; so for example, to change the font color of the entry content on that page, you'd use:

    .page-id-9 .entry-content li {
    	color: #e42a7f;

    The "li" is there because the entire text on that page is a bulleted list. Also, the "Children of our savior preschool" heading is an h3 tag, so that'd be:

    .page-id-9 .entry-content h3 {
    	color: #e42a7f;
    	font-size: 40px;

    That changes the color and font size, but you'll note if you try it that only the font size changes. This is because you have a span style changing the color of that bit, and that overrules the CSS.

    We've got a great series on the Daily Post teaching our users basic CSS. You should check these out! They're a big help:

    Let me know if you have further questions!

  5. @eurello - those articles definitely helped, thanks for sharing! I tried to set the font to Tekton Pro as well via:

    .page-id-9 .entry-content li {
    	font-family: tekton-pro-1,tekton-pro-2,Bitter,Georgia,serif;
    	font-style: normal;
    	font-variant: normal;

    but it didn't seem to work. Is there something special about applying Adobe Typekit fonts?

  6. It should work as long as the font is already included in the theme, which the one you're using is. But you don't have the font names quite correct, try:

    font-family: tekton-pro,Bitter,Georgia,serif;

    I found that by inspecting element on the page title, where Tekton Pro was already applied, and then scrolling down till I saw the font-family. :)

  7. @eurello - highfive! #ioweyouabeer

  8. Ha! Awesome. :) Glad it worked for you.

Topic Closed

This topic has been closed to new replies.

About this Topic