Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   Custom Header for Sidebar titles (http://forum.bytesforall.com/showthread.php?t=2578)

sleenie Jul 22, 2009 10:46 AM

Custom Header for Sidebar titles
 
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

sleenie Jul 22, 2009 11:09 AM

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.

Flynn Jul 23, 2009 07:39 AM

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;
}

sleenie Jul 23, 2009 09:55 PM

Thanks, I will give this a try since the way I'm doing it seem to mess things up in Firefox.

sleenie Aug 2, 2009 05:14 PM

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.

juggledad Aug 3, 2009 07:07 AM

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;
}


sleenie Aug 3, 2009 08:47 AM

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.

sleenie Aug 3, 2009 12:26 PM

:) 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.

Wimbledon Dec 6, 2009 01:58 AM

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.

WebsitesDemystified Dec 6, 2009 02:36 PM

Quote:

Originally Posted by Wimbledon (Post 20238)
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!)

Wimbledon Dec 6, 2009 03:24 PM

Quote:

Originally Posted by WebsitesDemystified (Post 20277)
@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. :)

WebsitesDemystified Dec 6, 2009 03:54 PM

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!

Wimbledon Dec 6, 2009 04:12 PM

Quote:

Originally Posted by WebsitesDemystified (Post 20284)
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.

juggledad Dec 6, 2009 07:41 PM

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

Wimbledon Dec 7, 2009 12:34 AM

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? :confused:

juggledad Dec 7, 2009 09:25 AM

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

Wimbledon Dec 7, 2009 03:08 PM

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? :confused:

juggledad Dec 8, 2009 12:54 AM

try using the full address as the url

Wimbledon Dec 8, 2009 01:55 AM

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)

juggledad Dec 8, 2009 03:09 AM

what is the site url? so I can take a look

Wimbledon Dec 8, 2009 03:15 AM

Click here

Thanks :)

juggledad Dec 8, 2009 04:21 AM

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.

Wimbledon Dec 8, 2009 01:43 PM

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. :confused:

juggledad Dec 8, 2009 07:38 PM

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.

WebsitesDemystified Dec 8, 2009 08:09 PM

Okay, Wimbledon, I'm waiting to see if you can get this before I try it! Rooting for you here... :)
--sandy


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

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