Public Forums 71,145 posts

[magnusl Friend magnuslJoin date: October 2008Posts: 2Downloads:0Uploads:0]

#134288

Hi!

I am making small adjustments to the JA Purity, such as using another header image and now I would like to have a wider right column, with a background image. But here I have problems.

I have found, in templates.css, the id:
#ja-col2 {
float: right;
width: 40%;
overflow: hidden;
}
(line 1511- 1515)

When I set this to 40%, there is obviously a mismatch – the middle col seems not to adjust automatically. But where to I change this? I have been searching in these fora and found advice on adjusting

#ja-mainbody-fr #ja-contentwrap

but neither this nor any of the similar settings for contentwrap seems to do the job. What am I missing?

Secondly, I would like a background image for my right AND for my middle columns. Where do I set this? I have tried to exchange

#ja-containerwrap-fr #ja-containerwrap2 {
background: url(../images/cw-bg2.gif) no-repeat 50% 0;
}
for the image I want, but nothing changes.

Any advice?

Magnus L

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#274856

Hi Mangus,

First of all, it is not enough just to change the right column width without changing the width for the rest of the page…nor can we expect it to reconfigure itself automatically…though that would be GREAT!!! 😀

Purity comes with an 80% mainbody width and a 20% right column width.
If you want to change the right column to 40%…then the mainbody has to be reduced to 60%…for a total of 100%.

Here’s how:

Increase right column to 40%

In template.css (line 1276) (your actual line numbers may be different…this is from the demo)
change from this…


#ja-col2 {
float:right;
overflow:hidden;
width:20%;
}

To this:


#ja-col2 {
float:right;
overflow:hidden;
width:40%;
}

And to reduce the mainbody width….
in template.css (line 835) (your actual line numbers may be different…this is from the demo)
Change from this:


#ja-mainbody, #ja-mainbody-fl {
float:left;
width:80%;
}

To this:


#ja-mainbody, #ja-mainbody-fl {
float:left;
width:60%;
}

Now as for the background, you’ve got a couple of things to remember.
Let’s take the right column and say we want to change it to an Adobe black (not quite full black – #121212)
In the code we modified above we can simply add a line:


#ja-col2 {
background-color:#121212; (or you could add an image as you tried)
float:right;
overflow:hidden;
width:40%;
}

And you can do the same for the mainbody background


#ja-mainbody, #ja-mainbody-fl {
background-color:#121212;
float:left;
width:60%;
}

NOTE: While this DOES change the background for those areas…it DOES NOT change the background for each of the Individual modules that are in those areas or other items (i.e. pdf, print, email sections). Those are controlled by a specific CSS call.
You’ll need to do the same for each one of those modules and/or areas separately.

Have fun!
John.

Have fun!
John.

[magnusl Friend magnuslJoin date: October 2008Posts: 2Downloads:0Uploads:0]

#274894

Thanks for your advice! Great!!

The problem for me is and was to understand which setting to change – why the “#ja-mainbody, #ja-mainbody-fl” and not “#ja-mainbody, #ja-mainbody-fr”? These things are rather obscure – are there documentation about it somewhere, or can I see it through some version of preview or similar? (this far I obviously have not succeeded in finding out)

Anyway: it works well to adjust what you told me, to make the cols sum up to 100 %. However, changing the setting for mainbody moves it to the left, and now it overflows some of the grey background in the left column. Do you know how to adjust this, that is, making this grey background somewhat smaller?

And: there seems to be some padding around the right col, that I just cannot find a way to get rid of. What I am trying to accomplish, is using one image as background, slipt in two parts for main and right col respectively. And then there can be no gap between them.

Second problem with cols: image as background (or color) when I set it in the section #ja-mainbody, #ja-mainbody-fl places this image also behind the menu – hrm…. I would want the menu as it was, and the image only behind the main col.

Any ideas?

Magnus

[anre Friend anreJoin date: October 2010Posts: 15Downloads:0Uploads:0 Thanks: 6]

#360716

i cant change only right column ni width….?

[Author]

Posts