• Resolved annatora

    (@annatora)


    Hi!

    I was wondering if anyone know where I can call in template, a button to the background?
    Basically I want the facebook button to always stay in the left edge of the page.

    I am working with a twenty twelve child theme.

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter annatora

    (@annatora)

    Here is the html code for the button:

    <div class=”sharing”>

    <!– facebook –>
    <img src=”<?php bloginfo(‘url’);?>/wp-content/themes/childoftwentytwelve/images//facebook.ico” width=”70″ height=”70″ alt=”Facebook” />

    </div>

    </div><!– #page –>

    Moderator bcworkz

    (@bcworkz)

    I’m not sure I understand what you mean by “sticky”, do you mean the button stays in the same position in the browser window regardless of where the user scrolls on the page? This is done with CSS, something like this in style.css:

    .sharing {
       position: fixed;
       left: 0;
    }

    The left dimension may need to be tweaked slightly and you may need a top dimension, the key is the fixed position.

    I’m also not sure where in your site you want this. All pages? Home page? Search page? Archive page? Each page has a separate template file on which to place the code, but if you want it on all pages you can place the code on header.php. Where on the file might be determined by where you want it to initially appear, but if you specify a top dimension in CSS it will not matter much as long as you do not cause a syntax error by placing the HTML in a PHP block or something. Try at the very bottom of header.php below <div id="main" class="wrapper">

    If what I’ve suggested does not quite do it for you, don’t be afraid to try different locations or CSS. Just be sure to have a copy of the original file in case something you try goes badly. As long as you do not put HTML in a PHP block, it cannot go that badly.

    Thread Starter annatora

    (@annatora)

    Thank you for your reply! Yes, this is what I wanted, a button that is stuck on the site no matter which page you are on, and where ever yo scroll. I managed this using this code:

    <div class="share_box">
        	<a href="the site" data-count="vertical" data-via="paulund_"><img src="social icon" width="60" height="60"</a><script type="text/javascript" src="social icon"></script>
    </div>
    Css: .share_box{
    	position:fixed;
    	width:50px;
    	top: 15%;
    	left:0;
    	border: none;
    	background:transparant;
    	padding: 0px;
    	-webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
    	}

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Sticky facebook button on site’ is closed to new replies.