How do i change the width of left column in old ja mesolite? So that my jscook menu can be usable?
himangi
Friend
Menu seems fine to me.. Can you please confirm if you have solved the issue and I can close the thread?
<em>@himangi 241588 wrote:</em><blockquote>Menu seems fine to me.. Can you please confirm if you have solved the issue and I can close the thread?</blockquote>
Please look at the image atached – i used localhost to test the menu. The words are far too long to fit in the left column and there is a space between 1st and 2nd level of menu, so i need to increase it but than i need to fit with the template. Please advice how.
himangi
Friend
To increase the menu width in T3 template,
1. Go to Extensions > Template Manager > your template > Layouts Tab
2. Click on Edit link infront of the layout you are using (If you dont know anything about this, please click on the edit link infront of Default layout.)
3. Find <blocks name=”middle” colwidth=”somevalue” change this colwidth, Save the layout and check the changes on frontend. Here you increase column width in % value. If you can not see the change, please clear JAT3 cache and check.
<em>@himangi 241704 wrote:</em><blockquote>To increase the menu width in T3 template,
1. Go to Extensions > Template Manager > your template > Layouts Tab
2. Click on Edit link infront of the layout you are using (If you dont know anything about this, please click on the edit link infront of Default layout.)
3. Find <blocks name=”middle” colwidth=”somevalue” change this colwidth, Save the layout and check the changes on frontend. Here you increase column width in % value. If you can not see the change, please clear JAT3 cache and check.</blockquote>
I have JA Mesolite – 2nd July 08 template – not T3 template, as i don’t have layouts tab and when i edit this template there is no blocks “middle”.
And in the /home/*/*/www/templates/ja_mesolite/css/template.css :
/* PRIMARY COLUMN
——————————————————— */
#ja-mainbody {
width: 760px;
float: right;
clear: both;
}
.narrow #ja-mainbody {
width: 600px;
}
#ja-content {
padding: 15px;
position: relative;
border-bottom: 1px solid #E6E6E6;
}
/* COLUMNS
——————————————————— */
#ja-col {
float: left;
overflow: hidden;
width: 190px;
}
.narrow #ja-col {
width: 150px;
}
I think changes should be done here but i don’t know how to do it so template would not “flow”.
himangi
Friend
Hi,
You have found the right part of css, you only need to know which part changes what in your template.
As you see in the css you have given, there is mainbody styling and there is narrow mainbody styling and ja-col and narrow ja-col stylings. Currently you seem to be using the wider width. So to increase the column width you need to increase width from 190 to whatever you want, say 210px in following code.
<blockquote>#ja-col {
float: left;
overflow: hidden;
width: 190px;
}</blockquote>
And since we have increased column width, we need to reduce main content area width to fit it in the total template width. So to reduce the main content area, change width by the same amount we increased the column width, that is from 760 to 740px.
<blockquote>#ja-mainbody {
width: 760px;
float: right;
clear: both;
}</blockquote>
Make above changes and check the template..
1 user says Thank You to himangi for this useful post
Well your advice worked well but i still got this grey line crossing the left column. How do i get rid of it?
himangi
Friend
Hi,
Please find
#ja-containerwrap {
background: url(../images/dot.gif) repeat-y 190px 0 white;
}
in template.css and change 190 to 210px (same as your column width)
If you dont want that separator line to appear at all, then just put background:none; instead of background: url(../images/dot.gif) repeat-y 190px 0 white;
Thank you everything all right now.
This topic contains 9 replies, has 2 voices, and was last updated by 
We moved to new unified forum. Please post all new support queries in our New Forum
