Hide element on ONLY home page of WordPress using CSS - css

I am trying to hide the element .gdlr-page-title-wrapper on the home page of https://colerainefc.com - a WordPress site.
I have tried: .home #gdlr-page-title-wrapper { display: none; }
Any idea what I am doing wrong please?


Its a class, not ID, so dont use # but .
.home .gdlr-page-title-wrapper { display: none; }

Related

Optimize CSS for multiple landing pages

With CSS in additional CSS in WordPress, I'm trying to hide a form from three of the landing pages. Adding CSS as
body.page-id-4077 .bg-tan-darker.color-white-base {
display: none;
}
works while doing something like below doesn't.
body.page-id-4077 .bg-tan-darker.color-white-base, body.page-id-4082 .bg-tan-darker.color-white-base, body.page-id-4086 .bg-tan-darker.color-white-base, {
display: none;
}
Please advise me as to what the correct way is that I need to follow to include CSS for multiple pages as above.

Remove the last comma from your code:
body.page-id-4077 .bg-tan-darker.color-white-base,
body.page-id-4082 .bg-tan-darker.color-white-base,
body.page-id-4086 .bg-tan-darker.color-white-base {
display: none;
}

I can't delete or hide Displaying all results in woocomerce

Adding to CSS did nothing, adding snippets from php below also.
CSS:
.woocommerce-result-count {
display: none;
}```
Snippets:
```removeaction ('woocommercebeforeshoploop', 'woocommerceresultcount', 20);```

Override woocommerce default styling like so:
.archive .woocommerce-result-count {
display: none !important;
}

Changing logo and main menu colour on specific page

I want to change the logo and main menu in the header on this page only:
https://www.maisondefemmes.com/galentines-day/​​
I've tried updating the css and only managed to edit the search and cart colours.
I've tried using both content and background-image, as well as using logoimg bg--dark rather than #logo but to no avail.
.page-id-3055 #logo {
content: url(https://www.maisondefemmes.com/wp-content/uploads/2019/01/mdf-retina-logo-red.png) !important;
}
I want the logo and main menu to be #b50c3f but they don't budge. I've managed to change Search and Cart.

The Logo is a html img tag and you can't change it that way. The content attribute only works for pseudo elements. One solution would be the following:
.page-id-3055 .logolink > img {
display: none;
}
.page-id-3055 .logolink:before {
display: inline-bloc;
content: url(https://www.maisondefemmes.com/wp-content/uploads/2019/01/mdf-retina-logo-red.png) !important;
width: 100%;
height: 50px;
}

You can detect url with jquery and then change logo and menu by jquery css
if (window.location.href.indexOf("galentines-day") > -1) {
// do something
}

Disabling entire header for WooCommerce's Storefront theme for a single product's page with CSS?

I've tried doing things like .page-id-1122 #different-elements-i-saw-in-chrome-inspector-here { display: none; } without any luck.
Can anyone tell me how I'd accomplish this? Thank you in advance.

Just get your header id and go to your style css, add this code
body.product-template-default.single.single-product.woocommerce.woocommerce-page.customize-support .header-area {
display: none;
}
Here .header-area will be your header class/id.

Try this:
.page-id-1122 #different-elements-i-saw-in-chrome-inspector-here { display: none !important; visibility: hidden !important; }

Displaying Menu Items on Different Pages

I have 2 sets of menu items in my navigation bar.
Set 1 is labelled ".homemenuitem"
Set 2 is labelled ".othermenuitem"
I want to display homemenuitems on the home page and othermenuitems on every other page.
I was hoping to do this with CSS.
I started with the following
.home .othermenuitem {
display: none;
}
Which shows the correct menu on the home page, but I can't figure out how to hide the homemenuitems on every other page without using the unique page id (which will be a pain as the site grows).
Any help would be greatly appreciated.
Thanks

This is where the 'Cascading' part of 'Cascading Style Sheets' is your friend. More specific rules always override less specific ones, so if you do this:
.homemenuitems {
display: none;
}
.home .homemenuitems {
display: block; /* or 'inline' or 'inline-block', as necessary */
}
then the latter rule will override the former where it matches (on the home page), and otherwise, the first rule will always take effect.

Can you take the other way, making:
.homemenuitem {
display: none;
}
In every single page of your web, and only showing it on the home page id?

Thanks Michael, tweaked it a bit further and this is what worked for me, if anybody is looking for a similar situation.
.homemenuitem {
display: none;
}
.home .othermenuitem {
display: none;
}
.home .homemenuitem {
display: inline-block;
}

i have tried it on so many occasion , you can use this code .homemenuitem { display: none; } .home .othermenuitem { display: none; } .home .homemenuitem { display: inline-block; }

Resources