Joomla Templates Club 406,261 posts

[darien81 Friend darien81Join date: March 2009Posts: 4Downloads:0Uploads:0]

#144723

Hi – I’ve been trying to increase the right column width from 190px to 250px. Have tried adding width: 125% in template.css and also played around with the % in layout.css. I also noticed there is a right.php in “blocks”, as well as ja.helper.php in “lib”.

Of course I also studied index.php and found no means of adjusting the width.

The closest I came to finding the solution was in layout.css

/* Right Column —*/
#ja-right { float: right; }
#ja-right .ja-r2 .ja-right1, #ja-right .ja-r2 .ja-right2 { width: 50%; }
#ja-right .ja-r1 .ja-col { width: 100%; }

Increasing those percentages had no effect. The only thing I was able to do was change the pixel width of the template at line 16:

.main { width: 980px; margin: 0 auto; position: relative;}

Anyhow, I am hoping someone can help me figure this out.

Thnx all

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#319101

Hi darien81

Please try to do with this code:

/* Right Column ---*/
#ja-right { float: right !important; }
#ja-right .ja-r2 .ja-right1, #ja-right .ja-r2 .ja-right2 { width: 50% !important; }
#ja-right .ja-r1 .ja-col { width: 100% !important; }

[darien81 Friend darien81Join date: March 2009Posts: 4Downloads:0Uploads:0]

#319166

Hi – Thanks for the quick reply, but I don’t understand.

As I said in my post, when I change the precentages in that code (in layout.css), I see no effect at all. Can you tell me what to change the numbers to in order to expand ja-right to approximately 250px (I belive it is set at 190px)

Thank you

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#319717

Hi – thank you for your PM

I am sorry for my mistake.

Please open templates/ja_teline_iii/css/layout.css file, at about line 60, find following code:


#ja-right .ja-r2 .ja-right1, #ja-right .ja-r2 .ja-right2 {
width:50%;
}


and change to:


#ja-right .ja-r2 .ja-right1 {
width:40%;
}

#ja-right .ja-r2 .ja-right2 {
width:60%;
}


Hope it helps.

1 user says Thank You to JA Developer for this useful post

1. santoshalom

[santoshalom Friend santoshalomJoin date: February 2009Posts: 119Downloads:0Uploads:22 Thanks: 67 Thanked: 14 times in 1 posts]

#322172

it did not work for me mR JaDeveloper

/* MAIN COLUMN
--------------------------------------------------------- */
#ja-mainbody { float: left; }
#ja-current-content, #ja-main {
float: right;
width: 485px !important;
}

/* SIDE COLUMNS
--------------------------------------------------------- */
.ja-colswrap {}
.ja-col {}

/* Left Column ---*/
#ja-left .ja-l2 .ja-left1, #ja-left .ja-l2 .ja-left2 { width: 50%; }
#ja-left .ja-l1 .ja-col { width: 100%; }

/* Right Column ---*/
#ja-right .ja-r2 .ja-right1 {
width:285px;
}
#ja-right .ja-r2 .ja-right2 {
width:285px;
}
#ja-right .ja-r1 .ja-col { width: 285px; }

this what i put because i wanted right side to 285px with out increasing leftside

please help thanks

[santoshalom Friend santoshalomJoin date: February 2009Posts: 119Downloads:0Uploads:22 Thanks: 67 Thanked: 14 times in 1 posts]

#322381

bump anyone to help on this… i raised a ticket never got satisfied reply 2 weeks.. i getting tiredd…

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#322586

Hello santoshalom,

At the moment I also don’t quite understand the width-configurations of this template.
As you said it is easy to change width of template, f.i. from 980px to 1000px, in layout.css.

When you do this you see – in default template, so with mass-columns right, and a left and right smal column at the right side of the main content – that the ratio of main and right is 60% to 40%.

This 40% of right side is what is called: #ja-right.
This right side is devided in 2 columns: left and right: each 50%.

So when you want to make this devision different, you have to change this line:

#ja-right .ja-r2 .ja-right1, #ja-right .ja-r2 .ja-right2 { width: 50%; }

change to, for instance

#ja-right .ja-r2 .ja-right1{width: 30%;}
#ja-right .ja-r2 .ja-right2 { width: 70%; }

Hope this is a beginning of what you want.
I have no idea where to change the devision of the complete page, now in 60% – 40%.

As you can see in the file right.php with of 40% is fetched from somewhere else:

<div id="ja-right" class="column sidebar" style="width:<?php echo $r ?>%">

this variable $r gets attention in ja.template.helper.php, line 503: //right

The output is 40%, as you can see in the source-code of the home-page of the jateline-III-demo.

<div id="ja-right" class="column sidebar" style="width:40%">

I don’t know where to change this.

Hope this helps you a little bit.

Best regards

1 user says Thank You to micrantha for this useful post

1. santoshalom

[santoshalom Friend santoshalomJoin date: February 2009Posts: 119Downloads:0Uploads:22 Thanks: 67 Thanked: 14 times in 1 posts]

#322688

thanks..micrantha

this helped me

#ja-right { float: right; }

and change to:

#ja-right {
float: right;
width:285px !important;
}

- at about line 55, find following code:

#ja-mainbody { float: left; }

and change to:

#ja-mainbody {

float: left;

width:485px !important;
}

[dawax Friend dawaxJoin date: June 2008Posts: 29Downloads:0Uploads:1 Thanks: 7 Thanked: 1 times in 1 posts]

#324572

Thanks for your hard work. It helped me a lot but I have one more question…

I changed the width of the right column and the main body, but the line between them didn’t move. How do I do this?

see http://www.sagenexus.com

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#324779

Hi dawax

Open templates/ja_teline_iii/css/template.css file, at about line 775, find following code section:

#ja-container.ja-r1 .main { background: url(../images/dot.gif) repeat-y 80% 0 #fff; }

and change to:

#ja-container.ja-r1 .main { background: url(../images/dot.gif) repeat-y 74.2% 0 #fff; }

1 user says Thank You to JA Developer for this useful post

1. dawax

[carlorens Friend carlorensJoin date: November 2009Posts: 2Downloads:0Uploads:0]

#325084

Hi JA Developer,

I don’t think the answer is correct when I look at the http://www.sagenexus.com/ website. I have the same issue on my website: in the file /templates/ja_teline_iii/layouts/default.php I changed the variable to
$this->_basewidth = 25;

and in the file /templates/ja_teline_iii/css/template.css I changed the property
#ja-container.ja-r1 .main { background: url(../images/dot.gif) repeat-y 75% 0 #fff; }

However the line is still at 20% from the right side instead op 25%. Got a clue?

Regards,
Carlo

[carlorens Friend carlorensJoin date: November 2009Posts: 2Downloads:0Uploads:0]

#325085

Aha, figured it out myself:

Had to change the ie.css too:
#ja-container.ja-r1 .main { background: url(../images/dot-1pxfix.gif) repeat-y 75% 0 #fff;

[Author]

Posts