Joomla Templates Club 406,261 posts

[ch2856 Friend ch2856Join date: January 2010Posts: 73Downloads:1Uploads:10 Thanks: 12 Thanked: 9 times in 1 posts]

#196541

Hi,

The defult with of JA MAGZ it’s 980 and I need to change it to 1080 and wish to have different width to the content (t3-content) and sidebars.
I know how to change the bootstrap span of each one, but the template uses PX for each span and offest.

1) where should I change it, could not find it on the LESS files only at the CSS files
2) what calculation should I do (.span12 =1080px what should be span11,span10 ann offset 12 offset 11…).
3) should I do it in custom.css?

Thanks.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#529859

The url link you provided for your site does not appear to be working – please check.

[ch2856 Friend ch2856Join date: January 2010Posts: 73Downloads:1Uploads:10 Thanks: 12 Thanked: 9 times in 1 posts]

#529867

I know,

I have blocked it since I don’t want Google to accidentally crawl the site, it’s an upgrade of a live site (I can allow you if I had your IP).

Any way, my Q it’s a general question about JA MAGZ
Thanks.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#529868

Try adding the following to your custom.css file:


.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1080px;
}

If you haven’t already created a custom.css file, then you can do so within your file path –> /templates/ja_magz/css

1 user says Thank You to TomC for this useful post

1. ch2856

[ch2856 Friend ch2856Join date: January 2010Posts: 73Downloads:1Uploads:10 Thanks: 12 Thanked: 9 times in 1 posts]

#529872

Thanks for your answer,
I use custom.ccs but the thing is it seems like every span width is set manually

For example DIV t3-sidebar-2 has span3 and on the css span3=215px. now that’s ok for container width of 980px but not for 1080px.

So I should manually change each on? span1=x span2=x+y… and offset2=?
And if yes, what is the right way to calculate it.
Thanks
Ran

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#529875

If you want other elements on your page to conform relatively with the increased site width,
then yes …. you will need to adjust the various elements’ width aspects accordingly.

[ch2856 Friend ch2856Join date: January 2010Posts: 73Downloads:1Uploads:10 Thanks: 12 Thanked: 9 times in 1 posts]

#529878

I think I know where my confusion here. As far as I know, every span is auto calculated in bootstrap framewok so when I enter different width, it’s automaticaly calculate each span in %.
why JAmagz use pixels instead of %? (in responsive mod of the template).

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#529881

So you’re able to resolve your issue? 😎

[ch2856 Friend ch2856Join date: January 2010Posts: 73Downloads:1Uploads:10 Thanks: 12 Thanked: 9 times in 1 posts]

#529884

Actually no, cause I still don’t understand why the template use px and not % (as other JA responsive templates).
I will play with tomorrow and see if I get the logic behind this.

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

#530298

<em>@ch2856 420447 wrote:</em><blockquote>Actually no, cause I still don’t understand why the template use px and not % (as other JA responsive templates).
I will play with tomorrow and see if I get the logic behind this.</blockquote>

JA Magz template is using Bootstrap style, thus you need to define width by pixel first. For instance:

<blockquote>Width is 980px and it is equal span12</blockquote>

You don’t need to change px in bootstrap span as total width(px) will be divided per each span(px) and it works fine with mobile layouts (responsive)

You can see define width of JA Magz Template in the templates/ja_magz/less/variables.less file

@T3gridWidth: 940px; // T3 add. For non-responsive layout.
@T3gridWidth1200: 990px; // T3 add
@T3gridWidth980: 940px; // T3 add
@T3gridWidth768: 740px; // T3 add

You can easily define total width in the variables.less file. Once done, click compile LESS to CSS button from admin of JA Magz Template (Make sure you backup all old customised css files because this action will override those files).

Hope it helps.

1 user says Thank You to Ninja Lead for this useful post

1. sp1der

[ch2856 Friend ch2856Join date: January 2010Posts: 73Downloads:1Uploads:10 Thanks: 12 Thanked: 9 times in 1 posts]

#530647

Actuallt i am more confused and can’t find the logic/work flow of customizing this template.
I have changes variables.less but why it’s only show the affect when development mod is off?

Lets say I want to change sidebar-1:span2 and sidbar-1:span4, should I change it on the layout or in the blocks (mainbody.php?)
Or if I want to have a sidebar-1:140px and sidebar-2:300px

And if I want sidebar-1 not to be shown on xtablet. I click on none in the responsive layout tab, it dose not show the position but if there is a modules published on this position, the template keeps it’s place so I have unwanted withe space.

As far as I understand, I always work on development mod, using less files and blocks. when I am done, I set development mod off and compile less to css and that’s my normal working site.

Sorry for all the question, but I just don’t understand yet the workflow, although I have watch all the tutorials.

Thanks.

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

#530763

@ch2856:

Please find below additional clarification, hope it helps.

When development mode is turned on, your site directly runs on original files – LESS files, if you disable it, your site will load CSS files instead.

After you make change in LESS file, you should compile LESS to CSS ( click ‘LESS to CSS’ button in template manager section).

For your concern about the span/px, our template is built with Bootstrap which utilizes 12-columns grid system. Each .span* here will spans a number of those 12 columns and should always add up to 12 for each row. The total width(px) is defined in the ‘variable.less file as I mentioned in my previous post, this width(px) will be divided per each span.

Depending on your view port, the number of span will be changed, you can have a look at this file: templates/ja_magz/tpls/blocks/mainbody.php and see that we provide layout configuration for different devices: ‘two_sidebars’, ‘one_sidebar1’, ‘one_sidebar2’, ‘no_sidebar’.


// Layout configuration
$layout_config = json_decode ('{
"two_sidebars": {
"default" : [ "' . ($allowsidebar ? 'span4 offset4' : 'span12') . '" , "span4 offset-8" , "span4" ],
"wide" : [],
"xtablet" : [],
"tablet" : [ "span12" , "span6 spanfirst" , "span6" ]
},
"one_sidebar1": {
"default" : [ "' . ($allowsidebar ? 'span8' : 'span12') . ' has-sidebar1 pull-right" , "span4" ],
"wide" : [],
"xtablet" : [ "' . ($allowsidebar ? 'span8' : 'span12') . ' has-sidebar1 pull-right" , "span4" ],
"tablet" : [ "span12" , "span12 spanfirst" ]
},
"one_sidebar2": {
"default" : [ "' . ($allowsidebar ? 'span8' : 'span12') . ' has-sidebar2" , "span4" ],
"wide" : [],
"xtablet" : [ "' . ($allowsidebar ? 'span8' : 'span12') . ' has-sidebar2" , "span4" ],
"tablet" : [ "span12" , "span12 spanfirst" ]
},
"no_sidebar": {
"default" : [ "span12" ]
}
}');


Based on the layout you’re using, you can custom as you wish.

<blockquote>
And if I want sidebar-1 not to be shown on xtablet. I click on none in the responsive layout tab, it dose not show the position but if there is a modules published on this position, the template keeps it’s place so I have unwanted withe space.
</blockquote>

>> You can use simple CSS rule with media jQuery to hide any block in specific device like tablet. Your site seems to be in offline mode now, you can PM me login info, I will suggest you further.

[Author]

Posts