newbie struggling to get rid of gantry vertical space between joomla modules

[Ian]

Hi,

apologies in advance 'i'm a css/gantry newbie.

i'm just finishing a rough site layout using the gantry/rocket quasar
template and i'm struggling a bit to remove vertical space between a
couple of module positions i think the issue is that gantry uses
generic div's surrounding the module positions that give TBRL padding
and margins whcih are fine for L&R but on a couple of modules (not
all) give me too much vertical space between modules/main

the site i'm playing with is at www.alchemixenergy.com

surrounding the module positions i have for example .rt-block divs
which i take it are part of the generic gantry setup which i dont
think it is wise to edit only to change 1 or 2 module position (as its
probobly used extensively and will prob screw up elsewhere)

I thought as css has an inherited type structure that i could zero out
the top and bottom margins but as i'm a bit of a css newbie i'm
struggling to see where to put the css code in.

i was thinking of removing the top and bottom border and padding from
gantry .rt-block ??


the css structure of the template above gantry is :

style.css
template.css
gantry css's

can anyone give any suggestions as to the best way to deal with these
vertical gaps without breaking the template elesewhere

thx

ian

[David Goode]

Hi Ian

Have you tried adding flushtop and flushbottom to the module suffix
for those modules concerned? These suffixes are available for later
templates but I am not sure if Quasar accommodates these.

The link you provided is coming up 404 so I cannot see the positions
or I would have included some sample code to add to your css.

Hope this helps.

David

[all80]

Ian,

Just flush will do.

In the module style box type this:
flush
Note the leading space. This will set padding to 0 on all sides.


Mark

[David Goode]

Hi Ian, all80,

Please remember 'flush' removes all padding and in some instances you
may wish to retain left and right padding to keep vertical alignment
with other modules.

Regards

David - RT Mod

[Ian]

hi,

thx for the replies

the link i pasted in seems to have added www.google to its url :-( ...
its hopefully

www.alchemixenergy.com

yes i need to keep the L&R padding/border otherwise the template with
break

i have actually tried removing the top and bottom padding/borders in
the gantry.css but it had no effect

when i use firebug to examine the css inherited it seems that the css
is not from gantry.css but from some cached css type file

so not sure what to try next (other than deleting these cached files
and seeing if they are regenerated with the gantry.css changes in
them)

as i said in my original email i thought that as css has an inherited
structure (and i shouldnt touch gantry.css becuase of upgrades wiping
any changes) that i could put a couple of lines in to a css file up
atop the inherited css tree or hard code a couple of lines in the
index.php files (if worst comes to worst) to overide the top and
bottom border/padding settings in gantry css - this way it would only
affect the module positions with the css overides in.. as im a css
newbie i'm a bit unsure as to what to put and where

thx

ian

[David Goode]

Hi Ian,

Try adding this to the bottom of template.css

.short .rt-block {padding:0 15px;}

On all modules where you want zero padding top and bottom just make
sure the module suffix field has the word short inserted.

Hope this helps 8)

On May 9, 9:11 pm, Ian <beckett....@gmail.com> wrote:
> hi,
>
> thx for the replies
>

> the link i pasted in seems to have addedwww.googleto its url :-( ...

[DianeH]

Just an fyi, the Latest News links open a new window...

[Ian]

David,

many thx for this it worked perfectly :-)

rgds

ian





On May 9, 10:01 pm, David Goode <da...@3cellhosting.com> wrote:
> Hi Ian,
>
> Try adding this to the bottom of template.css
>
> .short .rt-block {padding:0 15px;}
>
> On all modules where you want zero padding top and bottom just make
> sure the module suffix field has the word short inserted.
>
> Hope this helps 8)
>
> On May 9, 9:11 pm, Ian <beckett....@gmail.com> wrote:
>
>
>
> > hi,
>
> > thx for the replies
>

> > the link i pasted in seems to have addedwww.googletoits url :-( ...

> > > > > > ian- Hide quoted text -
>
> - Show quoted text -

[Ian]

guys,

hi

for the benefit of any other css/gantry newbies reading this .. if i
have a joomla gantry nested div structure like for example :

div id="rt-copyright"
div id="rt-container"
div class="rt-grid-12"
div class="rt-block"

and rt-block is a common (multiple use in a site) gantry div class ...
i've found it possible to style this particular instance (and only
this) of the "rt-block" div class (in my case adding a dotted border
and changing font size) by adding the following to the end of the
template.css file

#rt-copyright .rt-block {text-align: left;border-style:dotted;border-
width:1px;font-size: 10px;}


hope some others find it useful :-)

rgds

ian














On May 10, 6:02 pm, Ian <beckett....@gmail.com> wrote:
> David,
>
> many thx for this it worked perfectly :-)
>
> rgds
>
> ian
>
> On May 9, 10:01 pm, David Goode <da...@3cellhosting.com> wrote:
>
>
>
> > Hi Ian,
>
> > Try adding this to the bottom of template.css
>
> > .short .rt-block {padding:0 15px;}
>
> > On all modules where you want zero padding top and bottom just make
> > sure the module suffix field has the word short inserted.
>
> > Hope this helps 8)
>
> > On May 9, 9:11 pm, Ian <beckett....@gmail.com> wrote:
>
> > > hi,
>
> > > thx for the replies
>

> > > the link i pasted in seems to have addedwww.googletoitsurl :-( ...

> > - Show quoted text -- Hide quoted text -

[Günther]

Hi guys, I've a similar problem, except I do want to remove all
padding, not just vertical as Ian wanted.

I've tried using ' flush' (with the leading space) in Module Class
Suffix, but noticed no change.
Can anyone help? I'm working with the top slideshow module:

http://joomladev.reticom.com.br/index.php

It's a sandbox environment, so please don't mind the mess.

PS. I'm more a newbie than Ian is, so step-by-step guidance would be
great :)

Thanks in advance,
Günther.

[David Goode]

Hi Günther,

There is a side margin of 10px left and right on the template. This is
standard for gantry columns. This means that you have the option of
reducing full width graphics to 940px or remove the margin for all
full width elements and set them to 960px width.

Try adding the following code to the bottom of your template.css

#rt-drawer .rt-block, #rt-top .rt-block {
margin: 0pt;
padding: 0pt;
}

#rt-drawer .rt-container .rt-grid-12, #rt-top .rt-container .rt-
grid-12 {
margin: 0pt;
width: 960px;
}

Hope this helps.

David