Developing (v7+)

Three part footer?

Permalink March 08, 2012 at 9:42 PM

So I'm new to this.. Be nice :)

Here's my footer file I basterdized as I wanted a fully custom footer with sitewide effects.

<?php   
      defined('C5_EXECUTE') or die(_("Access Denied.")); 
?>
<div id="templatemo_footer_wrapper">
    <div id="templatemo_footer">
      <?php  
      $a = new GlobalArea('Footer');
      $a->display();
      ?>      
   </div>
</div>
<?php  
    Loader::element('footer_required'); 
 ?>
</body>

Viewing 15 lines of 16 lines. View entire code block.

 
<?php   
      defined('C5_EXECUTE') or die(_("Access Denied.")); 
?>
<div id="templatemo_footer_wrapper">
    <div id="templatemo_footer">
      <?php  
      $a = new GlobalArea('Footer');
      $a->display();
      ?>      
   </div>
</div>
<?php  
    Loader::element('footer_required'); 
 ?>
</body>
</html>

This gives me a single cell to work with.
I thought I could just click on it and add 3 wide. but not working for me. sigh.

How can I code that too have 3 seperate blocks in the footer?

Thanks guys.

Best software in the world!

Mnkras replied on Mar 8, 2012 at 10:30 pm Permalink Reply

At this time Layouts are not supported in global areas.

stonereptiles replied on Mar 8, 2012 at 10:58 pm Permalink Reply

Ah gotcha. Okay how could i convert that to have 3 global frames in the footer beside each other? I'd think that would be possible?

I am not to good at the coding side of things though.

Thank you

MysteriousCleon replied on Mar 9, 2012 at 11:43 am Permalink Reply

Simply do that:

<div class="templatemo_footer">
      <?php  
      $a = new GlobalArea('Footer1');
      $a->display();
      ?>      
   </div>
<div class="templatemo_footer">
      <?php  
      $a = new GlobalArea('Footer2');
      $a->display();
      ?>      
   </div>
<div class="templatemo_footer">
      <?php  
      $a = new GlobalArea('Footer3');

Viewing 15 lines of 18 lines. View entire code block.

 
<div class="templatemo_footer">
      <?php  
      $a = new GlobalArea('Footer1');
      $a->display();
      ?>      
   </div>
<div class="templatemo_footer">
      <?php  
      $a = new GlobalArea('Footer2');
      $a->display();
      ?>      
   </div>
<div class="templatemo_footer">
      <?php  
      $a = new GlobalArea('Footer3');
      $a->display();
      ?>      
   </div>

And add in css proper width (1/3 of full width). For instance:

.templatemo_footer{width:220px;float:left;}

stonereptiles replied on Mar 9, 2012 at 11:53 am Permalink Reply

Thaks but that jsut stacks three of them at 100% width in white

I was using this so far

<?php   
      defined('C5_EXECUTE') or die(_("Access Denied.")); 
?>
<div id="templatemo_footer_wrapper">
   <div id="templatemo_footer">
           <div id="templatemo_footer1">
         <?php  
         $a = new GlobalArea('Footer1');
         $a->display();
         ?>      
      </div>
          <div id="templatemo_footer2">
         <?php  
         $a = new GlobalArea('Footer2');
         $a->display();

Viewing 15 lines of 29 lines. View entire code block.

 
<?php   
      defined('C5_EXECUTE') or die(_("Access Denied.")); 
?>
<div id="templatemo_footer_wrapper">
   <div id="templatemo_footer">
           <div id="templatemo_footer1">
         <?php  
         $a = new GlobalArea('Footer1');
         $a->display();
         ?>      
      </div>
          <div id="templatemo_footer2">
         <?php  
         $a = new GlobalArea('Footer2');
         $a->display();
         ?>      
      </div> 
          <div id="templatemo_footer3">
         <?php  
         $a = new GlobalArea('Footer3');
         $a->display();
         ?>      
      </div>   
      </div>
</div>
<?php  
    Loader::element('footer_required'); 
 ?>
</body>

and for CSS made this up.
[code]
#templatemo_footer_wrapper {
clear: both;
width: 100%;
background: #737855 url(images/templatemo_footer_top.png) top repeat-x;
}
#templatemo_footer {
width: 100%;
margin: 0px auto;
padding: 20px 0;
background: #737855 url(images/templatemo_footer.png) no-repeat;
}
#templatemo_footer1 {
float: left;
width: 323px;
margin: 0px auto;
padding: 20px 0;
background: #737855 url(images/templatemo_footer.png) no-repeat;
}
#templatemo_footer2 {
float: left;
width: 323px;
margin: 0px auto;
padding: 20px 0;
background: #737855 url(images/templatemo_footer.png) no-repeat;
}
#templatemo_footer3 {
float: right;
width: 323px;
margin: 0px auto;
padding: 20px 0;
background: #737855 url(images/templatemo_footer.png) no-repeat;
}
[code]

The issue I have is it is dropping them just bellow the green part giving a weird look.

