I have set up tabbed content (using Ultimatum framework and shortcode) with text, images, and embedded YouTube videos. All works well, but I would like to know how to eliminate the bullet list style that is next to the tabbed menu. I think the class that calls this style is:
nav nav-tabs ult_tablinks
There is an issue of the main bullet styles that are in my custom css file which is:
Code:
/* Bullets */
.archive-page ul li,.entry-content ul li{list-style:squareoutsidenone;color:#421C52;}
/* Bullets End */
I like the way this setting styles the bullets throughout the site. Although, it is a problem in some areas like the styling in shortcode such as the tabs above because it is placing the bullets inside the tabbed menu.
The nav nav-tabs ult tablinks is inheriting the code below:
Code:
.archive-page ul li, .entry-content ul li {
list-style: square outside none;}
li {line-height: 20px;}
Is there anyway that I can still use the general bullet styling and just eliminate them from this shortcode area?
Here is the link to beta site where you can see what I am talking about. I would like the tabs to not reference a list-style.
http://www.drphyllisbooks.com/drbooks2014/books-neural-therapy/patient/
I am able to remove the bullets by deleting the /* Bullets */ css above but then I don't have the nice bullet style throughout the site.
Any ideas on how I could fix this or better yet a solution would be greatly appreciated.
I thank you all for your time and consideration.
Add this to your custom CSS file:
.entry-content ul.nav-tabs li { list-style:none; }
Appending "ul" with the .nav-tabs class specifies only the li's in the tabbed menu.
Related
So only within my sidebar widgets does this bullet above the widgets occur. I am not sure what custom css code to use to get rid of this. That is why I uploaded the picture of the inspect element to see if anyone can help me identify where the problem is coming from. Thank you so much in advance.
li {
list-style-type: none;
}
Try this
#sidebar-footer-secondary>div>li{
list-style: none;
}
or
.sidebar-footer-secondary>div>li{
list-style: none;
}
You must add class to selector, if you only want to change widget lists.
li.widget { list-style-type: none; }
You will need to remove the bullets with list-style CSS property. Ideally you'll want to use a CSS class to do this and since you're using WordPress try and use a class provided by the widget to hook onto. We hook onto a CSS class so we don't affect all ul or li on the page.
Not sure what yours would be but it might be something like this pseudo code:
<ul class="widget-alpha">
<li></li>
</ul>
.widget-alpha {
list-style: none;
}
FWIW, it's a bit odd that I don't see a ul for the li in the screenshot. The only permitted parents for li are ul, ol and menu.
If the li is the container element for the widget then the CSS selector would still work as we're not targeting a specific element but a CSS class of the widget.
I'm using the Protostar template on a Joomla 3.0 site and have a question about modifying styles in its template.css file, to have the collapsible vertical menu use the same class color styles/behaviors for the text of the links as what I have for the full-width horizontal menu. I'm not familiar with all the dozens of classes (e.g., all the .nav and .navbar classes) that are specified in the default template.css file. By using customized classes in the user.css file I have the background colors figured out, and have one of the link text colors to be the same, but I'm stuck on the remaining styles I need to change. I've been using Firebug but still haven't found a method to do this.
Here's an album of six screenshots showing three stages of both menus. Again, I need to have the vertical menu use the same text styles/behaviors as the horizontal menus.
I'd like to fix this by using the custom user.css file to modify only the required styles for the appropriate classes, as I don't want to make direct changes to the default template.css file if at all possible.
(A related question, although not as critical, is how to decrease the margins between the vertical menu items.)
So, any help will be greatly appreciated. This is the final item I need to complete for this site so I'm anxious to get this figured out. Thanks in advance!
Joomla 3.x Protostar use Bootstrap 2.3.2v and have different css styles for Desktop and Tablet/Mobile view.
You need to use bootstrap media query to style it. For example:
#media (max-width: 979px) {
/* menu item color */
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a {
color: #0000ff;
}
/* space between menu element */
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a {
padding: 3px 15px;
margin-bottom: 0;
}
}
you can find more about bootstrap media query media query at documentation
I have an unordered list within a WordPress blog post that will not show the bullets. I've tried multiple things to get it to show, but it will not.
Here's the link (text above the desktop image):
http://www.sherigarvin.com/work-project-3/
Here's what I've tried:
Removed the ul/ol rule in the css reset
Added specific ul rule with list-style:disc; & list-style-type:disc; Added list-style:disc; to css reset
Added general rule to style.css with list-style:disc; & list-style-type:disc;
Inline style of list-style-type:disc;
Thanks for any help...
I'd suggest adding a margin-left to the li elements, or, possibly, declaring: list-style-position: inside; (which will place the disc inside of the width of the li element, to demonstrate whether the rule's applying or not).
ul li {
list-style-type: disc;
margin-left: 1.5em; /* which should give space for the disc to show */
list-style-position: inside; /* will put the disc inside of the li
element, for debugging purposes */
}
References:
list-style-type.
list-style-position.
Another thing to look at is to see if you had display:block on the css element somewhere. By removing display:block it will make the list style appear again.
Here is an inline style that I used on UL that seemed to work better:
<ul style="list-style-type: disc;
margin-left: 2.5em;
list-style-position: outside;">
I'm having a bit of trouble with inheritance. if you expand the first menu item and mouse over you'll see a grey fly-out with a link in it. the link inside inherits the original styles and I'm not sure how to stop it from taking on those styles. i just want them to be the default link style while inside the fly-out. I've tried selectors but i'm not having any luck. ideas?
I put my code up here: http://pastie.org/3388191
Just use a CSS's child combinator, ul > li to define the styles to your main list items, that way those styles won't be inherited past your second level subnav, like so:
#nav > ul > ul {
background-color: #999999;
height: 299px;
margin: 0;
padding: 0;
width: 652px;
}
Demo: http://jsfiddle.net/kQuGd/1/show/
EDIT
Read your question too fast and didn't see what your real problem was, sorry about that. There's two ways (that I know of) to fix your link problem.
One way is to add the third level menu links to your default style
a, #nav ul ul a {
// YOUR STYLE PROPERTIES
}
a:hover, #nav ul ul a:hover {
// YOUR STYLE PROPERTIES
}
The second way is to assign a class to either the links in the third level menu, or the links in the first and second level menus.
If you assign a class to the third level links, just apply the same styling to that class as your default links.
If you assign classes to the first and second level links instead, and thus remove all link styles like
#nav ul a
your third level links will automatically get the default link style.
The problem is the use of #nav a which applys a styling to all links within #nav
I am building a menu using XHTML,CSS, and jQuery and I ran into a problem with my CSS.
Here is my test page, and here is my css.
What I am having problems with is that my .subMenu class is inheriting the properties of my #menu, the background colors and sizes are the same. I am looking for a solution that leaves .subMenu as a class so I can re-use it. I got it to work by changing .subMenu to an ID. The weird thing is that I edit some of the properties in my jQuery code using the .subMenu class and it changes those.
So I was wondering if someone could let me know how to fix it and if it was a hierarchy issue if they might explain it.
Thanks,
Levi
I think the problem is that the #menu > li a will apply that style to all links inside of the li tags, so all of the li tags inside of the submenu will also have this style. It looks to me that the only difference is in the background and foreground colors on hover, so you could fix it by changing #menu > li a and #menu > li a:hover to be #menu > li > a and #menu > li > a:hover. This way, the styles for the top level menu will only be applied to links which are directly after an li tag which are directly after the #menu item. The submenu styles can stay the same.