Support » Themes and Templates » Style the sidebar's h3 class="widget-title" with image background

Viewing 11 replies - 1 through 11 (of 11 total)
  • I’m sorry but it is beyond the scope of these forums to deal with pure CSS issues. Try a dedicated CSS resource such as instead. I’d also recommend using Firefox with the Firebug add-on for this kind of CSS work.

    Ooooook. Though I know I ‘could’ go into the functions.php (where the html gets generated for the classes that are on the h3 .widget-title class) and modify that code (since obviously I’m struggling here) I figured that since the code is generated by the functions.php file – and static sites do NOT do that – that this was sort of, if only kind of, related to WORDPRESS.

    Are there any css issues that are SPECIFICALLY related to WP then? I’m just asking so I don’t get on the board again and make the same mistake.

    I do have firebug… and I think I’m going to ask you (for once) what I’m missing with it. Because, I don’t get it. I can click on an element and I can see what css rules are affecting it, but it doesn’t help me with an answer/solution.

    You are right that Firebug does not impart CSS knowledge to you! LOL!

    I’m not entirely clear on what you are trying to do — do you want the green background to be bigger? Why are you using an image background and not just a color?



    Forum Moderator

    Are there any css issues that are SPECIFICALLY related to WP then?


    image somebody would give you a copy of the (static) html output of your site (that what you see in the browser when you ‘view source’) – and you would need to style this using css – this is general the situation with most css questions in this forum.

    it gets WordPress related if you would ask what css classes you could automatically output (using WordPress functions etc) to make the formatting easier or so … which is not the case with your question as there are already all necessary css classes in the code.

    alchymyth – Ok… maybe the forum names needs to be changed then? It is a bit misleading.

    Themes and Templates
    – XHTML and CSS

    (Edited to say: Did you edit your response, because I swear, when I first replied to you your answer simply said ‘no’).

    WPogi – I posted 3 links to show why I want to use an image as the h3.widget-title background. It is the same effect that is on the menu bar.

    I was trying to actually help you with your question and after looking at your 3 links, I did not understand what the problem is — in my browser, the green background shows up in the right place — although there is a gap of white on the left side and it’s too wide (sticks out on the right side). But you can easily solve those problems by editing the CSS — change the padding to zero in .widget-container, and change the width to 204px in .widget-title.

    If that does not do what you want, you’ll have to explain further.

    WPyogi – this is what it should look like:

    I’m not sure how much more I can explain that the graphical mock-up doesn’t itself explain.

    The image itself, the green wrap around image, is 240px X 45px, this is so it is indeed wider than the .widget-container. Removing the padding has not achieved the effect I’m looking for.

    This is the .png file with the transparent background

    I’m not sure what browser you are looking at the site in, lol, but I’ve looked at it in the most recent IE, FF and Chrome and I’m just getting a chopped off green line (it does not show the entire graphic as the background).

    EDITED: Came back to say, apparently Dreamweaver likes it, lol, but none of the browsers do.

    Okay, finally got it — you want the effect that the “strip” is curving around the page. Unfortunately, that is very complicated to achieve. If you look at the coding (html and css) for the menu bar (where it is like that), you’ll see that the side pieces that “curve around” are separate from the actual menu bar content.
    this is the left side piece:
    <div id="access-left"></div>
    this is the corresponding css:

    #access-left {
        background: url("images/access-left.png") repeat scroll 0 0 transparent;
        height: 81px;
        left: -40px;
        position: relative;
        top: -65px;
        width: 43px;

    As you can see it uses relative positioning and negative alignments which is quite tricky even when you know what you are doing with CSS.

    It now looks like you are making some progress on it — nice going. You might want to look at positioning on the W3C site.

    WPyogi – yeah, I made the menu (graphics, css, etc). 😉

    Great — it’s gorgeous and impressive. So you obviously know what you are doing! It’s a nice looking site too. Good luck with it.

    WPyogi – well, I finally got the sidebar, but if I had known what I was doing (thanks for the compliment), I’m sure I would have found an easier way. 😉

    I ended up just ripping apart the structure of the theme (divs)… put a ‘overflow/visible’ on the #main… and a few other contortions, but it is working.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Style the sidebar's h3 class="widget-title" with image background’ is closed to new replies.