Joomla Templates Club 406,261 posts

[tdeli Friend tdeliJoin date: May 2008Posts: 30Downloads:1Uploads:1 Thanks: 4 Thanked: 1 times in 1 posts]

#145984

Has anyone managed to change this template to a fluid width? We are going to be at a trade show with a widescreen monitor this weekend and want to be able to take advantage of the width so more people can see the site on the monitor from a distance. Right now when you go full screen it shows 3 inches of black along the left and right. It would be nice to have the options to go to fluid, wide or narrow instead of just narrow and wide.

Any help, code, suggestions would be appreciated.

Thanks.

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

#323681

Hello tdeli!

I have tried to made the function auto wide, but look it not nice 😐 beacause the ja villadi doesn’t support.
I give you my solution:
1) you open file /templates/ja_villadi/templateDetail.xml and find a section codes at line 60:
[PHP]
<param name=”ja_screen” type=”list” default=”wide” label=”Template Width” description=”Width style of the template”>
<option value=”narrow”>narrow</option>
<option value=”wide”>wide</option>
</param>
[/PHP]
and replace by:
[PHP]
<param name=”ja_screen” type=”list” default=”wide” label=”Template Width” description=”Width style of the template”>
<option value=”narrow”>narrow</option>
<option value=”wide”>wide</option>
<option value=”auto”>Auto</option>
</param>
[/PHP]

2) you open file /templates/ja_villadi/ja_templatetools.php and find a section codes at line 23
[PHP]var $_ja_screen_sizes = array (‘narrow’, ‘wide’);[/PHP]
Replace them by:
[PHP]
var $_ja_screen_sizes = array (‘narrow’, ‘wide’, ‘auto’);
[/PHP]

3) you add the style into /templates/ja_villadi/css/template_css.css

[PHP]
.auto #ja-wrapper {
width: 95%;
}
.auto #ja-header {
background: url(../images/header-narrow-bg.jpg) no-repeat top left; /* replace header background by owner*/

}
.auto #ja-mainnav {
background: url(../images/mainnav-narrow-bg.gif) no-repeat top left; /* replace mainnav background by owner*/
}
[/PHP]

NOTE: with auto mode: you must replace background of header and navigator by yours, and add new icon for this in the usertool.

[tdeli Friend tdeliJoin date: May 2008Posts: 30Downloads:1Uploads:1 Thanks: 4 Thanked: 1 times in 1 posts]

#324142

Thanks for the reply! I will give it a try and see how it works.

Thank you!

[Author]

Posts