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 |
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.
|
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; } |
Thanks, I will give this a try since the way I'm doing it seem to mess things up in Firefox.
|
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. |
your ccss insert is formated incorrectly you need to use
HTML Code:
div#text-41 { |
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. |
:) 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. |
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 { Thank you. |
Quote:
|
Quote:
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. :) |
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! |
Quote:
Glad that helped you. |
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 |
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:
Quote:
|
oh I see, what he is saying! Put in a title. This will cause the generation of
HTML Code:
<div class="widget-title"> HTML Code:
div.widget-title h3 { 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"> HTML Code:
div#text-1 div.widget-title { HTML Code:
div#text-2 div.widget-title { Hope this helps |
Your post is very helpful.
I inserted this: Code:
div.widget_awpcplatestads h3 { |
try using the full address as the url
|
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) |
what is the site url? so I can take a look
|
|
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 { There is a get around. Remove the CSS Insert HTML Code:
div.widget_awpcplatestads h3 { |
OH, NOW I understand.
I tried inserting with and without "", '', and the widget title prints out the string rather than interpreting it as a blank space. :confused: |
you need to put 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> </h3> - actually in your case, once it is in, you will see your image.
|
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 07:46 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.