Joomla Templates Club 406,261 posts

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#120522

Is it possible to alter the width of the “left position” (where the vertical navigation menus are)?

Let’s say I have set my overall site at a fixed width of 950px. Naturally, the other elements on the site conform to that width (as they would if I still had the Site Tools function enabled – which I purposefully do not). In any case, if I wanted to further reduce the overall width of the ‘left position’ by, say, 10 – 15px or so, is this possible and, if so, where in the code could I do this?

Thank you for any assistance you can provide.

TOM

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#221159

Incidentally, I am not only talking about the textual elements – I am talking about the graphical column altogether. I found (in the CSS code) where the text elements can be altered, but the actual graphical column itself doesn’t change.

Is this something that needs to be done in a graphics program – or can it be altered in either the CSS or inde.php code?

[swemmel Friend swemmelJoin date: February 2006Posts: 794Downloads:34Uploads:53 Thanks: 36 Thanked: 64 times in 1 posts]

#221164

Hi Tom,

Look in the css file for this code:


/* CONTENT COLUMN
--------------------------------------------------------- */
#ja-mainbody, #ja-mainbody-fl, #ja-mainbody-fr, #ja-mainbody-f {
}
#ja-mainbody, #ja-mainbody-fr {
float: right;
width: 80%;
}
#ja-mainbody-fl {
float: left;
width: 100%;
}
#ja-mainbody-fl #ja-contentwrap {
float: left;
width: 80%;
background: none;
}
#ja-mainbody-fl #ja-pathway,
#ja-mainbody-f #ja-pathway {
background: url(../images/stripe2.gif);
}
#ja-mainbody-fl #ja-rightcol {
float: right;
width: 20%;
}
#ja-mainbody-f {
float: left;
width: 100%;
}
#ja-mainbody-f #ja-contentwrap {
background: none;
}
#ja-mainbody #ja-contentwrap {
float: left;
width: 75%;
}
/* LEFT COLUMN + RIGHT COLUMN
--------------------------------------------------------- */
#ja-leftcol {
float: left;
width: 19.9%;
}
#ja-rightcol {
float: right;
width: 24.9%;
overflow: hidden;
}


You can change the left-column width, for example from 19,9% to 29,9%. But when you do this you also have to change the width of the content (the other 2 red-marked pieces of code). In this case you have to change them from 80% to 70%.

This will do the job for you.

Kind Regards,
Peter

[Author]

Posts