/    Sign up×
Community /Pin to ProfileBookmark

Need some help with forum CSS styling

Copy linkTweet thisAlerts:
Jul 01.2012

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 attached a file that shows how I would like it to look like more or less. 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!

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@hmsgoddessJul 03.2012 — I am not sure I understand your issue correctly but I will answer according to what I think your asking.

You want a border say at the top of your box and margins to push the posts apart then your CSS should be as follows:

#mydiv {

border-top: 5px solid #fff;

margin: 7px 0px 7px 0px;

}

This code adds a wide border at the top of 5 pixels solid in style and white in color, then we added a margin of 7 pixels on the top and bottom of the div to allow the posts to sit with space between them but we left the right and left margins alone with the 0 pixels.

I hope I understood your question and answered it as you needed.
×

Success!

Help @abrodski spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...