[CSS] Border Around Forum

[M³]

Shrike Perfect! One last thing, would it be possible to tighten up the bottom portion .. examples using the arrows.

[Shrike]

Feb 1, 2013 12:50:33 GMT -8 rassy said:

Is there a way I can have an image going around not just the base and hea but the sides to? and that will work for all browsers? Please let me know.

Do you have an existing example of what you're looking to do? IE 8 and below don't support multiple backgrounds in CSS which is how it should be done.

Feb 1, 2013 13:00:38 GMT -8 M³ said:

Shrike Perfect! One last thing, would it be possible to tighten up the bottom portion .. examples using the arrows.

Could I have a link to your forum? It'll be easier to work out what needs to be done if I can see it directly.

[M³]

Shrike Forum

[Shrike]

Feb 1, 2013 13:48:41 GMT -8 M³ said:

Shrike Forum

Thanks, it looks to be the code you have to put the bottom ProBoards links into a separate container (which we can probably deal with). Aside from that there is some iframe element at the bottom (from pbid.pro-market.net) that although it looks like it should be 0 pixels high, is still making a difference to the gap at the bottom. Is your forum definitely ad-free? I'm not too sure if we'll be able to remove the space taken up by it or not.

[rassy]

I want head and base images and maybe images for the sides of the cats as well....

[M³]

Feb 1, 2013 14:30:07 GMT -8 Shrike said:

Feb 1, 2013 13:48:41 GMT -8 M³ said:

Shrike Forum

Thanks, it looks to be the code you have to put the bottom ProBoards links into a separate container (which we can probably deal with). Aside from that there is some iframe element at the bottom (from pbid.pro-market.net) that although it looks like it should be 0 pixels high, is still making a difference to the gap at the bottom. Is your forum definitely ad-free? I'm not too sure if we'll be able to remove the space taken up by it or not.

Shrike  Yes, it is definitely, add-free.  I mean, If there's not way around it -- I can live with to tbh.  I just thought I'd give it a go. 

[volkswagenaholic]

Nov 10, 2012 9:30:38 GMT -8 Shrike said:

As proof of how much easier V5 is for customising your forum, the old Border Around Forum code can be neatly achieved with just a single line of CSS. To add this, go to Themes > Colors and Styles > Style Sheet (tab). Wait for it to load and then scroll to the bottom of the style sheet and add this:

/* border around forum */
#wrapper {background-color: @container_inner_border_color; margin-bottom: 10px; padding: 1.3em;}

• The background-color is set to use the "Inside Borders" colour at the moment but you can change this to one of the other theme variables (found at the top of the style sheet). You can also change it directly to a specific colour (eg. #D5E5B5) if you want

How do I make the inside borders the same color as the outside borders without turning the whole background that color? 

[Shrike]

Feb 2, 2013 6:32:09 GMT -8 volkswagenaholic said:

Nov 10, 2012 9:30:38 GMT -8 Shrike said:

As proof of how much easier V5 is for customising your forum, the old Border Around Forum code can be neatly achieved with just a single line of CSS. To add this, go to Themes > Colors and Styles > Style Sheet (tab). Wait for it to load and then scroll to the bottom of the style sheet and add this:

/* border around forum */
#wrapper {background-color: @container_inner_border_color; margin-bottom: 10px; padding: 1.3em;}

• The background-color is set to use the "Inside Borders" colour at the moment but you can change this to one of the other theme variables (found at the top of the style sheet). You can also change it directly to a specific colour (eg. #D5E5B5) if you want

How do I make the inside borders the same color as the outside borders without turning the whole background that color? 

So you want the border around forum to have the same colour as the inside borders, but then want to change the inside border colour to match the outside borders without it affecting the border around forum?

What would probably be easiest is to get the inside border colour's hexadecimal value from the Visual Editor and making a note of it somewhere. While in the Visual Editor, you can now change the inside border colour to match the outside border. Save the changes and then go to the stylesheet tab and find the border around forum CSS. It's now simply a case of replacing the @container_inner_border_color; value for background-color to the hex value you made a note of earlier.

[AVIAN]

Ohkay, so for some reason the border stops right after the navigation and doesn't continue on to the rest of the boards. Is there some way to fix that?

debateally.freemessageboards.com

[Shrike]

Mar 13, 2013 22:19:54 GMT -8 AVIAN said:

Ohkay, so for some reason the border stops right after the navigation and doesn't continue on to the rest of the boards. Is there some way to fix that?

debateally.freemessageboards.com

You've got some code in a layout template (I think) that is adding another wrapper div (wrapper2) and having the forum content inside of that rather than the proper "wrapper" div. You'll want to remove the wrapper2 code and make sure the forum content (should be the $[content] variable) is inside the original wrapper.

[AVIAN]

Mar 15, 2013 9:50:20 GMT -8 Shrike said:

Mar 13, 2013 22:19:54 GMT -8 AVIAN said:

Ohkay, so for some reason the border stops right after the navigation and doesn't continue on to the rest of the boards. Is there some way to fix that?

debateally.freemessageboards.com

You've got some code in a layout template (I think) that is adding another wrapper div (wrapper2) and having the forum content inside of that rather than the proper "wrapper" div. You'll want to remove the wrapper2 code and make sure the forum content (should be the $[content] variable) is inside the original wrapper.

Thanks shrike! That worked like a charm!

[AnonymousAndy]

Hey, is there a way to make it so it does not wrap around the banner?

[Shrike]

Mar 16, 2013 7:16:39 GMT -8 AnonymousAndy said:

Hey, is there a way to make it so it does not wrap around the banner?

When you refer to the banner, do mean literally just the banner or the whole top table? I'm going to assume you mean the whole top table because otherwise you'd have to have made some changes to the layout yourself to separate the banner from anything else (and if that were the case, you should also be able to move the banner outside the wrapper element yourself).

Go to Themes > Layout Templates > Forum Wrapper. Between lines 15-47 (for an unmodified template) should be some code that starts and finishes with <header> tags. Select it all and then move it so that it is ABOVE the <div id="wrapper"> code on line 14 (again, number may vary).

Save the changes and then go to Themes > Advanced Styles & CSS > Style Sheet, paste this near the bottom, and then save the changes again:

header {overflow-x: hidden; margin: 0 auto; width: @wrapper_width;}

[AnonAndy]

Great, thanks a bunch.

[hatty hattington !]

Nov 20, 2012 5:20:50 GMT -8 Maiden said:

I was wondering about how to do the reverse, make the top look like the bottom?

solariatest.freemessageboards.com/

I also want to switch the two, so the brown colour is the border and the pattern is the inside. I thought I could do it by changing the @ but I can't work out what that background image attribute is called? And I have it on repeat at the moment so not sure how that would work?

Thanks

almost certain that the background CSS code is background-image:url(inserturlhere)

maybe you could use that?