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 »

[SOLVED] Putting images in place of widget titles


  #1  
Old Jun 24, 2009, 07:02 PM
ken.miller
 
3 posts · Jun 2009
Let me start by saying this theme ROCKS!!! Have only been using it for 1 day so far and love it.

I am trying to replace the titles of widgets on the right side with images. I saw a thread that mentioned putting the image tag in place of the title in the widgets, under Appearance, but there's a small problem... One of the widgets I have there is the Links widget, which when you look under the Appearance > Widgets, there isn't a title option for that widget.

So how can I configure the widgets to use images instead of titles?

Thanks.
  #2  
Old Jun 25, 2009, 10:46 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Add a CSS Insert

div.widget-title h3 {
display: none;
}

div#recent-comments div.widget-title {
background: url(/path/to/recent-comments.gif);
}

div#meta div.widget-title {
background: url(/path/to/meta.gif);
}

div.widget-links div.widget-title {
background: url(/path/to/links.gif);
}


Looks into the source code of a rendered page or use Firebug to figure out the ID or class of each widget. Use the ID if you have several instances of the same widget (i.e. text widget) and want to apply different images on them
  #3  
Old Jun 25, 2009, 11:43 AM
ken.miller
 
3 posts · Jun 2009
Flynn,

Thanks for the quick help!!! Folllow-on question

You have as one of your snippets:

div.widget-links div.widget-title {
background: url(/path/to/links.gif);
}

Right now I have several 'links' sections showing up, broken up by category. So for instance, one of them is 'Daily Blogs.' When I look in the page source, it shows:

<div id="linkcat-9" class="widget widget_links"><div class="widget-title"><h3>Daily Blogs</h3></div>

How would I distinguish that specific 'link' category? And would it be widget_links in this case vice the widget-links in the snippet? Would it end up being:

div.linkcat-9 div.widget-links div.widget-title {
background: url(/path/to/links.gif);
}

Also, silly question I am sure, but what is the case that you would use the div# notation?

Thanks again.
  #4  
Old Jun 25, 2009, 12:14 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Use

div#linkcat-9 div.widget-title {
background: url(/path/to/links.gif);
}

# for ID's
. for classes
  #5  
Old Jun 25, 2009, 12:38 PM
ken.miller
 
3 posts · Jun 2009
Added:

height:60px;
background-repeat: no-repeat;

and it works as expected. Thanks

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Images as Category Titles hejonas Atahualpa 3 Wordpress theme 7 Jul 17, 2009 03:43 AM
can someone tell me how to add a row of several images in place of the panoramic one? mom7to Header configuration & styling 4 Mar 24, 2009 09:14 AM
How do I use TTF Titles Plugin on the widget titles? chavahn Sidebars & Widgets 0 Mar 5, 2009 10:05 AM
Flash in place of rotating images in header frankrizzo5150 Header configuration & styling 7 Feb 21, 2009 12:04 PM
Take Page Titles and Widget Titles for example... bseppa Sidebars & Widgets 0 Dec 12, 2008 07:44 PM


All times are GMT -6. The time now is 04:08 PM.


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