-
AuthorPosts
-
October 7, 2013 at 6:44 am #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 Moderatorpavit
- Join date:
- September 2007
- Posts:
- 15749
- Downloads:
- 199
- Uploads:
- 2274
- Thanks:
- 417
- Thanked:
- 4028 times in 3778 posts
October 7, 2013 at 8:46 am #508206Hi
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
October 7, 2013 at 3:14 pm #508252Thank you so much! That absolutely did it!
January 2, 2014 at 5:04 am #517102pavit Moderatorpavit
- Join date:
- September 2007
- Posts:
- 15749
- Downloads:
- 199
- Uploads:
- 2274
- Thanks:
- 417
- Thanked:
- 4028 times in 3778 posts
January 2, 2014 at 8:02 am #517113Hi
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
January 2, 2014 at 12:15 pm #517151Hi
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));January 2, 2014 at 12:28 pm #517154domain: chamberscn.com
pavit Moderatorpavit
- Join date:
- September 2007
- Posts:
- 15749
- Downloads:
- 199
- Uploads:
- 2274
- Thanks:
- 417
- Thanked:
- 4028 times in 3778 posts
January 2, 2014 at 12:49 pm #517155hi
did you compiled again the files ?
Compile less to cssJanuary 2, 2014 at 12:50 pm #517156yes, if you mean clicking on compile less to css in the template manager – i have done it.
pavit Moderatorpavit
- Join date:
- September 2007
- Posts:
- 15749
- Downloads:
- 199
- Uploads:
- 2274
- Thanks:
- 417
- Thanked:
- 4028 times in 3778 posts
January 2, 2014 at 4:38 pm #517181Just 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
January 2, 2014 at 11:49 pm #517200Yes you were right! Thank you.
January 3, 2014 at 12:00 am #517201but when viewing site on a mobile device – logo has dissapeared! I did not delete or alter it 🙁
Saguaros ModeratorSaguaros
- Join date:
- September 2014
- Posts:
- 31405
- Downloads:
- 237
- Uploads:
- 471
- Thanks:
- 845
- Thanked:
- 5346 times in 4964 posts
January 3, 2014 at 2:35 am #517215Hi
I just tried to open in both iphone and android devices, your logo works fine as seen in screenshort below:
January 3, 2014 at 3:09 pm #517290It 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 ModeratorSaguaros
- Join date:
- September 2014
- Posts:
- 31405
- Downloads:
- 237
- Uploads:
- 471
- Thanks:
- 845
- Thanked:
- 5346 times in 4964 posts
January 6, 2014 at 7:32 am #517464It’s weird as I opened in iPad and it shows correctly, as seen here:
AuthorPostsViewing 15 posts - 1 through 15 (of 15 total)This topic contains 15 replies, has 4 voices, and was last updated by Saguaros 10 years, 10 months ago.
We moved to new unified forum. Please post all new support queries in our New Forum
Change of layout width
Viewing 15 posts - 1 through 15 (of 15 total)