Public Forums 71,145 posts

[urbanj Friend urbanjJoin date: October 2013Posts: 2Downloads:0Uploads:0]

#191580

Hello,

Using T3 for the first time and getting the template width correct if bafffling me after two days of trying.

Whatever changes I make in the variable.less files do not seem to have any effect. I must be missing something.

Here is how the website looks at the moment

http://movingmountainstrust.com/new/

and here are the dimensions of we want it to look. The video is in the mast-col module position and the two images underneath should be in sidebar 1 and sidebar 2. The content and modules should be 940 wide on a large screen and be responsive for smaller screens

http://dev.straightedgedirect.com/mm/mm.html

Any ideas please? Many thanks.

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#509789

Hi urbanj ,

T3 uses the same grid as bootstrap.
Please read more information about grid of T3 and Bootstrap on
http://t3-framework.org/documentation.html
http://getbootstrap.com/2.3.2/scaffolding.html

You should also learn about LESS to use T3.

If you want the width is 940 max, you should change those variables in templates//less/variables.less

Regards

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#509857

If you change the width of the template in the .less files, you need one of two things to see the change.

1. You are in development mode – extensions…template manager…general – turn on developer mode

This will cause the .less files to compiled on the fly and allow you to see changes in the .less files as you make them

or
2. Compile LESS to CSS – again, extensions…template manager – click the compile button at the top of the screen.

This needs to be done each time you change .less files if you are not in development mode or when you switch from development mode to not.

I usually create all of my templates in dev mode so that I can change the .less files as needed. When I’m done, I switch out of dev mode, click the compile button, and make sure everything is acting right.

Does this help?

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

1 user says Thank You to Scott Lavelle for this useful post

1. Wall Crasher

[urbanj Friend urbanjJoin date: October 2013Posts: 2Downloads:0Uploads:0]

#509993

Thanks for the replies and tips, appreciated. What remains is, whatever changes I make in the variables less files, nothing changes on the front page whether I have developer on or off or use compile or not. The template remains too wide and the modules and content do not sit side by side.

Here is the part of less that I have changed. Have I done something obviously wrong here? it should be 960px wide for the main content and the top menu should stretch all the way across as it currently does.

Thanks again.

// GRID
// --------------------------------------------------

// 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: 940px; // 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));

// Fluid grid
// -------------------------
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 980px-1199px
@fluidGridColumnWidth980: percentage(@gridColumnWidth980/@gridRowWidth980);
@fluidGridGutterWidth980: percentage(@gridGutterWidth980/@gridRowWidth980);

// T3 Extensed: 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#510059

Hi urbanj,

I just install a copy of T3 Blank, copy your code above and I see it work.

Please enable both Development Mode and Responsive options.

Regards

[Author]

Posts