Different Fonts/Colors for Different Pages

  • Author
    Posts
  • #1978501

    jbpaul17
    Member

    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 http://oursaviorwestchester.com/ 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 oursaviorwestchester.com.

    #1978615

    5mutek
    Member

    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.

    #1978847

    jbpaul17
    Member

    @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!

    #1978851

    eurello
    Staff

    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:

    http://dailypost.wordpress.com/2013/06/21/css-intro/
    https://dailypost.wordpress.com/2013/07/25/css-selectors/
    http://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

    Let me know if you have further questions!

    #1978857

    jbpaul17
    Member

    @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?

    #1978860

    eurello
    Staff

    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. :)

    #1978864

    jbpaul17
    Member

    @eurello – highfive! #ioweyouabeer

    #1978872

    eurello
    Staff

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

The topic ‘Different Fonts/Colors for Different Pages’ is closed to new replies.