Styling Widgets INDIVIDUALLY in Sidebar …

  • aidanodr

    (@aidanodr)


    15 years, 8 months ago

    Hi Guys,

    I have a site I am setting up for a client. This site has 4 Widgets in s Right Sidebar ( 3 Column Theme ). This is a custom theme I am making.

    I have ONE “widgetised” sidebar to the right. I have added the 4 Widgets to this sidebar, one under the other. I have managed – through CSS – to add borders around each widget and have a background color in each. To separate each widget vertically, I added a bottom margin to each widget.

    A few things:

    1. Any successful way of “rounding” the corners of the above “boxes” around each widget FOR INTERNET EXPLORER? the “Border Radius” CSS works for all other browsers ( with variation of CSS )

    2. The TITLE of each Widget APPEARS OUTSIDE and ABOVE the boxed off widgets. I cannot get the TITLE to appear inside the top “border” of each widget. Any ideas?

    I have looked at the notion of adding a static Background rounded corner image graphic behind each widget. BUT some of the widgets – testimonials will be increasing / decreasing in height depending on the text length of the testimonial summaries.

    I cannot display a link to the site – as much as I would like to – the client has not given me permission for the moment!

    Aidan

Viewing 2 replies - 1 through 2 (of 2 total)
  • Rev. Voodoo

    (@rvoodoo)

    15 years, 8 months ago

    on my site rvoodoo.com, I use 3 individual images. One is the top of the box, with rounded corners, the next is only 1px tall, it is the body area, then another image is the bottom, with bottom rounded corners.

    I set my widgets up so the top rounded corner image is the background to the title, the 1px image is repeated the length of the widget, and the bottom rounded corner image appears after the widget. So it looks like it has a rounded corner border all the way around

    Thread Starter aidanodr

    (@aidanodr)

    15 years, 8 months ago

    Hi Rev Voodoo,

    After I got my head out of a cloud I sussed the top title thing and added a background image to that – sorting the top rounded edges.

    However – the bottom rounded edges have me a bit stumped. You have the bottom rounded edge image in a div. What file have you got this div in? The TITLE is already defined as a “Div” area, but the bottom of any widget is not ..

    Aidan

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Styling Widgets INDIVIDUALLY in Sidebar …’ is closed to new replies.