Joomla Templates Club 406,261 posts

[kallan Friend kallanJoin date: August 2006Posts: 349Downloads:0Uploads:5 Thanks: 22 Thanked: 35 times in 1 posts]

#122757

Hi all,

I have a site set to auto width using the Ja Utahia template and it looks great until you are looking it on a high res say wide screen monitor. Then the left column (with the menu on it) looks far to wide and the space would be better used by the main content window.

Is the best way to fix this issue by having a javascript check on the res and if its greater than say 1024 then load a different style sheet that changes the ja-mainnav-left to say 20% instead of 25% and likewise change the main content up.

Or is there a better way?

Thanks
Kiwidesign

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#229586

Any live url?

[kallan Friend kallanJoin date: August 2006Posts: 349Downloads:0Uploads:5 Thanks: 22 Thanked: 35 times in 1 posts]

#229587

Hi Menalto,

Unfortunately I am unable to give out the live url – however it is fairly much the standard install of Ja Utahia – on the demo site it does the same thing the left column ends up looking way to big and really needs a max-width so that the content part can make the most of high res.

I have added a script to detect res and load an extra css file if it is below 1024 and if it is above 1024 another css file
template_css.css is always used
template_low_css.css for below 1024
template_high_css.css for 1024 and above

What I need to know is how to change the width of the left column so that the main area takes up more of the available space. I can change the leftcol and the main container BUT the background image for the left col and the white block of the main container don’t seem to change no matter what I do.

Can someone point me to the right place to change this. Thanks.

Cheers
Kiwidesign

[john6555 Friend john6555Join date: November -0001Posts: 88Downloads:0Uploads:8 Thanks: 2 Thanked: 1 times in 1 posts]

#232610

Would also like to know this… I need to make the left column wider without screwing up the template.

Also: kallan, what script did you use to auto-detect the resolution? That is a really good idea. If you can let me know how you did that, that would be awesome!

[kallan Friend kallanJoin date: August 2006Posts: 349Downloads:0Uploads:5 Thanks: 22 Thanked: 35 times in 1 posts]

#232641

Hi john

Hope this helps.

<SCRIPT language="JavaScript">
<!--
if ((screen.width>=1280) || (screen.height>=1024))
{
document.write('<link href="<?php echo $ja_template_path;?>/css/template_wide_css.css" rel="stylesheet" type="text/css" />');
}
else if ((screen.width<=1024) || (screen.height<=768))
{
document.write('<link href="<?php echo $ja_template_path;?>/css/template_narrow_css.css" rel="stylesheet" type="text/css" />');
}
//-->
</SCRIPT>

[john6555 Friend john6555Join date: November -0001Posts: 88Downloads:0Uploads:8 Thanks: 2 Thanked: 1 times in 1 posts]

#232801

Cheers Kallan!
Now can anyone answer the left column width CSS question?? :confused:

[john6555 Friend john6555Join date: November -0001Posts: 88Downloads:0Uploads:8 Thanks: 2 Thanked: 1 times in 1 posts]

#233250

Please, someone from JoomlArt that can respond to this question? I need to make the left column wider, but when I try this in the CSS, the column becomes broken and appears below the main body.

[Khanh Le Moderator Khanh LeJoin date: November 2013Posts: 1884Downloads:41Uploads:31 Thanks: 44 Thanked: 203 times in 131 posts]

#237677

<em>@john6555 32644 wrote:</em><blockquote>Please, someone from JoomlArt that can respond to this question? I need to make the left column wider, but when I try this in the CSS, the column becomes broken and appears below the main body.</blockquote>

You need increase the width of left column (#ja-leftcol) and decrease the width of main column (#ja-contentwrap).

[Author]

Posts