Need some help with forum CSS styling

Discussion in 'HTML & Website Design' started by abrodski, Jul 1, 2012.

  1. #1
    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!
     

    Attached Files:

    abrodski, Jul 1, 2012 IP
  2. HydroJohn

    HydroJohn Active Member

    Messages:
    1,558
    Likes Received:
    37
    Best Answers:
    0
    Trophy Points:
    90
    #2
    Try

    .seperate
    {
    border: 5px 2px 2px 2px solid #fff;
    padding-top: 7px;
    }
     
    HydroJohn, Jul 1, 2012 IP
  3. abrodski

    abrodski Member

    Messages:
    56
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #3
    Nope, that's not what I wanted. As a matter of fact, now it's getting better, but it's still not what I wanted.
    I wrote that:

    .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*/
    }

    And strangely enough, I got everything right, BUT there's NO border on the left for some reason. Just an empty space as you can see on the picture I'm about to attach to this post. Any ideas?
     

    Attached Files:

    abrodski, Jul 1, 2012 IP
  4. abrodski

    abrodski Member

    Messages:
    56
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #4
    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
     

    Attached Files:

    abrodski, Jul 1, 2012 IP
  5. northpark1

    northpark1 Member

    Messages:
    41
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    #5
    Looks like I was beat to it.
     
    northpark1, Jul 1, 2012 IP