Menu icon Foundation
Help with sidebars

Hi,

I'm trying to reform my theme www.ruk-sa.com and use the Foundation framework. I'm done with everything basically and it looks nice on mobiles, except the 2 right sidebars. I don't know how to reform them using Foundation I'm having a lot of problems with margins and text wraps and background. The main content is divided as:

the two column divs are for the sidebars.

Index:

<?php get_header(); ?>
<div class="row">
<div class="twelve columns">
<div class="row">
    <div class="eight columns">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
	</div>
	
		<?php get_sidebar(); ?>
		<?php get_sidebar(2); ?>
	
</div>
</div>
</div>


<div id="delimiter">
</div>
<?php get_footer(); ?>
            

         

<div class="two columns">
    	
		<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(__('Left Sidebar','tutorial_theme')) ) : else : echo "Nothing in text box"; endif;?>
	
</div>

Sidebar2:

<div class="two columns">
    
			<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(__('Right Sidebar','tutorial_theme')) ) : else : echo "Nothing in text box"; endif;?>
	
</div>
            

         

sidebargridlayout

Hi,

I'm trying to reform my theme www.ruk-sa.com and use the Foundation framework. I'm done with everything basically and it looks nice on mobiles, except the 2 right sidebars. I don't know how to reform them using Foundation I'm having a lot of problems with margins and text wraps and background. The main content is divided as:

the two column divs are for the sidebars.

Index:

<?php get_header(); ?>
<div class="row">
<div class="twelve columns">
<div class="row">
    <div class="eight columns">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
	</div>
	
		<?php get_sidebar(); ?>
		<?php get_sidebar(2); ?>
	
</div>
</div>
</div>


<div id="delimiter">
</div>
<?php get_footer(); ?>
            

         

<div class="two columns">
    	
		<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(__('Left Sidebar','tutorial_theme')) ) : else : echo "Nothing in text box"; endif;?>
	
</div>

Sidebar2:

<div class="two columns">
    
			<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(__('Right Sidebar','tutorial_theme')) ) : else : echo "Nothing in text box"; endif;?>
	
</div>
            

         
Rafi Benkual over 5 years ago

What kind of mobile layout are you trying to make?

Just one column stacked or small-6 small-6?

Musab Alghzawi over 5 years ago

Hi Rafi,

Just one column stacked.

.widget h2{font-size:1.5em;font-weight:bold;text-transform:uppercase;color:#0090A3;line-height:1.2em;padding:0px 0px 9px 0px;background: url(images/line.gif) repeat-x 0 bottom;text-align:left;}

.textwidget{color:#211e1b;font-size:1.2em;line-height:1.3em;padding:0px 20px 0px 0px;}
.textwidget a{color:#0090A3;}

#sidebackground{background-image: url('images/123.png');}

Thats CSS seems to be the closest look to me

Musab Alghzawi over 5 years ago

Am I stuck with this layout: 8 columns - 2 columns - 2 columns ?

I wanted the sidebars to be 3 columns instead of 2 , but I don't want 8 columns to be 6 columns it's too small.