ThemeShaper Forums » Thematic

[closed]

style individual widget

(5 posts)
  • Started 2 years ago by simonafilote
  • Latest reply from simonafilote
  • This topic is resolved
  1. Hi there

    I'm using Thematic and I've been trying to style the 'recent entries' widget to make it look similar to the post-it widgets from Intaglio theme. To accomplish that, Intaglio theme uses three background images to create the post-it, individually styling the widget's header, content area, and footer.

    I've managed to add the background image to the widget's header using the code below, but I'm stuck and can't manage to add the background image to the widget's content and footer area. Any idea if I can accomplish that just by using CSS?

    #secondary .widget_recent_entries .widgettitle {
    background: url("images/widget_head.gif") no-repeat scroll left center transparent;
    height: 37px;
    padding: 20px 0 0 10px;
    }

    I've tried several codes to add background to the widget's content area, but nothing seems to work.

    #secondary .widget_recent_entries .widgetcontainer{
    background: red;
    padding:0 0 0 7px;
    width:287px;
    margin-bottom: 15px;
    }

    I would appreciate a hint.
    My blog is: http://crumbs-of-life.net/

    Simona

    Posted 2 years ago #
  2. To get in the container, just using

    #secondary .widget_recent_entries {}

    should work fine.

    The footer part isn't quite as easy though, for that I would suggest using pseudo elements,

    So for the footer, it might look something like

    #secondary .widget_recent_entries {
         position: relative;
    }
    
    #secondary .widget_recent_entries:after {
         background: url("images/widget_head.gif") no-repeat scroll left center transparent;
         clear: both;
         content: "";
         height: 100px;
         left: 0pt;
         position: absolute;
         top: 100%;
         width: 300px;
    }

    Although you will most likely have to play with some paddings/heights/widths to get it to work correctly. But pseudo elements are ridiculously powerful with CSS. ;)

    Posted 2 years ago #
  3. This is great stuff and it worked! Many thanks! I can't believe I had spent so much time looking for a solution...

    Posted 2 years ago #
  4. Glad it worked, that is awesome that you were able to get the pseudo element working properly, once you get the hang of using ":before and :after", CSS gets pretty easy to do some things that previously would have taken extra markup.

    The site is looking good, nice custom post date by the way. ;)

    Posted 2 years ago #
  5. Thanks for the compliment, Scott. I just noticed you've recently talked about custom post dates on your blog as well :-)

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.