Home Forums Archived Forums Weaver II Theme Weaver II Pro center wrapper with ad in inject_prewrapper

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #18235
    Wasserwerk
    Participant

    Hello,
    we have a div “mysides” in the inject_prewrapper for the banner 300×600,  style: max-width: 300px; position: absolute;
    wrapper-style: margin-right: 300px;   the result looks like this:http://finanzmarktwelt.de/

    How can I achieve that the complete content is centered automatically ? so that it looks like this:

    #24449
    scrambler
    Moderator

    That becomes a bit more complicated mostly because of the box shadow.

    As far as positioning, the way to do that is to have the side box be inside the wrapper. You do that by:

    Adding 300px to your theme width.

    Change the margin right  rule in the wrapper BG CSS+ box to
    {padding-right:300px;position:relative;}

    Put the box content in Advanced Options > HTML Insertion > Pre Header code box Instead of the pre wrapper.

    Put the rule below in the Pre header code box BG CSS+ box
    {position:absolute;right:0px;width:300px;}

    Of course this means you must set the wrapper BG to transparent, and the trick will become your box shadow.

    It took me a while, but the only way I can get the box shadow effect in that configuration if with two png images (one for the left and one for the right), and using custom CSS to add these before and after each section with the wrapper (wrap-header, main, colophon).

    Create two semi transparent shade images that are 60px x 60px saved in png format (ie: shade-left  and shade-right)

    The add the rules below in Advanced options > Head Section > Custom CSS rule box

    #wrap-header {position:relative;}
    #wrap-header:before {content:””;position:absolute;height:100%;width:60px;right:100%;top:0px;background-image:url(shade-left-url);}
    #wrap-header:after {content:””;position:absolute;height:100%;width:60px;left:100%;top:0px;background-image:url(shade-right-url);}

    #main {position:relative;}
    #main:before {content:””;position:absolute;height:100%;width:60px;right:100%;top:0px;background-image:url(shade-left-url);}
    #main:after {content:””;position:absolute;height:100%;width:60px;left:100%;top:0px;background-image:url(shade-right-url);}

    #colophon {position:relative;}
    #colophon:before {content:””;position:absolute;height:100%;width:60px;right:100%;top:0px;background-image:url(shade-left-url);}
    #colophon:after {content:””;position:absolute;height:100%;width:60px;left:100%;top:0px;background-image:url(shade-right-url);}

    there will probably be some tweaking of the space between section but we can do that once in place

    #24450
    Wasserwerk
    Participant

    Yes, it seems complicated, so I am trying first another way with java-script:
    Putting the script below in the “Post-Footer” the screenwidth is shown (just for testing) in <p id=”screenwidth”></p> correctly, but the margin is not applying to the div’s.
    In a test page using dummy div’s the script works fine calculating the marginRight, but live-online not.

    <p id=”screenwidth”></p>
    <script>
    document.addEventListener(“DOMContentLoaded”, function () {
    var x = screen.width, w = 1300, margin;
    document.getElementById(“screenwidth”).innerHTML = x;

    if(x > w) {
    margin = x – w;
    document.getElementById(“SkyFMW”).style.marginRight = margin;
    document.getElementById(“wrapper”).style.marginRight = margin + 300;
    }
    } , false);
    </script>

    How can I change CSS style in Weaver using java-script ?
    I added already “DOMContentLoaded” because I thought, that the script should be fired after CSS is loaded, but not working.

    If there is no way for javascript, I have to try your version creating images……

    #24451
    Wasserwerk
    Participant

    another try which works manually changing the style in element-execution-mode of the browser

    but how can I apply it using java-script ?

    #24452
    scrambler
    Moderator

    The method I gave is not THAT complicated, and definitely less than JavaScript (which this forum is not a good place to debug by the way 🙂 )…

    I would say give it a shot first 🙂

    #24453
    scrambler
    Moderator

    To update my instruction about the relocation, below is the method using your @media rule

    1) change

    @media (min-width:960px) {
    #wrapper {margin-right:300px; padding-right:0px;}
    .mysides {max-width:300px; position:absolute; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
    background: -webkit-linear-gradient(left, #D7FFF0, #B3C4F0, #B3C4F0, #B3C4F0, #D7FFF0); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, #D7FFF0, B3C4F0, #B3C4F0, #B3C4F0, #D7FFF0); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, #D7FFF0, B3C4F0, #B3C4F0, #B3C4F0, #D7FFF0); /* For Fx 3.6 to 15 */
    background: linear-gradient(to right, #D7FFF0, B3C4F0, #B3C4F0, #B3C4F0, #D7FFF0); /* Standard syntax (must be last) */
       }

    To

    @media (min-width:960px) {
    #wrapper {padding-right:300px; position:relative;}
    .mysides {max-width:300px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
    background: -webkit-linear-gradient(left, #D7FFF0, #B3C4F0, #B3C4F0, #B3C4F0, #D7FFF0); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, #D7FFF0, B3C4F0, #B3C4F0, #B3C4F0, #D7FFF0); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, #D7FFF0, B3C4F0, #B3C4F0, #B3C4F0, #D7FFF0); /* For Fx 3.6 to 15 */
    background: linear-gradient(to right, #D7FFF0, B3C4F0, #B3C4F0, #B3C4F0, #D7FFF0); /* Standard syntax (must be last) */
       }

    2) Put the mysides div in Advanced Options > HTML Insertion > Pre Header code box Instead of the pre wrapper.

    Put the rule below in the Pre header code box BG CSS+ box
    {position:absolute;right:0px;width:300px;}

    #24454
    Wasserwerk
    Participant

    ok, I have done that now 🙂
    but the area below the Ad on the right site looks not good,
    I will go on trying .

    #24455
    Wasserwerk
    Participant

    have to change this back:

    did not found a nice solution until now.

    #24456
    scrambler
    Moderator
    You need to read my posts 🙂
    I told you you would need to set the wrapper background to transparent, remove the box show on the wrapper, and create a shadow using an image and the CSS I gave you before.

    From previous post:

    Of course this means you must set the wrapper BG to transparent, and the trick will become your box shadow.

    It took me a while, but the only way I can get the box shadow effect in that configuration if with two png images (one for the left and one for the right), and using custom CSS to add these before and after each section with the wrapper (wrap-header, main, colophon).

    Create two semi transparent shade images that are 60px x 60px saved in png format (ie: shade-left  and shade-right)

    The add the rules below in Advanced options > Head Section > Custom CSS rule box

    #wrap-header {position:relative;}
    #wrap-header:before {content:””;position:absolute;height:100%;width:60px;right:100%;top:0px;background-image:url(shade-left-url);}
    #wrap-header:after {content:””;position:absolute;height:100%;width:60px;left:100%;top:0px;background-image:url(shade-right-url);}

    #main {position:relative;}
    #main:before {content:””;position:absolute;height:100%;width:60px;right:100%;top:0px;background-image:url(shade-left-url);}
    #main:after {content:””;position:absolute;height:100%;width:60px;left:100%;top:0px;background-image:url(shade-right-url);}

    #colophon {position:relative;}
    #colophon:before {content:””;position:absolute;height:100%;width:60px;right:100%;top:0px;background-image:url(shade-left-url);}
    #colophon:after {content:””;position:absolute;height:100%;width:60px;left:100%;top:0px;background-image:url(shade-right-url);}

    there will probably be some tweaking of the space between section but we can do that once in place

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘ Weaver II Pro’ is closed to new topics and replies.