Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

[SOLVED] How to Make Sidebar Titles An Image


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Jun 22, 2009, 12:32 PM
ftf79
 
12 posts · Apr 2009
Love this theme! We are working it out and will definitely make a donation! I was wondering how to make the sidebar titles (like blogroll, or site admin, or gallery, or subscribe) as an image.

I saw this site here on the forum and like how she did them. Where would I put the image and what form should it be in? Here's the site I'm trying to emulate!

[url="http://misspickyscolumn.com/"]

Thanks so much!
  #2  
Old Jun 22, 2009, 06:35 PM
juggledad's Avatar
juggledad
 
21,938 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
you could make image and then use it as a background image for the widget title box (ATO->Widgets->Widget Title Box
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #3  
Old Jun 23, 2009, 05:40 AM
ftf79
 
12 posts · Apr 2009
Thanks for the reply. I made an image to try that I called welcomebutton.gif. I put the image in the media library of my localhost test site. Then I put this code in the widget title section.

<img src="http://localhost/wp-content/uploads/2009/06/welcomebutton.gif" alt="welcomebutton" title="welcomebutton" width="150" height="50"/>

Nothing happened, so I am obviously trying to call the image in the wrong way. Thanks for helping
  #4  
Old Jun 30, 2009, 07:16 AM
juggledad's Avatar
juggledad
 
21,938 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
There is a writeup at http://hoyet.wordpress.com/2008/05/0...le-in-sidebar/ that explains how to do this. You will have to make some adjustments.

I created a image called 'widget.gif' and stuck it in the atahualpa images folder. I then used the TEXT widget and as teh article says, I looked at the source and created my CSS insert. Note I used the ID of teh widget instead of the class. If I used the class, every occurance of the text widget would get the image, this way I could have a different image for each occurance of the widget. I also used H#'s instead of the H2's described in the articls because that is what the text widget uses.

Here is the CSS insert I used
HTML Code:
div#text-461830691 h3 {
display: block;
width: 125px;
height: 45px;
text-indent: -9999px;
background-image: url('http://mydomain.org/wordpress/wp-content/themes/atahualpa333/images/widget.gif');
background-repeat: no-repeat;
background-position: center center;
}
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #5  
Old Oct 29, 2009, 02:29 PM
blueprairie
 
94 posts · Feb 2009
Hello!

I was able to get very close to what I'm aiming for using this post (THANK YOU!), but still need a help.

In my right sidebar I'm setting up a MailChimp subscription box. I want the chimp graphic to sit behind the email, name, etc. Currently they are falling below.

This is what I have in my CSS inserts currently.
div#mailchimp-widget h3 {
display: block;
width: 290px;
height: 250px;
text-indent: -9999px;
background-image: url('http://www.polkcitysquare.com/wp-content/themes/atahualpa/images/mailchimp_bg2.jpg');
background-repeat: no-repeat;
background-position: center center;
}


http://polkcitysquare.com/?page_id=340

PS. If you have a suggetion to get the form fields to right align, I'd love the insight on that as well.
  #6  
Old Oct 30, 2009, 02:48 PM
juggledad's Avatar
juggledad
 
21,938 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
ok two things here.
1) change your CSS selector to 'div#mailchimp-widget {'
2) you are going to have to look at the code that makes up the mailchinp widget and locate the code that generates the
HTML Code:
.mc_custom_border{ padding:5px; border-width: 0px;border-style: none;border-color: #666666;color: #ffffff;background-color: #f3bb4c;}
and remove the 'background-color: #f3bb4c;

this widget is putting it's style after the atahualpa style and it overriding what atahualpa sets.
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #7  
Old Oct 31, 2009, 10:46 AM
blueprairie
 
94 posts · Feb 2009
Thank you so much! I don't think I could have figured that out on my own. You guys are amazing!

Bookmarks

Tags
image, sidebar title, widget title

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to make logo area on beside or overlay header image? phuongnv Header configuration & styling 16 Mar 17, 2011 06:09 PM
Image too small at 770 px for Atahualpa theme - any way to make it stretch to 100%? houston777 Header configuration & styling 1 Jul 5, 2009 04:25 PM
how to make header image linked to a post URL? dreamfree Header configuration & styling 3 Jun 13, 2009 02:54 AM
How to make post titles H1 instead of H2 StudioGal Atahualpa 3 Wordpress theme 1 Apr 13, 2009 08:43 AM
Want to make background image visible through logo div keblake Header configuration & styling 4 Mar 11, 2009 08:32 PM


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


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