Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   [SOLVED] Bullets, Circles, Icons instead of left border on widget list items (http://forum.bytesforall.com/showthread.php?t=1149)

samij0 Nov 23, 2009 09:48 PM

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!

samij0 Nov 27, 2009 04:00 PM

2 Attachment(s)
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 :]

rambro Nov 28, 2009 01:32 AM

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

juggledad Nov 28, 2009 05:29 AM

rambro - what version of Atahualpa and WP?
What is your url showing the issue?

crashley1784 Dec 1, 2009 12:07 AM

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: http://www.laurenacooper.com/cakewal...s/hover bg.gif

And the image I want to show up next to the current (active?) link:http://www.laurenacooper.com/cakewal...current bg.gif

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

juggledad Dec 1, 2009 03:13 AM

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

crashley1784 Dec 1, 2009 06:32 PM

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. :(

juggledad Dec 1, 2009 07:15 PM

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;
}


crashley1784 Dec 1, 2009 09:13 PM

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

crashley1784 Dec 1, 2009 09:24 PM

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?

barbara Jan 24, 2010 07:49 PM

Just wanted to say Thank You for this thread. This was one of the last items I needed to get my blog to look like my site.

My only problem is how links look when they wrap to a 2nd line due to the size of their title ... especially with post titles. [Which I just fixed by changing the width of each sidebar.]

main site: www.fibromyalgia411.info
blog: www.fibromyalgia411.info/blog/

Paula's suggestion about the left border under edit widgets did the trick, as I was still getting the default bar upon hovering over Recent Posts and Post Archives. That got rid of it.

jaxon Jan 31, 2010 02:34 PM

This really is a super helpful thread. I also have another question/tweak. Can I use this same insert to add image bullets to widget lists that are not links. I have a text box widget with a list of site features that I would like bulleted. The code suggested in this thread only seems to apply to links.
Thanks a ton!
jaxon

Seijun Feb 7, 2010 12:29 AM

Trying to change widget link bullets in 3.4.5. for the recent posts and categories widget. No luck so far.
Last thing I tried was:
Code:

div.widget ul a:link {
list-style-type: disk !important;
}

This is after I changed "left border widths for links" to 0.

Don Luciano Feb 14, 2010 01:41 AM

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.:confused:
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)

Lasareath Feb 15, 2010 11:03 AM

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

Budun Apr 4, 2010 10:12 AM

I apologize badly I understand till English.
Prompt please in what file to do(make) changes what to receive such result.
Thanks.

juggledad Apr 5, 2010 05:32 AM

put the changes in 'ATO->Add HTML/CSS Inserts->CSS Inserts'

sflamer May 24, 2010 01:01 PM

I seem to be in a similar boat (I've been bailing for hours). I have two problems: bullets on my list items which I would like to get rid of; and 2) when I hover on the list the div expands to the left (I have no clue as to why!). Newbie could use some help!

Caryn Inspired Raw May 25, 2010 03:50 PM

Thanks for this thread. I was thrilled to finally replace the bars with discs. Somehow I've lost my hover color set in the ATO options, however. Thoughts? Site is http://flow-dynamix.com and I'm using Atahualpa 3.4.6.

Here's the CSS that I got from item #14:
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" */
color: #00A79D;
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;
}

No rush as I may be offline for about 1 1/2 weeks, but wanted to at least get this into the queue.

Best,
Caryn

juggledad May 28, 2010 12:00 PM

The CSS is probably overriding it. Try using
HTML Code:

div.widget ul li {
background: #000000 !important;
}

div.widget ul li:hover,
div.widget ul li.sfhover {
background: #ffffff !important;
}

but put in our own colors

espiotr Jul 30, 2010 06:10 AM

Thanks for the thread.. I've got my widget lists looking just lovely -- except for Categories. For some reason they appear differently from all the other widgets, and I can't seem to figure out how to give them some breathing room.

Site: veterangamers.co.uk

Relevant code:

Quote:

div.widget ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}

div.widget ul li {
background-image: url('<?php bloginfo('template_directory'); ?>/images/bullets/red_bullet-1.gif');
background-repeat: no-repeat;
background-position: 0px 3px;
padding-left: 14px;
padding-bottom: 5px;
}
div.widget ul li a:hover {
text-decoration: none;
}

lmilesw Jul 30, 2010 08:23 AM

Try adding this.
HTML Code:

div.widget_categories a {margin-left:10px;}

espiotr Jul 30, 2010 12:46 PM

Quote:

Originally Posted by lmilesw (Post 38793)
Try adding this.
HTML Code:

div.widget_categories a {margin-left:10px;}

Dude! I could have sworn I tried that after digging around in the page source code. But I guess I missed something. Thank you so very much! I really appreciate your superb theme and the fantastic support you offer here.


All times are GMT -6. The time now is 08:56 AM.

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