WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Full width footer (sort of) (7 posts)

  1. lee demain
    Member
    Posted 1 year ago #

    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

  2. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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

  3. lee demain
    Member
    Posted 1 year ago #

    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?

  4. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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?

  5. lee demain
    Member
    Posted 1 year ago #

    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

  6. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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

  7. lee demain
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags