I am confused with the terminology for the colored bar in front of links in sidebars so please point me to the right message on this topic.

I know how to change the color of the "bar" used on the sidebar. I would like to change it to something else. There are posts for image and icon but I am not sure if it is the same thing. Please tell me how to change the "bar" to something else. Thanks.

Update: Atahualpa 3.4+ see post #14

Add one of the following CSS blocks at Atahualpa Theme Options -> HTM/CSS Inserts -> CSS Inserts

(Note: Nothing in this post is PHP. I am just using the "PHP code" style in Vbulletin because the "HTML code" style has no colors)


1. To change it to regular HTML bullets:
(See attached screenshot #1)

PHP Code:

.widget ul li a:link,
.widget ul li a:visited,
.widget ul li a:active,
.widget ul li a:hover {
border-left: 0 !important;
padding-left: 0 !important;
}
.widget ul {
/* for other styles, try "disc" and "square" instead of "circle" */
list-style-type: circle !important; 
padding-left: 0;
margin-left: 0;
}
.widget ul li {
/* 1.35 or more required for Safari or bullets too wide on the left */
margin-left: 1.35em; 

/* overwrite existing display:block  Firefox */
display: list-item; 
} 


To style sub items differently for Example 1:

.widget ul ul {
...
}

2. To change it to image icons:
(See attached screenshot #2)

PHP Code:

.widget ul li a:link,
.widget ul li a:visited,
.widget ul li a:active,
.widget ul li a:hover {
border-left: 0 !important;
padding-left: 0 !important;
}

.widget ul {
list-style-type: none !important;
padding-left: 0;
margin-left: 0;
}

.widget ul li {
/* Background image instead of "list-style-type: image" because positioning is 
more precise and cross-browser safe. "0 3px" means 0px to the right, 3px to the bottom, 
starting in the top left corner of the <LI> element.  These numbers would be different with 
a different image and/or different text size. */
background: url(/wp-content/themes/atahualpa332/images/icons/add-gray.gif) no-repeat 0 3px; 

/* [width of image = 12px] + [desired distance between icon and link text = 6px] = 18px */
padding-left: 18px; 

/* indent the icons a bit from the left */ 
margin-left: 2px; 

/* Overwrite the still active "display:block" for Firefox. 
This is usually not required, but required in Atahualpa */
display: list-item; 
}

/* OPTIONAL */
.widget ul li ul li {
/* Adjust the indention of 2nd level items. Without this, the indention of 2nd level 
items will be: [padding-left of 1st level LI = 18px] + [margin-left of 1st level LI = 2px]. 
We reduce this rather huge left indention by setting a negative left margin. The image 
being used here is a  tad too big for a bullet, the 18px padding-left is causing the sub 
items to be indented relatively far. With a smaller bullet image, and smaller padding-left, 
we could probably drop this last style altogether, the 2nd level indention would look o.k. */
margin-left: -5px; 
} 


To style sub items differently for Example 2:

.widget ul li ul li {
...
}

3. Image icons with hover effect (2 images, see attachment):
(See attached screenshot #3)

This won't work well if a list item (<LI>) has more than one link (Recent Comments widget for instance), or if it doesn't start with the link (if the link isn't on the left side).

I've put the background image on the <A> here instead of the <LI> because IE6 doesn't know li:hover. It can be done by adding li:sfhover for IE6 (Atahualpa is already doing this for selected widgets) but not globally for all widgets because we'd need to tell the Javascript the ID of the parent <UL> for the <LI>'s where we want to add li:sfhover. Not all widgets have an ID on their <UL> though.

PHP Code:

.widget ul li a:link,
.widget ul li a:visited,
.widget ul li a:active {
border-left: 0 !important;
padding-left: 13px !important;
background: url(/wp-content/themes/atahualpa332/images/bullets/control_play.gif) no-repeat 0 3px; 
}

.widget ul li a:hover {
/* leave out the next line if you want to keep the default black font color on hover, 
just showing you where you would change the hover font color */
color: #4177bb !important;
border-left: 0 !important;
padding-left: 13px !important;
background: url(/wp-content/themes/atahualpa332/images/bullets/control_play_blue.gif) no-repeat 0 3px; 
}

.widget ul {
list-style-type: none !important;
padding-left: 0;
margin-left: 0;
}

.widget ul li {
padding-left: 0px; 
margin-left: 0px; 
display: list-item; 
}

/* indent sub items a bit more */
.widget ul li ul li {
margin-left: 10px; 
} 


To style sub items differently for Example 3.:

.widget ul li ul li a:link,
.widget ul li ul li a:visited,
.widget ul li ul li a:active {
...
}
.widget ul li ul li a:hover {
...
}

Thank you so much Flynn! This was the exact answer me and a few others were looking for

Hi,

to "3. Image icons with hover": is it possible that the link stays colored for the active link?

I mean if i hover over a link, color and icon is changed. But after it is clicked it changes to grey like all other links. Is it possible to have a state for the active site? So that user knows where he is at the moment?

Thanks in adavance.

Originally Posted by BeFuse

Hi,

to "3. Image icons with hover": is it possible that the link stays colored for the active link?

I mean if i hover over a link, color and icon is changed. But after it is clicked it changes to grey like all other links. Is it possible to have a state for the active site? So that user knows where he is at the moment?

Thanks in adavance.

To cover the page and the category widget, use this for the second section in 3) (the one starting with .widget ul li a:hover {)

.widget ul li a:hover,
.widget ul li.current-cat a:link,
.widget ul li.current-cat a.active,
.widget ul li.current-cat a:visited,
.widget ul li.current_page_item a:link,
.widget ul li.current_page_item a.active,
.widget ul li.current_page_item a:visited {
/* leave out the next line if you want to keep the default black font color on hover, 
just showing you where you would change the hover font color */
color: #4177bb !important;
border-left: 0 !important;
padding-left: 13px !important;
background: url(/wp-content/themes/atahualpa332/images/bullets/control_play_blue.gif) no-repeat 0 3px; 
}

To apply this to other widgets with multi level list items, those widgets would have to output a "current" class like the pages and category widgets do. Then you'd add that currecnt class in the same way as above

Perfect, this works like a charm. Big thanks for the fast reply and the good support.

This theme ROCKS ! Thanks for that

Hello All,

I'm searching in the style sheet (Appearance > Editor) for the place that controls the color for the block. Not seeing it. Any help? TIA!!

Anne

It's not in style.css but header.php, and not hard coded but saved in the database. You should set this through Theme Options -> Widgets

Thanks!!!!!!!

Flynn - Example 2 works great. But how do I make the widget link underline when in hover mode? I tried:

.widget ul li a:hover {text-decoration: underline !important;} with no luck.

Any thoughts on just the widgets and (optionally) header links (such as the ones the H1 and H2 that take you to a post)? I already use default permanant underlines on link text, but would rather not have a permanent underline here.

Thx.

Did you put that at HTML/CSS Inserts -> CSS Inserts? If you edited style.css or header.php instead, the text-decoration might get overwritten.

Flynn - Perhaps the question is how do you do it on your page: http://wordpress.bytesforall.com/ ??

I added the underline to Option 2 above in the CSS Inserts as follows (it makes all the links in all widgets underlined all the time, not just when you hover over them, and I have not touched the style.css):

.widget ul li a:link,
.widget ul li a:visited,
.widget ul li a:active,
.widget ul li a:hover {
text-decoration: underline !important;
border-left: 0 !important;
padding-left: 0 !important;
}

I use 3.4.2 and still cannot make list items to be show as "cricle".

I use page and categories widget on a left sidebar + copy/pasted code to make list-style-type : "circle".

It either doesn't show anything or shows up as rectangles. No circles.

Any ideas?


Gleb

Since 3.4 the left-border is on the <LI> instead of the <A> (except for the Pages and the Categories widgets).

Additionally, a hover state for <LI> is now set by jQuery for IE6. The hover state for LI for IE6 is li.sfhover. So you can have cross-browser image bullets, changing on hover, and working across all widgets (except maybe a few with very unusual styling)


For 3.4+ use this CSS Insert to remove the default left border decoration and use an image as a bullet.

1. For all decoration types:

div.widget ul {
list-style-type: none !important;
}

div.widget ul li a:link,
div.widget ul li a:visited,
div.widget ul li a:active,
div.widget ul li a:hover {
border-left: 0 !important;
padding-left: 0 !important;
}

2 a. Additionally, to use one image, without hover effect:

div.widget ul li,
div.widget ul li:hover,
div.widget ul li.sfhover {
border-left: 0 !important;
padding-left: 15px !important;
background: url(/wp-content/themes/atahualpa334/images/icons/image.gif) no-repeat 0 3px; 
}

2 b. Or use this instead to change the image on hover by using another image for the hover state = 2 images total:


div.widget ul li {
border-left: 0 !important;
padding-left: 15px !important;
background: url(/wp-content/themes/atahualpa334/images/icons/default-image.gif) no-repeat 0 3px;
}

div.widget ul li:hover,
div.widget ul li.sfhover {
border-left: 0 !important;
padding-left: 15px !important;
background: url(/wp-content/themes/atahualpa334/images/icons/hover-image.gif) no-repeat 0 3px;
}


2 c. Or use a container image that contains both the default and the hover bullet, and move its position on hover, with CSS. Saves 1 HTTP request but requires that you create one container image, i.e. 500 pixels wide (to account for very wide sidebars) with one graphic on the left end and one on the right end of the container image.

I create the default and hover icons for this first, then create a transparent container image, then "import" both icons into it (in Fireworks) and place one icon on the left and the other one on the right end of the container image. Then test it and see if both the default and hover icon overlap perfectly, and move them around in the container image if required (in Fireworks) or adjust the CSS settings by using X pos / Y pos pixel values (i.e. "no-repeat 0 3px" and "no-repeat 475px 3px") instead of center left / center right:


div.widget ul li {
border-left: 0 !important;
padding-left: 15px !important;
background: url(/wp-content/themes/atahualpa334/images/icons/container-image.gif) no-repeat center left;
}

div.widget ul li:hover,
div.widget ul li.sfhover {
border-left: 0 !important;
padding-left: 15px !important;
background: url(/wp-content/themes/atahualpa334/images/icons/container-image.gif) no-repeat center right;
}

I've upgraded to Ata 3.4.2 and WP 2.8.1, for my new site, which has very little content and had very little customizaiton. No problems with the upgrade.

However, I tried your CSS fix because I want square bullets, not the thick gray line, and it didn't work. I changed "none" to "square," however.

Thanks Flynn, works like a charm. Albeit with a bit of struggle.

Here's final working code that I got into my:
Add HTML/CSS Inserts->CSS Inserts,
It supports different normal/onhover bullets:

/* Setup bullets for LI items on sidebar */
div.widget ul {
list-style-type: none !important;
}

div.widget ul li a:link,
div.widget ul li a:visited,
div.widget ul li a:active,
div.widget ul li a:hover {
border-left: 0 !important;
padding-left: 0 !important;
}

/* Normal bullet */
div.widget ul li {
border-left: 0 !important;
padding-left: 15px !important;
background: url(/wp-content/themes/atahualpa/images/icons/li_bullet_gray_ball_9x.gif) no-repeat 0 3px;
}
/* On hover bullet */
div.widget ul li:hover,
div.widget ul li.sfhover {
border-left: 0 !important;
padding-left: 15px !important;
background: url(/wp-content/themes/atahualpa/images/icons/li_bullet_blue_ball_9x.gif) no-repeat 0 3px;
}
/***************************************/

Gleb

I have gotten my blog theme (Atahualpa) ALMOST like I want it. I am trying to get the navigation menu looking like the rest of my site, but am hitting a snag. I'm using a Text Widget for the nav menu, so that I can have the links in a particular order, and it works, but I can't get it styled right. I tried the solution in Post #14, but I don't know if I'm just misunderstanding, or if that's not the solution. You can see how I have the nav menu on my home page (it's identical on the other pages) here: http://andreadlavigne.com. I use what I saw referred to as a "pixy-rollover effect." It's basically a .gif graphic twice as wide as I need, divided into a left and right half. It shifts when the user hovers over the button. I'm getting the shift in my blog page menu (http://andreadlavigne.com/blog), but the buttons are nowhere NEAR the necessary size of 40x200px! I've tried numerous "fixes," but nothing is working. What am I doing wrong?

Re: Just upgraded to 342 - but none of the code fixes to get bullets into the widget, work.
I have tried three fixes from Flynn, placing the code into CSS inserts.
- Fix1 no change, gray squares still there;
- fixes 2a, b, c. squares disappear, but no bullets - nothing.
- I also tried fix suggested by Gesman - same, gray squares disappeared but nothing.
Looking for help. Thanks.
http://www.brisbanegoodwill.com

Try my fix above - but replace atahualpa directory names and image names to yours.
This solution is infinitely more flexible that "disc" or "circle" CSS stuff.
Works like a charm.

Gleb

Thanks Gleb for putting me right. It did work like a charm once I knew what to do. - created a bullet gif, uploaded it to icons, and put in ataualpa342 twice, since this is the way the theme loaded itself on my site. Leoni

Final code was:

/* Setup bullets for LI items on sidebar */
div.widget ul {
list-style-type: none !important;
}

div.widget ul li a:link,
div.widget ul li a:visited,
div.widget ul li a:active,
div.widget ul li a:hover {
border-left: 0 !important;
padding-left: 0 !important;
}

/* Normal bullet */
div.widget ul li {
border-left: 0 !important;
padding-left: 15px !important;
background: url(/wp-content/themes/atahualpa342/atahualpa342/images/icons/square-bullet.gif) no-repeat 0 3px;
}

Originally Posted by gesman

Thanks Flynn, works like a charm. Albeit with a bit of struggle.
Here's final working code that I got into my:
Add HTML/CSS Inserts->CSS Inserts,
It supports different normal/onhover bullets:
Gleb

Thanks, Gesman and others. Complete WP newbie here, and I justed this in (changing picture name) and it worked fine.

Great forum!

-Ctenos

would it be possible to consider someday making fine-control over the widget icons and layout something you could do through the ATO interface?

thanks

Boy would I love that!

Originally Posted by Leoni

Thanks Gleb for putting me right. It did work like a charm once I knew what to do. - created a bullet gif, uploaded it to icons, and put in ataualpa342 twice, since this is the way the theme loaded itself on my site. Leoni

Final code was:

/* Setup bullets for LI items on sidebar */
div.widget ul {
list-style-type: none !important;
}

div.widget ul li a:link,
div.widget ul li a:visited,
div.widget ul li a:active,
div.widget ul li a:hover {
border-left: 0 !important;
padding-left: 0 !important;
}

/* Normal bullet */
div.widget ul li {
border-left: 0 !important;
padding-left: 15px !important;
background: url(/wp-content/themes/atahualpa342/atahualpa342/images/icons/square-bullet.gif) no-repeat 0 3px;
}

Okay - incredibly stupid questions, but I'm trying to learn!.

1. Can I cut the above code and just paste it into my css inserts section in theme options? (AFTER I make the changes required in #2 below.) Or does this have to be retyped by hand because cutting and pasting from this forum mucks things up somehow?

2. Regarding the line that I have marked in red -

a) does "url" stay as "url" or do I replace this with http://www.MYSITE.com/wp-content, etc.

b) do I need the parenthesis before /wp-content or after .gif?

c) the rest of the string should match exactly what is on my cpanel where I uploaded the theme (no 342 and atahualpa only shows twice) and the file name should match what I uploaded to the icons section in cpanel, correct?

I've tried to get these bullets in my widgets from all kinds of directions (I'm using the newest version of the theme) and I'm sure I'm doing something stupid. Thank you for your help - donation was happily sent weeks ago.

1) Yes, adding something to CSS Inserts is the right way. You should not have to type it. Paste it into a text editor such as Windows Notepad first if it gets messed up otherwise

2) edit only the red part

background: url(/wp-content/themes/atahualpa342/images/icons/square-bullet.gif) no-repeat 0 3px;

The double /atahualpa342/ is indeed unusual, it should be only one. This depends on which ZIP program was used to unpack the atahualpa342.zip file and which part of the resulting directories where uploaded.

If your Wordpress site is in a subdirectory, i.e. /blog/ then the red part would be

background: url(/blog/wp-content/themes/atahualpa342/images/icons/square-bullet.gif) no-repeat 0 3px;

To verify that you have the right path to the image try this in your browser and see if the image comes up

http://www.yourdomain.com/wp-content/themes/atahualpa342/images/icons/square-bullet.gif

or if your Wordpress site is in a subdirectory /blog/ then try

http://www.yourdomain.com/blog/wp-content/themes/atahualpa342/images/icons/square-bullet.gif