Joomla Templates Club 406,261 posts

[mallman Friend mallmanJoin date: January 2009Posts: 33Downloads:0Uploads:0 Thanks: 12]

#138426

I would like to narrow the width of the left and right columns of the template how do I do this?
Thanks for any advice

[ShannonN Friend ShannonNJoin date: July 2006Posts: 1947Downloads:0Uploads:9 Thanks: 16 Thanked: 172 times in 49 posts]

#292837

mallman;113859I would like to narrow the width of the left and right columns of the template how do I do this?
Thanks for any advice

use firefox and the firebug plugin to see where the code is for left column and right column once you id these parts off the template adjust the css that controls padding or width to suit remembering that decreasing the left & right will increase the body area keep all within the total 100% width for template etc

ShannonN

[mallman Friend mallmanJoin date: January 2009Posts: 33Downloads:0Uploads:0 Thanks: 12]

#292884

Thank you Shannon, the firebug extension is a useful tool. I’ve tried to ajust the percentage widths but with crazy results! What I would like to do is have my middle main column wider (about 80%) and the left and right columns equal but narrower. Here’s the code I have been looking at in template.css:

/* MAIN LAYOUT DIVS
——————————————————— */
#ja-wrapper {
width: 970px;
margin: 0 auto;
}

.narrow #ja-wrapper {
width: 760px;
margin: 0 auto;
}

#ja-container {}

#ja-mainbody {
width: 78%;
float: left;
}

/* PRIMARY COLUMN
——————————————————— */
#ja-content {
clear: both;
display: block;
float: right;
width: 72%;
background: url(../images/content-center.gif) repeat-y center;
}

#ja-content-top {
background: url(../images/content-top.gif) no-repeat center top;
}

#ja-content-bot {
background: url(../images/content-bot.gif) no-repeat center bottom;
}

.narrow #ja-content {
background: url(../images/content-center-n.gif) repeat-y center;
}

.narrow #ja-content-top {
background: url(../images/content-top-n.gif) no-repeat top center;
}

.narrow #ja-content-bot {
background: url(../images/content-bot-n.gif) no-repeat bottom center;
}

#ja-current-content {
padding: 20px 20px 10px;
}

/* COLUMNS
——————————————————— */
#ja-col1 {
float: left;
overflow: hidden;
width: 28%;
}

#ja-col1 div.ja-innerpad {
}

#ja-col2 {
float: right;
overflow: hidden;
width: 22%;
}

#ja-col2 div.ja-innerpad {

}

/*common style for column*/

/* COLLAPSIBLE LAYOUT
——————————————————— */
#ja-containerwrap,
#ja-containerwrap-fr,
#ja-containerwrap-fl,
#ja-containerwrap-f {
padding: 0;
margin: 0;
clear: both;
}

/*content + left*/
#ja-containerwrap-fr #ja-mainbody {
width: 100%;
}

#ja-containerwrap-fr #ja-col1 {
width: 22%;
}

#ja-containerwrap-fr #ja-content {
width: 78%;
background: url(../images/content-center2.gif) repeat-y center;
}

#ja-containerwrap-fr #ja-content-top {
background: url(../images/content-top2.gif) no-repeat center top;
}

#ja-containerwrap-fr #ja-content-bot {
background: url(../images/content-bot2.gif) no-repeat center bottom;
}

.narrow #ja-containerwrap-fr #ja-content {
background: url(../images/content-center2-n.gif) repeat-y center;
}

.narrow #ja-containerwrap-fr #ja-content-top {
background: url(../images/content-top2-n.gif) no-repeat center top;
}

.narrow #ja-containerwrap-fr #ja-content-bot {
background: url(../images/content-bot2-n.gif) no-repeat center bottom;
}

/*content + right*/
#ja-containerwrap-fl #ja-content {
width: 100%;
background: url(../images/content-center2.gif) repeat-y center;
}

#ja-containerwrap-fl #ja-content-top {
background: url(../images/content-top2.gif) no-repeat center top;
}

#ja-containerwrap-fl #ja-content-bot {
background: url(../images/content-bot2.gif) no-repeat center bottom;
}

.narrow #ja-containerwrap-fl #ja-content {
background: url(../images/content-center2-n.gif) repeat-y center;
}

.narrow #ja-containerwrap-fl #ja-content-top {
background: url(../images/content-top2-n.gif) no-repeat center top;
}

.narrow #ja-containerwrap-fl #ja-content-bot {
background: url(../images/content-bot2-n.gif) no-repeat center bottom;
}

/*full*/
#ja-containerwrap-f #ja-mainbody {
width: 100%;
}

#ja-containerwrap-f #ja-content {
width: 100%;
background: url(../images/content-center1.gif) repeat-y center;
}

#ja-containerwrap-f #ja-content-top {
background: url(../images/content-top1.gif) no-repeat center top;
}

#ja-containerwrap-f #ja-content-bot {
background: url(../images/content-bot1.gif) no-repeat center bottom;
}

#ja-containerwrap-f #ja-current-content {
padding-left: 20px;
padding-right: 20px;
}

.narrow #ja-containerwrap-f #ja-content {
background: url(../images/content-center1-n.gif) repeat-y center;
}

.narrow #ja-containerwrap-f #ja-content-top {
background: url(../images/content-top1-n.gif) no-repeat center top;
}

.narrow #ja-containerwrap-f #ja-content-bot {
background: url(../images/content-bot1-n.gif) no-repeat center bottom;
}

