homepage Welcome to WebmasterWorld Guest from 54.205.144.54
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Border around forum posts
abrodski




msg:4471566
 8:38 pm on Jul 1, 2012 (gmt 0)

Hello guys!

I'm currently setting up my forum and I want to change some defaults.
I have SMF 2.0.2
The problem is that by default it doesn't have a post separator. But there's a mod to change that. Basically it modifies 2 files: Display.template.php and index.css
My question is about the latter one. It adds this at the end of the file:

.seperate {
/*border: 5px solid #fff; thickness and color of box outline*/
margin: 7px auto; /*to push the gap between the posts*/
}


I do get the white spacing between the posts, BUT what I had in mind was something that goes a little beyond that.

I can't attach a file that shows how I would like it to look like more or less. I think it's disabled here. Maybe I can post a link to it?

The color of the border could be solid one, that's not so critical to me.
When I tried to uncomment the 2nd line, what happened is that I got a border around the post and everywhere (ie. top, bottom, right and left) was the same. Same thickness that is...
Anyway, if anybody knows what to do please let me know!

 

lucy24




msg:4471583
 9:50 pm on Jul 1, 2012 (gmt 0)

Borders don't have to be the same on all sides. You can set entirely different values-- style, size, color-- for

border-left
border-top

and so on. The same goes for margins. And for padding.

abrodski




msg:4471611
 2:55 am on Jul 2, 2012 (gmt 0)

It's getting better! I wrote this code and I've got everything right, EXCEPT on the left side.

.seperate {
border-top: 25px solid #3a5284; thickness and color of box outline*/
border-left: 1px solid #3a5284;
border-right: 1px solid #3a5284;
border-bottom: 1px solid #3a5284;

margin: 7px auto; /*to push the gap between the posts*/
}

On the left, there's nothing, just empty space...Why is that?

abrodski




msg:4471614
 3:23 am on Jul 2, 2012 (gmt 0)

It's OK now...just have to add a commenting sign. Didn't pay attention to that before...

.seperate {
border-top: 25px solid #3a5284; /*thickness and color of box outline*/
border-left: 1px solid #3a5284;
border-right: 1px solid #3a5284;
border-bottom: 1px solid #3a5284;

margin: 7px auto; /*to push the gap between the posts*/
}

It works like swiss clock now

[edited by: alt131 at 12:23 pm (utc) on Jul 7, 2012]
[edit reason] Thread Tidy - 404 [/edit]

rocknbil




msg:4471783
 3:58 pm on Jul 2, 2012 (gmt 0)

shorter version,

.seperate {
border: 1px solid #3a5284;
border-top: 25px solid #3a5284;
}

The last rule overwrites the first and adjusts the top.

lucy24




msg:4471814
 4:59 pm on Jul 2, 2012 (gmt 0)

{border-top-width: 25px;}

if nothing else is changing.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved