Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

Custom Header for Sidebar titles


  #1  
Old Jul 22, 2009, 10:46 AM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
Is there a way to add a custom image to the sidebar titles? I've done a workaround, which is adding a text widget with the image but eventually that creates problems. (between IE & Firefox) Just to give you an idea of what I mean you can go to the site which is still under major construction.
Sandy's Test site

I'm not a coder which is why I'm falling in love with this theme. This is just my 2nd site using it but I learn more each time. This is version 3.4.1
  #2  
Old Jul 22, 2009, 11:09 AM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
I just notice a couple of posts that may ansdwer my question. I'm giving them a look now but feel free to answer anyway.
  #3  
Old Jul 23, 2009, 07:39 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
You can turn off the title text with

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

and put a background image on the parent container

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

See http://www.w3schools.com/css/css_background.asp for positioning the image

Different images per widget

div#widget-id-name div.widget-title {
background: url(path/to/image.gif) center left;
}
div#other-widget-id-name div.widget-title {
background: url(path/to/other-image.gif) center left;
}
div#third-widget-id-name div.widget-title {
background: url(path/to/third-image.gif) center left;
}

or

div.widget-class-name div.widget-title {
background: url(path/to/image.gif) center left;
}
div.other-widget-class-name div.widget-title {
background: url(path/to/other-image.gif) center left;
}
div.third-widget-class-name div.widget-title {
background: url(path/to/third-image.gif) center left;
}
  #4  
Old Jul 23, 2009, 09:55 PM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
Thanks, I will give this a try since the way I'm doing it seem to mess things up in Firefox.
  #5  
Old Aug 2, 2009, 05:14 PM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
Still having custom title problems on sidebar

Hi,

I'm back to this issue because first, I know I need to do it the right way. Secondly, I think that doing the way I've been doing it, with customer images is messing up my Widget Contect plugin. If I undersatnd correctly, if I want a different image for each header I would put in

This is what I've entered to test and nothing happens. It should show up as a custom header (background only at this point. I get the test word in the widget but no header. I know it is something simple that I'm missing.

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

div#id="text-41" class="widget_text"><div class="widget-title{
background: url(/sandygluckman/wp-content/themes/atahualpa34/images/zebra_header.gif) center left;
}


How do I deal with the flexi-page widget titles? Same thing, just use the flexipage ID?

It seems it might be easier just to change the style of the container of the widget title box? I can then style the lettering within, right? That way, all title boxes on the sidbar would be the same and I just have to type the name of the text widget in it.

I can't find the other posts that were disucssing this or at least I thought they were.

This is such a great theme. I'm so much further along now than I would have been without it. Thx for a great theme because it also creates a great learning environment.

Last edited by sleenie; Aug 2, 2009 at 05:16 PM. Reason: Forgot title
  #6  
Old Aug 3, 2009, 07:07 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
your ccss insert is formated incorrectly you need to use
HTML Code:
div#text-41 {
background: url(/sandygluckman/wp-content/themes/atahualpa34/images/zebra_header.gif) center left;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Aug 3, 2009, 08:47 AM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
Thanks. (Can you tell I don't code?) I was trying to change the title box only however, your information gave me what I needed to undersatnd the rest. I just need to do some tweaking.

Again thanks so much for your assistance.
  #8  
Old Aug 3, 2009, 12:26 PM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
I am so excited!! I got the widget title exactly as I wanted it. The custom image and the right lettering AND got it centered. I know that may not seem like much to some, but for me it is MAJOR. And the bonus was my Widget Context plugin now works also.

I love this theme!!

Now on to a couple of more minor issues.
  #9  
Old Dec 6, 2009, 01:58 AM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
Can someone please help me understand why my code does not work? I am trying to replace all the widget titles with images on here.

Code:
div#awpcpclassifieds div.widget-title {
background: url(/wp-content/uploads/2009/12/LatestClassifieds.png) center left;
}
This code only makes my image appear when I give the widget a text title as well so div.widget-title exists. Yet I only want the image to show.