[ShannonN Friend ShannonNJoin date: July 2006Posts: 1947Downloads:0Uploads:9 Thanks: 16 Thanked: 172 times in 49 posts]

#292905

mallman;113934Thank you Shannon, the firebug extension is a useful tool. I’ve tried to ajust the percentage widths but with crazy results! What I would like to do is have my middle main column wider (about 80%) and the left and right columns equal but narrower. Here’s the code I have been looking at in template.css:

/* MAIN LAYOUT DIVS
——————————————————— */
#ja-wrapper {
width: 970px;
margin: 0 auto;
}

.narrow #ja-wrapper {
width: 760px;
margin: 0 auto;
}

#ja-container {}

#ja-mainbody {
width: 78%;
float: left;
}

/* PRIMARY COLUMN
——————————————————— */
#ja-content {
clear: both;
display: block;
float: right;
width: 72%;
background: url(../images/content-center.gif) repeat-y center;
}

#ja-content-top {
background: url(../images/content-top.gif) no-repeat center top;
}

#ja-content-bot {
background: url(../images/content-bot.gif) no-repeat center bottom;
}

.narrow #ja-content {
background: url(../images/content-center-n.gif) repeat-y center;
}

.narrow #ja-content-top {
background: url(../images/content-top-n.gif) no-repeat top center;
}

.narrow #ja-content-bot {
background: url(../images/content-bot-n.gif) no-repeat bottom center;
}

#ja-current-content {
padding: 20px 20px 10px;
}

/* COLUMNS
——————————————————— */
#ja-col1 {
float: left;
overflow: hidden;
width: 28%;
}

#ja-col1 div.ja-innerpad {
}

#ja-col2 {
float: right;
overflow: hidden;
width: 22%;
}

#ja-col2 div.ja-innerpad {

}

/*common style for column*/

/* COLLAPSIBLE LAYOUT
——————————————————— */
#ja-containerwrap,
#ja-containerwrap-fr,
#ja-containerwrap-fl,
#ja-containerwrap-f {
padding: 0;
margin: 0;
clear: both;
}

/*content + left*/
#ja-containerwrap-fr #ja-mainbody {
width: 100%;
}

#ja-containerwrap-fr #ja-col1 {
width: 22%;
}

#ja-containerwrap-fr #ja-content {
width: 78%;
background: url(../images/content-center2.gif) repeat-y center;
}

#ja-containerwrap-fr #ja-content-top {
background: url(../images/content-top2.gif) no-repeat center top;
}

#ja-containerwrap-fr #ja-content-bot {
background: url(../images/content-bot2.gif) no-repeat center bottom;
}

.narrow #ja-containerwrap-fr #ja-content {
background: url(../images/content-center2-n.gif) repeat-y center;
}

.narrow #ja-containerwrap-fr #ja-content-top {
background: url(../images/content-top2-n.gif) no-repeat center top;
}

.narrow #ja-containerwrap-fr #ja-content-bot {
background: url(../images/content-bot2-n.gif) no-repeat center bottom;
}

/*content + right*/
#ja-containerwrap-fl #ja-content {
width: 100%;
background: url(../images/content-center2.gif) repeat-y center;
}

#ja-containerwrap-fl #ja-content-top {
background: url(../images/content-top2.gif) no-repeat center top;
}

#ja-containerwrap-fl #ja-content-bot {
background: url(../images/content-bot2.gif) no-repeat center bottom;
}

.narrow #ja-containerwrap-fl #ja-content {
background: url(../images/content-center2-n.gif) repeat-y center;
}

.narrow #ja-containerwrap-fl #ja-content-top {
background: url(../images/content-top2-n.gif) no-repeat center top;
}

.narrow #ja-containerwrap-fl #ja-content-bot {
background: url(../images/content-bot2-n.gif) no-repeat center bottom;
}

/*full*/
#ja-containerwrap-f #ja-mainbody {
width: 100%;
}

#ja-containerwrap-f #ja-content {
width: 100%;
background: url(../images/content-center1.gif) repeat-y center;
}

#ja-containerwrap-f #ja-content-top {
background: url(../images/content-top1.gif) no-repeat center top;
}

#ja-containerwrap-f #ja-content-bot {
background: url(../images/content-bot1.gif) no-repeat center bottom;
}

#ja-containerwrap-f #ja-current-content {
padding-left: 20px;
padding-right: 20px;
}

.narrow #ja-containerwrap-f #ja-content {
background: url(../images/content-center1-n.gif) repeat-y center;
}

.narrow #ja-containerwrap-f #ja-content-top {
background: url(../images/content-top1-n.gif) no-repeat center top;
}

.narrow #ja-containerwrap-f #ja-content-bot {
background: url(../images/content-bot1-n.gif) no-repeat center bottom;
}

I don’t want to hog the thread with tutorials on css web design etc , but the biggest hint i can give is to really look at the css and html in sections,

see how it relates to the overall site

Look at the first code block ja wrapper it sets the width for the site, all other widths must not exceed this or you get wierd results, narrow wrapper is 210 px narrower, mainbody is 78% of 760px, primary column is 72 % of available width of narrow wrapper. This is how I interpret it.

Use Firebug to show you the containers in a grid pattern by using Layout in right column header that may help if you are a visual person.

Cheers ShannonN

2 users say Thank You to ShannonN for this useful post

1. cjmicro
2. mallman

[Author]

Posts