I'm looking for a quick and easy way to hide an element on just two pages that is otherwise in the sidebar on all pages. I tried to do it with css but just can't seem to affect this one spot. This is one of the pages and the client wants the FDIC logo in the sidebar gone. I tried adding page ID and the sidebar css to display:none, but can't work out the right combo. Am I on the right track?
#page-id-63 .textwidget
{display:none;}
Thanks for your help!
"page-id-63" is a class, not an id on the page you linked, so you'd need:
.page-id-63 .textwidget {
display: none;
}
#text-9 > .textwidget {
display: none;
}
Try this out, either include it in a tweaks stylesheet specifically for those couple pages or throw it between style tags in the head.
Edit: I see you have the page number defined as a class in the body tag, you can put this in your main stylesheet adjusting the first class for your specific page (ex. .page-id-13 instead of 63) ..
.page-id-63 > #wrapper > #main > #secondary > #text-9 > .textwidget {
display: none;
}
You need
.page-id-63 .widget-area .text-widget {
display:none;
}
as you have many text widgets, and only want to hide the one in the sidebar.
Yes you are on the right track. What you need to do is apply the style and then have a look at the element using your browser dev tools. Then you will be able to see if
The style applied.
If any other styles are overriding it.
Update
Having checked your site now that is out of maintenance mode, try this
.page-id-63 .textwidget{
display: none;
}
Related
I just want to remove that blue underline from my donate button, its a Custom link i created after going to Appearance -> Menus -> Custom Link. The problem is this Custom link (donate button) is inheriting the same css from the navigation menu items, which i want to change. I have tried applying additional css,
.horizontal-navigation-bar nav ul li a:after {
margin-bottom: -1px;
}
but no success, any help shall be appreciated.
P.S. : - (I am working for the client, he has not given public access to the website, so sharing of url will be of no use), yes i am using UltraPress theme (https://justfreethemes.com/demo/?theme=UltraPress)
thanks
It seems it's just a matter of not targeting the right element, but since we can't see the code it's kind of hard to correct that.
Based on the template, this element, ul.navbar-nav>li.menu-item>a:after, controls the menu's underlines and the below css, when removed, removes the underline. So it should be something similar to this.
content: '';
display: block;
position: absolute;
bottom: -3px;
height: 2px;
Ideally, just inspect in your dev tools to find the exact element and style.
I'm using slideout.js for a mobile nav and upon each page load, the menu flashes on the screen for a moment and disappears until the hamburger button is toggled. This doesn't happen if I set the div containing the nav to display: none, but of course when I open the menu, none of the links are displayed.
My question is, using Sass, can I create a conditional that performs the following logic on two separate classes:
if .slideout-menu is not set to display: block
then
.mobile-nav should be set to display: none;
CSS can't react to changes that happen on a page without JS help besides from pseudo-classes, so unfortunately you can't target it that way. slideout.js adds classes to style different states of the slide-out menu so try targeting those.
Try something like this:
.slideout-menu .mobile-nav {
display: none;
}
.slideout-open .slideout-menu .mobile-nav {
display: block; // or whichever display property you need
}
Going off of the CSS states in index.css from https://slideout.js.org/
How do I fix the conflict I'm running into when trying to style the UL in this blog post with check mark images. There's a style set up in the skin that is taking precedence over my style I've applied to the ul. Not sure how to over-ride it. I've tried every variation I can think of, and I'm sure it's just a basic misunderstanding of how things cascade. Can you help?
The post is here: http://alexisexhibits.com/trade-show-preparation-checklist
The CSS I have for the style is:
.checklist {
list-style-image: url(http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg) !important;
}
I know, the !important declaration is hackery, but oftentimes I find it necessary in dealing with CMS stuff, since the CSS is so piled on top of each other. In this case, it doesn't seem to help, but I left it.
The offending rule that allows the checks to show up if I disable it in Chrome Dev inspector is:
.shortcodes ul li {
list-style: disc;
}
but I'm hesitant to change that as I don't want all ul li to change, just this specific one.
What's the right way to fix this? Any tips you can give on how to suss this sort of thing out for myself in the future?
list-style-image should be applied to the <li> not the <ul>
Like this:
.checklist li{
list-style-image: url('http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg') !important;
}
I am having trouble targeting a specific element. I'm trying to change the background color of a widget. My problem is this widget is used in a few spots on the site, so if I change something via CSS, it changes in all the widgets. I've been trying different selector combos via inspecting the element. I can't quite find the right one. The site is here http://titanpanama.com/newsite/ I'm trying to change the backgound-color of the list items under the heading Specials. I've tried
.specials-home .home-estate-widget .post-list li{ background-color:#000; }
I've tried adding a class to the container. Where am I going wrong?
To specifically target the list items in Specials widget, use this:
.specials-home ul.post-list li {
background: #000;
}
Try this:
div#my_poststypewidget-18 > .specials li {
background-color: gold;
}
It targets all children elements that are li in element with class .specials.
I'm making a widget for my user so they can include in their website.
In file style.css which hosted in my user website:
p {
font-size: 0;
}
In my widget - widget.css:
#mydiv {
font-size:12px;
}
However, when user include my CSS widget on their website. My CSS won't work and the one work is style.css. How to make my widget.css always work on top ?
I tried !important and it not work:
You can use !important next to the declaration; like this:
#mydiv {
font-size:12px !important;
}
Some people will claim that using !important is always bad practice but that's not the case. In fact, when making a plug-in or widget that's going to run in other people's sites, then that's when it's actually good practice. Take a look here: http://css-tricks.com/when-using-important-is-the-right-choice/
Edit: after seeing your image in the question, the problem is that it seems the ID ulcfrmcontainer refers to the container of the list and not the actual li elements within the containers. Try with this:
#ulcfrmcontainer li{
font-size:12px !important;
}
p is an existing html balise, and mydiv is an id, probably which select the parent div of your paragraph.
CSS apply rules following priority levels.
Here more informations:
W3C wiki about selector priority
Tips and tricks about it
Try to solve your problem with those informations, and use "!important" only if there is no other solutions.
(Good article to determine if use !important is the right solution :))
Hope it will help you to understand and resolve your problem :)
Wrap your widget in a div with an id that is unlikely to be used in the users site like 'widget-wrapper-div'. Or you could be more descriptive by including a one or two word description of the widget in the id such as 'partsearch-widget-wrapper'.
<div id="widget-wrapper-div">
<div>
Widget code...
</div>
</div>
Then in your CSS you would start each style rule with #widget-wrapper-div
#widget-wrapper-div div{
font-size: 12pt;
}
You have 2 options:
The right way:
1) Make sure your path to the element is exactly right. For example
.wrapper div p {}
2) Make sure your css file is include AFTER the other one
The other way (if the 1st doesn't work)
Use !important. Like this:
font-size:12px!important;
EDIT
Looking at your latest screenshots it looks like you're adding the font-size to a div with id #ulcfrmcontainer instead of to unordened list.
Might wanna try:
#ulcfrmcontainer ul {
font-size:12px;
}