Bordered banner

[Celeste]

I'd like to create a border around my banner similar to the borders around the boards, complete with radial corners (10 pixels?). I'm sure there is a way to modify the template to get this.  I'd also like to lower the banner ever so slightly to increase the white space between the banner and the top of the forum.

I did a Photoshop mockup with the Support board banner to show you what I had in mind.

Can someone tell me exactly how/where to code this, please?

Thank you!

[LILITH]

Go to themes>layout templates>forum wrappers. There's probably a more efficient way of doing this but that's how I did it anyways. Now after your on your forum wrappers add a couple of <br> tags at the veeeery top of your forum wrappers. That should do it.

As for your other request you'd probably do that in your style sheets if I am not mistaken.

Try finding this in your style sheets and add a border to the end? 

 


#banner { display: table-cell; height: @banner_height; background-color: @banner_background_color; background-image: @banner_background_image; background-position: @banner_background_position; background-repeat: @banner_background_repeat; vertical-align: middle; padding: 0px 20px; text-align: @banner_text_align; overflow: hidden; border: 1px solid #000000;}

Let me know if that works right. Yaaay if I actually helped someone. :3

[Celeste]

Thanks, LILITH! Any suggestions on how to get the curved corners (5 pixel radius) on the top?

[LILITH]

Hrrmm. Probably using css as well?

You can add

border-radius: 10px 10px 0px 0px;

to the code I showed you previously and that should do it. I hope anyways. D: Kinda new at all this.

[Celeste]

That did the trick! Thank you so much, LILITH!

[LILITH]

Lol. Sorry. I must of missed the part where it says "5px". :/ If you want the 5px radius just change the 10s. :3

[Celeste]

I noticed that, but it looks nice, so I left it. 

[rchelitalk]

Thanks for putting up this request Celeste and thanks for replying LILITH

[Celeste]

LILITH did all the work, so I'm giving her all the credit.  Thanks, Jade! 

[LILITH]

No problem! I don't know if I was suppose to but.. I like to help where I can. CSS is about all I know. :x

[Liz]

I would really like to place a rounded border around my banner as well but I can't find the section that you refer to in the Style Sheet.

Is this the complete code that needs to be added? ....

border: 1px solid #ffffff;border-radius: 10px 10px 0px 0px; 

[rchelitalk]

liz

Dec 16, 2012 11:02:33 GMT -8 Liz said:

I would really like to place a rounded border around my banner as well but I can't find the section that you refer to in the Style Sheet.

Is this the complete code that needs to be added? ....

border: 1px solid #ffffff;border-radius: 10px 10px 0px 0px; 

It should be around line#223 on the Style Sheet.

[Liz]

Thanks rchelitalk I've found it and it works perfectly.

Many thanks to Jade for the code