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 »

Widget Title Box Image?


  #1  
Old Mar 17, 2010, 11:01 PM
Antonino Giglio
 
49 posts · Mar 2010
Is it posible to insert an image of in the Widget Title Box to use it as background?

Thanks!!!
  #2  
Old Mar 18, 2010, 05:04 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Yes, but you need to use a CSS Insert

Lets say you wanted to put the email.png (which is in the atahaulpa images folder) as a background to the 'Categories' widget. If you look at the generated code for a page, you see the widget looks like this:
HTML Code:
<div id="categories-3" class="widget widget_categories"><div class="widget-title"><h3>Categories</h3>
the ID in the first part has a number that increases as you use the widget so you can uniquely identify each occurance, but we will ignore it. To get the image you can use the CSS RULE
HTML Code:
{background: url("http://yourdomain.com/wordpress/wp-content/themes/atahualpa/images/email.png")
but now you must create the CSS SELECTOR.

If you just used 'div.widget-title' you would effect all the widgets. If you just use 'div.widget_categories' you would put the background behind the entire widget, so you must use a combination 'div.widget_categories div.widget-title' so your final CSS insert would be

HTML Code:
div.widget_categories div.widget-title {background: url("http://yourdomain.com/wordpress/wp-content/themes/atahualpa/images/email.png") }
hopw this helps
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Mar 18, 2010, 07:51 AM
debeerj
 
13 posts · Jan 2010
Cape Town
Send a message via Skype™ to debeerj
I want to change the background color of a custom widget that I added. Can I use the widget ID instead of the class and replace it in your code.
  #4  
Old Mar 18, 2010, 10:29 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
debeerj - yes you can, the ID is how you target a specific element (in your case the widget)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Oct 12, 2010, 07:51 PM
AussiAnni
 
24 posts · Sep 2010
Adelaide, Australia
I want to add a small icon that is right aligned and on top of the background colour with the text still visible. So ultimately the title bar would look exactly as it is but with a little icon on the right hand side.

I have messed around with the css a bit but just couldn't nail it.

*edit* It's OK I worked it out by adding padding and making the background colour transparent. I feel so clever lol

Last edited by AussiAnni; Oct 12, 2010 at 08:06 PM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to remove the box around my blog title??? Some help please SamuelGoh Atahualpa 3 Wordpress theme 0 Feb 8, 2010 09:25 PM
Style widget search box ggitchell Sidebars & Widgets 8 Dec 4, 2009 12:19 AM
Widgets title box speedywap Sidebars & Widgets 1 Oct 11, 2009 09:15 AM
Image not centered in box paulae Atahualpa 3 Wordpress theme 5 Apr 29, 2009 09:35 PM
Header image between Blog Title/Sub Title and search box bseppa Header configuration & styling 1 Mar 15, 2009 02:39 PM


All times are GMT -6. The time now is 01:46 AM.


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