How to add space between modules

[maff23uk]

Hi all,

I was wondering if anybody knew how to add space between modules? If you look at the modules in the left and right columns of my site template - (http://www.ei-resource.org) - the modules are almost on top of each other. I want space between the bottom of one module and top of the next to make things look clearer and less cluttered.

Thanks!

[paulhookman]

find the module you want to leave a few lines under for example mod_mainmenu.php script. If you open that with a text editor you will see where it has some html code to display the content i.e.

if ( $spacer_end ) {
echo '<span class="'. $menuclass .'"> '. $spacer_end .' </span>';
}

echo '</td>';
echo '</tr>';
echo '</table>';

when you see the end of the html code, try adding some spacers
<p> for a large space
<br> for a small space

Just save your original so you can go back if you err.
good luck:)

[maff23uk]

Hi Paul,

May take some times as there are a lot of modules but sounds like the logical way to do it!

Thanks

[sawalsh07]

This can definitely be done much more easily by editing your CSS!

First, figure out what 'style' your module uses. Go to the index.php file for your template and find the code that calls the module position. Example:

Code: Select all

div class="left-nav"><jdoc:include type="modules" name="left" style="table" /></div>

In this case the style is 'TABLE'. Find in your CSS file(s) where to make edits. For table style menus, look for CSS entry 'table.moduletable', for style 'XHTML' it's 'div.moduletable', and for 'rounded' it's 'div.module'.

Add something like 'margin-bottom: 20px;' under the correct CSS entry. My CSS:

Code: Select all

table.moduletable {
	border: thin groove #999;
	margin-bottom: 20px;
}

[ezgman]

With a lot of searching I found a way to + or - the white space between modules using the template.css file. This works with the rocketheme templates...

It's call: --- .rt-shadowbar {height: 18px;} --- All you have to do is change the PX size to your liking...


hope this helps...

[queenLateepha]

This can definitely be done much more easily by editing your CSS!

First, figure out what 'style' your module uses. Go to the index.php file for your template and find the code that calls the module position. Example:

Code: Select all

div class="left-nav"><jdoc:include type="modules" name="left" style="table" /></div>

In this case the style is 'TABLE'. Find in your CSS file(s) where to make edits. For table style menus, look for CSS entry 'table.moduletable', for style 'XHTML' it's 'div.moduletable', and for 'rounded' it's 'div.module'.

Add something like 'margin-bottom: 20px;' under the correct CSS entry. My CSS:

Code: Select all

table.moduletable {
	border: thin groove #999;
	margin-bottom: 20px;
}

Works fine...thanx loads

[regvg]

to add vertical space between blog posts:
in template protostar > css > template.css,
lookup item ".page-header"
+ add "padding-top: 40px;" or whatever ..px

[leolam]

How somebody still 'dares' to use Joomla 1.x for it's online presence is a miracle for me

Leo