WordPress.org

1. Anonymous
   Unregistered
   Posted 3 years ago #

   Hey everyone, I'm pretty new to WP and to CSS so I have a question...

   What I want is for my sidebar widgets to have a rounded edge on the top, and a rounded edge/speech bubble arrow on the bottom, so that the widget looks like a speech bubble. Click link below to see a photoshopped screen shot of what I'm trying to accomplish...

   http://img410.imageshack.us/img410/4386/exampleyt4.jpg

   I have created the images and I've created div classes in my CSS style sheet (div.top for the top image, div.mid for the background color to scroll, and div.bottom for the bottom image)... Then I added those div classes into my sidebar.php file, within the widget tags... But then when I view the code using FireBug, none of those show up. Any ideas as to what I'm doing wrong?

   Thanks for the help

2. Chrisber
   Member
   Posted 3 years ago #

   Not trying to sound like a smartass, but you didn't mention loading the images into your image directory.

   I actually did something similar on my site, but I hard coded the information I wanted to appear on each background image directly into the sidebar php template. There are no widgets involved. I divided the sidebar into a static section and a dynamic section, then created separate divs within the static section. Take a look here to see what I'm talking about.

   If I understand what you're saying correctly, it sounds like you are trying to make those bubbles expand and contract depending on the content. It would be much simpler to create the background image at a fixed size and style the content to fit.

3. Anonymous
   Unregistered
   Posted 3 years ago #

   No, you don't sound like a smartass, I just neglected to put that in my original post... I did, in fact, upload the images into the image directory. It's just that the div tags in my sidebar.php file are not showing up at all, even though they are in there.

   I have thought about just having 1 background image for the whole sidebar, but the problem is that my sidebar includes an Archives widget and a Blogroll, both of which will have continually expanding information. So I would have to keep changing my background image to make it longer. Plus I like having all of my widgets separated. Thanks for the tips though!

4. Anonymous
   Unregistered
   Posted 3 years ago #

   If I was going to do something like this in a regular static web page, I would style an H2 tag with the top of the speech bubble as background, set the background image of the main "bubble" div as a 1px high slice of the middle of the bubble (repeat-y), then style the last element of the bubble's content with a background image of the bubble's bottom - something like <li class="last">.

   There's no need to have separate div's for the top or the bottom when you can easily attach the images to the top and bottom elements in your bubble's content. I think div's are all too commonly overused (divitis).

5. Anonymous
   Unregistered
   Posted 3 years ago #

   Hey thanks Sharke!

   I didn't do exactly what you had suggested, but your post inspired me and I figured everything out and it all works perfectly. Thanks again for the help, everyone!

   -MR

Topic Closed

This topic has been closed to new replies.