Full-Size Slider with Sidebar below

  • Thore

    #2244

    Hi Folks, is it possible to get the slider to the full width with the sidebar below the slider, left from the page content? Because there is so much unused space below the sidebar when its beside the slider.

    Thanks in advance for any hint

    Thore

    ice48623

    #19483

    I also want what you said, but I didn’t find a way to do it. Hope someone will help us.

    Josh

    #19484

    You would need to add something like this to your custom css:

    #sidebar1, #sidebar2 {
    margin-top: 312px;
    }
    .featured_slider {
    width: 960px;
    }
    .two-columns .featured_slider #slider_root {
    width: 930px;
    }

    Thore

    #19485

    It works with this settings (my sliders height is 250px;) but the slider content itself remains the same width. I can see a part of the following picture

    #sidebar1, #sidebar2 {
    margin-top: 350px;
    }
    .featured_slider {
    left: -270px;
    width: 960px;
    }
    .two-columns .featured_slider #slider_root {
    width: 930px;
    }

    Thank you!

    Prasanna SP

    #19486

    You should add

    .two-columns .slider_post {
    width: 900px;
    }

    to the custom css. Otherwise the content will be displayed up to 590px wide only. So add this to the custom css, and tweak the values for the perfect match.

    #sidebar1, #sidebar2 {
    margin-top: 312px;
    }
    .featured_slider {
    width: 960px;
    }
    .two-columns .featured_slider #slider_root {
    width: 930px;
    }
    .two-columns .slider_post {
    width: 900px;
    }

    Prasanna SP

    #19487

    Just created a test site to check the above code. It is working fine here – http://test.prasannasp.net

    Josh

    #19488

    Excellent work Prasanna. (Will favorite this thread to reference in the future.)

    Thore

    #19489

    Thanks a lot for this lightning fast help!!!

    Prasanna SP

    #19490

    Happy to help! 🙂

    zampai

    #19491

    Many thanks for this. It is just that I need.

    However, I have configured the slider for displaying background image.

    With the above described custom css, the slider diplays 2 images of 2 different posts at the same time. Why ?

    I have tryed to modify many css but I can not get a “nice” result.

    So which css to modifie when the slider is in “background image + abstract” config ?

    thx

    dossi

    #19492

    I inserted the code in the style.css of the child template. The result is almost correct:

    http://www.pic-upload.de/view-12007697/seite.jpg.html

    How do I get the sidebar under the slider?

    If one sets the sidebar to a certain level below the slider, then the sidebar is seemingly on all other pages at this point. This means that each side starts on the sidebar at the position where it starts on the front page. On each side, then top 350 pixels high, an empty field (where the sliderwould be). Get solved it? Sorry for the bad English – I had to use the English-German translationby Google.

    dossi

    #19493

    First problem is solved: change margin-top: XXXpx

    Second problem:

    If one sets the sidebar to a certain level below the slider, then the sidebar is seemingly on all other pages at this point. This means that each side starts on the sidebar at the position where it starts on the front page. On each side, then top 350 pixels high, an empty field (where the sliderwould be). Get solved it?

    dossi

    #19494

    Please help me! 😉

    zampai

    #19495

    Since I did not find any answer, like you, I tried this : https://forum.graphene-theme.com/feature-requests/full-width-slider-above-sidebars

    Hope it could help.

    dossi

    #19496

    Thank you! Problem is solved 🙂

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.