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 »

How to set the space between Icons in Catergory Widget?


  #1  
Old Dec 4, 2009, 02:55 AM
Ber|Art's Avatar
Ber|Art
 
198 posts · Oct 2009
Europe (NL) ber-art.nl Windows 7x64 WP 3.x Atahualpa 3.7.x
Send a message via Skype™ to Ber|Art
On www.wpmu.be I have the next code inserted in CSS:

Code:
.widget ul li a:link,
.widget ul li a:visited,
.widget ul li a:active,
.widget ul li a:hover {
border-left: 0 !important;
padding-left: 0 !important;
}

.widget ul {
list-style-type: none !important;
padding-left: 0;
margin-left: 0;
}

.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. */
background: url(/wp-content/themes/atahualpa/images/icons/add-gray.gif) no-repeat 0 3px; 

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

/* indent the icons a bit from the left */ 
margin-left: 2px; 

/* 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; 
}
I tried to set the margin to 15 pixels in > Sidebars & Widgets > Style Widgets but this did not help? On www.incotrust.be I did the same and there it works fine! ??

See for yourself on www.wpmu.be the links are over the icons... strange thing is that the Icons are OK in the Widget of a plugin (in this case Count per day)
  #2  
Old Dec 4, 2009, 03:13 AM
Ber|Art's Avatar
Ber|Art
 
198 posts · Oct 2009
Europe (NL) ber-art.nl Windows 7x64 WP 3.x Atahualpa 3.7.x
Send a message via Skype™ to Ber|Art
Now I used:

Code:
.widget ul li a:link,
.widget ul li a:visited,
.widget ul li a:active {
border-left: 0 !important;
padding-left: 13px !important;
background: url(/wp-content/themes/atahualpa/images/icons/add.gif) no-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: 0 !important;
padding-left: 13px !important;
background: url(/wp-content/themes/atahualpa/images/icons/add-gray.gif) no-repeat 0 3px; 
}

.widget ul {
list-style-type: none !important;
padding-left: 0;
margin-left: 0;
}

.widget ul li {
padding-left: 0px; 
margin-left: 0px; 
display: list-item; 
}

/* indent sub items a bit more */
.widget ul li ul li {
margin-left: 0px; 
}
This one works if I set the marges on 0
  #3  
Old Dec 4, 2009, 04:34 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I'm confused, don't you mean the Category WIDGET and not the Category MENUBAR?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Dec 4, 2009, 04:37 AM
Ber|Art's Avatar
Ber|Art
 
198 posts · Oct 2009
Europe (NL) ber-art.nl Windows 7x64 WP 3.x Atahualpa 3.7.x
Send a message via Skype™ to Ber|Art
Yes sorry, the first code worked on incotrust.be but not on wpmu.be the second code worked on wpmu.be but I has to set the spacing of the links on 0, but it works now perfect with the second code!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Bullets, Circles, Icons instead of left border on widget list items MacMacGA Sidebars & Widgets 62 Jul 30, 2010 11:46 AM
Removing space between <li> tags in widget desell Sidebars & Widgets 2 Oct 24, 2009 02:33 AM
[SOLVED] Can no longer set height of header image after adding header widget tfs Header configuration & styling 7 Oct 15, 2009 01:50 PM
How do you color the whole Catergory and Page bar Alien99 Page & Category Menu Bars 1 Aug 6, 2009 05:14 AM
Want to set background-color only under the title of categories widget in the sidebar MarkusM. Sidebars & Widgets 5 Feb 12, 2009 04:45 PM


All times are GMT -6. The time now is 02:26 PM.


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