Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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


  #1  
Old Apr 7, 2009, 02:07 PM
MacMacGA
 
12 posts · Mar 2009
Warner Robins, GA
Send a message via AIM to MacMacGA Send a message via Skype™ to MacMacGA
[SOLVED] Bullets, Circles, Icons instead of left border on widget list items

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, 10:51 AM
Flynn's Avatar
Flynn
 
3,768 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:	3728
Size:	20.8 KB
ID:	97  Click image for larger version

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

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

Last edited by Flynn; Jul 14, 2009 at 12:47 PM.
  #3  
Old Apr 22, 2009, 12:47 PM
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, 12:05 PM
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, 12:31 PM
Flynn's Avatar
Flynn
 
3,768 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, 01: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 Jun 24, 2009, 01: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.
  #8  
Old Jun 24, 2009, 10:50 AM
Flynn's Avatar
Flynn
 
3,768 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.
  #9  
Old Jun 24, 2009, 04: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;
}
  #10  
Old Jul 13, 2009, 06: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
  #11  
Old Oct 10, 2009, 02:07 PM
waveainair
 
10 posts · Oct 2009
Did this question get answered? I'm trying to do the same thing, but haven't figured it out. I simply want to have list items in the widgets underlined in hover mode ONLY just like on the site below. I feel that it's eye-catching and helps the user know where their mouse pointer is.

Quote:
Originally Posted by fredless
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;
}
  #12  
Old Oct 10, 2009, 02:25 PM
waveainair
 
10 posts · Oct 2009
I just guessed and it worked. I put the following in CSS Inserts.

.widget ul li a:hover {
text-decoration: underline !important;
}
  #13  
Old Feb 14, 2010, 01:41 AM
Don Luciano
 
1 posts · Feb 2010
Hi Flynn,

I have tried your first suggestion for replacing the gray rectangles and didn't work. It only show the picture aside the rectangle as background.

I deleted all the inserts and saved but now my page wont load in ie8 but it shows fine on Firefox and Safari.
If apply another theme everything is fine so I think something messed up withing Atahualpa's CSSs but I cannot find any error.

My web page is http://pescaripe.net

Later edit: If I keep refreshing the page in ie8 the page shows up ...

Later Later Edit: I feel so bad. It was all about the background on layout which it had to be defined as white for my black fonts ) (stupid ie)

Last edited by Don Luciano; Feb 14, 2010 at 02:31 AM.
  #14  
Old Feb 15, 2010, 11:03 AM
Lasareath
 
7 posts · Feb 2010
Does anybody know how to get rid of the bullets entirely?


I'm using this code in my Header.php file to show my pages in the left sidebar:

<ul id="nav">
<?php if(is_home() && !is_paged()){ ?>
<?php } else { ?>
<?php } ?>
<?php wp_list_pages('sort_column=menu_order&title_li='); ?>
</ul>

But the links to my pages come up with Bullets and are center justified.

I'd love to get rid of the bullets and make the text left justified.

TIA for any help,

Lasareath
  #15  
Old Jul 14, 2009, 08: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?
  #16  
Old Jul 14, 2009, 10: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 10:06 PM.
  #17  
Old Jul 14, 2009, 10: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
  #18  
Old Jul 15, 2009, 01: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 01:28 AM.
  #19  
Old Aug 27, 2009, 04: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.
  #20  
Old Aug 16, 2009, 05: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
  #21  
Old Aug 16, 2009, 06:54 PM
lhanft
 
88 posts · Jul 2009
Cleveland, OH
Boy would I love that!
  #22  
Old Aug 31, 2009, 11:10 AM
maguai
 
18 posts · Jul 2009
Now I have both circles and the original bars on 3.4.1.
CSS
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;
}
div.widget ul {
/* for other styles, try "disc" and "square" instead of "circle" */
list-style-type: circle !important;
padding-left: 0;
margin-left: 0;
}
div.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;
}
  #23  
Old Aug 31, 2009, 11:50 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Post a URL please, that'll make it much easier for me
  #24  
Old Nov 15, 2009, 04:58 AM
kukodajanos
 
2 posts · Nov 2009
Hi

I added 2 extra categories to the left side, a "Links", and a "Projects" category. The first list is rendered as "Recent post" and "Meta", with the grey square, but the second list is marked with small black circles, as the old HTML style lists. How can i change the second list appearance?

Best regards
Janos
  #25  
Old Nov 28, 2009, 01:32 AM
rambro
 
2 posts · Nov 2009
Hi all,

In the CSS inserts I put the following 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;
}
div.widget ul {
/* for other styles, try "disc" and "square" instead of "circle" */
list-style-type: disc !important;
padding-left: 0;
margin-left: 0;
}
div.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;
}

I also set "Left border width for links" = 0, in the widget styling section.

This result in the disc bullets being displayed for list items instead of the square blocks. However if I "hover" over a widget list item with my mouse, the disc bullet disappears. Is their any code I could add in the CSS inserts, that will prevent the bullet from disappearing from a widget list item when I "hover" over the bulleted list item with my mouse?

rambro

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 06:15 PM
Adding list items to the Page Menu bseppa Page & Category Menu Bars 10 May 4, 2010 02:37 PM
How to change the spacing of list items Webmason Atahualpa 3 Wordpress theme 5 Aug 4, 2009 03: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 07:36 PM
"Widget List Items" Settings Are Not Persisted bseppa Sidebars & Widgets 1 Dec 13, 2008 01:34 PM


All times are GMT -6. The time now is 11:30 AM.


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