Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

[SOLVED] Add top and bottom image for widget


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Mar 24, 2009, 09:30 AM
conon
 
21 posts · Mar 2009
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
  #2  
Old Mar 24, 2009, 01:46 PM
Flynn's Avatar
Flynn
 
3,765 posts · Oct 2008
Munich, Germany
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/...
  #3  
Old Mar 25, 2009, 05:03 AM
conon
 
21 posts · Mar 2009
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"
  #4  
Old Mar 25, 2009, 10:19 AM
Flynn's Avatar
Flynn
 
3,765 posts · Oct 2008
Munich, Germany
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/.....
  #5  
Old Mar 25, 2009, 10:27 AM
conon
 
21 posts · Mar 2009
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

Last edited by conon; Mar 25, 2009 at 10:42 AM.
  #6  
Old Mar 25, 2009, 10:45 AM
Flynn's Avatar
Flynn
 
3,765 posts · Oct 2008
Munich, Germany
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 {
...
}

Bookmarks

Tags
image, widget

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Need to keep image as top post on front page paulae Excerpts, Read more, Pagination 9 Nov 20, 2009 10:48 AM
[SOLVED] Theme is adding a border around my AddThis widget at bottom of posts daneo Post-Kicker, -Byline & -Footer 7 Jul 15, 2009 05:42 PM
[SOLVED] Navigation OK at bottom but erroneous at top ardee New Versions, & Updating 2 Jul 15, 2009 03:03 PM
[SOLVED] How do I move next/previous navigation to the bottom of the post evany Post-Kicker, -Byline & -Footer 1 Jun 7, 2009 06:41 AM
[SOLVED] how to add follow me on Twitter icon or twitter widget? ppat2 Sidebars & Widgets 2 May 4, 2009 12:04 AM


All times are GMT -6. The time now is 07:03 AM.


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