[SOLVED] How to Make Sidebar Titles An Image
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! |
you could make image and then use it as a background image for the widget title box (ATO->Widgets->Widget Title Box
|
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 |
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 { |
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. :) |
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;} this widget is putting it's style after the atahualpa style and it overriding what atahualpa sets. |
Thank you so much! I don't think I could have figured that out on my own. You guys are amazing!
|
All times are GMT -6. The time now is 03:03 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.