Thank you.
  #10  
Old Dec 6, 2009, 02:36 PM
WebsitesDemystified
 
6 posts · Nov 2009
Quote:
Originally Posted by Wimbledon
Can someone please help me understand why my code does not work? I am trying to replace all the widget titles with images on here.

Code:
div#awpcpclassifieds div.widget-title {
background: url(/wp-content/uploads/2009/12/LatestClassifieds.png) center left;
}
This code only makes my image appear when I give the widget a text title as well so div.widget-title exists. Yet I only want the image to show.

Thank you.
@Wimbledon: Your site looks great! Would you mind telling me how you got the image into the right side of your logo area? Thanks! --sandy (Sorry I'm not answering your question -- I'm following this thread to learn the sidebar image thing myself!)
  #11  
Old Dec 6, 2009, 03:24 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
Quote:
Originally Posted by WebsitesDemystified
@Wimbledon: Your site looks great! Would you mind telling me how you got the image into the right side of your logo area? Thanks! --sandy (Sorry I'm not answering your question -- I'm following this thread to learn the sidebar image thing myself!)
Thank you!

Are you referring to the 468x60 rotating ads in the header? For that site, I had to hardcode that into the header on an older version of Atahualpa.

You can do this MUCH easier now with Atahualpa's new widget area function.

http://forum.bytesforall.com/showthr...ht=widget+area

Hope that helps you.
  #12  
Old Dec 6, 2009, 03:54 PM
WebsitesDemystified
 
6 posts · Nov 2009
Thanks, Wimbledon. (Why is that your screen name? My life comes to a complete stop during Wimbledon -- it's a strange post-menopausal fanaticism of unknown origin. What a show!)

I am just upgrading to the newest Atahualpa so I guess I won't have to learn that more difficult method! Will follow your kind link and learn about widget areas. Thanks again!
  #13  
Old Dec 6, 2009, 04:12 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
Quote:
Originally Posted by WebsitesDemystified
Thanks, Wimbledon. (Why is that your screen name? My life comes to a complete stop during Wimbledon -- it's a strange post-menopausal fanaticism of unknown origin. What a show!)

I am just upgrading to the newest Atahualpa so I guess I won't have to learn that more difficult method! Will follow your kind link and learn about widget areas. Thanks again!
What better show on earth to watch than a gripping tennis match?

Glad that helped you.
  #14  
Old Dec 6, 2009, 07:41 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
the reason it doesn't work is that if the title is blank, the <div class="widget-title">...</div> never gets generated.
try this, put 1 blank character in the title and see if it will work
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #15  
Old Dec 7, 2009, 12:34 AM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
I tried placing spaces, \n, \0, and nothing worked.

If I am understanding correctly, sleenie's code uses a separate text widget for the title, yet I would like to understand how to implement Flynn's advice in post three.

If I use

Quote:
Originally Posted by Flynn
You can turn off the title text with

div.widget-title h3 {
display:none;
}
Then how can I use this?

Quote:
Originally Posted by Flynn
Different images per widget

div#widget-id-name div.widget-title {
background: url(path/to/image.gif) center left;
}
div#other-widget-id-name div.widget-title {
background: url(path/to/other-image.gif) center left;
}
div#third-widget-id-name div.widget-title {
background: url(path/to/third-image.gif) center left;
}

or

div.widget-class-name div.widget-title {
background: url(path/to/image.gif) center left;
}
div.other-widget-class-name div.widget-title {
background: url(path/to/other-image.gif) center left;
}
div.third-widget-class-name div.widget-title {
background: url(path/to/third-image.gif) center left;
}
Am I missing something obvious?
  #16  
