Joomla Templates Club 406,261 posts

[mikel2004 Friend mikel2004Join date: January 2012Posts: 201Downloads:0Uploads:51 Thanks: 24 Thanked: 3 times in 1 posts]

#194975

Hi!

Responsive option not work with Ja Teline IV T3 ?. Look the capture.

This is the URL:
http://veintiuno.czoom.co/documental/secciones/politica/4062-15m-excelente-revulsivo-importante-stephane-m-grueso

And this is my old site with Ja Teline IV T2: http://veintiuno.czoom.co/documental/secciones/politica/4062-15m-excelente-revulsivo-importante-stephane-m-grueso

Thanks!

---

Attachments:

1. 

[Manos Moderator ManosJoin date: February 2014Posts: 2806Downloads:46Uploads:56 Thanks: 200 Thanked: 633 times in 576 posts]

#523535

Hi,

I can see it working -> http://prntscr.com/2u34vg

Regards

Manos

[mikel2004 Friend mikel2004Join date: January 2012Posts: 201Downloads:0Uploads:51 Thanks: 24 Thanked: 3 times in 1 posts]

#523563

Yes, you are right!
I confuse the problem. The problem is with template width. In previous Ja Teline IV I had configuration option in Profile tab (Global settings). I had selected Template width: AUTO option. Where are this setting in the new Ja Teline IV T3?

Thanks!

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#523586

JA Teline IV template has versions for both T3 framework here, see this screenshot:

<blockquote> In previous Ja Teline IV I had configuration option in Profile tab (Global settings)</blockquote>

With T3v2 framework, you can set width from Profile tab.

Meanwhile, your site is using the latest T3 framework version with many features upgrade (responsive and compatible JOOMLA latest version…). You can have a look at this userguide for more info.

In the latest T3 framework, you can edit the width in the templates/ja_teline_iv_t3/less/variables.less file:


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

// 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));


Once done, click Compile LESS to CSS button from template admin.

---

Attachments:

1. 

[mikel2004 Friend mikel2004Join date: January 2012Posts: 201Downloads:0Uploads:51 Thanks: 24 Thanked: 3 times in 1 posts]

#523620

I wish to use the Template with RESPONSIVE option and the Template width: AUTO option.

Can you tell me what can I do? And what code I must write?

Thanks

<em>@Ninja Lead 412401 wrote:</em><blockquote>
In the latest T3 framework, you can edit the width in the templates/ja_teline_iv_t3/less/variables.less file:

Once done, click Compile LESS to CSS button from template admin.</blockquote>

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#523969

The JA TelineIV with new T3 framework does not have the option ‘Templage width: AUTO’ as in TelineIV with old JAT3v2. This new template supports responsive layout, thus when you enable Responsive option for this template in backend > template manager > general tab (see screenshot below), the template width will automatically change adopting the screen resolution:

If you want to change the width, you need is to change the width property in the file: templates/ja_teline_iv_t3/less/variables.less. Then when your website is displayed in different screen size, it will have appropriate width as you changed.

---

Attachments:

1. 

[mikel2004 Friend mikel2004Join date: January 2012Posts: 201Downloads:0Uploads:51 Thanks: 24 Thanked: 3 times in 1 posts]

#524088

I have responsive option selected but the template width not change.
Look:

And look the diference between this T3 site and my old T2 site where I have active the AUTO template width and looks good
http://comunidadzoom.com

I wish that my site fills all the screen, If I need to change code to this… can you tell the new code that I must write?

Thanks

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#524231

Did you know about width in variables.less file? you can see template width shows: 980px

Open templates/ja_teline_iv_t3/less/variables.less file


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

// 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));


You can change them to

@T3gridWidth: 1024px; // T3 add. For non-responsive layout.
@T3gridWidth1200: 1200px;
@T3gridWidth980: 980px; // T3 add


I have tested on URL of your site: http://veintiuno.czoom.co/documental

+ Mobile layout

+ Portrait Layout

+ Large layout

---

Attachments:

1. 
2. 
3. 

[mikel2004 Friend mikel2004Join date: January 2012Posts: 201Downloads:0Uploads:51 Thanks: 24 Thanked: 3 times in 1 posts]

#524282

The problem is with the Large layout, in fact. I would like to expand the template width to all the screen to Large loyout.
I change your code with your instructions but nothing change.
What can I do to expand the template width to all the screen?
is not possible to set the width in AUTO mode to fit any screen resolution of a personal computer or laptop computer?

I must add more screen resolution in variable.less file? (1366, 1360, 1280, 1024)? I must change the default size? How?

Thanks

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#524389

Please try to edit the templates/ja_teline_iv_t3/less/variables.less file:

Change

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

// 1200px min
@T3gridWidth1200: 980px; // T3 add

// 980px-1199px
@T3gridWidth980: 980px; // T3 add

// T3 Add: 768px-979px
@T3gridWidth768: 740px; // T3 add

To

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

// 1200px min
@T3gridWidth1200: 1360px; // T3 add

// 980px-1199px
@T3gridWidth980: 1280px; // T3 add

// T3 Add: 768px-979px
@T3gridWidth768: 1024px; // T3 add

Once done to click compile LESS to CSS button, see the screenshot:

---

Attachments:

1. 

[mikel2004 Friend mikel2004Join date: January 2012Posts: 201Downloads:0Uploads:51 Thanks: 24 Thanked: 3 times in 1 posts]

#524473

Yes!! It´s PERFECT!!

Thanks!

[mikel2004 Friend mikel2004Join date: January 2012Posts: 201Downloads:0Uploads:51 Thanks: 24 Thanked: 3 times in 1 posts]

#526839

Hi again!

I’m upgrade the Ja teline IV template to 1.0.2 last version, and the screen size of the site are change again.
I try to change the resolution in the less/variables.less file (and after that I Compile LESS to CSS, in Orange theme only, because I can´t complile LESS to CSS general, because an error message appear: “unsuspect error”) but nothing change!
I’m a problem now? I must rollback the template to previous version?

Thanks!

[mikel2004 Friend mikel2004Join date: January 2012Posts: 201Downloads:0Uploads:51 Thanks: 24 Thanked: 3 times in 1 posts]

#527021

Hi again!

I’m upgrade the Ja teline IV template to 1.0.2 last version, and the screen size of the site are change again.
I try to change the resolution in the less/variables.less file but nothing change!
I’m a problem now? I must rollback the template to previous version?

Thanks!

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

#527089

After changing the less file, you need to compile less to css. Please follow the TIPS I mentioned in this thread to solve compiling less to css issue.

[Author]

Posts