Sticky Footer Php Help

Discussion in 'Web Design' started by jodybethw, Jan 3, 2012.

to remove all ads.
  1. jodybethw

    jodybethw New Member

    Messages:
    4
    I know CSS well enough but not Php. I'm using this tutorial to make my footer stick to the bottom of my page, but can't figure out what the Php file needs to look like. Php and applicable CSS are pasted below as the site is currently hosted on a local machine. Many, many thanks to anyone who can help!

    Here is my footer.php file:

    PHP:
    <?php global $woo_options?>
        <?php
            $total 
    $woo_options['woo_footer_sidebars']; if ( ! isset( $total ) ) { $total 4; }
            if ( ( 
    woo_active_sidebar'footer-1' ) ||
                   
    woo_active_sidebar'footer-2' ) ||
                   
    woo_active_sidebar'footer-3' ) ||
                   
    woo_active_sidebar'footer-4' ) ) && $total ) {

          
    ?>

        <div id="footer-widgets">
            <div class="col-full col-<?php echo $total?>">

            <?php $i 0; while ( $i $total ) { $i++; ?>
                <?php if ( woo_active_sidebar'footer-' $i ) ) { ?>

            <div class="block footer-widget-<?php echo $i?>">
                <?php woo_sidebar'footer-' $i ); ?>
            </div>

                <?php ?>
            <?php ?>

            <div class="fix"></div>
            </div>
        </div><!-- /#footer-widgets  -->
        <?php ?>

        <div id="footer">
            <div class="col-full">

            <div id="copyright" class="col-left">
            <?php if( isset( $woo_options['woo_footer_left'] ) && $woo_options['woo_footer_left'] == 'true' ) {

                    echo 
    stripslashes$woo_options['woo_footer_left_text'] );

            } else { 
    ?>
                <p><?php bloginfo(); ?> &copy; <?php echo date'Y' ); ?><?php _e'All Rights Reserved.''woothemes' ); ?></p>
            <?php ?>
            </div>

            <div id="credit" class="col-right">
            <?php if( isset( $woo_options['woo_footer_right'] ) && $woo_options['woo_footer_right'] == 'true' ) {

                echo 
    stripslashes$woo_options['woo_footer_right_text'] );

            } else { 
    ?>
                





            <?php ?>
            </div></div>
        </div><!-- /#footer  -->
    </div><!-- /#wrapper -->
    <?php wp_footer(); ?>
    <?php woo_foot
    (); ?>
    </body>
    </html>
    And the related CSS:

    Code:
    /*-------------------------------------------------------------------------------------------*/
    /* RESET - http://meyerweb.com/eric/tools/css/reset/ | v1.0 | 20080212 */
    /*-------------------------------------------------------------------------------------------*/
    
    body,html{height:100%;}
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,acronym,address,big,cite,c
    
    ode,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul
    
    ,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-
    
    size:100%;vertical-align:top;background:transparent;margin:0;padding:0;}
    body{line-height:1;}
    ol,ul{list-style:none;}
    blockquote,q{quotes:none;}
    blockquote:before,blockquote:after,q:before,q:after{content:none;}
    :focus{outline:0;}
    del{text-decoration:line-through;}
    table{border-collapse:collapse;border-spacing:0;}
    
    /* Floating & Alignment  */
    .fl{float:left;}
    .fr{float:right;}
    .ac{text-align:center;}
    .ar{text-align:right;}
    
    /* Clear Floats  */
    .col-full:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
    .fix{clear:both;height:1px;overflow:hidden;margin:-1px 0 0;}
    html body * span.clear,html body * div.clear,html body * li.clear,html body * dd.clear
    
    {background:none;border:0;clear:both;display:block;float:none;font-size:0;list-
    
    style:none;overflow:hidden;visibility:hidden;width:0;height:0;margin:0;padding:0;}
    
    /*-------------------------------------------------------------------------------------------*/
    /* 1. SETUP */
    /*-------------------------------------------------------------------------------------------*/
    
    /* 1.1 Defaults */
    
    body { font: 12px/1.5em sans-serif; color: #444; background-color: #FFFFFF; background-image: url
    
    (images/bg-body-tile.png); background-repeat: repeat; background-position: left top; }
    
    h1, h2, h3, h4, h5, h6  { margin: 0; font-family: 'Old Standard TT', arial, sans-serif; color: #222; 
    
    font-weight:normal; }
    h1  {font-size: 2em } h2  {font-size: 1.8em;} h3  {font-size: 1.6em;} h4  {font-size: 1.2em;} h5  
    
    {font-size: 1em;} h6  {font-size: 0.8em;}
    
    
    @font-face {
        font-family: 'EuphorigenicRegular';
        src: url('euphorig-webfont.eot');
        src: url
    
    ('euphorig-webfont.eot?#iefix') format('embedded-opentype'),
             url('euphorig-webfont.woff') 
    
    format('woff'),
             url('euphorig-webfont.ttf') format('truetype'),
             url('euphorig-
    
    webfont.svg#EuphorigenicRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    
    
    p {margin: 0; }
    
    hr { background-color: #e6e6e6;	border:0; height: 1px; margin-bottom: 20px; }
    
    input, textarea { padding: 5px; border-color: #CCCCCC #EFEFEF #EFEFEF #CCCCCC; border-width:1px; 
    
    border-style:solid; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius:3px; color: 
    
    #777; }
    
    /* 1.2 Hyperlinks */
    
    a { color: #C1321D; text-decoration:none;}
    a:hover { color: #C1321D; text-decoration:none;}
    
    h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited,
    h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited  { text-decoration: none; }
    h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover  {text-decoration: none;}
    
    
    /*-------------------------------------------------------------------------------------------*/
    /* 2. SITE STRUCTURE & APPEARANCE */
    /*-------------------------------------------------------------------------------------------*/
    
    /* 2.1 Containers & Columns */
    #wrapper  {overflow:auto; padding-bottom: 150px; min-height: 100%; height: auto; height: 100%; margin: 
    
    0 auto -4em; background: transparent url(images/wrapper-bg-colourstrip.jpg) repeat-x left top; 
    
    padding-top: 5px; } /* Top padding is the height of the colour strip image. */
    
    #main{width:900px; min-height: 100%; }
    #main.fullwidth, .layout-full #main, .col-full {width: 900px; margin:0 auto; }
    
    #sidebar{width:250px;}
    #sidebar .secondary { width:140px; } 
    
    .entry img { max-width:565px; }
    .layout-full .entry img { max-width:890px; }
    
    .col-left { float: left; }
    .col-right { float: right; }
    
    .two-col-right #main { float:right; }
    .two-col-right #sidebar { float:left; }
    
    /* 2.6 Footer */
    #footer{position: relative; margin-top: -150px; height: 150px; clear: both; padding: 30px 0 20px 0; 
    
    background: url(images/bg-minifeatures.png) repeat top; color:#999; }
    #footer p {}
    #footer a { color: #ffffff; }
    #footer #credit img{vertical-align:middle;}
    #footer #credit span{display:none;}
    
    
     
  2. conor

    conor New Member

    Messages:
    348
    PHP does not really interact with CSS. What's happening in the link you gave is the html and css of the template is being changed in order to create a sticky footer. You can do the same with this code though it wont be along the exact same lines as the tutorial - it's kind of specific to one theme and also to an old version of wordpress.

    Steps to create sticky footer:
    1 . Create backup of file, remove all php in the non-backed up version. This will help give you a better idea of whats going on since you admit your not good at PHP.
    2. See CSS position fixed for creating the sticky footer. You might need to change the HTML around a bit to achieve the look you want. In the link you gave he removed the footer from the wrapper div - that would make it span the width of the page i think, you can do that if thats the effect you want.
    3. Once you have a working footer that you like, re-add the PHP from the backup

    Let me know if you have any questions
     
  3. conor

    conor New Member

    Messages:
    348
  4. jodybethw

    jodybethw New Member

    Messages:
    4
    Conor, thanks for your help!!!
     
    Last edited: Jan 4, 2012

Share This Page