Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

How can I overlay an image for the widget titles?

Old Feb 8, 2010, 11:39 PM
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;

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


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 07:23 AM
Replacing widget titles with an image thehulk Sidebars & Widgets 3 Aug 31, 2009 11:48 AM
[SOLVED] How To Overlay Header Image With Widget dan.s.ward Header configuration & styling 2 Aug 8, 2009 12:01 PM

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

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