Hi,

I'm looking for a solution for inserting a top and bottom image for my widgets. I would like to have rounded corners and maybe a widget shadow and I'm not satisfied with the border-radius function.

Take a look at the tables/widgets at http://www.lilyallenmusic.com/
Top image: http://www.lilyallenmusic.com/lily/i...ustom1/top.png
Bottom image: http://www.lilyallenmusic.com/lily/i...om1/bottom.png

Is there a way to do this? Thanks in advance and thank you for a great wp-theme.

/Sebastian

At the top of functions.php replace

PHP Code:

if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
        'name'=>'Left Sidebar',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div></div>',
        'before_title' => '<div class="widget-title"><h3>',
        'after_title' => '</h3></div><div class="widget-content">',
    ));
    register_sidebar(array(
         'name'=>'Right Sidebar',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div></div>',
        'before_title' => '<div class="widget-title"><h3>',
        'after_title' => '</h3></div><div class="widget-content">',
    )); 
} 


with

PHP Code:

if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
        'name'=>'Left Sidebar',
        'before_widget' => '<div class="top"></div><div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div></div><div class="bottom"></div>',
        'before_title' => '<div class="widget-title"><h3>',
        'after_title' => '</h3></div><div class="widget-content">',
    ));
    register_sidebar(array(
         'name'=>'Right Sidebar',
        'before_widget' => '<div class="top"></div><div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div></div><div class="bottom"></div>',
        'before_title' => '<div class="widget-title"><h3>',
        'after_title' => '</h3></div><div class="widget-content">',
    )); 
} 


Add a HTML/CSS Insert -> CSS Insert

div.top { background: transparent url(/wp-content/themes/atahualpa/images/top.png); 
display: block;
height: 6px;
margin-bottom: 0;
padding: 0;
width: 300px;
} 
div.bottom {
background: transparent url(/wp-content/themes/atahualpa/images/bottom.png);
display: block;
height: 13px;
margin-bottom: 15px; /* distance to the next widget */
padding: 0;
width: 300px;
}

At A. Theme Options -> Widgets -> Widget Container, change

margin: 0 0 15px 0;

to

margin: 0;

and upload your top.png and bottom.png to /wp-content/themes/atahualpa/images/...

Thanks! It works perfectly.

Just a correction if someone else is trying this and just copy the code.

The correct url is

"wp-content/themes/atahualpa/images/top.png"

not
"/wp-content/themes/atahualpa/images/top.png"

That sounds like your WP is in a subdirectory, i.e. yourdomain.com/blog/

In that case, the CSS above would not have worked, however your code won't work either if you're using permalinks, and you go into a deeper level page i.e. yourdomain.com/blog/category/uncategorized/. On that page, "wp-content/themes/atahualpa/" would translate to "yourdomain.com/blog/category/uncategorized/wp-content/themes/atahualpa/" (which is wrong)

I'd suggest that you use

/blog/wp-content/themes/atahualpa/.....

instead of

wp-content/themes/atahualpa/.....

Ok. Thanks for the tips.

I have tried for over an hour now to implement a top and bottom image to posts too but it seems too me it's more difficult than for the widgets.

I can't find where to put the <div class="top"> for posts. Maybe it's not just as easy as that?

Thanks in advance.

Edit: I think a more correct definition for my question is how to add a top and bottom image to a Page, not post.


Sebastian

The post container is in index.php and starts with

        <?php // Post Container

and ends with

        </div><!-- / Post -->

Put the two additional containers top and bottom below and above these. Use other class names unless you want to style them the same way as widget containers

<div class="post-top"></div>
        <?php // Post Container

....

        </div><!-- / Post -->
<div class="post-bottom"></div>

CSS Insert

div.post-top {
...
}
div.post-bottom {
...
}