Joomla Templates Club 406,261 posts

[martinahovi Friend martinahoviJoin date: January 2012Posts: 23Downloads:0Uploads:0 Thanks: 7]

#191191

Hi,

I need to change the site (layout) width from 800 to 980px. It’s a pity that this is not possible with a parameter in the template settings. Nevertheless how can this be done … for dummies? I already found a thread but that did not do the whole trick.

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#508206

Hi

You can set template width managing this file templatesja_beranislessvariables.less

// Default 940px grid
// -------------------------
@T3gridWidth: 880px; // T3 add. For non-responsive layout.
@gridColumns: 12;
@gridGutterWidth: 20px;
@gridColumnWidth: floor((@T3gridWidth - @gridGutterWidth * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 1200px min
@T3gridWidth1200: 880px; // T3 add
@gridGutterWidth1200: 20px;
@gridColumnWidth1200: floor((@T3gridWidth1200 - @gridGutterWidth1200 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 980px-1199px
@T3gridWidth980: 760px; // T3 add
@gridGutterWidth980: 20px;
@gridColumnWidth980: floor((@T3gridWidth980 - @gridGutterWidth980 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth980: (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns - 1));

// T3 Add: 768px-979px
@T3gridWidth768: 680px; // T3 add
@gridGutterWidth768: 20px;
@gridColumnWidth768: floor((@T3gridWidth768 - @gridGutterWidth768 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));


After changed values you will need to Compile less to css

1 user says Thank You to pavit for this useful post

1. martinahovi

[martinahovi Friend martinahoviJoin date: January 2012Posts: 23Downloads:0Uploads:0 Thanks: 7]

#508252

Thank you so much! That absolutely did it!

[vmalyshev Friend vmalyshevJoin date: October 2013Posts: 210Downloads:5Uploads:27 Thanks: 5]

#517102

where is this variebless/less? I just dont have it in my joomla:

---

Attachments:

1. 

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#517113

Hi

The less folder is not vidìsible in the template manager you need to access your joomla folder with an ftp client and access this folder

templatesja_briskless

[vmalyshev Friend vmalyshevJoin date: October 2013Posts: 210Downloads:5Uploads:27 Thanks: 5]

#517151

Hi
Ive tried following your instructions. this is what my file looks like. Im trying to get it as wide as possible but still with a margin. But it has not affected the width, why?

// GRID
// ————————————————–

// Default 940px grid
// ————————-
@T3gridWidth: 1200px; // T3 add. For non-responsive layout.
@gridColumns: 12;
@gridGutterWidth: 20px;
@gridColumnWidth: floor((@T3gridWidth – @gridGutterWidth * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns – 1));

// 1200px min
@T3gridWidth1200: 1200px; // T3 add
@gridGutterWidth1200: 20px;
@gridColumnWidth1200: floor((@T3gridWidth1200 – @gridGutterWidth1200 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns – 1));

// 980px-1199px
@T3gridWidth980: 980px; // T3 add
@gridGutterWidth980: 20px;
@gridColumnWidth980: floor((@T3gridWidth980 – @gridGutterWidth980 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth980: (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns – 1));

// T3 Add: 768px-979px
@T3gridWidth768: 720px; // T3 add
@gridGutterWidth768: 20px;
@gridColumnWidth768: floor((@T3gridWidth768 – @gridGutterWidth768 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns – 1));

[vmalyshev Friend vmalyshevJoin date: October 2013Posts: 210Downloads:5Uploads:27 Thanks: 5]

#517154

domain: chamberscn.com

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#517155

hi
did you compiled again the files ?
Compile less to css

[vmalyshev Friend vmalyshevJoin date: October 2013Posts: 210Downloads:5Uploads:27 Thanks: 5]

#517156

yes, if you mean clicking on compile less to css in the template manager – i have done it.

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#517181

Just tried it on my localhost and it worked fine

// 1200px min
@T3gridWidth1200: 1200px; // T3 add
@gridGutterWidth1200: 20px;
@gridColumnWidth1200: floor((@T3gridWidth1200 - @gridGutterWidth1200 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));


try to compile Less to Css only the default theme

[vmalyshev Friend vmalyshevJoin date: October 2013Posts: 210Downloads:5Uploads:27 Thanks: 5]

#517200

Yes you were right! Thank you.

[vmalyshev Friend vmalyshevJoin date: October 2013Posts: 210Downloads:5Uploads:27 Thanks: 5]

#517201

but when viewing site on a mobile device – logo has dissapeared! I did not delete or alter it 🙁

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#517215

Hi

I just tried to open in both iphone and android devices, your logo works fine as seen in screenshort below:

[vmalyshev Friend vmalyshevJoin date: October 2013Posts: 210Downloads:5Uploads:27 Thanks: 5]

#517290

It could do on the phone, but tablet is not Ok. I remember there smth about overlapping layers and there is a way to amend it, I just forgot how. will you remind me please? Thanks.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#517464

It’s weird as I opened in iPad and it shows correctly, as seen here:

[Author]

Posts