How to add space between modules

Discuss the development and implementation of Joomla! 1.0.x templates here.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
maff23uk
Joomla! Intern
Joomla! Intern
Posts: 84
Joined: Tue Apr 17, 2007 11:00 am

How to add space between modules

Postby maff23uk » Tue Jun 30, 2009 7:19 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Sun Mar 22, 2009 5:00 pm

Re: How to add space between modules

Postby paulhookman » Tue Jun 30, 2009 9:39 pm

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
Joomla! Intern
Joomla! Intern
Posts: 84
Joined: Tue Apr 17, 2007 11:00 am

Re: How to add space between modules

Postby maff23uk » Wed Jul 01, 2009 9:58 am

Hi Paul,

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

Thanks :)

sawalsh07
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Mon May 04, 2009 5:51 pm

Re: How to add space between modules

Postby sawalsh07 » Tue Jan 12, 2010 6:07 pm

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Tue Feb 15, 2011 1:01 pm

Re: How to add space between modules

Postby ezgman » Tue Feb 15, 2011 1:06 pm

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sun Dec 23, 2012 4:00 pm

Re: How to add space between modules

Postby queenLateepha » Wed Jan 30, 2013 1:42 pm

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 :)

regvg
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Fri May 16, 2014 5:16 pm
Location: Belgium

add vertical space between blog posts

Postby regvg » Mon May 25, 2015 11:03 am

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

User avatar
leolam
Joomla! Master
Joomla! Master
Posts: 18437
Joined: Mon Aug 29, 2005 10:17 am
Location: Netherlands/ UK/ S'pore/Jakarta/ North America
Contact:

Re: How to add space between modules

Postby leolam » Tue May 26, 2015 8:31 am

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

Leo 8)
Celebrating 12-Years of Professional Joomla Support Services
- Joomla Professional Support:https://gws-desk.com -
- Joomla Specialized Hosting Solutions:https://gws-host.com -
- Member Joomla Bug Squad & J-CMS Release Team


Return to “Templates & CSS - 1.0.x”

Who is online

Users browsing this forum: No registered users and 5 guests