Premium Joomla Templates

  • Categories
    View categories that are created for the site and filter discussions by categories.
howardru on Thursday, August 02 2012, 08:37 PM

Template width?


Can anyone tell me how and where to make the template wider for the content part ?

many thanks
The discussion has been resolved.

Accepted Answer

  • Replied by zahir on Friday, August 03 2012, 10:01 AM
    One way to achieve this would be to create a separate stylesheet for this type of page. Lets call this wide.css and save it under the css folder within the template directory. In wide.css we would place the following code (you may add/adjust this needed):
    #ja-container .main {

    This will make your content area width 1200px wide and at least 1200px tall.
    To call this stylesheet from your "content only" profile, modify the snippet above to call the stylesheet file as follows:
    	<!--Extra css load for this layout-->

    All you need to do is add <file>css/wide.css</file> between the two <stylesheet> tags.

    Hope that helps!

  • Replied by zahir on Thursday, August 02 2012, 10:11 PM · Hide · #1
    Hi Howardu,

    If you'd like to adjust the width of the content area (assuming that the overall width of the template remains constant), you can adjust the layout in the layout tab as shown below:

    <?xml version="1.0" encoding="utf-8"?>
    <layout name="desktop">
    	<!--Extra css load for this layout-->
    	<blocks name="top" style="xhtml">
    		<block name="header" type="header" main-inner="1"></block>
    		<block name="topsl" type="spotlight" main-inner="1">user1,user2,user3,user4,user5</block>
    		<block name="mainnav" type="mainnav" main-inner="1"></block>
    	<blocks name="middle" colwidth="22">
    		<block name="content-mass-top" type="spotlight" style="JArounded">user6,user7,user8,user9,user10</block>
    		<block name="left1" style="JArounded">left</block>
    		<block name="right1" style="JArounded">right</block>
    	<blocks name="bottom" style="xhtml">
    		<block name="botsl" type="spotlight" style="JArounded">user11,user12,user13,user14,user15</block>
    		<block name="botsl2" type="spotlight"  style="JArounded" main-inner="1" special="right" specialwidth="40">user16,user17,user18,user19</block>
    		<block name="navhelper" type="navhelper" main-inner="1"></block>
    		<block name="footer" type="footer"></block>

    In the example above (taken from the default xml layout), modifying the value of <blocks name="middle" colwidth="22"> from 22 to 15 would make the columns narrower and the main content area wider.

    Hope that helps!
  • Replied by howardru on Friday, August 03 2012, 12:12 AM · Hide · #2
    Thank you for your advice but I am afraid I did not make myself very clear sorry.

    What I have done is that I have made a profile with 'content only' for the layout.

    I have put an Iframe in it, but it does not display all the content from my other web site
    so really I would like to make the white area as shown in the attachment wider
    and possibly deeper too - for I really do not wish to display scroll bars on the Iframe

    Is there any way to do this?

    Many thanks for your help


    Replied by howardru on Friday, August 03 2012, 12:15 PM · Hide · #3

    That is exactly what I wanted

    Thank you so much for all your help:)
Your Response
Please login first in order for you to submit comments

Recent Themes

The Joomla!™ name is used under a limited license from Open Source Matters in the United Statesand other countries. is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.