-
AuthorPosts
-
April 15, 2016 at 4:10 pm #614949
How do I go about setting an image for the sidebar background using the boxed layout?
April 18, 2016 at 12:34 pm #616363Hi 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!
AndyApril 18, 2016 at 2:56 pm #616539Done
April 20, 2016 at 7:09 am #618016Hi,
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,
RikardApril 20, 2016 at 9:42 pm #618728I’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.
April 25, 2016 at 6:54 am #621017Hey!
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!
IsmaelApril 26, 2016 at 3:43 am #621835That 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?
April 27, 2016 at 10:27 am #622896Hey!
Did you add the code in the functions.php file? It should apply the height of the main content to the sidebar.
Best regards,
IsmaelApril 27, 2016 at 6:04 pm #623268Sorry, 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.units
is 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.May 1, 2016 at 3:56 am #625222Hi,
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,
VinnieMay 25, 2016 at 8:59 pm #638269It 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.
May 26, 2016 at 5:42 pm #638846Hi,
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,
AndyMay 26, 2016 at 7:17 pm #638899Yeah, 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.
- This reply was modified 8 years, 7 months ago by rwwood.
May 27, 2016 at 5:08 pm #639396Hi,
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,
AndyJune 15, 2016 at 2:07 pm #648596Is 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.
June 17, 2016 at 4:46 pm #649883Hi,
you can try to put your custom code into a Code Block Element.
Best regards,
AndyJune 17, 2016 at 11:56 pm #650036So, how would I use a code block element that would affect the whole site?
June 18, 2016 at 11:05 pm #650307Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.