style individual widget « ThemeShaper Forums

ThemeShaper Forums » Thematic

[closed]

style individual widget

(5 posts)

Started 1 year ago by simonafilote
Latest reply from simonafilote
This topic is resolved

Tags:

simonafilote
Member
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 1 year ago #
ScottNix
Member
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 1 year ago #
simonafilote
Member

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

Posted 1 year ago #
ScottNix
Member

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 1 year ago #
simonafilote
Member

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

Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.