Afterburner: How to get 1080px fixed layout ?
-
-
- Mirko De Marco
- Sr. Rocketeer
- Posts: 213
- Thanks: 0
-
hello
I don't want use responsive mode with Afterburner and fixed 960 or 1200 size don't fit my need. So I wondering how to do for get fixed 1080 pixels because for what I read in some place this is possible.
Is just matter to know which RT files need to be modified and how.
In fact I display in my site an iframe and his content is partially hidden because the width is a bit too small. Until now I used Clarion (the no responsive version) without any problem and my iframe was set to fixed 944px size and all was fine. Now with Afterburner I get this annoying width problem... If before I was able to well display my content with iframe size of 944px, I should be able to do the same with Afterburner because Clarion use the same 960 grid of Afterburner.
Maybe is a problem of padding/margin ? I did not found nothing about when inspecting with firebug...
Any suggestion for let me to increase a bit the width will be much appreciated.
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi there,
You would have to edit the grid sizes in the 960 fixed layout. The difference between 960 and 1080 is 10px per grid column.
Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_afterburner). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"
If this resolves your problem then please edit your first post in this thread by adding SOLVED at the start of the title and then select the green tick icon. This lets the moderators know that it can be moved to the solved section.@media only screen and (min-width: 1080px) { div.rt-container {width: 1080px;} div.rt-grid-1 {width: 90px;} div.rt-grid-2 {width: 180px;} div.rt-grid-3 {width: 270px;} div.rt-grid-4 {width: 360px;} div.rt-grid-5 {width: 450px;} div.rt-grid-6 {width: 540px;} div.rt-grid-7 {width: 630px;} div.rt-grid-8 {width: 720px;} div.rt-grid-9 {width: 810px;} div.rt-grid-10 {width: 900px;} div.rt-grid-11 {width: 990px;} div.rt-grid-12 {width: 1080px;} div.rt-push-1 {left: 90px;} div.rt-push-2 {left: 180px;} div.rt-push-3 {left: 270px;} div.rt-push-4 {left: 360px;} div.rt-push-5 {left: 450px;} div.rt-push-6 {left: 540px;} div.rt-push-7 {left: 630px;} div.rt-push-8 {left: 720px;} div.rt-push-9 {left: 810px;} div.rt-push-10 {left: 900px;} div.rt-push-11 {left: 990px;} div.rt-pull-1 {left: -90px;} div.rt-pull-2 {left: -180px;} div.rt-pull-3 {left: -270px;} div.rt-pull-4 {left: -360px;} div.rt-pull-5 {left: -450px;} div.rt-pull-6 {left: -540px;} div.rt-pull-7 {left: -630px;} div.rt-pull-8 {left: -720px;} div.rt-pull-9 {left: -810px;} div.rt-pull-10 {left: -900px;} div.rt-pull-11 {left: -990px;} div.rt-prefix-1 {padding-left: 90px;} div.rt-prefix-2 {padding-left: 180px;} div.rt-prefix-3 {padding-left: 270px;} div.rt-prefix-4 {padding-left: 360px;} div.rt-prefix-5 {padding-left: 450px;} div.rt-prefix-6 {padding-left: 540px;} div.rt-prefix-7 {padding-left: 630px;} div.rt-prefix-8 {padding-left: 720px;} div.rt-prefix-9 {padding-left: 810px;} div.rt-prefix-10 {padding-left: 900px;} div.rt-prefix-11 {padding-left: 990px;} }
Thanks for your cooperation
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
-
-
-
- Mirko De Marco
- Sr. Rocketeer
- Posts: 213
- Thanks: 0
-
thank for your reply..
I have already a custom css file called "rt_afterburner2-custom.css" and located in /public_html/templates/rt_afterburner2/css. So I added your code but now instead to have a more larger content, I get always the same size but the whole content is simply a bit more aligned to left side. However if in Gantry I set "responsive" instead to "fixed960" the trick seem to work.
Could you confirm is required to set responsive ??
If yes the big downside is now the template became responsive even if in practice is not totally true because I have a fixed width of 1080px when browsing the site with a desktop. But if I use a smartphone, the site is displayed in responsive mode and this is not what I wanted.
In fact I use Mobilejoomla for mobilize my site because this component is more adapted for my case. Mobilejoomla allow to switch if desired from mobile to standard version (and the opposite) by clicking to a specific link which is displayed only if the detected device is a smarthphone. My goal is to display a specific UI when using smartphone (with MJ template) and display a normal and no responsive UI (with RT template) when using any other device such desktop or tablet. This is my actual setup when using Clarion (no responsive version) and I want keep this kind of display.
So if I could get a fixed 1080px without need to set responsive, this will be wonderful.
Any clue ?
thank
-
-
-
- Mirko De Marco
- Sr. Rocketeer
- Posts: 213
- Thanks: 0
-
-
-
- Mirko De Marco
- Sr. Rocketeer
- Posts: 213
- Thanks: 0
-
well I found a method which consist to hack the file 1200fixed.css and replace all value with the one you gave me. Then by selecting 1200FIXED in Gantry this allow me to get 1080px width without enable responsive mode.
The problem here is I'm forced to hack a css core file which is not a good idea. Is really too bad you don't propose other default "FIXED" alternative than 960 or 1200. I tried to create a new file 1080fixed.css because I thought Gantry could find and load this new layout mode by itself but unfortunately that's not the case.
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi there,
The solution I suggested was to enable a different width (1080px) in responsive mode.
You solution is the only option if you want to use the fixed width regardless of device.
Glad you found a solution and thanks for posting it back as it may help others
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
-
-
-
- Mirko De Marco
- Sr. Rocketeer
- Posts: 213
- Thanks: 0
-
Unfortunately my modified 1200fixed.css has been overwritten. I suppose Gantry or Rokbooster is the responsible of this. I wondering if the fact to set a permission of 444 could prevent this file to be again overwritten in future.
Any clue ??
In fact even if read some docs about, I still unclear about what happen to css file when using Less compiler and/or Rokbooster. For example if I'm not wrong when Less is disabled (in Gantry Advanced settings) no file such 1200fixed.css are generated... Do you confirm? So is required to always enable Less for let my trick work... Then if I enable/disable/enable again Rokbooster it seem this have an incidence to css generated file and instead to compress my custom 1200fixed.css file is the original un-modified file which is compressed...reason why I wondering if the fact to set 444 permission could prevent this...
I know actually the big trend is to use responsive template but this solution is not applicable in all case.
please help to clarify...thank.
-
-
-
- Mirko De Marco
- Sr. Rocketeer
- Posts: 213
- Thanks: 0
-
please confirm if the fact to apply 444 permission could avoid to have the file 1200fixed.css overwritten.
thank
-
Time to create page: 0.059 seconds