I am having an issue when trying to remove a list-style from a shortcode generated tabbed system within WordPress. I was successful using the provided solution:
.entry-content ul.nav-tabs li { list-style:none; }
On the majority of pages the code above works.
Please reference the link below to see how Zoolian's solution worked on this page (you can see listed items below but no list-style on the tabbed menus above):
http://www.drphyllisbooks.com/drbooks2014/books-neural-therapy/what-is-bnt/
Although, there is one page where this is not working. Please see the following link:
http://www.drphyllisbooks.com/drbooks2014/books-family-health-center/
I would like to remove the bulleted list style from the menu tabbed option and still conserve a list style within the tabbed content area.
Any help or ideas would be greatly appreciated. I received help for this from Zoolian but unfortunately it is not working in this area of the site.
Thank you and I thank you for your time and consideration.
It might help you to read something about the specificity of CSS selectors. The specificity decides which CSS attributes get applied to an element. The attributes with the most specific selectors get applied.
In your case .entry-content ul.nav-tabs liis more specific than ul.nav-tabs li so that's probably the reason why the latter worked for you.
A (very) detailed post about specificity is e.g. this one: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/.
Related
I am a CSS noob and completely PHP ignorant. I am trying to remove the header image from all pages except the homepage in WordPress.
I found this question & answer, but it is beyond my understanding, since I don't know any PHP. Referring to this question and to this one, in the css customizer I tried to add:
:not(.home) header-image {display: none;}
However, it does not work.
Note that this can be applied to any single page, not only the homepage. For instance with .page-id-123 instead of .home –– this also works, of course, if .page-id-123 is the homepage, whereas 123 is just a random page id here.
Question:
How to use the not selector :not() to exclude all pages except one from CSS customization?
You should use the :not selector like this to hide an element on all pages except homepage:
body:not(.home) .header-image {
display: none;
}
I am working on: https://www.thewellnessproject.net/
I want to keep the drop-down indicators in the sub-menu (as shown under "Recipes"), however I would like to remove them from the top level menu (Recipes, Intuitive Eating, etc.).
I've tried something along the lines of the below, but with no success:
.menu-item-6194 a:after {
display: none;
}
Happy to provide any additional info.
I just inspected the source code of your page. Based on that, use below snippets.
for(count=1; count<=5; count++)
{
var main = getElementsByClassName("elementor-item")[i].getElementsByTagName("span")[i];
main.classList.add("remove_dropdown_arrow");
}
Paste above code in cusotm JS section of WordPress.
.remove_dropdown_arrow{
display:none;
}
Paste above code in custom CSS section of WordPress.
The gist is, I am getting all top level elements of main header menu. Then looping and adding a custom CSS class in element where we have ">" in items.
I hope this will work in one go, but you might need some tweak on your side.
Hope this will help you.
Ive got a link showing up in my wordpress menu that is not present in back end (the costumizer). The link/element only shows up in front end/the live page. I've been in touch with the theme support but they only said it was not from the theme. The code does not either give me an explenation to where it comes from. The code for the element is the following:
Register
LOL I CAN't even write the code without it showing up as only "Register" above.
I want to remove it. I have searched and tried different solutions on this forum but cannot find a way to remove the element.
So far I've tried to add the following code to the "costum css" in the costumizer with no result:
a[href='register']{ display: none }
I am not an expereinced code man. So please excuse my lack of explenation.
See code from inspect in picture below:
Picture from inspect. The element I want to remove is the >Register just where the pink ends
This is a picture of the menu. As you can see the "Register" link I want removed does not even get the same styling as the other elements in the menu..
Any one know how to remove this element? I've been struggeling for so long trying to find a solution.
Thanks!
It is likely added to the menu object by one of the plugins you have installed on the site.
Try turning off your plugins one-by-one and checking to see if it goes away.
you can try
.left-menu li:last-child { display: none; }
or
.left-menu li:not(.menu-item) { display: none; }
I've searched around for a good while now trying to find a solution for this issue, but haven't seen anyone else experiencing it so far.
I have a WooCommerce store I'm working on developing, and recently noticed that the select field for the billing state is displaying list-style type bullets in front of the options when expanded.
I've messed around in the CSS including removing any background image and making sure there was no list-style attribute applied to the options, but I'm stuck on as to what's happening here.
The issue can be viewed live at this link: http://grahams.staging.wpengine.com/donate/
Does anyone have any ideas on what could be causing this? My guess is it's somewhere in the woocommerce files but I'm unsure as to where I would start looking.
List of Woo Extensions:
One Page Checkout
Name Your Price
WooCommerce Subscriptions
WooCommerce Variation
Swatches and Photos
Other than the above, no customizations have been made. Theme being used is Hybrid.
EDIT: adding an image for those who can't load it/are looking after it's been resolved.
Inspecting your CSS, there is a background image being applied to all ul li elements. See _elements.scss, line 96.
ul li { background: url(images/build/bullet.png) no-repeat 0 6px; }
Adding the following style fixes the issue.
.select2-results__option { background-image: none; }
Is there a simple way to create a customer menu in WordPress that does not output a list? Basically I want a menu with pipes between the links. Every solution I've found says to style them with a right border or background image, but I'm not crazy about this solution and what if I wanted something like a "/" or "»" between each link? I think live type would look better too. I already know I can remove the container div and ul tags using "items_wrap" and "container". Any ideas on how to ditch the li's too and add separators? A filter or hook?
I'm looking to do this with WordPress functionality. I know I can resort to CSS and jQuery if needed and in fact am doing that, but I'm still curious as to how to override the menu system.
Just style the list propperly
li { list-style-type:none; }
li:before { content:"/ "; }
http://jsfiddle.net/sVvs8/