Old Dec 7, 2009, 09:25 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
oh I see, what he is saying! Put in a title. This will cause the generation of
HTML Code:
<div class="widget-title">
<h3>your title</h3>
</div>
The first bit of CSS
HTML Code:
div.widget-title h3 {
display:none;
}
will cause the title (in this case 'your title'0 not to display, but the HTML elements are defined. The second part of the CSS is to assign the background image to the correct widget.
Each widget gets a unique ID which you can see in the generated source of the page. For example, let's say you add two text widgets, you would see in the code
HTML Code:
<div id="text-1" class="widget widget_text">
  <div class="widget-title">
    <h3>Text Title 1</h3>
  </div>
  <div class="textwidget">
     blah blah
   </div>
</div>
<div id="text-2" class="widget widget_text">
  <div class="widget-title">
    <h3>Text title 2 </h3>
  </div>
  <div class="textwidget">
    blah blah
  </div>
</div>
so now you can identify each one seperately i.e.
HTML Code:
div#text-1 div.widget-title {
background: url(path/to/third-image.gif) center left;
}
for the first occurance vers
HTML Code:
div#text-2 div.widget-title {
background: url(path/to/third-image.gif) center left;
}
for the second occurance.

Hope this helps
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #17  
Old Dec 7, 2009, 03:08 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
Your post is very helpful.

I inserted this:

Code:
div.widget_awpcplatestads h3 {
display:none;
} 

div#awpcpclassifieds div.widget-title {
background: url(/wp-content/uploads/2009/12/LatestClassifieds.png) center left;
}
While the first part successfully removed the title, when I added the second part my image did not appear (even though I kept the widget's text title). I believe I have followed the code exactly, so what have I done wrong?
  #18  
Old Dec 8, 2009, 12:54 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try using the full address as the url
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #19  
Old Dec 8, 2009, 01:55 AM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
I tried the full URL and it still did not work.

(I made sure to test the URL in my address bar first of course, so I know the URL is correct)
  #20  
Old Dec 8, 2009, 03:09 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
what is the site url? so I can take a look
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #21  
Old Dec 8, 2009, 03:15 AM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
Click here

Thanks
  #22  
Old Dec 8, 2009, 04:21 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
ok, here is how to do it. The first user just wanted a background image behind her text where you want to remove the text and just display the image. But you can't do that. teh minute you put in the
HTML Code:
div.widget_awpcplatestads h3 {
display:none;
}
that element is no longer being displayed, so you can't put a image behind it.

There is a get around. Remove the CSS Insert
HTML Code:
div.widget_awpcplatestads h3 {
display:none;
}
and change the title to '&nbsp;' - this is a space. Now the text of the title will be a space and you can put the image behind it.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #23  
Old Dec 8, 2009, 01:43 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
OH, NOW I understand.

I tried inserting &nbsp; with and without "", '', and the widget title prints out the string rather than interpreting it as a blank space.
  #24  
Old Dec 8, 2009, 07:38 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
you need to put &nbsp; in the title, nothing more. It will look like it vanishes but it will be there, if you look in the page source you should see <h3>&nbsp;</h3> - actually in your case, once it is in, you will see your image.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #25  
Old Dec 8, 2009, 08:09 PM
WebsitesDemystified
 
6 posts · Nov 2009
Okay, Wimbledon, I'm waiting to see if you can get this before I try it! Rooting for you here...
--sandy

Bookmarks

Tags
sidebar title

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] How to Make Sidebar Titles An Image ftf79 Sidebars & Widgets 6 Oct 31, 2009 10:46 AM
Custom links IN header image mkny13 Header configuration & styling 7 Jul 21, 2009 11:13 AM
Custom HTML instead of header picture? robertomueller Header configuration & styling 2 Jul 13, 2009 10:44 AM
Custom Logo in Header + Resizing koligirl Header configuration & styling 0 Apr 24, 2009 09:58 AM
Custom Header - Inserting HTML table and links over header. hotsauce Header configuration & styling 2 Apr 9, 2009 05:56 AM


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


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