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] How to Make Sidebar Titles An Image


  #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
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
you could make image and then use it as a background image for the widget title box (ATO->Widgets->Widget Title Box
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
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
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
}
__________________
"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 29, 2009, 02:29 PM
blueprairie
 
98 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
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Oct 31, 2009, 10:46 AM
blueprairie
 
98 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



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 09:52 PM.


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