Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Could you provide a link to the footer image and the webpage in which it you have the sidebar widget?
Thread Starter
sb0n
(@sb0n)
The image is here.
And I’m using the yoko theme.
Thanks !
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I can’t see a sidebar in that theme link you gave me.
Thread Starter
sb0n
(@sb0n)
Sorry it’s not visible on the worpdress preview, there is a demo with the sidebars.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Do you want the image below each widget or below the entire widget sidebar?
Thread Starter
sb0n
(@sb0n)
Below each widget (right now it is like this, but I’d like it to be like that)
Thanks ! 🙂
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
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
Thread Starter
sb0n
(@sb0n)
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 ?
Thread Starter
sb0n
(@sb0n)
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;
}
Thread Starter
sb0n
(@sb0n)
I just saw your comment alchymyth, I’m gonna try that. Thanks!
Thread Starter
sb0n
(@sb0n)
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 ?
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.
Thread Starter
sb0n
(@sb0n)
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>',
) );
}
Thread Starter
sb0n
(@sb0n)
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);
}
