Template-width-changer for 12-column-layout of gantry
-
-
- ETC
- Rocketeer
- Posts: 52
- Thanks: 0
-
David Goode wrote:
Hi there,
Try adding the following code to the bottom of template.css...
#rt-maintop .rt-grid-2 {margin-left:0;}
Hope this helps
Tried adding it , it moved the maintop-f towards the left (yes it is now inside the template width), but the width of two maintop-f positions is not matching
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi there,
OK - If you want to create module sizes that do not align with the column sizes then you have recognise that compromises will have to be made.
Your overall width of site is 1008px. Subtract maximum margins of 10px left and right x 12 columns = 240px. Therefore the remaining 768 divided by 12 = 64px per column.
In theory your maintop positions should be as follows....
7 columns = 448px plus 10px each side = 468px
3 columns = 192px plus 10px each side = 212px
2 columns = 128px plus 10px each side = 148px
Yet you are trying to cram into 7 columns (currently showing at 568px in css) your RokTabs with a width of 572px
The 3 column position has an image with a width of 236px (for a column width of 212px)
And then you wonder why the next image at a width of 163px doesn't fit in the template.
Excluding margins you are trying to fit content that has a total width of 971px plus 60px of margins into a template 1008px wide. You need to set your column width to at least 66px. That way you will keep consistent layout throughout your site.
Hope this helps
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
-
-
-
- ETC
- Rocketeer
- Posts: 52
- Thanks: 0
-
Thanks david , i was able to achieve with column width set at 64 with following additions to template.css:
#rt-maintop .rt-grid-2 {width: 155px !important;}
#rt-maintop .rt-grid-3 {width: 245px !important;}
#rt-maintop .rt-grid-7 {width: 545px !important;}
#rt-showcase .rt-grid-5 {width: 423px !important;}
#rt-showcase .rt-grid-7 {width: 545px !important;}
thanks goes to Martin Stepanek as well, for guiding me on overrides
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi ETC,
In my opinion there are pitfalls to the approach you have taken.
Just consider if you use those positions on another page. For example you may choose to have a page where you have 4 modules in maintop positions. For them to be equal will mean using a width of 3 columns. Your override means that each module will be forced to a width of 245px as your code forces rt-grid-3 to that width. 4 x 245px = 980px plus margins at 10px each side per module is another 80px making the total 1060px for a template that is set to be 1008px wide.
In effect it means you will be always changing and adding extra css code when you need different layouts.
Hope this helps
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
-
-
-
- ETC
- Rocketeer
- Posts: 52
- Thanks: 0
-
Dear David,
Got your point, but i could not guess any other way to achieve it, using 66 width is not an option for me as it would then exclude a lot of visitors with 1024 resolution
So i think i'll have to keep adding overrides....Unless there is a way to achieve my goal in 64 column width
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi there,
I understand your reasoning but you did ask and it would have been wrong of me not to point it out. :cheesy:
The overrides will also have to include page suffixes because #rt-maintop .rt-grid-2 {width: 155px !important;} will affect every page on the site.
Hope this helps
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
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi there,
In Joomla 1.5 go to your main menu and select the Home item. In Advanced parameters at bottom right is a field called page suffix. Type in a suffix and this will become a class. Keep it to one word or use hyphens to make one word.
Example - Correct = home-page Incorrect = Home Page
That way you can prefix your css with .home-page #rt-maintop .rt-grid-2 {width: 155px !important;}
Hope this helps
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
-
Time to create page: 0.318 seconds