Welcome to WebmasterWorld Guest from 23.22.173.239

Forum Moderators: not2easy

Message Too Old, No Replies

Border around forum posts

     

abrodski

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

5+ Year Member



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

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

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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

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

5+ Year Member



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

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

5+ Year Member



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

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

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



shorter version,

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

The last rule overwrites the first and adjusts the top.

lucy24

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

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



{border-top-width: 25px;}

if nothing else is changing.