Did you try reduce the margin in the css file?

Which CSS files and elements are we talking about?

BTW: Anyone know if there is a CSS reference out there? There are many files, with some declarations appearing in several. Bit of a needle in a haystack searching for the right element.

Hi Colin Shanley,

T3 may a bit complicated at first, but you will get familiar with it soon if you have some CSS and LESS knowledge.
Open \templates\t3_blank\less\variables.less and you will see

// Default 940px grid

// -------------------------

@T3gridWidth:             940px;  // T3 add. For non-responsive layout.

@gridColumns:             12;

@gridGutterWidth:         40px;

@gridColumnWidth:     	  floor((@T3gridWidth - @gridGutterWidth * (@gridColumns - 1)) / @gridColumns);

@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));



// 1200px min

@T3gridWidth1200:         1200px;  // T3 add

@gridGutterWidth1200:     40px;

@gridColumnWidth1200:     floor((@T3gridWidth1200 - @gridGutterWidth1200 * (@gridColumns - 1)) / @gridColumns);

@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));



// 980px-1199px

@T3gridWidth980:          940px;  // T3 add

@gridGutterWidth980:      40px;

@gridColumnWidth980:      floor((@T3gridWidth980 - @gridGutterWidth980 * (@gridColumns - 1)) / @gridColumns);

@gridRowWidth980:         (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns - 1));



// T3 Add: 768px-979px

@T3gridWidth768:          740px;  // T3 add

@gridGutterWidth768:      20px;

@gridColumnWidth768:      floor((@T3gridWidth768 - @gridGutterWidth768 * (@gridColumns - 1)) / @gridColumns);

@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));

Try to change @gridGutterWidth to the value you want.


Regards

Dear Superuser,

I tried your suggestions, but @gridgutterWidth doesnt show any effect doesn t matter I am using 10, 5 or 1 px - no effect.

To show you what I mean I am adding screenshot (as link)
A or B means distance between moduls or position !

link to screenshot http://rajasthan-reisen.de/modul width to next modul.png

Hi,

please ensure yourself that the deveopment mode is active - otherwise changes to the less files will have no effect.
Have a look at http://t3-framework.org/documentation/t3-settings.html

Best regards,

Olli

I am still in development modus , since beginning. If I am changing something it will change in my new THEME1 under less/themes/styles/mytheme... but here it stores everything in variables-custom.less and shows:

@T3gridWidth1200: 1200px;
@gridGutterWidth1200: 2px; // this does not giving any effect in relation space between modules - you may add ZERO and will be same like original //
@T3gridWidth: 940px;
@gridGutterWidth: 2px;
@T3gridWidth980: 940px;
@gridGutterWidth980: 2px;
@T3gridWidth768: 740px;
@gridGutterWidth768: 2px;
@bodyBackground: @white;
@textColor: #050505;
@linkColor: #bf6e30;
@inputBorderRadius: 5px;
@T3NavbarInverted: 0;
@T3SpotlightsInverted: 0;
@T3moduleBackground: transparent;
@T3moduleColor: inherit;
@T3moduleTitleBackground: inherit;
@T3moduleTitleColor: @headingsColor;
@baseFontSize: 14px;
@T3FooterModuleTitleColor: @black;
@T3FooterModuleColor: #ffffff;

++++++++++++++++++++++++++++++++++++++++++++

ALL OTHER FILES UNDER my new THEME are empty !!!!!!!!!!!!!!!!!!!

But I need the Main_main_Main file where everything is stored, or does each module give the direction in space ??????

In General the new TZ3V3 is nice, but you do need more less.files knowledge, where are the relations between each file and which is effected or not.

Next Template Update you will start once again.

Hi KJ,

I just tried it myself and added '@gridGutterWidth1200: 5px;' to one of my pages - it's working fine.

So the problem is elsewhere...

- Have you really selected to use your custom theme in your active template-style?
- Have you really added the changes to 'variables.less' oder 'variables-custom.less' in your theme? (These changes won't work in 'template.less')

Best regards,

Olli

Hi, I have three columns on my front page. I need to reduce the gutter width too to give more room for the first column. But the odd thing is when I reduce the gutter width, then the layout breaks, i.e. the 3rd column sinks to the bottom of the page instead and below the first two columns instead of staying aligned. Any fix to this?

Bump

I too want to change the space between blocks but I don't think anyone is answering this question the way I see it. The gutter width is the horizontal space between columns, what I think is being asked here (and what I need) is to reduce the vertical space between blocks. I'm trying to put together a pretty simple page using a spotlight block above the main content, but there is a massive space - over an inch on my laptop - between the two blocks, it looks really clunky. In Firebug I can see a margin-bottom of 40 px which seems reasonable, I can reduce the space changing it to -80 px in Firebug but that seems like a stupid solution.

Any ideas?

has anyone found a solution to this? I'm in the same boat, wanting less 'vertical space' between blocks...

Hello!

I'm using T3 template, more precisely "t3_bs3_blank" template.
I want to reduce the vertical space between modules.
As Admin indicated, I went to variables.less file but I did not find the code.

I attach a printscreen of my website, for you to see it.
Where and how can I reduce this padding or margin bottom?

Thank you.
Please give me some feedback.

Best regards,
Inês, from Portugal

has anyone found a solution to this? I'm in the same boat, wanting less 'vertical space' between blocks...

Did you find some solution until now?

Ok I cracked it.

Create a custom.css file in the css folder, identify the name of the block you want to alter the spacing on using firebug then add for example,

.t3-sl {
padding-bottom: 0;
padding-top: 0;
}

.t3-header {
padding-bottom: 0;
padding-top: 10;
}

.t3-mainbody {
padding-bottom: 0;
padding-top: 0;
}

Yeah, the workflow is correct, Andy. It's worth to try your suggestion

I too am struggling with this. Andy's solution almost works.

I set the following in a new custom.css file

.t3-sl {
padding-bottom: 0;
padding-top: 0;
}

This has they effect of removing the gap between the menu and the top row of modules, which is fine. But any value greater than 0 results in a gap of around 55px.

With no gap, I can pad the top of the module with a spacer graphic to get the required gap, but this isn't a very elegant solution.

Any body any better ideas?