HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Spacing Between Middle & Right Panel

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#34345 (In Topic #7735)
Joe
Avatar

Honoured member

I implemented a fixed-width on my site and now I'm having a little trouble.

I can't seem to get my banner centered, so I was thinking I'd try and space out the panels to make the site "even". Pictures sound louder than words, so here you go: :P



Basically what I want to do is add more spacing between the left, middle, & right panels, to spread them out evenly across the site. It might look a bit funky-looking, but I figured I'd try it out and see how it looks. How do I go about doing this? Thanks.

Back to the top
 
Posted
Rating:
#34346
Avatar

You'd want to find .global_middle in global.css, and add margin-left and margin-right properties (or increase them if they already exist). For example:

Code

.global_middle {
   margin-left: 10px;
   margin-right: 10px;
}

Back to the top
 
Posted
Rating:
#34354
Joe
Avatar

Honoured member

That doesn't seem to be doing anything. ocPortal looks the same with or without those properties specified in the CSS.

Back to the top
 
Posted
Rating:
#34356
Avatar

Whoops. I forgot that they're specified explicitly in the template, which overrides values set in the CSS. In that case, edit the GLOBAL.tpl template, and replace this line:

Code

<div id="global_div" class="{$?,{$GET,fixed_width},global_middle_fixed_width,global_middle} dequirk" style="width: {$GET,middle_width}{+START,IF,{$NEQ,{$GET,left_width},0}}; margin-left: {$GET,left_width}{+END}{+START,IF,{$NEQ,{$GET,right_width},0}}; margin-right: {$GET,right_width}{+END}">
With the following:

Code

<div id="global_div" class="{$?,{$GET,fixed_width},global_middle_fixed_width,global_middle} dequirk" style="width: {$GET,middle_width}{+START,IF,{$NEQ,{$GET,left_width},0}}; margin-left: {$ADD,{$GET,left_width},1}em{+END}{+START,IF,{$NEQ,{$GET,right_width},0}}; margin-right: {$ADD,{$GET,right_width},1}em{+END}">

Basically, we make sure 1em is added to left and right margins of the middle. You can change the "1" if you want, but bear in mind that it's in ems, not pxs, so a small change will make a large difference.

Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: