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
  #26  
Old Aug 31, 2009, 10: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;
}
  #27  
Old Aug 31, 2009, 10:50 AM
Flynn's Avatar
Flynn
 
3,745 posts · Oct 2008
Munich, Germany
Post a URL please, that'll make it much easier for me
  #28  
Old Aug 31, 2009, 03:00 PM
jkgourmet's Avatar
jkgourmet
 
54 posts · Aug 2009
Here is the EXACT code that I have put in the css inserts:

/* 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/red-rd-bullet.gif) no-repeat 0 3px;
}

http://www.anythinggoesgourmet.com/w...-rd-bullet.gif DOES go to my uploaded gif file of a red bullet.

But the vertical lines are still there on the website, not bullets. Is this related somehow to my other problem under the page header topic?
  #29  
Old Aug 31, 2009, 03:27 PM
paulae's Avatar
paulae
 
1,330 posts · Feb 2009
Wordpress 3.4.1, Atahualpa 3.7.7
Just FYI: To get rid of the border lines, I also, in the theme options, widgets, Widget List Items, I made the left border width for links 0. Not sure if that is the reason it works, but that's how I have it set.
  #30  
Old Aug 31, 2009, 03:46 PM
jkgourmet's Avatar
jkgourmet
 
54 posts · Aug 2009
Quote:
Originally Posted by paulae
Just FYI: To get rid of the border lines, I also, in the theme options, widgets, Widget List Items, I made the left border width for links 0. Not sure if that is the reason it works, but that's how I have it set.
Okay I changed all the left border widths for links to zero. That got rid of my bars, thank you. However, no bullets. I've tried changing the code to what you used, but still no bullets. I really suspect this has somethng to do with the mistake I made in the page menu bar. But at least now I've gotten rid of the blasted bars, which is better than it was. Now I'll hope for help from Flynn et al to fix my page menu and get bullets.

Thanks for the assist.
  #31  
Old Aug 31, 2009, 03:53 PM
paulae's Avatar
paulae
 
1,330 posts · Feb 2009
Wordpress 3.4.1, Atahualpa 3.7.7
No problem. We're all in this together!

Are you positive the .gif is in that directory and there is no naming mistake? I tried your link and got a page not found.

Last edited by paulae; Aug 31, 2009 at 03:55 PM.
  #32  
Old Aug 31, 2009, 05:18 PM
jkgourmet's Avatar
jkgourmet
 
54 posts · Aug 2009
http://www.anythinggoesgourmet.com/w...-rd-bullet.gif



used in the script without the "www.anythinggoesgourmet.com" -- replaced with url.
  #33  
Old Sep 9, 2009, 10:17 AM
maguai
 
18 posts · Jul 2009
That worked for me. Sidebar width set to 0. Thanks!
  #34  
Old Oct 10, 2009, 01: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;
}
  #35  
Old Oct 10, 2009, 01: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;
}
  #36  
Old Oct 21, 2009, 12:15 PM
wfairchild
 
1 posts · Oct 2009
I just installed this theme and really like the versatility.

I would like to do just the opposite of the first poster. On my site (http://1654fairhills.com), I would like all of the link categories to display with the little box, instead of with the black dot image. I'm sure this is is an easy fix but I'm going crazy trying to figure out where to change it, and I don't want to break anything.
  #37  
Old Oct 30, 2009, 05:58 AM
Flynn's Avatar
Flynn
 
3,745 posts · Oct 2008
Munich, Germany
Quote:
Originally Posted by wfairchild
I just installed this theme and really like the versatility.

I would like to do just the opposite of the first poster. On my site (http://1654fairhills.com), I would like all of the link categories to display with the little box, instead of with the black dot image. I'm sure this is is an easy fix but I'm going crazy trying to figure out where to change it, and I don't want to break anything.
The little boxes are the default setting and you seem to have them? Or else, please provide more details
  #38  
Old Nov 12, 2009, 09:25 AM
kippiper
 
135 posts · Jun 2009
Thanks for much for this great info! I left a question the other day about this cause when I searched for a possible answer, I apparently didn't search to see this answer. Thanks!
  #39  
Old Nov 15, 2009, 03: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
  #40  
Old Nov 15, 2009, 07:55 AM
kukodajanos
 
2 posts · Nov 2009
And here is my website: http://kukodajanos.homelinux.com
  #41  
Old Nov 23, 2009, 08:48 PM
samij0
 
18 posts · Nov 2009
Hi Flynn,

I'm trying to use this code for the categories widget. I've tried taking out the "li" and that didn't work. I tried replacing it with "a" and that didn't work... am I missing something?

Thanks in advance for the help!
  #42  
Old Nov 27, 2009, 03:00 PM
samij0
 
18 posts · Nov 2009
Additionally, I have tried every single different option presented in this thread with no success. I've check in both Safari and Firefox browsers. I've triple-checked the url for the image and I have it correct in the code, so I'm really not sure what else to do.

I have an 11x12 image that I want to appear next to each link in each widget that I have. My site is not live yet, so I can't give you a link, but I'm attaching images to give you the general idea. The first image is the categories widget as it appears on my page (very simple looking) and the second is how I'd like it to look, with a cupcake next to each link.

I will absolutely make a donation if anyone can help me resolve this.

Again, thanks in advance :]
Attached Thumbnails
Click image for larger version

Name:	categories.jpg
Views:	735
Size:	31.3 KB
ID:	310  Click image for larger version

Name:	categorieswithicons.jpg
Views:	743
Size:	34.3 KB
ID:	311  
  #43  
Old Nov 28, 2009, 12: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
  #44  
Old Nov 28, 2009, 04:29 AM
juggledad's Avatar
juggledad
 
21,687 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
rambro - what version of Atahualpa and WP?
What is your url showing the issue?
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #45  
Old Nov 30, 2009, 11:07 PM
crashley1784
 
79 posts · May 2009
Hi all,
I've read all the posts (after #14 as I'm using version 3.4.4) and I'm still unable to get my background image to show up when I hover over my page links in the sidebar. I noticed that Flynn said that the image is associated with the li instead of the a except for the pages and categories widgets. Well, that's what I'm trying to work on.

So here are the images I'm trying to use.
This one is the hover image:

And the image I want to show up next to the current (active?) link:

This is the code I currently have in the CSS inserts section

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

div.widget ul a:hover, {
border-left: 0 !important;
padding-left: 15px !important;
background: url("http://www.laurenacooper.com/cakewalk/wp-content/themes/atahualpa/images/hover bg.gif") no-repeat center left 0 3px;
}
It's still not working for me. Any help would be greatly appreciated
Link to site: http://www.laurenacooper.com/cakewalk
  #46  
Old Dec 1, 2009, 02:13 AM
juggledad's Avatar
juggledad
 
21,687 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
1) I'm not seeing the CSS insert in the generated page - do you still have it as a CSS Insert?
2) it looks like the image has a blank in it's neme, that is a no no. Remove the blank (use an underscore) in the file name and the reference
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #47  
Old Dec 1, 2009, 05:32 PM
crashley1784
 
79 posts · May 2009
I have reinserted the css into the css inserts section. Sorry, I got frustrated and deleted it without thinking.
Also, I changed the file names to have no space; now they're just hoverbg.gif and activebg.gif. But it's still not working.
  #48  
Old Dec 1, 2009, 06:15 PM
juggledad's Avatar
juggledad
 
21,687 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
try this - it's a little messy on single lines
HTML Code:
div.widget ul a:hover {
border-left:0 !important;
padding-left:15px !important;
background: url(http://www.laurenacooper.com/cakewalk/wp-content/themes/atahualpa/images/hoverbg.gif) top left no-repeat;
}
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #49  
Old Dec 1, 2009, 08:13 PM
crashley1784
 
79 posts · May 2009
That worked! Great! Thank you. Now I've just got to tweak the positioning, etc and do the same thing for the active links. Definitely donation worthy :D
  #50  
Old Dec 1, 2009, 08:24 PM
crashley1784
 
79 posts · May 2009
Do I need to do something different to have an image next to the active link other than changing the name of the image file and the a:hover to a:active?

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 12:46 AM.


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