BlogHarbor Home Page
FAQFAQ  SearchSearch  MemberlistMemberlist  UsergroupsUsergroups  UsergroupsRSS   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
2 and 3 column layouts; change color of the outer columns?
 
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> General Discussion
View previous topic :: View next topic  
Author Message
abacquer



Joined: 22 Mar 2004
Posts: 193

PostPosted: Thu Apr 22, 2004 9:48 pm    Post subject: 2 and 3 column layouts; change color of the outer columns? Reply with quote

I've been using a 2 column layout for awhile and recently switched to 3 columns. In order to make the article text stand out a little better, I'd like to edit my templates so that the left and right columns use a faint blue or faint grey background color. Question Is that possible? What changes would I need to make to my stylesheet?
_________________
-- Abacquer, A.K.A. Chuck Seggelin
Back to top
View user's profile Send private message Send e-mail Visit poster's website
abacquer



Joined: 22 Mar 2004
Posts: 193

PostPosted: Fri Apr 23, 2004 7:55 am    Post subject: Re: 2 and 3 column layouts; change color of the outer column Reply with quote

abacquer wrote:
I've been using a 2 column layout for awhile and recently switched to 3 columns. In order to make the article text stand out a little better, I'd like to edit my templates so that the left and right columns use a faint blue or faint grey background color. Question Is that possible? What changes would I need to make to my stylesheet?


Figured it out. If anybody else wants to change the color of their outer columns, you'll want to edit the classes "table.columns td.left" and "table.columns td.right" in their style sheet. All you'll want to change is the background-color attribute. Here's how mine looked after editting to get pale grey left and right columns:

Code:
table.columns td.left {
    vertical-align: top;
    width: 20%;
    height: 100%;
    padding: 0 12px 15px 12px;
    background-color: #f9f9f9;
    border-collapse: collapse;
    color: #666;
    border-right: 1px solid #dedede;
}

table.columns td.right {
    vertical-align: top;
    width: 20%;
    padding: 0 12px 15px 12px;
    height: 100%;
    background-color: #f9f9f9;
    border-left: 1px solid #dedede;
    border-collapse: collapse;
}


You can see the end result on my blog. I think it looks pretty good and helps distinguish the outer columns from the article. I'm using the "Antique" template which puts everything on a white background, other templates may differentiate the outer columns better and may not need to do this.



blue #F9F9FF
green #F9FFF9
pink #FFF9F9
yellow #FFFFF9
cyan #F9FFFF
magenta #FFF9FF
lavender #F9F0FF
_________________
-- Abacquer, A.K.A. Chuck Seggelin
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Search all BlogHarbor support resources.
View previous topic :: View next topic  
Display posts from previous:   
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> General Discussion All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum