Need CSS for each page using custom fields

  • Resolved rbseid

    (@rbseid)


    13 years, 5 months ago

    I want each page to have a different color border-bottom under the title. At first I made an external stylesheet for each page but this seemed like overkill. I then embedded an inline style for page in the page editor but heard this is not very clean either.
    I found a solution at https://www.wprecipes.com/how-to-embed-css-in-your-posts-with-a-custom-field which said place this code in header.php between head tags:

    <?php if (is_single()) {
    $css = get_post_meta($post->ID, 'css', true);
    if (!empty($css)) { ?>
        <style type="text/css">
        <?php echo $css; ?>
        </style>
    <?php }
} ?>

    and I wrote a custom field called css with a value of:

    #content_container h2{
  border-bottom: solid 3px  #ff5523;
}

    but this didn’t work.

    Anyone know what I’m doing wrong and are custom fields the way to go?

Viewing 7 replies - 1 through 7 (of 7 total)

  • If your site has the body class applied, each page already has its own body class. Look at your body tag in the source of a page to see if there’s a different class on it for each page. (If it’s not there, I can explain how to add it.) You can then define the border colour you want for each page’s title in your style.css file. I don’t think you need custom fields if I’m understanding correctly what you’re trying to do – and you definitely don’t need to create extra stylesheets.

    Can you provide a link to the site in question? It’ll be much easier to help you more concretely. ??

    By the way, the article about custom fields was written before WordPress had a lot of new classes built in by default – that technique is no longer needed.

    Thread Starter rbseid

    (@rbseid)

    Zoonini, Thanks for your help! I checked and each page does have a unique body class. The class is very long: ‘”page page-id-463 page-template page-template-portfolio-php logged-in admin-bar”‘

    Do I use the entire class name in my style sheet?
    Here’s a link to the site:
    https://www.silkmountaindesign.com

    Also, on my local server I tried embedding CSS for each page in the page editor and this also worked. Is their any advantage of one method over the other regarding page load times etc?

    So what you need to do in your CSS is target the title style to each page. Example for the page above, the unique class for the page is:

    page-id-463

    So if you wanted to target the h2 tags on that page, you would add something like this to style.css:

    .page-id-463 h2 {
  border-bottom: solid 3px  #ff5523;
}

    Also, on my local server I tried embedding CSS for each page in the page editor and this also worked. Is their any advantage of one method over the other regarding page load times etc?

    It’s always best to separate form from content as a basic web design best practice. Plus, it’s much easier to edit a single file (style.css) to control the look and feel of your site, rather than having to fiddle with a zillion pages in the WP admin area.

    Let me know how it goes!

    p.s. I just noticed your tagline is also using the h2 class – watch out. You may need to modify your CSS accordingly to use your post class instead of the page class, i.e. something like:

    .post-146 h2 {
border-bottom: solid 3px #ff5523;
}
    Thread Starter rbseid

    (@rbseid)

    Thanks for your help!
    It worked out great.

    Awesome, glad to hear it! And thanks for your nice email – kind thank-yous like yours help to make up for all the people who never bother. ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Need CSS for each page using custom fields’ is closed to new replies.