Multiple Body Page ID’s

[godrob]

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.

[Senff]

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?

[Paulie_D]

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.

[godrob]

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.

[Paulie_D]

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?

[Senff]

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;}

[Paulie_D]

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.

[godrob]

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.

[Senff]

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.

[Kitty Giraudel]

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.

[twincy]

…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.

[Paulie_D]

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?

[Morderkind]

Hi Guys, My question goes along the lines of this thread. I wanted to add a logo aligned to the top right of a WordPress page, so a friend wrote this code for me:

style.css:

body.page.page-id-9429 #menu-special-event > li {
display: none !important;
}

.floated-topbar-img {
width: 130px;
max-width: 100%;
height: auto;
}

---

custom.js:

jQuery(document).ready(function () {
var b = jQuery(“body”),
img = null;

if (b.hasClass("page page-id-9429")) {
    // alert("test");

    var image = $("<img src='http://www.tintri.org/SpecialEvents/wp-content/uploads/2019/07/CDWLogo.png' alt='CWD Logo' class='floated-topbar-img'>");

    $("#menu-special-event").append(image);
}

});

---

The code works perfectly, but then I wanted to add a different logo to a different page and I wrote the following code which did not work and was hoping that someone here could point me in the right direction:

---

style.css:

body.page.page-id-9429 #menu-special-event > li,
body.page.page-id-9997 #menu-special-event > li {
display: none !important;
}

.floated-topbar-img {
width: 130px;
max-width: 100%;
height: auto;
}

---

custom.js:

jQuery(document).ready(function () {
var b = jQuery(“body”),
img = null;

if (b.hasClass("page page-id-9429")) {
    // alert("test");

    var image = $("<img src='http://www.tintri.org/SpecialEvents/wp-content/uploads/2019/07/CDWLogo.png' alt='CWD Logo' class='floated-topbar-img'>");

    $("#menu-special-event").append(image);
}
if (b.hasClass("page page-id-9997")) {
    // alert("test");

    var image = $("<img src='http://www.tintri.org/SpecialEvents/wp-content/uploads/2019/08/ft-logo.png' alt='Lansdowne Logo' class='floated-topbar-img'>");

    $("#menu-special-event").append(image);
}

});

Thank you!

[uxfed]

Paulie_D is correct. It’s far better to create a separate page template without the h1 and assign that template to whichever pages need the altered template. A CSS solution here is too fragile.

[Author]

Posts