Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

[SOLVED] Bullets, Circles, Icons instead of left border on widget list items


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Apr 7, 2009, 01:07 PM
MacMacGA
 
12 posts · Mar 2009
Warner Robins, GA
Send a message via AIM to MacMacGA Send a message via Skype™ to MacMacGA
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.
  #2  
Old Apr 8, 2009, 09:51 AM
Flynn's Avatar
Flynn
 
3,765 posts · Oct 2008
Munich, Germany
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!important;
padding-left!important;
}
.
widget ul {
/* for other styles, try "disc" and "square" instead of "circle" */
list-style-typecircle !important
padding-left0;
margin-left0;
}
.
widget ul li {
/* 1.35 or more required for Safari or bullets too wide on the left */
margin-left1.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!important;
padding-left!important;
}

.
widget ul {
list-
style-typenone !important;
padding-left0;
margin-left0;
}

.
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. */
backgroundurl(/wp-content/themes/atahualpa332/images/icons/add-gray.gifno-repeat 0 3px

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

/* indent the icons a bit from the left */ 
margin-left2px

/* 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!important;
padding-left13px !important;
backgroundurl(/wp-content/themes/atahualpa332/images/bullets/control_play.gifno-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!important;
padding-left13px !important;
backgroundurl(/wp-content/themes/atahualpa332/images/bullets/control_play_blue.gifno-repeat 0 3px
}

.
widget ul {
list-
style-typenone !important;
padding-left0;
margin-left0;
}

.
widget ul li {
padding-left0px
margin-left0px
display: list-item
}

/* indent sub items a bit more */
.widget ul li ul li {
margin-left10px

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 {
...
}
Attached Thumbnails
Click image for larger version

Name:	widget-list-circle.gif
Views:	3087
Size:	20.8 KB
ID:	97  Click image for larger version

Name:	widget-list-icons.gif
Views:	2759
Size:	24.8 KB
ID:	98  Click image for larger version

Name:	widget-list-icons-hover.gif
Views:	2593
Size:	23.8 KB
ID:	99  
Attached Files
File Type: zip bullets.zip (1.2 KB, 1742 views)

Last edited by Flynn; Jul 14, 2009 at 11:47 AM.
  #3  
Old Apr 22, 2009, 11:47 AM
daneo
 
8 posts · Apr 2009
Thank you so much Flynn! This was the exact answer me and a few others were looking for
  #4  
Old May 1, 2009, 11:05 AM
BeFuse
 
2 posts · May 2009
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.
  #5  
Old May 1, 2009, 11:31 AM
Flynn's Avatar
Flynn
 
3,765 posts · Oct 2008
Munich, Germany
Quote:
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 {)
HTML Code:
.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
  #6  
Old May 1, 2009, 12:06 PM
BeFuse
 
2 posts · May 2009
Perfect, this works like a charm. Big thanks for the fast reply and the good support.

This theme ROCKS ! Thanks for that
  #7  
Old May 26, 2009, 03:45 PM
measure2x's Avatar
measure2x
 
52 posts · Apr 2009
Appleton, WI
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
  #8  
Old May 26, 2009, 08:26 PM
Flynn's Avatar
Flynn
 
3,765 posts · Oct 2008
Munich, Germany
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
  #9  
Old May 30, 2009, 09:24 AM
measure2x's Avatar
measure2x
 
52 posts · Apr 2009
Appleton, WI
Thanks!!!!!!!
  #10  
Old Jun 24, 2009, 12:38 AM
fredless
 
10 posts · Jun 2009
USA
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.
  #11  
Old Jun 24, 2009, 09:50 AM
Flynn's Avatar
Flynn
 
3,765 posts · Oct 2008
Munich, Germany
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.
  #12  
Old Jun 24, 2009, 03:43 PM
fredless
 
10 posts · Jun 2009
USA
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;
}
  #13  
Old Jul 13, 2009, 05:31 PM
gesman
 
35 posts · Feb 2009
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
  #14  
Old Jul 14, 2009, 11:01 AM
Flynn's Avatar
Flynn
 
3,765 posts · Oct 2008
Munich, Germany
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:

HTML Code:
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:

HTML Code:
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;
}

Last edited by Flynn; Jul 14, 2009 at 12:09 PM.
  #15  
Old Jul 14, 2009, 01:13 PM
paulae's Avatar
paulae
 
1,332 posts · Feb 2009
Wordpress 3.4.1, Atahualpa 3.7.7
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.
  #16  
Old Jul 14, 2009, 05:16 PM
gesman
 
35 posts · Feb 2009
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:

Code:
/* 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
  #17  
Old Jul 14, 2009, 07:20 PM
Insane Artist
 
3 posts · Jul 2009
Jacksonville, TX
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?
  #18  
Old Jul 14, 2009, 09:03 PM
Leoni
 
16 posts · May 2009
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

Last edited by Leoni; Jul 14, 2009 at 09:06 PM.
  #19  
Old Jul 14, 2009, 09:05 PM
gesman
 
35 posts · Feb 2009
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
  #20  
Old Jul 15, 2009, 12:25 AM
Leoni
 
16 posts · May 2009
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;
}

Last edited by Leoni; Jul 15, 2009 at 12:28 AM.
  #21  
Old Jul 24, 2009, 04:54 PM
ctenos
 
22 posts · Jul 2009
Quote:
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
  #22  
Old Aug 16, 2009, 04:36 PM
sdw
 
3 posts · Aug 2009
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
  #23  
Old Aug 16, 2009, 05:54 PM
lhanft
 
88 posts · Jul 2009
Cleveland, OH
Boy would I love that!
  #24  
Old Aug 27, 2009, 03:18 AM
jkgourmet's Avatar
jkgourmet
 
54 posts · Aug 2009
Quote:
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.
  #25  
Old Aug 31, 2009, 07:53 AM
Flynn's Avatar
Flynn
 
3,765 posts · Oct 2008
Munich, Germany
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

Bookmarks

Tags
sidebar, widget

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Space between Widget List Items configurable? upscho Sidebars & Widgets 10 Jul 3, 2012 05:15 PM
Adding list items to the Page Menu bseppa Page & Category Menu Bars 10 May 4, 2010 01:37 PM
How to change the spacing of list items Webmason Atahualpa 3 Wordpress theme 5 Aug 4, 2009 02:33 PM
[SOLVED] Adding space between the list of pages in the left hand side text widget box norwichkaren Sidebars & Widgets 1 Jul 14, 2009 06:36 PM
"Widget List Items" Settings Are Not Persisted bseppa Sidebars & Widgets 1 Dec 13, 2008 12:34 PM


All times are GMT -6. The time now is 06:58 AM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.