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 can I overlay an image for the widget titles?


  #1  
Old Feb 8, 2010, 10:39 PM
SamuelGoh
 
36 posts · Feb 2010
Hi, just wondering if it is possible to overlay and image with the widget titles.

Something like what's done in this site: http://gauteweb.net/

Many thanks!

I currently have this CSS in Add CSS

.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/atahualpa332/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;
}

div.widget-title h3 {
background: url(/wp-content/themes/atahualpa/images/sidebar/sidebar widget.jpg) center left;
}

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to get logo image overlay with header image debeerj Header configuration & styling 1 Feb 2, 2010 06:23 AM
Replacing widget titles with an image thehulk Sidebars & Widgets 3 Aug 31, 2009 10:48 AM
[SOLVED] How To Overlay Header Image With Widget dan.s.ward Header configuration & styling 2 Aug 8, 2009 11:01 AM


All times are GMT -6. The time now is 10:46 PM.


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