Joomla Templates Club 406,261 posts

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1011213

Hi
Here is documentation help you to change the template width.

Regards

[winbelltrade Friend winbelltradeJoin date: July 2015Posts: 32Downloads:353Uploads:8 Thanks: 1]

#1011460

Have gone through the documentation you sent and there is no place that Teline iv was mentioned. I followed the procedure listed but it does not applyto this template.

Please anyone who could help is most welcone

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1011505

Hi
Your site is based on T3 integrated Bootstrap 2.
You have to follow the same doc with procedure BS2 > http://prntscr.com/e9qs1y

Open the templates/ja_template/less/variables.less file,
You will see code like this

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

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

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

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

Now customise the size for responsive layouts as you wish.

Next, compile LESS to CSS. From back-end of your site, go to Extensions >> Template Manager >> JA Template then clicks Compile LESS to CSS button so that the changes will be compiled to CSS file.

Do not forget to take backup of the site before apply changes.

Regards

[winbelltrade Friend winbelltradeJoin date: July 2015Posts: 32Downloads:353Uploads:8 Thanks: 1]

#1012422

I have followed the procedure and it worked like a charm. Thanks

[Author]

Posts