Page 1 of 1

How to add space between modules

Posted: Tue Jun 30, 2009 7:19 pm
by 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!

Re: How to add space between modules

Posted: Tue Jun 30, 2009 9:39 pm
by 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:)

Re: How to add space between modules

Posted: Wed Jul 01, 2009 9:58 am
by maff23uk
Hi Paul,

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

Thanks :)

Re: How to add space between modules

Posted: Tue Jan 12, 2010 6:07 pm
by 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;
}

Re: How to add space between modules

Posted: Tue Feb 15, 2011 1:06 pm
by 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...

Re: How to add space between modules

Posted: Wed Jan 30, 2013 1:42 pm
by queenLateepha
sawalsh07 wrote: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 8) :D ;D :)

add vertical space between blog posts

Posted: Mon May 25, 2015 11:03 am
by 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

Re: How to add space between modules

Posted: Tue May 26, 2015 8:31 am
by leolam
How somebody still 'dares' to use Joomla 1.x for it's online presence is a miracle for me

Leo 8)