WordPress.org

Ready to get started?Download WordPress

Forums

Add a footer image to my sidebar widget (16 posts)

  1. sb0n
    Member
    Posted 1 year ago #

    Hi there,

    I'm trying to add a footer image to my sidebar widget.
    I have no clue about how to do this, do you know a good online tutorial ?

    Thanks !

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Could you provide a link to the footer image and the webpage in which it you have the sidebar widget?

  3. sb0n
    Member
    Posted 1 year ago #

    The image is here.
    And I'm using the yoko theme.
    Thanks !

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    I can't see a sidebar in that theme link you gave me.

  5. sb0n
    Member
    Posted 1 year ago #

    Sorry it's not visible on the worpdress preview, there is a demo with the sidebars.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Do you want the image below each widget or below the entire widget sidebar?

  7. sb0n
    Member
    Posted 1 year ago #

    Below each widget (right now it is like this, but I'd like it to be like that)
    Thanks ! :)

  8. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    an addition to style.css might work:

    aside.widget{padding-bottom:45px;border-bottom:none;background:transparent url(http://samatman.net/wrk/wordpress/wp-content/themes/yoko/images/sidebar-footer.png) right bottom no-repeat;}

    you just need to make you image much wider

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    You could add the CSS;

    aside.widget {
     background: url("http://samatman.net/wrk/wordpress/wp-content/themes/yoko/images/sidebar-footer.png") no-repeat bottom;
    }

    Change the url to a relative path if you want, e.g /wp-content/themes/yoko/images/sidebar-footer.png .

    You shouldn't modify the theme's files to add this CSS.

  10. sb0n
    Member
    Posted 1 year ago #

    Actually I tried that but it's not working because when its set as a background, I lose the actual background (#777) and the position is not right.

    On another wordpress thread someone was changing the sidebar.php file and then the .css could that be the good direction to go ?

  11. sb0n
    Member
    Posted 1 year ago #

    NB : The complete aside.widget entry in the css is :

    aside.widget {
    	margin: 0 0 30px 0;
    	padding: 0 0 30px 0;
    	font-size: .8em;
    	border-bottom: 1px solid #ddd;
    	background-color: #777;
    	padding: 10px;
    	background: url("images/sidebar-footer.png") no-repeat bottom;
    }
  12. sb0n
    Member
    Posted 1 year ago #

    I just saw your comment alchymyth, I'm gonna try that. Thanks!

  13. sb0n
    Member
    Posted 1 year ago #

    So, I tried that :

    aside.widget{padding-bottom:45px;border-bottom:none;background:transparent url(http://samatman.net/wrk/wordpress/wp-content/themes/yoko/images/sidebar-footer.png) right bottom no-repeat;}

    It's working (not sure to understand why the image should be wider ?) !
    But with that method I'm losing the background color though, could I keep it and add the background image footer ?

  14. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    you won't be able to push a background image past the background color (which was not present in your example link).

    an alternative might to locate the 'register_sidebar()' code in functions.php of the theme, and add an extra span or div to the 'after_widget' parameter; then style that with your background image.

  15. sb0n
    Member
    Posted 1 year ago #

    Oh ok ! so this is the css limit then, thank you !
    I tried changing the functions.php earlier but I'm not sure how to do that from this ?

    register_sidebar( array (
    		'name' => __( 'Sidebar 2', 'yoko' ),
    		'id' => 'sidebar-2',
    		'description' => __( 'An second sidebar area', 'yoko' ),
    		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    		'after_widget' => "</aside>",
    		'before_title' => '<h3 class="widget-title">',
    		'after_title' => '</h3>',
    	) );
    }
  16. sb0n
    Member
    Posted 1 year ago #

    Hum.., I guess there is a mistake (or two..) but I don't the logic :

    Functions.php (the change is : 'after_widget' => "</aside>", "<image-footer>",) :

    register_sidebar( array (
    		'name' => __( 'Sidebar 2', 'yoko' ),
    		'id' => 'sidebar-2',
    		'description' => __( 'An second sidebar area', 'yoko' ),
    		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    		'after_widget' => "</aside>", "<image-footer>",
    		'before_title' => '<h3 class="widget-title">',
    		'after_title' => '</h3>',
    	) );
    }

    Style.css :

    aside.widget image-footer {
    background-image: url(images/sidebar-footer.png);
    }

Topic Closed

This topic has been closed to new replies.

About this Topic