JoomlArt Forums 32,862 posts

[rarunkumar7 Friend rarunkumar7Join date: February 2009Posts: 13Downloads:0Uploads:0 Thanks: 5]

#141371

Free template JA Purity has fluid width template but all the paid template doesn’t have this functionality.Can you please include this options for all JA Templates in future.

[wooohanetworks Friend wooohanetworksJoin date: September 2008Posts: 1239Downloads:0Uploads:2 Thanks: 148 Thanked: 138 times in 41 posts]

#305433

It is a simple tweak…

This is the template.css of JA Topaz, and in any JA Template you will find a row where the width of the template is defined. Mostly the width is something like 960px or 980px.

1. Open the template.css and find the row where the wrapper is defined and a width value shows up. This will look similar to this, and look for the content in red:

/* MAIN LAYOUT
--------------------------------------------------------- */
.wrap {
clear: both;
width: 100%;
}

.main {
background: url(../images/mainwrap-bg.gif) repeat-y center top;
margin: 0 auto;
width: 980px;
}

.inner {
margin: 0 10px;
padding: 0 20px;
}

#ja-mainbody {
float: left;
width: 75%;
*width:74%;
}

2. Change the code line that defines the fixed width of the template to “100%”. Your code lines should now look like this:

<blockquote>/* MAIN LAYOUT
——————————————————— */
.wrap {
clear: both;
width: 100%;
}

.main {
background: url(../images/mainwrap-bg.gif) repeat-y center top;
margin: 0 auto;
width: 100%;
}

.inner {
margin: 0 10px;
padding: 0 20px;
}

#ja-mainbody {
float: left;
width: 75%;
*width:74%;
}</blockquote>

3. Save the file and upload back to the server. Reload the page with cache cleared etc.!

4. Now your site has the desired fluid width and will collapse when you resize the browser.

5. When you now see that some parts of the site are not more adequately fitting the dimensions, it is up to you to make appropriate changes to parts of the site, like image files used in the template etc., so that it will be compatible to be a fluid width template. (((This means you will have to either use e.g. “<blockquote>background: url(imagefile.gif) repeat top left</blockquote>” maybe with using the repeat-y or repeat-x attributes to not let is randomly repeat, instead of “<blockquote>background: url(imagefile.gif) no-repeat top left</blockquote>”, so that the images that were once set to fit exactly to the fixed width of the template will fit again. When you have problems with graphics that will look strange when doing this, as they are not plain, you will have to manually make some more changes to specific parts of the template or the image files directly in Photoshop etc..)))All those fine tuning is up to you, and a lot too much for a quick tutorial like this, as it will be template specific!

6 Enjoy!

[zorroh Friend zorrohJoin date: November 2006Posts: 422Downloads:20Uploads:43 Thanks: 88 Thanked: 80 times in 1 posts]

#305508

but… user friendlier is put your desire width in template settings, save..and thats it, all working

[wooohanetworks Friend wooohanetworksJoin date: September 2008Posts: 1239Downloads:0Uploads:2 Thanks: 148 Thanked: 138 times in 41 posts]

#305523

People should learn how it works and what makes what, otherwise these forums have no real use as people ask over and over again, as soon the settings stuff does not work anymore…;)

[wooohanetworks Friend wooohanetworksJoin date: September 2008Posts: 1239Downloads:0Uploads:2 Thanks: 148 Thanked: 138 times in 41 posts]

#305572

So that some people will find it useful, I created a tutorial thread for this option here.

[zorroh Friend zorrohJoin date: November 2006Posts: 422Downloads:20Uploads:43 Thanks: 88 Thanked: 80 times in 1 posts]

#305825

but rockettheme has this option. you can easy put width parameters in template settings and i love it..

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#305836

rarunkumar7;129645Free template JA Purity has fluid width template but all the paid template doesn’t have this functionality.Can you please include this options for all JA Templates in future.

JA template are heavily reliant on CSS background images and this is not suitable for fluid width. Using a fixed width gives you total control on what your site will look like in every browser! A left column with a 25% width on a fluid site is going to be nearly 500px wide on a 1920px machine. Do you really want a 500px side column?? Ohh but I can fix the width of the columns…. well then what’s the point of the template being fluid?

Just out of curiosity what screen res do you use? Have you ever viewed a JA fluid template at 1920px?? Very ugly! Most fluid width sites are very ugly at 1600px+. Why do you think all the major sites use a fixed width? Youtube, Twitter, Facebook, Microsoft, Joomla, Etc, Etc, Etc. Fixed width is only suitable for very text heavt sites like Wikis.

I would not recommend using fluid width with a Joomlart template under any circumstances…. but that’s just me.

[mfcphil Friend mfcphilJoin date: September 2007Posts: 2866Downloads:3Uploads:218 Thanks: 211 Thanked: 388 times in 133 posts]

#305840

Dont you have to resize all your images if you use Fluid width?

That could be an awful lot of extra work….phew no thanks :p

[Author]

Posts