treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Multiple Body Page ID's

  • Hi Guys, I'm pretty new to css and am wanting to combine multiple page id's within a single style, if that makes sense. The code below works great for me with one page, but how can I included multiple pages

    body.page-id-6752 div.page h1.pagetitle, h1.posttitle { display: none; }

    Thanks for any help Rob.

  • Not sure what you're asking. Your code will do two things:

    1) on the page that has an id "page-id-6752" in the body, it will make the H1 with class "pagetitle" disappear (provided it's in a div called "page")

    2) it will make ALL H1's with class "posttitle" disappear, on all pages through the site

    Please clarify what you mean with having it on multiple pages. Do you want ALL H1 tags to be set to display:none?

  • I believe that you can target with a wildcard like

       [class="body.page-id-* div.page h1.pagetitle"] {
         display:none;
        }
    

    but it's likely to cause you problems as you're targeting all pages with an class of page-id-xxxx which is likely to be all of them.

    You might want to look for a better solution.

  • Sorry for the confusion. The code above successfully removes the title of page 6752 from my site. What I need is to have the title of multiple other pages removed, too. So for example, remove the title from pages 6752, 6000, 200, 150

    Is this possible or do I have to repeat the code above, but change the page id each time?

    Thanks Rob.

  • Basically...yes, you would have to repeat the code.

    This seems like a drastic solution though.

    Is there some reason why you don't want the page title to show up?

  • To remove the titles from every single page in your site, you could either remove it from the template and loop, or just use this in your CSS:

      h1.pagetitle {display:none;}
    
  • I'm guessing that this a WP thing but it seems to me that what is required as a new page template that is exactly the same but does not have the 'h1' with a class of 'pagetitle' in it.

    Or is that too simple?*

    *I know very little about WP except what I've seen in Chris' videos.

  • Thanks Paulie and Senff. Yes, I am using Wordpress. I don't want the titles removed from every page, just the ones I want to specify. Pages like our sales page or payment pages where the the titles of the page aren't required and cause more of a distraction.

    I was hoping to be able to just hide them with CSS in one long style. But it looks like I'm going to have to do this individually per page.

    Rob.

  • You CAN do it with one long style, kinda like this:

      body.page-id-6752 h1, 
      body.page-id-6000 h1, 
      body.page-id-200 h1, 
      body.page-id-150 h1 {
          display:none;
      }
    

    But you'll obviously have to do that for every page indeed.

    Alternatively, you could create a new template, same as the one you're using now, only without the H1, and use this template on the pages where you don't want that title to appear.

  • If you want to automatize the process, put those values into a JS array, and run a loop on it. Not very clean, but it's better than writing 150 lines of CSS selectors for one single declaration.

  • ...and with that, the discusion ended ;) "oh no! i need to learn even more before i can continue with what i just learned how to work with!" - ah. the stress of STARTING OUT WITH web development today...

    good that we have people like chris.

  • As has been mentioned twice, a simple additional page template will do this and, if I'm not mistaken (I'm not versed in WP) can you not just tell an existing page to use a different template?