Joomla Templates Club 406,261 posts

[danakem Friend danakemJoin date: March 2008Posts: 6Downloads:0Uploads:1 Thanks: 2 Thanked: 2 times in 1 posts]

#126956

Is it possible to make the right column a bit wider, I need to show some images that are 200px in widht?

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

#243246

It’s not only possible, but relatively easy.

I believe the css rule for the right column is called jacol2 (or something like that).
It’s pretty well labeled within the template.css file.

Another way to always find out which css rules/classes control a particular module is look for the module poisition in the index.php file, and then see which div class is assigned to it. Then, just find it within the css file(s).

If you increase the width of the right column, you may have to also adjust (i.e. decrease) the width of the “main container” or left column as well – to balance things out.

As with most things in learning the Joomla template system, a little experimentation can go a long way.

[danakem Friend danakemJoin date: March 2008Posts: 6Downloads:0Uploads:1 Thanks: 2 Thanked: 2 times in 1 posts]

#244119

Thank you tcraw1010!
I managed to get the column wider but I can’t find where to edit the vertical line.
Can you help me?

---

Attachments:

1. 

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

#244122

What are you trying to do with the vertical line?

That should be the column’s border, and it should move with the width of the column itself.

[Nam Nguyen Phi Friend Nam Nguyen PhiJoin date: September 2014Posts: 248Downloads:3Uploads:35 Thanks: 20 Thanked: 57 times in 29 posts]

#244153

To make right column wider, pls change some thing in template.css
1. Open templates/ja_edenite/css/template.css
2. Goto line 533, change value of width property of ja-content

#ja-content {
clear: both;
display: block;
float: left;
width: 75%; <-- DECREASE THIS VALUE
}
3. Goto line 553, change value of width property of ja-col2

#ja-col2 {template.css (line 553)
color:#626A69;
float:right;
overflow:hidden;
width:25%; <-- INCREASE THIS VALUE
}
4. And then, you must modify image: main-bg2.gif (in images folder) to set vertical line fit with new width of right column.
That’s all. Goodluck!

[nehocxela Friend nehocxelaJoin date: April 2008Posts: 11Downloads:0Uploads:4]

#247314

<em>@namnp129 47043 wrote:</em><blockquote>To make right column wider, pls change some thing in template.css
1. Open templates/ja_edenite/css/template.css
2. Goto line 533, change value of width property of ja-content

#ja-content {
clear: both;
display: block;
float: left;
width: 75%; <-- DECREASE THIS VALUE
}
3. Goto line 553, change value of width property of ja-col2

#ja-col2 {template.css (line 553)
color:#626A69;
float:right;
overflow:hidden;
width:25%; <-- INCREASE THIS VALUE
}
4. And then, you must modify image: main-bg2.gif (in images folder) to set vertical line fit with new width of right column.
That’s all. Goodluck!</blockquote>
namnp129 – you’re advice worked to increase the width of the second column however chaning the main-bg2.gif file did not move the vertical line (at least not for me). When I opened the .gif file it was a a horizontal invisible line 1 pixel in height.

Is there anything else you can think of to do?

[Author]

Posts