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;
}
Related
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;
}
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; }
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; }
Can someone maybe help me with a few lines of css code?
I would like to my search section on my page:
http://www.virtual-forms.com/docs/
To look something like this:
https://docs.wedevs.com/
I'm new to CSS and Wordpress
Thanks, Davor 🤗
EDIT:
My latest try was with this:
/*Header search weDocs*/
.wedocs input[type="submit"],
.wedocs input[type="search"]
{
background-color: #fff !important;
color: #000;
width: 50%;
}
But no luck.
you should get on with applying correct CSS by inspecting the elements in your web browser (right-click element on site > Inspect) to find their correct classes. inspecting linked site virtual-forms.com shows that the whole search form has a parent form element with class="search-form wedocs-search-form", with child divs with classes "wedocs-search-input" for input, "wedocs-search-in" for dropdown and "search-submit" for submit-button.
I would put display: flex; on the parent element:
.wedocs-search-form {
display: flex;
}
use classes to style each individual element there
.wedocs-search-input { }
.wedocs-search-in { }
.search-submit { }
Using those classes should get you closer to getting the correct style to those elements. read up on the flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would use flex-grow on input to make it bigger for example. Hope this gets you along.
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; }