WordPress.org

Support

Support » Themes and Templates » [Resolved] Full width footer (sort of)

[Resolved] Full width footer (sort of)

  • lee demain
    Member

    @lee-demain

    Afternoon

    I’m trying to make my footer the full width of the container, ie the container is 970px, BUT, I’ve applied a 10px padding to the right and left of the container, now because the footer sits within the ‘container’ it also follows the padding rule, if I was to build this myself I’d have the footer as a separate container outside the main container above, setting the width and margin 0 auto, is there a way I can do this in WP or any other way around it? if you need a visual example I can provide one

    Cheers

    Lee

Viewing 6 replies - 1 through 6 (of 6 total)
  • Michael
    Forum Moderator

    @alchymyth

    the closing of the main container and the footer code is likely in footer.php of your currently used theme.

    edit the html as you would in a static site.

    http://codex.wordpress.org/Theme_Development

    lee demain
    Member

    @lee-demain

    Thanks for the reply

    It doesn’t appear to be working? I can find the closing tag for container, if I put the footer section outside of this it still renders it inside?

    Any ideas?

    Michael
    Forum Moderator

    @alchymyth

    as this is a formatting issue, I have no ideas without seeing the problem in a live site so I can use for instance Firefox’ web developer add-on to inspect the html/css structure.

    what theme are you using?

    lee demain
    Member

    @lee-demain

    Twenty twelve.

    This is how my code is laid out…

    <?php
    
    // Exit if accessed directly
    if ( !defined('ABSPATH')) exit;
    
    /**
     * Footer Template
     *
     *
     * @file           footer.php
     * @package        Responsive
     * @author         Emil Uzelac
     * @copyright      2003 - 2013 ThemeID
     * @license        license.txt
     * @version        Release: 1.2
     * @filesource     wp-content/themes/responsive/footer.php
     * @link           http://codex.wordpress.org/Theme_Development#Footer_.28footer.php.29
     * @since          available since Release 1.0
     */
    ?>
    
        </div><!-- end of #wrapper -->
    
    </div><!-- end of #container -->
    <?php responsive_container_end(); // after container hook ?>
     <?php responsive_wrapper_end(); // after wrapper hook ?>
    
    <div id="footer" class="clearfix">
    
        <div id="footer-wrapper">
    
            <div class="grid col-940">
    
            <div class="grid col-540">
    		<?php if (has_nav_menu('footer-menu', 'responsive')) { ?>
    	        <?php wp_nav_menu(array(
    				    'container'       => '',
    					'fallback_cb'	  =>  false,
    					'menu_class'      => 'footer-menu',
    					'theme_location'  => 'footer-menu')
    					);
    				?>
             <?php } ?>
             </div><!-- end of col-540 -->
    
             <div class="grid col-380 fit">
             <?php $options = get_option('responsive_theme_options');
    
                // First let's check if any of this was set
    
                    echo '<ul class="social-icons">';
    
                    if (!empty($options['twitter_uid'])) echo '<li class="twitter-icon"><a href="' . $options['twitter_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/icons/twitter-icon.png" width="24" height="24" alt="Twitter">'
                        .'</a></li>';
    
                    if (!empty($options['facebook_uid'])) echo '<li class="facebook-icon"><a href="' . $options['facebook_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/icons/facebook-icon.png" width="24" height="24" alt="Facebook">'
                        .'</a></li>';
    
                    if (!empty($options['linkedin_uid'])) echo '<li class="linkedin-icon"><a href="' . $options['linkedin_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/icons/linkedin-icon.png" width="24" height="24" alt="LinkedIn">'
                        .'</a></li>';
    
                    if (!empty($options['youtube_uid'])) echo '<li class="youtube-icon"><a href="' . $options['youtube_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/icons/youtube-icon.png" width="24" height="24" alt="YouTube">'
                        .'</a></li>';
    
                    if (!empty($options['stumble_uid'])) echo '<li class="stumble-upon-icon"><a href="' . $options['stumble_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/icons/stumble-upon-icon.png" width="24" height="24" alt="StumbleUpon">'
                        .'</a></li>';
    
                    if (!empty($options['rss_uid'])) echo '<li class="rss-feed-icon"><a href="' . $options['rss_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/icons/rss-feed-icon.png" width="24" height="24" alt="RSS Feed">'
                        .'</a></li>';
    
                    if (!empty($options['google_plus_uid'])) echo '<li class="google-plus-icon"><a href="' . $options['google_plus_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/icons/googleplus-icon.png" width="24" height="24" alt="Google Plus">'
                        .'</a></li>';
    
                    if (!empty($options['instagram_uid'])) echo '<li class="instagram-icon"><a href="' . $options['instagram_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/icons/instagram-icon.png" width="24" height="24" alt="Instagram">'
                        .'</a></li>';
    
                    if (!empty($options['pinterest_uid'])) echo '<li class="pinterest-icon"><a href="' . $options['pinterest_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/icons/pinterest-icon.png" width="24" height="24" alt="Pinterest">'
                        .'</a></li>';
    
                    if (!empty($options['yelp_uid'])) echo '<li class="yelp-icon"><a href="' . $options['yelp_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/icons/yelp-icon.png" width="24" height="24" alt="Yelp!">'
                        .'</a></li>';
    
                    if (!empty($options['vimeo_uid'])) echo '<li class="vimeo-icon"><a href="' . $options['vimeo_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/icons/vimeo-icon.png" width="24" height="24" alt="Vimeo">'
                        .'</a></li>';
    
                    if (!empty($options['foursquare_uid'])) echo '<li class="foursquare-icon"><a href="' . $options['foursquare_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/icons/foursquare-icon.png" width="24" height="24" alt="foursquare">'
                        .'</a></li>';
    
                    echo '</ul><!-- end of .social-icons -->';
             ?>
             </div><!-- end of col-380 fit -->
    
             </div><!-- end of col-940 -->
             <?php get_sidebar('colophon'); ?>
    
            <div id="Footer">
    		<div class="block">
    			<h2>Customer Services</h2>
    			<li><a href="">My Account</a></li>
    			<li><a href="">Help</a></li>
    			<li><a href="">Returns</a></li>
    			<li><a href="">Track Order</a></li>
    		</div>
    
    		<div class="block">
    			<h2>More Information</h2>
    			<li><a href="">FAQ</a></li>
    			<li><a href="">Terms & Conditions</a></li>
    			<li><a href="">Delivery Info</a></li>
    			<li><a href="">Privacy Policy</a></li>
    		</div>
    
    		<div class="block">
    			<h2>About ITS</h2>
    			<li><a href="">Contact Us</a></li>
    			<li><a href="">About Us</a></li>
    			<li><a href="">Careers</a></li>
    		</div>
    
    		<div class="block">
    			<h2>Useful Links</h2>
    			<li><a href="">QuickShop</a></li>
    		</div>
    
    		<div class="block Last">
    			<h2>Social Community</h2>
    			<li><a href="">ITS Facebook</a></li>
    			<li><a href="">ITS Twitter</a></li>
    			<li><a href="">ITS TV</a></li>
    		</div>
    
    	<div class="Cards">
    		<p>Call Mon-Fri 8am-5.00pm, Sat 9am-1.00pm. 020 8532 5000</p>
    	</div>	
    
    	<div class="legal">
    		<p>©2012 ITS. All Rights Reserved</p>
    		<a href="/Cookie-Policy.htm" style="font-size:1em;clear:both;padding:3px 6px;display:block; text-align:center; color:#fff">This site uses cookies. For further info click here.</a>
    	</div>	
    
            </div>
    
        </div><!-- end #footer-wrapper -->
    
    </div><!-- end #footer -->
    
    <?php wp_footer(); ?>
    
    </body>
    </html>

    I’ll keep having a play with it.

    Cheers

    Lee

    Michael
    Forum Moderator

    @alchymyth

    theme is Twenty Twelve (?)
    and you are posting the code of a template of Responsive (?)

    when you edit templates in dashboard – appearance – editor, make sure to select the right theme from the dropdown at the top

    lee demain
    Member

    @lee-demain

    Sorry, the theme is a copy of the responsive theme, the right theme is selected at the top too.

    Does the html look right to you? seems OK to me in theory

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] Full width footer (sort of)’ is closed to new replies.