See the page:http://www.themonsterkru.com/index.php?cID=1...

It seems to drop them bellow the 100% wide and leaves white on both sides.
I realize I could do all 3 blocks off one ID but I like the option of being able to modify them individually.

MysteriousCleon replied on Mar 9, 2012 at 12:16 pm Permalink Reply

Try to change this css to:

#templatemo_footer_wrapper {
clear: both;
width: 100%;
background: #737855 url(images/templatemo_footer_top.png) top repeat-x;
}
#templatemo_footer {
width: 970px;
margin: 0px auto;
padding: 20px 0;
}
#templatemo_footer1 {
float: left;
width: 323px;
padding: 20px 0;
}

Viewing 15 lines of 25 lines. View entire code block.

#templatemo_footer_wrapper {
clear: both;
width: 100%;
background: #737855 url(images/templatemo_footer_top.png) top repeat-x;
}
#templatemo_footer {
width: 970px;
margin: 0px auto;
padding: 20px 0;
}
#templatemo_footer1 {
float: left;
width: 323px;
padding: 20px 0;
}
#templatemo_footer2 {
float: left;
width: 323px;
padding: 20px 0;
}
#templatemo_footer3 {
float: right;
width: 323px;
padding: 20px 0;
}

And add

</html>

stonereptiles replied on Mar 9, 2012 at 12:21 pm Permalink Reply

Added the html. never noticed it got deleted. thanks

That makes them all white now haha. with white text. I want them within the green footer?

Simplified to this

#templatemo_footer_wrapper {
clear: both;
width: 100%;
background: #737855 url(images/templatemo_footer_top.png) top repeat-x;
}
#templatemo_footer {
width: 970px;
margin: 0px auto;
padding: 20px 0;
}
#templatemo_footer_block {
float: left;
width: 323px;
padding: 20px 0;
}

Html code is still same

<?php   
      defined('C5_EXECUTE') or die(_("Access Denied.")); 
?>
<div id="templatemo_footer_wrapper">
   <div id="templatemo_footer">
           <div id="templatemo_footer_block">
         <?php  
         $a = new GlobalArea('Footer1');
         $a->display();
         ?>      
      </div>
          <div id="templatemo_footer_block">
         <?php  
         $a = new GlobalArea('Footer2');
         $a->display();

Viewing 15 lines of 30 lines. View entire code block.

 
<?php   
      defined('C5_EXECUTE') or die(_("Access Denied.")); 
?>
<div id="templatemo_footer_wrapper">
   <div id="templatemo_footer">
           <div id="templatemo_footer_block">
         <?php  
         $a = new GlobalArea('Footer1');
         $a->display();
         ?>      
      </div>
          <div id="templatemo_footer_block">
         <?php  
         $a = new GlobalArea('Footer2');
         $a->display();
         ?>      
      </div> 
          <div id="templatemo_footer_block">
         <?php  
         $a = new GlobalArea('Footer3');
         $a->display();
         ?>      
      </div>   
      </div>
</div>
<?php  
    Loader::element('footer_required'); 
 ?>
</body>
</html>

stonereptiles replied on Mar 9, 2012 at 12:29 pm Permalink Reply

It would seem the #templatemo_footer_wrapper gives the Background color and brings it across 100%. #templatemo_footer than constrains my blocks to the 969 pixel width, and somehow centres them.. I am still unsure how the CSS drives them to the center??? It's not written in there so why would it not drop them to the left?
and than #templatemo_footer_block Sets my individual blocks sizing.

Still unsure WHY they are staying within #templatemo_footer but obviously dropping bellow #templatemo_footer_wrapper?

MysteriousCleon replied on Mar 9, 2012 at 12:38 pm Permalink Reply

margin: 0 auto; means, that top and bottom (vertical)margin is 0, and left and right (horizontal) is auto (which means here - block is centered)

stonereptiles replied on Mar 9, 2012 at 12:41 pm Permalink Reply

Oh cool okay thanks. Still new to CSS
Horribly confused why they are pushing out of the footer though :(

MysteriousCleon replied on Mar 9, 2012 at 12:42 pm Permalink Reply

And don't use three times one id (id="templatemo_footer_block") if you want one thing to be used several times in one page you have to use class (and then in css you use "." instead of "#") so class="templatemo_footer_block" is .templatemo_footer_block{something} in css

stonereptiles replied on Mar 9, 2012 at 12:57 pm Permalink Reply

thank I will fix that.

Any idea why it's pushing bellow the first footer container? on a white background?

thanks again!

MysteriousCleon replied on Mar 9, 2012 at 1:03 pm Permalink Reply

I see, that you are trying diffrent formulas - I'm sure that you'll figure it out. :)

Good luck!

stonereptiles replied on Mar 9, 2012 at 1:09 pm Permalink Reply

Not sure. I can't seem to make out why it's putting them outside. I'll keep looking though. thanks for the help so far.

Forums

Developing (v7+)

Three part footer?

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?