Navigation
Archive / Post vs. Page CSS
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • May 28, 2016 at 10:00 pm #1014870
    Arthur W
    Participant

    Hi

    I’m trying to find whether there’s specific CSS for posts versus pages.

    Most of my site is made up of pages. I currently have one “page” that will have blog entries. (Eventually I’ll have two or three – for latest news, for an archive page and for a quick tip page).

    If I alter CSS for the blog entries I don’t want to change the existing static pages. As an example, most of my site is at http://newsite.marketing-intelligence.co.uk. The blog will be at http://newsite.marketing-intelligence.co.uk/blog

    Most pages won’t have a sidebar – but the blog will. Similarly headings on the pages are #ff6600 Orange colour. On the blog they aren’t.

    Are these CSS elements for the posts or for all the site:

    .x-sidebar
    .x-main
    .entry-wrap
    .entry-title
    .entry-header

    It seems as though I can adjust the CSS on these without impacting the rest of the site (i.e. they relate to posts, not pages). However I’m uncertain and don’t want to change CSS that would be global for the site. I only want to adjust the post CSS – so that I can specify post heading colours, etc.

    (Also I can’t seem to get the sidebar to show on individual posts – only on the main page).

    Thanks for any help on this.

    May 29, 2016 at 12:31 am #1014942
    Rue Nel
    Moderator

    Hello There,

    Thanks for writing in! If you want to apply a custom css in a specific page or post, you can use the body class selectors. 

    
.x-sidebar
.x-main
.entry-wrap
.entry-title
.entry-header

    The selector above will apply to the site wide and in all pages in your site. If you want to alter and target a specific page or group of page, you can use this:

    For single post:

    
.single-post .x-sidebar
.single-post .x-main
.single-post .entry-wrap
.single-post .entry-title
.single-post .entry-header

    For pages:

    
.page .x-sidebar
.page .x-main
.page .entry-wrap
.page .entry-title
.page .entry-header

    For further information about these classes, you can check out the codex: https://codex.wordpress.org/Function_Reference/body_class

    May 29, 2016 at 3:49 am #1015009
    Arthur W
    Participant

    Thank you – i’ll give that a try. It’s safer than what I was doing which was generalising them for all pages!

    May 29, 2016 at 4:08 am #1015022
    Rue Nel
    Moderator

    You’re always welcome!
    If there’s anything else, we can help you with, please let us know.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1014870 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>