i´m having some difficulty applying style override to all widgets in my wordpress theme. I created the theme from scratch, so I have absolutely NO IDEA how they got these bullets got there.
I want to remove the bullets from items in the lists. The html is:
<li id="categories-3" class="widget widget_categories"><h2 class="widgettitle">Categories</h2>
<ul>
<li class="cat-item cat-item-4">Big Notch Updates (20)
</li>
<li class="cat-item cat-item-5">Music News (50)
</li>
<li class="cat-item cat-item-6">Ramblings (43)
</li>
<li class="cat-item cat-item-7">Site News (14)
</li>
<li class="cat-item cat-item-8">Stuff I Like (25)
</li>
</ul>
</li>
</div>
This is the code I came up with so far that doesn't seem to be working:
li#categoryposts-3 li.cat-item {list-style: none;}
I have no idea what to do at this point.
It has to be
li#categories-3 {background-image: none; list-style: none;}
li#categories-3 li.cat-item {background-image: none; list-style: none;}
There is a wrong id
You need two styles
li.widget ul,
li.widget li { list-style: none; }
#categoryposts-3 ul {
background-image: none; list-style: none;
}
Use the !important keyword in your css, like this:
li{
list-style:none !important;
}
The code below removes the bullets from a list.
<li style="list-style: none;" class="cat-item cat-item-4">Big Notch Updates (20)
</li>
<li style="list-style: none;" class="cat-item cat-item-5">Music News (50)
</li>
<li style="list-style: none;" class="cat-item cat-item-6">Ramblings (43)
</li>
<li style="list-style: none;" class="cat-item cat-item-7">Site News (14)
</li>
<li style="list-style: none;" class="cat-item cat-item-8">Stuff I Like (25)
</li>
Related
I want to hide this bit: <li class="categories">Kατηγορίες<ul> as seen in the code below (also see here https://poiimata.com/poets/):
<li class="categories">Kατηγορίες<ul>
<li class="cat-item cat-item-123">
<a href="https://poiimata.com/category/robert-frost/" >Robert Frost</a>
</li>
<li class="cat-item cat-item-124">
<a href="https://poiimata.com/categoryshlain-goldberg/" >Shlain</a>
</li>
I tried using
.categories {
display:none;
}
but the result was to hide all items below that one (the whole list).
That happen because you've an invalid HTML code in :
<li class="categories">Kατηγορίες<ul>
_________________________________^^^^
The browser will evaluate your code to the below format, that why all your li's become hidden :
<ul>
<li class="categories">Kατηγορίες
<ul>
<li class="cat-item cat-item-123">Robert Frost
</li>
<li class="cat-item cat-item-124">Shlain
</li>
</ul>
</li>
</ul>
Instead it should be :
<ul>
<li class="categories">Kατηγορίες</li>
<li class="cat-item cat-item-123">Robert Frost
</li>
<li class="cat-item cat-item-124">Shlain
</li>
</ul>
Snippet:
.categories {
display: none;
}
<ul>
<li class="categories">Kατηγορίες</li>
<li class="cat-item cat-item-123">Robert Frost
</li>
<li class="cat-item cat-item-124">Shlain
</li>
</ul>
It appears you just have an error in your HTML. You use an incorrect closing tag and therefore hide the entire thing.
<li class="categories">Kατηγορίες<ul> <!--- closed <li> with <ul> --->
<li class="cat-item cat-item-123">
<a href="https://poiimata.com/category/robert-frost/" >Robert Frost</a>
</li>
<li class="cat-item cat-item-124">
<a href="https://poiimata.com/categoryshlain-goldberg/" >Shlain</a>
</li>
Try instead:
<ul class="categories">
<li >Kατηγορίες<li>
<li class="cat-item cat-item-123">
<a href="https://poiimata.com/category/robert-frost/" >Robert Frost</a>
</li>
<li class="cat-item cat-item-124">
<a href="https://poiimata.com/categoryshlain-goldberg/" >Shlain</a>
</li>
</ul>
and change CSS to
.categories:first-child {
display:none;
}
That's just one way of accomplishing it. There are quite a few different angles you can take.
Since li contains tags that you do not need to hide, you need to masked the hidden text. for example like this:
.categories {
font-size: .1%;
}
.categories ul {
font-size: 100000%;
}
if only child elements is not a bug...
I'd like to target the first occurence of the <a> element in this list, first-child doesn't seem to work because it selects all the children <a> s. Any ideas?
<li class="cat-item cat-item-1 current-cat">
<a title="View all posts filed under Basket" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=1">Basket</a>
<ul class="children">
<li class="cat-item cat-item-19">
<a title="View all posts filed under Article List" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=19">Article List</a>
<ul class="children">
<li class="cat-item cat-item-20">
<a title="View all posts filed under Mobile" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=20">Mobile</a>
<ul class="children">
<li class="cat-item cat-item-21">
<a title="View all posts filed under Current" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=21">Current</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-22">
<a title="View all posts filed under Desktop" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=22">Desktop</a>
<ul class="children">
<li class="cat-item cat-item-23">
<a title="View all posts filed under Current" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=23">Current</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
You would need to target the first li and then it's anchor link
ul li:first-child a {
/* your styles here */
}
It difficult to be more specific but if you were referring to the children ul you can make it
ul.children > li:first-child a {
/*your styles here */
}
If you mean this
<li class="cat-item cat-item-1 current-cat">
<a title="View all posts filed under Basket" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=1">Basket</a>
The css would be
li.cat-item.cat-item-1.current-cat > a {
/*styles */
}
If by "this list" you mean the root, you could do:
.current-cat > a
Not sure if you're using jQuery on your site, but if so, you can work with jquery and do this.
$("a").first().attr("title");
Etc.
As I said, it depends if you're using jQuery and it can be used for what you'd like to do, but since you didn't specify what you plan to do with the result, it's hard to assume otherwise.
I'm trying to create a horizontal list, something like this
<nav class="tabs">
<ul>
<li class="active">
<a>Bar Foo</a>
</li>
<li>
<a>Foo Bar</a>
</li>
</ul>
</nav>
The problem is that with only 1 li element it works (like this ) but with 2 the first li item is not positioned correctly (like this )
Can someone explain to me whats happening?
UPDATE: remove type with class 'active' on anchor!
No need to use absolute positioning. Just do as following:
li.active a {
color: #abc522;
padding: 20px 40px 13px;
width: 146px;
background-color: white;
}
fiddle
Remove the class active from the first list item tag.
<nav class="tabs">
<ul>
<li> <-- Here
<a class="active">Bar Foo</a>
</li>
<li>
<a class="active">Foo Bar</a>
</li>
</ul>
</nav>
OR
<nav class="tabs">
<ul>
<li class="active">
<a>Bar Foo</a>
</li>
<li class="active">
<a>Foo Bar</a>
</li>
</ul>
</nav>
I have 2 or more <UL> sets inside, and wants to only make first UL <a> set to bold.
in fact, this is a menu with multiple sub menus, and I only want to make parent links bold.
I know it can be done by adding some more ID's or classes, but this is not an option, and just want to try css method only.
<ul class="menu">
<li class="collapsed first">
<a title="Mechanical products" href="1">Mechanical Products</a>
</li>
<li class="collapsed">
<a title="Chemicals" href="2">Chemicals</a>
</li>
<li class="expanded active-trail">
<a title="Instrumentation" href="3">Instrumentation</a>
<ul class="menu">
<li class="leaf first">
<a title="Control valves FISHER" href="4">Control Valves</a>
</li>
<li class="expanded active-trail">
<a class="active" title="Corrosion Monitoring System" href="5">Corrosion Monitoring</a>
<ul class="menu">
<li class="leaf first">
<a title="Access Fitting Assemblies" href="6">Fitting Assemblies</a>
</li>
<li class="leaf last">
<a title="Coupon Holders, Coupons & Probes" href="7">Holders,Coupons</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="collapsed">
<a title="Mechanical products2" href="8">Mechanical Products2</a>
</li>
</ul>
as of this example, only "Mechanical Products", "Chemicals", "Instrumentation" and "Mechanical Products2" should get bold.
Use the first child selector: >
.menu > li {
font-weight: bold;
}
Not that if you need to support IE6, you'll have to do it manually, as IE6 doesn't support the > selector:
.menu li a {
font-weight: bold;
}
.menu li ul li a {
font-weight: normal;
}
It will probably do it...
ul.menu li a
{
font-weight:bold;
}
ul.menu li ul li a
{
font-weight:normal;
}
You'll have to use the child selector and make the top-level <ul> unique by giving it some class:
ul.top-level > li > a {
font-weight: bold;
}
Demo: http://jsfiddle.net/kJJw9/
ul.menu li.collapsed a{font-weight:bold;}
I have a list with multiple sections. I try to make it look like a kind of tree. It started quite well but I can't fix the last bits.
The code can be found at:
http://jsfiddle.net/Kwfpm/
Here is how it should work
The first "Datorer", "Mjukvara" and
"Microsoft" should be connected to
the tree with a horisontal line.
"Mjukvara" at the bottom left should
be connected to "Kategorier".
There are some repeated problems but these should be solved if the two above is solved.
Here is a link what it should look like (without the collapsing things):
Open and close to see the tree:
http://jquery.bassistance.de/treeview/demo/prerendered.html
Info
I don't know how many levels there are.
The HTML can't be changed because its generated by Wordpress
Use backgrounds or borders to show what you got.
If JSfiddle don't work you can use this:
CSS
* {
margin: 0;
padding: 0;
}
.sidebar > ul > li {
background: none;
}
li {
padding-left: 20px;
list-style: none;
background: url('http://www.jenst.se/images/normal.png') repeat-y 10px 0;
color: #333;
font-family: Arial;
font-size: 13px;
line-height: 22px;
}
li a {
color: #555;
}
li:last-child {
background: url('http://www.jenst.se/images/lastchild.png') no-repeat 10px 0px;
}
HTML
<div class="sidebar default">
<ul>
<li id="categories-10" class="widget widget_categories">
<h4 class="title">Kategorier</h4>
<ul>
<li class="cat-item cat-item-7">Datorer
</li>
<li class="cat-item cat-item-3">Mjukvara
<ul class='children'>
<li class="cat-item cat-item-4">Hårdvara
<ul class='children'>
<li class="cat-item cat-item-6">Microsoft
</li>
<li class="cat-item cat-item-9">Office-paket
</li>
</ul>
</li>
</ul>
</li>
<li class="cat-item cat-item-3">Mjukvara
<ul class='children'>
<li class="cat-item cat-item-4">Hårdvara
<ul class='children'>
<li class="cat-item cat-item-6">Microsoft
</li>
<li class="cat-item cat-item-9">Office-paket
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="categories-10" class="widget widget_categories">
<ul>
<li class="cat-item cat-item-7">Datorer
</li>
<li class="cat-item cat-item-3">Mjukvara
<ul class='children'>
<li class="cat-item cat-item-4">Hårdvara
<ul class='children'>
<li class="cat-item cat-item-6">Microsoft
</li>
<li class="cat-item cat-item-9">Office-paket
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Have a look at this javascript treeview: http://krijnhoetmer.nl/stuff/javascript/list-treeview-menu/
It does have a same structure as you prefer with li's and ul's. Maybe you could take a look at it with firebug.
I figured it out. Here is a working code:
http://jsfiddle.net/Kwfpm/3/
The red borders can be changed to a background image horizontal lines.