Adding content outside page (on background) using Twenty Eleven

  • Hi,

    I want to place a banner on the left of my site, outside the page/column of my blog.

    I thought I found a solution with this thread but when I add this code it just puts my content lower puts the new spot on top.

    Any one done this before or can point me in the right direction? TIA.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter Ilsenora

    (@ilsenora)

    forgot my site

    you can do that by adding it just under the opening <body> tag if you like

    </head>
<body class="home blog logged-in admin-bar">
<div id="floater">
<a href="https://voodoopress.com">
<img src="https://www.rvoodoo.com/empire/wp-content/uploads/2011/02/vpfloater.png" alt="VoodooPress" title="Visit VoodooPress for all Your WordPress Support!"/>
</a>
</div>

<div id="wrapper">

    Is an example from my site

    #floater {
	position: fixed;
	top: 100px;
	left: 10px;
	z-index: 999;
}

    is the associated css for the stylesheet

    This would place it 100px from the top, 10px from the left. Adjust as you see fit.

    the position:fixed causes it to remain at that spot when scrolling (check my site at rvoodoo.com, the voodoopress image on the right) if you would rather the image not stay static, but scroll with the site, omit that line

    Just delete my code and place your ad code inside of the floater div

    EDIT: Also, you say this is for a 2011 theme. If you haven’t already done so, please make a child theme to keep your edits safe

    Thread Starter Ilsenora

    (@ilsenora)

    Hi Voodoo,

    Thank you very much for your respond. The code you gave me does indeed place the content on the outside. I still have two problems that occur.

    When I ommit the fixed positon statement, the header is placed lower. I don’t know how to fix this.

    The second, when zoom is used to increase or decrease the size, the banner doesn’t adjust with it. At another site I saw that it can be done. See the banner on the right top. Is there a solution for this also?

    I did indeed use a child theme. Thanks for the tip.

    kind regards

    Thread Starter Ilsenora

    (@ilsenora)

    When I ommit the fixed positon statement, the header is placed lower. I don’t know how to fix this.

    fixed this with replacing fixed by absolute.

    Have only the second problem left

    apologies

    position:fixed should become position:absolute

    as for the banner zoom thing…. what kind of banner are you using? Simple image, or code you’ve been provided?

    btw, the actual code from that site is

    <div id="layer">
<a href="https://www.hipenhot.nl/welkom/?administer_redirect_269=https://www.qolors.nl" target="_blank"><img alt="Qolors" src="https://www.hipenhot.nl/wp-content/adds/banner_qolors.gif" title="Qolors" class="alignnone" width="468" height="60" /></a>
</div>
    #layer {
	position:absolute;
	width:468px;
	height:60px;
	z-index:2;
	margin-left:50%;
	margin-top:10px;
}

    The only differenece is assigning an image size…. so you could try that

    Thread Starter Ilsenora

    (@ilsenora)

    ok, I think I used the wrong example here because the banner in the example streches out, and now mine does also but then it disappears behind the blog.

    Want I really want is that the banner is always next to the blog, even when resizing.

    Thread Starter Ilsenora

    (@ilsenora)

    I’m just thinking out loud, forgive me if I’m speaking stupid things. Could it be possible to make it as if it was a sidebar, only it doesn’t show anything but the banner so than when the page resizes, the non visible bar is also resizing including the banner?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Adding content outside page (on background) using Twenty Eleven’ is closed to new replies.