Support » Themes and Templates » Add a footer image to my sidebar widget

  • 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 !

Viewing 15 replies - 1 through 15 (of 15 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

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

    Michael

    (@alchymyth)

    Forum Moderator

    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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.

    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 ?

    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;
    }

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

    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 ?

    Michael

    (@alchymyth)

    Forum Moderator

    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.

    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>',
    	) );
    }

    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);
    }

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Add a footer image to my sidebar widget’ is closed to new replies.