Joomla Templates Club 406,261 posts

[jerestang Friend jerestangJoin date: July 2008Posts: 17Downloads:0Uploads:0 Thanks: 5]

#130669

Can anyone show me in details how to change the size of the left column? I set up template using one left column and the main page. I want to make the left column bigger and the main page smaller. I try to change values of the ja-masstop, ja-massbot, ja-rightwrap but they appear to no effect at all. I posted the question in the other related issue but got no response. Someone please help!

[Meng Fei Koo Friend Meng Fei KooJoin date: September 2014Posts: 76Downloads:0Uploads:2 Thanks: 11 Thanked: 2 times in 1 posts]

#258962

Hi,

Not sure how many columns you used. I believe you should look #ja-col1,#ja-col2 and #ja-col3. And also the ja_vars.php

Happy trying. 😀

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#258970

Hi jerestang !
You can change it following way below ;
Open template.css file in templates/ja_barite/css folder , find following code section at about line 504 ;


#ja-content {
clear:both;
display:block;
float:right;
width:75%;
}


change to :


#ja-content {
clear:both;
display:block;
float:right;
width:65%;
}


then continue find following code section at about line 518 :

#ja-col1 {template.css (line 518)
float:left;
overflow:hidden;
width:24%;
}

change to :

#ja-col1 {
float:left;
overflow:hidden;
width:34%;
}


[jerestang Friend jerestangJoin date: July 2008Posts: 17Downloads:0Uploads:0 Thanks: 5]

#259127

hainn84,
I tried to change the two varibles you suggested but nothing changed. Is there any suggestion?

kmf165,
I only need 2 columns: main menu on the left and the main contain to the right. Should I need to mess with #ja-col2 and #ja-col3? What about the ja_vars.php?

[Meng Fei Koo Friend Meng Fei KooJoin date: September 2014Posts: 76Downloads:0Uploads:2 Thanks: 11 Thanked: 2 times in 1 posts]

#259165

I see.. Then I believe you only need #ja-col1, tried make the % higher and see?

1 user says Thank You to Meng Fei Koo for this useful post

1. jerestang

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#259179

Hi jerestang !
I make sure that obove code will change width of left column. Can you send url of your site ?

[jerestang Friend jerestangJoin date: July 2008Posts: 17Downloads:0Uploads:0 Thanks: 5]

#259330

Please see the link

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#259343

Hi jerestang !
Sorry , i’m missing “:” at above post ., please view again , i have modified it .

[jerestang Friend jerestangJoin date: July 2008Posts: 17Downloads:0Uploads:0 Thanks: 5]

#259351

It still doesn’t work. I have the “:” in the code. Here is the code I currently have:
<blockquote>/* PRIMARY COLUMN

——————————————————— */

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

#ja-content {
clear:both;
display:block;
float:right;
width:65%;
}

#ja-content div.ja-innerpad {
padding: 0 20px;
}

/* COLUMNS

——————————————————— */

#ja-col1 {
float:left;
overflow:hidden;
width:34%;
}

#ja-masstop,

#ja-massbot {
display: block;
float: right;
width: 34.9%;
clear: right;
}

#ja-colswrap {
float: right;
width: 34.9%;
}

#ja-col2 {
float: left;
overflow: hidden;
}

#ja-col3 {

float: right;
overflow: hidden;
padding: 0 0 10px;
}

#ja-col3 div.ja-innerpad {
border: 1px solid #DDDDDD;
border-bottom: 2px solid #CCCCCC;
margin-left: 5px;
}

/*common style for column*/
#ja-col1 table,
#ja-col2 table,
#ja-col3 table {
border-collapse: collapse;
border-spacing: 0;
}

#ja-col1 .article_separator,
#ja-col2 .article_separator,
#ja-col3 .article_separator {
display: none;
}
</blockquote>

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#259353

You find following code section at about line 604 :


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


change to :


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


continue :
find following code section at about line 595 :


#ja-containerwrap-fr #ja-content {
float:right;
width:83.9%;
}


change to :


#ja-containerwrap-fr #ja-content {
float:right;
width:73.9%;
}


1 user says Thank You to Sherlock for this useful post

1. jerestang

[jerestang Friend jerestangJoin date: July 2008Posts: 17Downloads:0Uploads:0 Thanks: 5]

#259361

Works like a charm. Thanks a bunch!

kmf165 – thanks for trying to help me! 🙂

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#259561

OK , I will mark this thread to “Solved”;

[Author]

Posts