How do I make a message divider taller?

Hello, I'm not sure what it's called exactly but I would like to increase the height of this divider between post. If it's possible I want to place my own image for it as well.




Here's an example of what I mean.

Hello,
Find this code in your CSS(if there isn't then just add the second code):

Code:

.pun .posthead {
    background: #f4f4f4;
    border-bottom: 1px dashed #ccc;
    padding: .5em 1.3em .5em 1em;
}

and replace it with this code:

Code:

.pun .posthead {
    background: #f4f4f4;
    border-bottom: 1px dashed #ccc;
    padding: .5em 1.3em .5em 1em;
    line-height: 30px;
}

you can modify the line-height as you wish.

Hi,

Which forum version are you trying to accomplish this in? Can you also provide a forum URL?

Regards,
Sir Chivas.

Thank you, and it worked. Will I be able to place GFX IMG where it says background though @Van-Helsing ?

Yes of course @Kamui,

Replace your previous code with this:

Code:

.pun .posthead {
            background-image: url (YOUR_IMAGE_URL);
            border-bottom: 1px dashed #ccc;
            padding: .5em 1.3em .5em 1em;
            line-height: 30px;
        }

You will need to replace YOUR_IMAGE_URL with the link of your image.

I used the image, how come it isn't working?

Code:

.pun .posthead {
            background-image: url (http://i.imgur.com/ZrE1B0u.png);
            border-bottom: 1px dashed #ccc;
            padding: .5em 1.3em .5em 1em;
            line-height: 30px;
        }

@Kamui do you have you twice the element .pun .posthead in your css?

I'm not sure what you mean.

Hello,
Try to add the following code in your css:

Code:


.pun .posthead h2 {
    background-image: url('http://i.imgur.com/ZrE1B0u.png') !important;
}

The result must be looks like this:

I'm staring to wonder if somethings just wrong with my forum. I followed the code exactly but it isn't working.

Hello @Kamui,
Try this code:

Code:

.pun .posthead {
    background: url('http://i.imgur.com/ZrE1B0u.png');
}

Finally, it works. Thanks a lot man you some how keep coming through. I appreciate all the help you and everyone has given today!

@Kamui you can improve it by replacing code with the following:

Code:

.pun .posthead {
    background: url(http://i.imgur.com/ZrE1B0u.png);
    color: white;
    line-height: 38px;
}
.pun .posthead a {
    color: white !important;
}


You are welcome.

Thanks!

Thanks for the help Van-Helsing .

Topic solved and archived ~ brandon_g