Joomla Templates Club 406,261 posts

[esedic Friend esedicJoin date: July 2007Posts: 14Downloads:10Uploads:1 Thanked: 1 times in 1 posts]

#135101

Hi there!

I’m using Joomla 1.5.7 and I wanted to make some modifications of the left and right columns of the Iolite template. I wanted to move left and right column a little bit to the left.

See screenshot of what I wanted to do:

So I did the following modifications of the template.css:

/* COLUMNS
--------------------------------------------------------- */
#ja-colwrap {
float: right;
overflow: hidden;
width: 38%; /*original 46%*/
}

/*columns*/
#ja-col1 {
float: left;
width: 43.9%; /*original 49.9*/
}

#ja-col2 {
float: right;
width: 43.9%; /*original 49.9*/
}

* html #ja-col2 {
width: 43.2%; /*original 49.2*/
}

#ja-col1 div.ja-innerpad,
#ja-col2 div.ja-innerpad {
padding: 2px 10px 0; /*original 2px 20px 0*/

I must admit I’m not a CSS expert, I’m mostly using trial&error method.
So now I have sitation like this (see screenshots):

So now I want to move dotted border more to the right and also expand content area, but I’m having problems with that. Any help would be appreciated.

Oh, this is tested on a localhost so I can’t provide URL, but I think it’s obvisous what I want to do.

Cheers!

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

#279623

Hi !

To adjust position of seperator dotted , you can modify in css following instruct below :
Open template.css file in templates/ja_iolite/css folder ,find following code at about line 482 :


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

#ja-container-inner {
background: url(../images/vdot2.gif) repeat-y 78% 0;
}


you change value of red text to control position of dotted line.

[Author]

Posts