WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] CSS Style Five footer widgets to footer twenty eleven child theme (15 posts)

  1. foodboy
    Member
    Posted 1 year ago #

    Hello

    I have a CSS issue!

    I have added a 4th and 5th widget area to the footer using a child theme of Twenty Eleven. The link below is from my previous post which shows the steps I took and solution for the issue I had which worked fine for 4 widgets across the footer but breaks for five.

    http://wordpress.org/support/topic/2011-theme-css-style-for-four-widget-areas-in-footer?replies=2#post-3468816

    Adding a 5th widget to the footer causes the widgets to stack. The .widget-area class has also been defined as 848px wide within firebug, which has not been set by me!

    one
    two
    three
    four
    five

    instead of

    one two three four five

    I am having trouble understanding how the percentage width and the multiple use of .widget-area for example work

    #supplementary.three .widget-area + .widget-area + .widget-area {
    	margin-right: 0;
    }

    As I mentioned in my previous post! I appreciate that a link to the site would be more useful, unfortunately at the moment I am working on localhost.

    I Hope someone can be kind enough to share their CSS expertise and explain how the below CSS is working? Many thanks in advance!

    CSS

    /* =Footer
    ----------------------------------------------- */
    
    #colophon {
    	clear: both;
    }
    #supplementary {
    	border-top: 1px solid #ddd;
    	padding: 1.625em 7.6%;
    	overflow: hidden;
    }
    
    /* Two Footer Widget Areas */
    #supplementary.two .widget-area {
    	float: left;
    	margin-right: 3.7%;
    	width: 48.1%;
    }
    #supplementary.two .widget-area + .widget-area {
    	margin-right: 0;
    }
    
    /* Three Footer Widget Areas */
    #supplementary.three .widget-area {
    	float: left;
    	margin-right: 3.7%;
    	width: 30.85%;
    }
    #supplementary.three .widget-area + .widget-area + .widget-area {
    	margin-right: 0;
    }

    HTML

    <div id="supplementary" class="five">
    		<div id="first" class="widget-area" role="complementary">
    		<aside id="text-11" class="widget widget_text"><h3 class="widget-title">oner</h3>
    <div class="textwidget"></div>
    		</aside>	</div><!-- #first .widget-area -->
    
    		<div id="second" class="widget-area" role="complementary">
    		<aside id="text-12" class="widget widget_text"><h3 class="widget-title">Twoer</h3>
    <div class="textwidget">
    </div>
    		</aside>	</div><!-- #second .widget-area -->
    
    		<div id="third" class="widget-area" role="complementary">
    		<aside id="text-13" class="widget widget_text"><h3 class="widget-title">three</h3>
    <div class="textwidget"></div>
    		</aside>	</div><!-- #third .widget-area -->
    
    		<div id="four" class="widget-area" role="complementary">
    		<aside id="text-10" class="widget widget_text"><h3 class="widget-title">four</h3>
    <div class="textwidget"></div>
    		</aside>	</div><!-- #four .widget-area -->
    
    		<div id="five" class="widget-area" role="complementary">
    		<aside id="text-5" class="widget widget_text"><h3 class="widget-title">again</h3>
    <div class="textwidget"></div>
    		</aside>	</div><!-- #five .widget-area -->
  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You are using invalid CSS syntax in the code you added -- just change the margins and width here:

    #supplementary.three .widget-area {
    	float: left;
    	margin-right: 3.7%;
    	width: 30.85%;
    }

    The total of them must add up to less than 100%. (Five times the width and five times the margin)

  3. foodboy
    Member
    Posted 1 year ago #

    Hi WPyogi thanks for your help again!

    I have amended the below code to 15% even 5% but the widgets still appear stacked

    #supplementary.three .widget-area {
    	float: left;
    	margin-right: 3.7%;
    	width: 15%;
    }

    amending this for 4 widgets was fine for five just stacks?

    there are comments which suggests different layouts for 1, 2 or 3 widjets
    /* Two Footer Widget Areas */

    /* Three Footer Widget Areas */

    Any ideas? Thanks again

  4. foodboy
    Member
    Posted 1 year ago #

    I have also reduced the margin-right percentage however the widgets still stack?

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Your CSS selectors;

    #supplementary.three .widget-area

    Are wrong.

    Consider using a Browser Inspector Tool to find these CSS issues out.

  6. foodboy
    Member
    Posted 1 year ago #

    Hi Andrew, the CSS selectors are default to the Twenty Eleven theme

    amending #supplementary.three .widget-area as WPyogi suggests works great for 4 widgets but not five!

    The above HTML has been copied when viewed through firebug!

    I am stumped!

    Thanks for your suggestion much appreciated

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    Foodboy, reconsider my comment.

    You originally had 3 widgets, therefore the HTML was

    <div id="supplementary" class="three">

    Now you have 5 widgets, your HTML is

    <div id="supplementary" class="five">
  8. foodboy
    Member
    Posted 1 year ago #

    Thanks Andrew, I am confused as all the widgets share the same class. For example the below PHP from side-bar.php, I have added sidebar-6 and sidebar-7

    <div id="supplementary" <?php twentyeleven_footer_sidebar_class_modified(); ?>>
    	<?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?>
    	<div id="first" class="widget-area" role="complementary">
    		<?php dynamic_sidebar( 'sidebar-3' ); ?>
    	</div><!-- #first .widget-area -->
    	<?php endif; ?>
    
    	<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
    	<div id="second" class="widget-area" role="complementary">
    		<?php dynamic_sidebar( 'sidebar-4' ); ?>
    	</div><!-- #second .widget-area -->
    	<?php endif; ?>
    
    	<?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?>
    	<div id="third" class="widget-area" role="complementary">
    		<?php dynamic_sidebar( 'sidebar-5' ); ?>
    	</div><!-- #third .widget-area -->
    	<?php endif; ?>
    
    	<?php if ( is_active_sidebar( 'sidebar-6' ) ) : ?>
    	<div id="four" class="widget-area" role="complementary">
    		<?php dynamic_sidebar( 'sidebar-6' ); ?>
    	</div><!-- #four .widget-area -->
    	<?php endif; ?>
    
    	<?php if ( is_active_sidebar( 'sidebar-7' ) ) : ?>
    	<div id="five" class="widget-area" role="complementary">
    		<?php dynamic_sidebar( 'sidebar-7' ); ?>
    	</div><!-- #five .widget-area -->
    	<?php endif; ?>
    
    </div><!-- #supplementary -->

    I have then overridden functions.php function twentyeleven_footer_sidebar_class with the following

    function twentyeleven_footer_sidebar_class_modified() {
    	$count = 0;
    
    	if ( is_active_sidebar( 'sidebar-3' ) )
    		$count++;
    
    	if ( is_active_sidebar( 'sidebar-4' ) )
    		$count++;
    
    	if ( is_active_sidebar( 'sidebar-5' ) )
    		$count++;
    
    	if ( is_active_sidebar( 'sidebar-6' ) )
    		$count++;
    
    	if ( is_active_sidebar( 'sidebar-7' ) )
    		$count++;
    	$class = '';
    
    	switch ( $count ) {
    		case '1':
    			$class = 'one';
    			break;
    		case '2':
    			$class = 'two';
    			break;
    		case '3':
    			$class = 'three';
    			break;
    		case '4':
    			$class = 'four';
    		case '5':
    			$class = 'five';
    			break;
    	}
    
    	if ( $class )
    		echo 'class="' . $class . '"';
    }

    The problem I am having is styling them side by side

    #supplementary.two
    #supplementary.three
    #supplementary.four
    #supplementary.five

  9. foodboy
    Member
    Posted 1 year ago #

    Or am I miss understanding something?

  10. alchymyth
    Forum Moderator
    Posted 1 year ago #

    do you have any styles for:

    #supplementary.four .widget-area { ... }

    and:

    #supplementary.five .widget-area { ... }
  11. foodboy
    Member
    Posted 1 year ago #

    Yes I have tried this but without success how would you suggest styling these divs? Thanks

  12. alchymyth
    Forum Moderator
    Posted 1 year ago #

    examples:

    #supplementary.four .widget-area {
    	float: left;
    	margin-right: 3.7%;
    	width: 22.18%;
    }
    #supplementary.four .widget-area + .widget-area + .widget-area + .widget-area {
    	margin-right: 0;
    }

    and

    #supplementary.five .widget-area {
    	float: left;
    	margin-right: 2.7%;
    	width: 17.78%;
    }
    #supplementary.five .widget-area + .widget-area + .widget-area + .widget-area + .widget-area {
    	margin-right: 0;
    }

    and remember to clear the browser cache; 'CTRL F5' or 'reload' or ...

  13. foodboy
    Member
    Posted 1 year ago #

    Thanks alchymyth I will give this a go and see! Much appreciated!

  14. foodboy
    Member
    Posted 1 year ago #

    Alchymyth's solution above produces the below result, which is much better , however one and two are stacked.

    one

    two

    three four five

    However still having issues getting them side by side

    below is the CSS I have so far, does anyone know where I am going wrong? I keep reducing the width for .two and .three but one and two are stacked and three four and five display correctly side by side

    /* =Footer
    ----------------------------------------------- */
    
    #colophon {
    	clear: both;
    }
    #supplementary {
    	border-top: 1px solid #ddd;
    	padding: 1.625em 7.6%;
    	overflow: hidden;
    }
    
    /* Two Footer Widget Areas */
    #supplementary.two .widget-area {
    	float: left;
    	margin-right: 3.7%;
    	width: 18.62%;
    }
    #supplementary.two .widget-area + .widget-area {
    	margin-right: 0;
    }
    
    /* Three Footer Widget Areas */
    #supplementary.three .widget-area {
    	float: left;
    	margin-right: 3.7%;
    	width: 18.62%;
    }
    #supplementary.three .widget-area + .widget-area + .widget-area {
    	margin-right: 0;
    }
    
    #supplementary.four .widget-area {
    	float: left;
    	margin-right: 3.7%;
    	width: 22.18%;
    }
    #supplementary.four .widget-area + .widget-area + .widget-area + .widget-area {
    	margin-right: 0;
    }
    and
    
    #supplementary.five .widget-area {
    	float: left;
    	margin-right: 2.7%;
    	width: 17.78%;
    }
    #supplementary.five .widget-area + .widget-area + .widget-area + .widget-area + .widget-area {
    	margin-right: 0;
    }
  15. foodboy
    Member
    Posted 1 year ago #

    I have managed to solve this issue by amending Alchymyth's solution to the following

    #supplementary.five .widget-area {
    	float: left;
    	margin-right: 2.7%;
    	width: 16.7%;
    }
    #supplementary.five .widget-area + .widget-area + .widget-area + .widget-area + .widget-area  + .widget-area{
    	margin-right: 0;
    }

    Thanks again Alchymyth for your help

Topic Closed

This topic has been closed to new replies.

About this Topic