Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

[SOLVED] Add top and bottom image for widget


  #1  
Old Mar 24, 2009, 10: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, 02:46 PM
Flynn's Avatar
Flynn
 
3,768 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, 06: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, 11:19 AM
Flynn's Avatar
Flynn
 
3,768 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, 11: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 11:42 AM.
  #6  
Old Mar 25, 2009, 11:45 AM
Flynn's Avatar
Flynn
 
3,768 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 11: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 06:42 PM
[SOLVED] Navigation OK at bottom but erroneous at top ardee New Versions, & Updating 2 Jul 15, 2009 04: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 07:41 AM
[SOLVED] how to add follow me on Twitter icon or twitter widget? ppat2 Sidebars & Widgets 2 May 4, 2009 01:04 AM


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


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