WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Style the sidebar's h3 class="widget-title" with image background (12 posts)

  1. AardvarkGirl
    Member
    Posted 2 years ago #

    Here is an image of the effect I'm trying to get http://ratest10.com/wp-content/themes/CottonFest2010/images/cotton-sample.jpg

    Here is the actual image I've got http://ratest10.com/wp-content/themes/CottonFest2010/images/sidbar-title-bak.png

    Here is the site http://ratest10.com/?page_id=2

    I tried this initially;

    .widget-container {
    	margin: 0 0 18px 0;
    	background: #FFFFFF;
    	width:204px;
    	padding: 0 8px;
    	overflow:visible;
    }
    .widget-title {
    	color: #222;
    	font-weight: bold;
    	background: url(images/sidbar-title-bak.png);
    	width:240px; height: 45px;
    }

    and then tried mucking around with variations including overflow:visible, and changing the html structure to a div with a class holding the h3, and just didn't get anywhere.

    Thanks. :)

  2. esmi
    Forum Moderator
    Posted 2 years ago #

    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 http://www.css-discuss.org/ instead. I'd also recommend using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

  3. AardvarkGirl
    Member
    Posted 2 years ago #

    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.

  4. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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?

  5. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

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

    no

    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.

  6. AardvarkGirl
    Member
    Posted 2 years ago #

    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.

  7. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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.

  8. AardvarkGirl
    Member
    Posted 2 years ago #

    WPyogi - this is what it should look like:

    http://ratest10.com/wp-content/themes/CottonFest2010/images/cotton-sample.jpg

    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 http://ratest10.com/wp-content/themes/CottonFest2010/images/sidbar-title-bak.png

    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. http://ratest10.com/wp-content/themes/CottonFest2010/images/dreamweaver.jpg

  9. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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.

  10. AardvarkGirl
    Member
    Posted 2 years ago #

    WPyogi - yeah, I made the menu (graphics, css, etc). ;-)

  11. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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.

  12. AardvarkGirl
    Member
    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic