Home>Support>Moving background
  1. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Hi Serwo

    For the home page only, with Sticky Menu turned on in Theme Settings, you can try the following under Appearance > Custom CSS:

    /* Vantage Logo in Menu Transparent Menu BG */
    
    .home nav:first-of-type { display: none; }
    
    .home .main-navigation.sticky[style] { width: 100% !important; }
    
    .home .main-navigation, #search-icon #search-icon-icon {
    	background: rgba(255, 255, 255, 0.5);
    	box-shadow: none;
    }
    
    .home #search-icon #search-icon-icon {
    	background: none;
    	box-shadow: none;
    }
    
  2. 9 years, 7 months ago Serwo Schamutzki

    Ok, the transparent menu is working perfectly.
    but how does that work whit the background image. I use the meta slider at Page Metaslider for the Backgrundpicture.

  3. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Can you perhaps send through a link so we can see it active?

  4. 9 years, 7 months ago Serwo Schamutzki

    http://www.filmgebung.de

  5. 9 years, 7 months ago Serwo Schamutzki

    the last update give the menu text 2 different colors. Why?

  6. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Your menu color is being set in the RGBA: 255, 255, 255 is white and 0.5 is the opacity. Adjust as required. If you leave your menu like this you’ll need to go into Appearance > Customize and set your menu colors, right now links are set to white, you’ll need to change them in the Customizer.

    I’m not quite following your question about Meta Slider, how can we help there?

  7. 9 years, 7 months ago Serwo Schamutzki

    Ok, color right.
    what i want is to set the metaslider in the background and when you scroll whit the mouse all move buy not the slider. you have it on your home page. or look at this page. https://affinity.serif.com/en-gb/about/
    you see the picture is not move but the rest off the site is moving.
    hope you now what i mean ;)

  8. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    For sure. Meta Slider to my knowledge doesn’t have a parallax option. If you find another slider to use for this we can help integrate it into the same position as Meta Slider.

  9. 9 years, 7 months ago Serwo Schamutzki

    Ah ok. so i need a slider with parallax option. I have found the DZS parallax. http://codecanyon.net/item/parallaxer-parallax-effects-on-content/9256004
    what do you use?

  10. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    DZS will hopefully have in it’s documentation an option to insert the slider directly using PHP. You’d need to use a child theme, here is one you can start with:

    https://siteorigin.com/wp-content/uploads/2015/01/vantage-child-vanilla-enqueue.zip

    You’d then need to make a copy of header.php from the parent theme and insert it into the child theme. Within header.php you’d need to change the vantage_render_slider line with the PHP call for your new slider.

  11. 9 years, 7 months ago Serwo Schamutzki

    Hey Andrew, I have the plugin and i use the child theme. but i don’t now the PHP call from the new slider.
    I have renewed my page. the problem are the frame. which are off on the home page and contact page.

  12. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    I’m not quite following the last part you said.

    If it was just for your home page, you’d copy header.php from your parent theme into the child theme.
    Edit header.php and replace the following line:

    <?php vantage_render_slider() ?>
    

    With something like this:

    <?php if(is_front_page()) echo do_shortcode( '[tile-template id="109"]' ) ?>
    

    That example is using a shortcode method. You’d need replace the shortcode there with your shortcode.

    Here are some threads where I discuss this:

    Thread: Replacing Meta Slider with Another Slider in Vantage
    Thread: Possible to Integrate LayerSlider instead of Meta Slider?

  13. 9 years, 7 months ago Serwo Schamutzki

    i don’t want any frames around the row and the pics. how can i switch that off.

  14. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Try editing the row in question, on the far right of the row, click the wrench icon, edit the row, click Layout and enter in 0 as your padding for the row.

  15. 9 years, 7 months ago Serwo Schamutzki

    i did it. but it doesn’t work.

  16. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Sorry to hear that. We’ll definitely look into what’s happening. For now, edit the row, click Attributes top right and enter a class name in the CSS class name field:

    no-row-padding
    

    Then insert the following under Appearance > Custom CSS:

    /* Page Builder */
    
    .layout-full .no-row-padding.panel-row-style {
    padding: 0;
    }
    
  17. 9 years, 7 months ago Serwo Schamutzki

    OK, we are on the right site. ;)
    with the visual editor does not change. works only with the text editor.
    I have the meta slider set to 1570px x 600px.
    now I want the contents of the row are also 1570x wide.
    so it looks like the box layout.
    2. directly under the meta slider is still a frame.
    I insert the meta slider with “display page meta slider”.
    Thank you for your Big support!

  18. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    I’m not sure why no-padding wouldn’t work with the Visual Editor. Are you applying this style to the row or the widget. The CSS I sent is specifically meant for the row level settings. Perhaps let me know if you have an example of this problem showing.

    To set the row content width to normal, edit the row, click the Layout tab on the right and change the drop down from Full Width or Full Width Stretched to Standard.

    To remove the padding under the slider please try the following under Appearance > Custom CSS:

    /* Home */
    
    .home #main {
    padding-top: 0;
    }
    
  19. 9 years, 7 months ago Serwo Schamutzki

    1. i apply the style to the row.
    i insert the same parallax effect whit the visual editor at the end of my site. so you can see the different. same setting.
    2. i set the row to standard and colored the Background in the row style > theme.
    the background color is on the whole row. i want the color for the row 1570px
    you can see it at my Page http://www.filmgebung.de
    3. removing the padding under the slider work.
    i apply the style to the row.

  20. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Hi.

    1. Sorry, can you perhaps try explaining this point to me again? Thanks

    2. Try removing the background color from the row and instead editing the widget and applying the background color there.

    3. Glad that helped.

  21. 9 years, 7 months ago Serwo Schamutzki

    you say: I’m not sure why no-padding wouldn’t work with the Visual Editor. Perhaps let me know if you have an example of this problem showing.
    i have the example of this problem on my site http://www.filmgebung.de. so you can see it. on the home-site you can see: first the meta slider (width 1570px) then you see 4 row’s. 1. is the last setting you telling me (2. Try removing the background color from the row and instead editing the widget and applying the background color there.). can you see the problem? it’s not in the same width like the meta slider and i have a frame between the widgets. 2. is the row with text edit and the parallax effect. it works, but when you change the size of the window, the image of the parallax effect are not changing there size. 3. is a text and a image. 4. is the visual editor with the parallax effect. between 3 and 4 you see the frame. this frame comes from the visual editor. all row’s are setting to standard

  22. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for trying to explain this further. Let’s try work a point at a time.

    If you insert the following under Appearance > Custom CSS you can change the site width to be the same as the slider:

    /* Container Width */
    
    body.responsive.layout-full #page-wrapper .full-container {
    max-width: 1570px;
    }
    

    Give that a try.

    Please keep in mind that Vantage is natively 1080px wide in the inner container. We can try help you change things like that but it can starts to complicate things as we proceed. For example, if you had to set your slider to 1080px wide then the width would match the rest of the site and wouldn’t need to change anything else.

    Let’s just get this width issue sorted. We can then move onto the next question.

  23. 9 years, 7 months ago Serwo Schamutzki

    ok, i think maybe i now the problem!? the theme have under design>customize 2 background colors. 1. is color>background color (this is the color that have the 1570px or your standard 1080px) and 2. is the page background color. the page builder has not the same with as the color>background color. it is smaller. i change the theme to boxed and changed the color for both backgrounds, row and container to make it visible. i want a clean design like the meta slider on the top of the page. no frames. Is this possible or do I want too much?

  24. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Hi Serwo

    Thanks for being so patient. I’m having a hard time following exactly what you’re looking to accomplish here. Do you have any experience with Photoshop or Paint etc? Is there any chance you can make a quick mockup of what your page should look like? If you can, you could upload that image to your Media Library and then post the link here.

  25. 9 years, 7 months ago Serwo Schamutzki

    hey Andrew,
    her is the link: http://filmgebung.de/wp-content/uploads/2015/02/Page-Layout.jpg
    hope it is good enough. :)

  26. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Thanks.

    This CSS will sort most of this out. Be sure it’s not mixed up with other stuff we’ve tried:

    /* New site content width */
    
    body.responsive.layout-full #page-wrapper .full-container {
    	max-width: 1000px;
    }
    
    /* Site content width for Menu and Meta Slider */
    
    body.responsive.layout-full #page-wrapper .site-navigation .full-container,
    body.responsive.layout-full #page-wrapper #main-slider .full-container {
    max-width: 1570px !important;
    }
    
    /* Home page - no top and bottom padding */
    
    .home #main {
      padding-top: 0;
      padding-bottom: 0;
    }
    
  27. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Next:

    1. Set all your row background colors from Edit Row > Theme > Background Color. Don’t set row background colors from the widget level.

    2. On each row go to Edit Row > Theme > and check the No Bottom Margin setting.

    3. On your row Parallax FX 1570px no border, the row after the video. On that row Edit Row > Attributes, enter the following in as your Row CSS Class:

    no-padding
    

    Then add the following to Appearance > Custom CSS:

    /* Row style no padding */
    
    .layout-full .no-padding.panel-row-style {
    padding-top: 0;
    padding-bottom: 0;
    }
    
  28. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    The camera and laptop which need to be absolute left and absolute right. I’m not sure. Please send me a link once those are there and I’ll try help with those.

  29. 9 years, 7 months ago Serwo Schamutzki

    ok, 1 question: must i set the theme to boxed or to full width?

  30. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Full width please.

  31. 9 years, 7 months ago Serwo Schamutzki

    ok i’ve done that. you can see result at my home page.
    the problem is that the page builder is not boxed the row’s in standard. so you don’t see the background from the site. the metaslider have a different background i can’t change.

  32. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Cool, nice one.

    Meta Slider background color can be set from Custom CSS using:

    /* Meta Slider Background Color */
    
    #main-slider {
    background: #fff;
    }
    
  33. 9 years, 7 months ago Serwo Schamutzki

    when we changed the row standard to 1570px than we have a boxed row style and i can change the other site to full with on the row style. than I have both options. boxed and full with optic.

  34. 9 years, 7 months ago Serwo Schamutzki

    Background not changing from meta slider

  35. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here
    #fff
    

    The above code is white. Your background was white. You’ll need to change #fff to the color you require.

  36. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    “when we changed the row standard to 1570px than we have a boxed row style and i can change the other site to full with on the row style. than I have both options. boxed and full with optic.”

    Sorry, I’m not following at all here. Please can you try explain again what you’re trying to achieve.

  37. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    If you want to try this using the Boxed layout you can. Give it a go.

  38. 9 years, 7 months ago Serwo Schamutzki

    hahaha, #fff is white, that right. sorry.

  39. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    No problem, sorry, I could have changed that for you, was just working quickly.

  40. 9 years, 7 months ago Serwo Schamutzki

    ok first. sorry that i’m so complicated.
    ok, tjis is stange. i set the theme to boxed. all page builder row have a frame left and right. but the one i insert 3 columns side by side it’s full boxed. but the picture is not on the left edge.

  41. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    No problem.

    It’s most likely going to be much easier to achieve your layout in Full Width mode.

    Are those rows set to Edit Row > Layout > Full Width Stretched? Are you still trying to make this look like the image you sent?

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More