[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. |
4 Attachment(s)
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 ul { ... } 2. To change it to image icons: (See attached screenshot #2) PHP Code:
.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 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. |
Quote:
HTML Code:
.widget ul li a:hover, |
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: HTML Code:
div.widget ul { HTML Code:
div.widget ul li, 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: Code:
/* Setup bullets for LI items on sidebar */ |
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?:confused:
|
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; } |
Quote:
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!
|
Quote:
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 |
All times are GMT -6. The time now is 09:51 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.