-
Posts
-
Hi rwwood!
can you provide us a link to your site showing the elements in question please? we need to be able to inspect the elements.
Cheers!
AndyHi,
Please try the following in Quick CSS under Enfold–>General Styling:
.sidebar { background-image: url('http://www.richardwwood.com/wp-content/uploads/2016/04/woodshaving.png'); background-repeat: no-repeat; }Replace the image URL with the image you would like to display.
Thanks,
RikardI’ve investigated a couple of ways to do this. What I want is an image to repeat the whole length of the sidebar to be the same length as the main content, but the best I’ve been able to do is to get it the same length as the sidebar content. A couple of ways don’t work well because they push the sidebar under the content when the screen is smaller. I know that’s by design and I can get rid of the bg image with css when that happens, but I would like to have the sidebar be the same length as the main content. If you have any ideas, I’d appreciate them.
Thanks.
Hey!
Please try the solution provided here: https://kriesi.at/support/topic/how-can-i-add-a-border-change-background-of-sidebar-widgets/#post-594239
Cheers!
IsmaelThat works to put an image or color behind the widgets in the sidebar, but the sidebar is still doesn’t extend the full length of the main content. Is there any way to do this using VH in the css for the sidebar without breaking something?
Hey!
Did you add the code in the functions.php file? It should apply the height of the main content to the sidebar.
Best regards,
IsmaelSorry, but it doesn’t. I did add the code to functions.php, BTW. I don’t know javascript that well, but it seems to me that
.container .av-content-small.unitsis referring to a value that is only defined as a width of 73% in the enfold/functions.php and doesn’t show up anywhere on the generated page where the sidebar is.Hi,
Please use the below CSS 100vh will make the sidebar the same height as the viewport but the page is longer than the viewport so you can position it absolutely and stretch it 100% height.
#top #main .sidebar { background: gold; min-height: 100%!important; position: absolute; right: 0; padding-right: 30px; width: 240px!important; }Should you have any issue with absolute positioned sidebar you can use a pseudo element to the sidebar “.sidebar:after” and absolute position it and add your background image to it.
Please check this link for more info on setting up your background image https://css-tricks.com/almanac/properties/b/background-image/ you can use repeat-y to verticaly repeat the image.
Best regards,
VinnieIt took me a while to get back to working on this, but the outcome is as follows: by using absolute positioning and 240px width for the sidebar, it looks fine at desktop size, but as the window is shrunk, the sidebar continues to be 240px wide and obscures part of the content until it gets down to where the menu drops to the bottom. If I use the :after pseudo element with absolute positioning and 100% min-height, the sidebar is only as long as the widgets it contains.
Any other suggestions? BTW, at this point I’m only using a color and not an image for the background, which I don’t think should make a difference.
Thanks.
Hi,
you can use media queries to have a different result for different browser sizes:
@media only screen and (max-width: 736px) { #top #main .sidebar { background: gold; min-height: 100%!important; position: absolute; right: 0; padding-right: 30px; width: 140px!important; }}Adjust it as needed.
Best regards,
AndyYeah, I did that. the problem occurs if you resize the window on a desktop computer. Normally, the content and sidebar resize proportionately, but with the above code. the sidebar stays the same width, obscures the content until the window gets down to mobile size when it then drops to the bottom of the screen.
BTW, I was using a 240 px sidebar width.
Hi,
if you want to use this code for desktop only, then you could simply change media queries to something like:
@media only screen and (min-width: 1024px) { #top #main .sidebar { background: gold; min-height: 100%!important; position: absolute; right: 0; padding-right: 30px; width: 140px!important; }}Adjust media queries as needed.
Best regards,
AndyIs there a way to implement the jQuery solution on this page? I tried putting the code at the end of the footer.php file (with changes made to “content” and “sidebar” in the variable definitions), but it doesn’t add the inline style.
Thanks.
Hi,
in this case you would need to search for a plugin where you can use your custom code. Maybe this one is for you: https://de.wordpress.org/plugins/jquery-ui-widgets/
Best regards,
Andy
- You must be logged in to reply to this topic.