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 
How do I put a border around my dates?
 
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> General Discussion
View previous topic :: View next topic  
Author Message
Connected



Joined: 31 Mar 2005
Posts: 30

PostPosted: Sun May 01, 2005 7:54 pm    Post subject: How do I put a border around my dates? Reply with quote

I've got bold yellow as my starting point for my style sheet. how do I change my style sheet so that I have borders around my days (e.g Friday, April 29) like in Viridity, the minimalist schemes etc? If you're not sure which day I mean, it's the date which shows the posts made on that day.

Thanks in advance.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3401

PostPosted: Sun May 01, 2005 11:01 pm    Post subject: Re: How do I put a border around my dates? Reply with quote

I've got bold yellow as my starting point for my style sheet. how do I change my style sheet so that I have borders around my days (e.g Friday, April 29) like in Viridity, the minimalist schemes etc? If you're not sure which day I mean, it's the date which shows the posts made on that day.

I'll confess, I love borders. Sounds crazy, I know. But CSS borders are fun, you can play around with them in neat ways. CSS allows you to control the border property on each side of a box, and each side can be independently assigned a style.

The CSS class which controls the post date at the top of a group of posts on the same date is called, not unsurprisingly, postDate. It has a counterpart which controls the style of a post date in photo albums called photoPostDate.

This article:gives you some background on modifying your CSS style template and provides you with the CSS code to center your blog on the page. Instead of that code, use this code to add borders to the post date:

Code:
.postDate {
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    border-left: 1px solid red;
    border-right: 1px solid red;
    padding: 2px 2px 2px 8px;
}


and you'll see the postDate surrounded by a 1 pixel width solid red border. The padding attribute just makes sure that there's a little space between the text and the border itself: Each of those "2px" will add 2 pixels of padding on the top, right, bottom and left sides (it's clockwise...).

Use this instead:

Code:
.postDate {
    border-top: 1px dashed red; 
    border-bottom: 1px dashed red; 
    border-left: 1px dashed red; 
    border-right: 1px dashed red; 
    padding: 2px 2px 2px 8px;
}


and your borders will have dashed lines instead of solid lines.

Use this:

Code:
.postDate {
    border-top: 1px solid #AAAAAA; 
    border-bottom: 1px solid #EFEFEF; 
    border-left: 1px solid #AAAAAA; 
    border-right: 1px solid #EFEFEF; 
    padding: 2px 2px 2px 8px;
}


which are the codes for darker and lighter shades of grey, and you can see how a sort of inset effect can be achieved by using different colors for the top/left and right/bottom borders.

CSS borders are fun.


Last edited by john on Fri Sep 22, 2006 10:48 am; edited 1 time in total
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Connected



Joined: 31 Mar 2005
Posts: 30

PostPosted: Mon May 02, 2005 9:33 am    Post subject: Reply with quote

thanks! I've gone for the last version and i've also managed to fill in the border #EFEFEF. One last question - how do I change the colour of the post date?
Back to top
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3401

PostPosted: Mon May 02, 2005 9:45 am    Post subject: Reply with quote

Add something like this between the curly braces:

Code:
   color: red;


so that your code looks something like this:

Code:
.postDate {
    border-top: 1px solid #AAAAAA;
    border-bottom: 1px solid #EFEFEF;
    border-left: 1px solid #AAAAAA;
    border-right: 1px solid #EFEFEF;
    padding: 2px 2px 2px 8px;
    color: red;
}


You can use the names or codes for colors as listed on this page.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Connected



Joined: 31 Mar 2005
Posts: 30

PostPosted: Mon May 02, 2005 11:17 am    Post subject: Reply with quote

sorted. Thanks
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