Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   [SOLVED] Add top and bottom image for widget (http://forum.bytesforall.com/showthread.php?t=935)

conon Mar 24, 2009 09:30 AM

[SOLVED] Add top and bottom image for widget
 
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

Flynn Mar 24, 2009 01:46 PM

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

HTML Code:

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
HTML Code:

margin: 0 0 15px 0;
to
HTML Code:

margin: 0;
and upload your top.png and bottom.png to /wp-content/themes/atahualpa/images/...

conon Mar 25, 2009 05:03 AM

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"

Flynn Mar 25, 2009 10:19 AM

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/.....

conon Mar 25, 2009 10:27 AM

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

Flynn Mar 25, 2009 10:45 AM

The post container is in index.php and starts with

HTML Code:

        <?php // Post Container
and ends with

HTML Code:

        </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

HTML Code:

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

....

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

CSS Insert

HTML Code:

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



All times are GMT -6. The time now is 05:56 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.