http://themeshaper.com/forums/ Help In Shaping WordPress Themes en Sun, 19 May 2013 15:18:58 +0000 http://themeshaper.com/forums/topic/style-individual-widget#post-24173 Tue, 06 Dec 2011 17:25:42 +0000 simonafilote 24173@http://themeshaper.com/forums/ <p>Thanks for the compliment, Scott. I just noticed you've recently talked about custom post dates on your blog as well :-) </p> http://themeshaper.com/forums/topic/style-individual-widget#post-24135 Mon, 05 Dec 2011 22:03:53 +0000 ScottNix 24135@http://themeshaper.com/forums/ <p>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.</p> <p>The site is looking good, nice custom post date by the way. ;) </p> http://themeshaper.com/forums/topic/style-individual-widget#post-24134 Mon, 05 Dec 2011 20:47:24 +0000 simonafilote 24134@http://themeshaper.com/forums/ <p>This is great stuff and it worked! Many thanks! I can't believe I had spent so much time looking for a solution... </p> http://themeshaper.com/forums/topic/style-individual-widget#post-24128 Mon, 05 Dec 2011 17:58:50 +0000 ScottNix 24128@http://themeshaper.com/forums/ <p>To get in the container, just using </p> <pre><code>#secondary .widget_recent_entries {}</code></pre> <p>should work fine.</p> <p>The footer part isn't quite as easy though, for that I would suggest using <a href="http://css-tricks.com/9516-pseudo-element-roundup/">pseudo elements</a>,</p> <p>So for the footer, it might look something like</p> <pre><code>#secondary .widget_recent_entries { position: relative; } #secondary .widget_recent_entries:after { background: url(&quot;images/widget_head.gif&quot;) no-repeat scroll left center transparent; clear: both; content: &quot;&quot;; height: 100px; left: 0pt; position: absolute; top: 100%; width: 300px; }</code></pre> <p>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. ;) </p> http://themeshaper.com/forums/topic/style-individual-widget#post-24119 Mon, 05 Dec 2011 14:52:57 +0000 simonafilote 24119@http://themeshaper.com/forums/ <p>Hi there</p> <p>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.</p> <p>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?</p> <pre><code>#secondary .widget_recent_entries .widgettitle { background: url(&quot;images/widget_head.gif&quot;) no-repeat scroll left center transparent; height: 37px; padding: 20px 0 0 10px; }</code></pre> <p>I've tried several codes to add background to the widget's content area, but nothing seems to work. </p> <pre><code>#secondary .widget_recent_entries .widgetcontainer{ background: red; padding:0 0 0 7px; width:287px; margin-bottom: 15px; }</code></pre> <p>I would appreciate a hint.<br /> My blog is: <a href="http://crumbs-of-life.net/" rel="nofollow">http://crumbs-of-life.net/</a></p> <p>Simona </p>