Skeleton's base grid and therefore TopHit's base grid is a variation of the 960 grid system. The syntax is simple and it's effective cross browser.
Regarding the footer of TopHit theme (sites/all/theme/tophit/page.tpl.php), it already consists of 3 columns with the same classes "one-third column".
<!-- #footer -->
<div id="footer">
<div class="container">
<!-- #footer-inner -->
<div id="footer-inner">
<div class="one-third column">
<!-- #footer-first -->
<?php if ($page['footer_first']):?>
<div id="footer-first" class="footer-area mt-column-fix">
<?php print render($page['footer_first']); ?>
</div>
<?php endif; ?>
<!-- EOF: #footer-first -->
</div>
<div class="one-third column">
<!-- #footer-second -->
<?php if ($page['footer_second']):?>
<div id="footer-second" class="footer-area mt-column-fix">
<?php print render($page['footer_second']); ?>
</div>
<?php endif; ?>
<!-- EOF: #footer-second -->
</div>
<div class="one-third column">
<!-- #footer-third -->
<?php if ($page['footer_third']):?>
<div id="footer-third" class="footer-area mt-column-fix">
<?php print render($page['footer_third']); ?>
</div>
<?php endif; ?>
<!-- EOF: #footer-third -->
</div>
</div><!-- EOF: #footer-inner -->
</div>
</div><!-- EOF: #footer -->In order to have 5 columns, you should just change the class one-third to one-fifth (one-fifth column does not supported by default - see bellow the corresponding section). You can see bellow the final code:
<!-- #footer -->
<div id="footer">
<div class="container">
<!-- #footer-inner -->
<div id="footer-inner">
<div class="one-fifth column">
<!-- #footer-first -->
<?php if ($page['footer_first']):?>
<div id="footer-first" class="footer-area mt-column-fix">
<?php print render($page['footer_first']); ?>
</div>
<?php endif; ?>
<!-- EOF: #footer-first -->
</div>
<div class="one-fifth column">
<!-- #footer-second -->
<?php if ($page['footer_second']):?>
<div id="footer-second" class="footer-area mt-column-fix">
<?php print render($page['footer_second']); ?>
</div>
<?php endif; ?>
<!-- EOF: #footer-second -->
</div>
<div class="one-fifth column">
<!-- #footer-third -->
<?php if ($page['footer_third']):?>
<div id="footer-third" class="footer-area mt-column-fix">
<?php print render($page['footer_third']); ?>
</div>
<?php endif; ?>
<!-- EOF: #footer-third -->
</div>
<div class="one-fifth column">
<!-- #footer-fourth -->
<?php if ($page['footer_fourth']):?>
<div id="footer-fourth" class="footer-area mt-column-fix">
<?php print render($page['footer_fourth']); ?>
</div>
<?php endif; ?>
<!-- EOF: #footer-fourth -->
</div>
<div class="one-fifth column">
<!-- #footer-fifth -->
<?php if ($page['footer_fifth']):?>
<div id="footer-fifth" class="footer-area mt-column-fix">
<?php print render($page['footer_fifth']); ?>
</div>
<?php endif; ?>
<!-- EOF: #footer-fifth -->
</div>
</div><!-- EOF: #footer-inner -->
</div>
</div><!-- EOF: #footer -->You will notice from the above code that you should add two extra theme regions "footer_fourth" and "footer_fifth". The regions should be defined in your tophit.info file (sites/all/themes/tophit/tophit.info). Finally, your tophit.info file should have the following regions:
regions[header_top] = Header top
regions[header] = Header
regions[header_right] = Header right
regions[navigation] = Navigation
regions[banner] = Banner
regions[highlighted] = Highlighted
regions[promoted] = Promoted area
regions[custom_front_area] = Custom front area
regions[content] = Content
regions[sidebar_first] = First sidebar
regions[footer_first] = Footer first
regions[footer_second] = Footer second
regions[footer_third] = Footer third
regions[footer_fourth] = Footer fourth
regions[footer_fifth] = Footer fifth
regions[footer] = Footer
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottomone-fifth, two-fifths, three-fifths, four-fifths column support
skeleton.css file does not support by default one-fifth, two-fifths, three-fifths, four-fifths columns. In any case you can find at the following GitHub repo a cloned V1.2 skeleton.css with one-fifth, two-fifths, three-fifths, four-fifths column support. Replace your existing skeleton.css (sites/all/themes/tophit/skeleton.css) file with this one https://github.com/gtsopour/Skeleton/blob/master/stylesheets/skeleton.css.Regarding the one-fourth column, Skeleton is a 16 column grid (1/4 of 16), so just use for example:
<div class="row">
<div class="four columns"></div>
<div class="four columns"></div>
<div class="four columns"></div>
<div class="four columns"></div>
</div> Clear all cached data
Finally clear all cached data. This step is important in order to force your template to be informed for the changes you have made in the template files. To do this go to Administer » Site configuration » Performance » Clear cached data.In case this article leaves any of your questions or concerns unanswered, please feel welcome to email us or post a public question.
More than (just) Themes
http://www.morethanthemes.com/
