Joomla Templates Club 406,261 posts

[cfixy Friend cfixyJoin date: September 2009Posts: 12Downloads:0Uploads:2]

#146207

Hi there — im trying to follow instructions on how to change my column widths. I am using JA Quijilla template, but its missing from the forum list (???)…. so i went to joomla.org to find general instructions.

can anyone tell me how to adjust the widths of my columns in JA Quijalla? thanks!

-c

So far i have tried this:

I found a post on Joomla.org forum that said to adjust it in my index.php, but only this exists in my index.php about columns…

<?php if ($ja_left) { ?>
<div id=”ja-col1″>
<jdoc:include type=”modules” name=”left” style=”xhtml” />
</div>

doesnt look like there is any width setting. then i read that i should go into my template css and find the following…

#leftcolumn {
padding: 0;
margin: 0;
width: 30%;
float:left;
}

but i dont have that either…. all my columns are called something else…. what do i do? this is what i found in my template.css file. im adjusting things here and there, but nothing seems to be making a difference. im not sure what im looking at….

/* PRIMARY COLUMN
——————————————————— */
#ja-content {
float: left;
width: 60%;
overflow:hidden;
}

#ja-content div.innerpad {
clear: both;
margin: 0;
padding: 20px 15px 15px 10px;
display: block;
height: 400px;
}

#ja-content div.innerpad-bg {
clear: both;
margin: 0;
padding: 20px 15px 15px 10px;
display: block;
height: 400px;
background: url(../images/innerpad-bg.gif) no-repeat top left;
}

html>body #ja-content div.innerpad-bg,
html>body #ja-content div.innerpad {
height: auto;
min-height: 400px;
overflow:hidden;
}

/* SECONDARY COLUMNS
——————————————————— */
#ja-colwrap {
float: right;
width: 40%;
}

#ja-col1 {
float: left;
width: 50%;
color: #FFFFFF;
overflow: hidden;
padding-bottom: 10px;
}

#ja-col2 {
float: right;
width: 49.9%;
overflow: hidden;
padding-bottom: 10px;
background: url(../images/col2-bg.gif) no-repeat top left;
}

#ja-col1 table, #ja-col2 table {
border-collapse: collapse;
border-spacing: 0;
}

#ja-col1 ul, #ja-col2 ul {
margin: 0;
padding: 0;
}

#ja-col1 ul li, #ja-col2 ul li {
padding-left: 13px;
background: url(../images/bullet-list.gif) no-repeat 2px 8px;
}

thanks in advance for any help 🙂

[cansay Friend cansayJoin date: February 2010Posts: 183Downloads:2Uploads:32 Thanks: 20 Thanked: 19 times in 1 posts]

#333305

The CSS settings dont work because the width is defined in the templatelayouts files.

Im trying my self to change width of a template 🙂

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#333922

Hello guy!

Beside codes which cfixy found,

Those codes using for adjust width if the both left + right columns display on the right side of web:

and the follow codes using for ajdust width of columns with : the wapper full width and the layout only has one column:

/* PRIMARY COLUMN
——————————————————— */
#ja-content {
float: left;
width: 60%;
overflow:hidden;
}

#ja-content div.innerpad {
clear: both;
margin: 0;
padding: 20px 15px 15px 10px;
display: block;
height: 400px;
}

#ja-content div.innerpad-bg {
clear: both;
margin: 0;
padding: 20px 15px 15px 10px;
display: block;
height: 400px;
background: url(../images/innerpad-bg.gif) no-repeat top left;
}

html>body #ja-content div.innerpad-bg,
html>body #ja-content div.innerpad {
height: auto;
min-height: 400px;
overflow:hidden;
}

/* SECONDARY COLUMNS
——————————————————— */
#ja-colwrap {
float: right;
width: 40%;
}

#ja-col1 {
float: left;
width: 50%;
color: #FFFFFF;
overflow: hidden;
padding-bottom: 10px;
}

#ja-col2 {
float: right;
width: 49.9%;
overflow: hidden;
padding-bottom: 10px;
background: url(../images/col2-bg.gif) no-repeat top left;
}

#ja-col1 table, #ja-col2 table {
border-collapse: collapse;
border-spacing: 0;
}

#ja-col1 ul, #ja-col2 ul {
margin: 0;
padding: 0;
}

#ja-col1 ul li, #ja-col2 ul li {
padding-left: 13px;
background: url(../images/bullet-list.gif) no-repeat 2px 8px;
}

/* COLLAPSIBLE LAYOUT
——————————————————— */
div.ja-w1 {
padding: 11px 0;
background: url(../images/cwrap-bg.gif) no-repeat bottom center;
}

.wide div.ja-w1 {
padding: 11px 0;
background: url(../images/cwrap-wide-bg.gif) no-repeat bottom center;
}

div.ja-w2 {
background: url(../images/cwrap-right-bg.gif) repeat-y top right;
}

div.ja-w3 {
background: url(../images/cwrap-left-bg.gif) repeat-y top left;
}

#ja-containerwrap {
background: url(../images/mainwrap-bg1.gif) repeat-y 60% 0;
}

#ja-container {
background: url(../images/mainwrap-bg2.gif) repeat-y 80% 0;
}

#ja-containerwrap,
#ja-containerwrap-c1,
#ja-containerwrap-c2,
#ja-containerwrap-f {
border: 1px solid #999999;
}

/* full */
#ja-containerwrap-f, #ja-containerwrap-f #ja-container {
background: #FFFFFF;
}

#ja-containerwrap-f #ja-content {
width: 100%;
}

/* content + col1 */
#ja-containerwrap-c1 {
background: url(../images/mainwrap-bg3.gif) repeat-y 80% 0;
}

#ja-containerwrap-c1 #ja-container,
#ja-containerwrap-c2 #ja-container {
background: none;
}

#ja-containerwrap-c1 #ja-content,
#ja-containerwrap-c2 #ja-content {
width: 80%;
}

#ja-containerwrap-c1 #ja-colwrap,
#ja-containerwrap-c2 #ja-colwrap {
width: 20%;
}

#ja-containerwrap-c1 #ja-col1,
#ja-containerwrap-c1 #ja-col2,
#ja-containerwrap-c2 #ja-col1,
#ja-containerwrap-c2 #ja-col2 {
width: 100%;
}

/* content + col2 */
#ja-containerwrap-c2 {
background: url(../images/mainwrap-bg2.gif) repeat-y 80% 0;
}

pls using firebug to complete this task http://www.kristarella.com/2009/02/how-to-use-firebug-for-css/

[Author]

Posts