Need some help here.

[weaselgun]

URL: testingbirdbrows.boards.net/


Link to Screenshot

I'm recreating a theme for another forum since their's broke but I've ran into a problem I have no clue how to fix.

The issue is that the dirt background will not stop under the top dirt patch and it continues to the top of the page. 

Before an update to proboards earlier in the year the dirt did not reach all the way to the top but whatever the theme's original creator did to make that possible is not working anymore. 

As far as I know theres no way to set where something starts and stops while repeating on the Y axis.

Any suggestions?


EDIT: I found a picture of what the forum theme used to look like: link

[Alanna 🥀🖤]

Set the dirt image as the #wrapper id background image and place the grass patch as a div above the wrapper like so (Admin > Structure > Layout Templates > Forum Wrapper):

<div id="grass-patch"></div>
<div id="wrapper">

...

</div>
And then add this to Admin > Themes > Advanced Styles & CSS > Style Sheet:

#grass-patch { background-image:url('http://i.imgur.com/rAjIp1n.png');width:@wrapper_width;height:202px;margin:0 auto 0 auto; }

[weaselgun]

Oh thank you! That worked, but now there is an awkward extra mass of dirt and I cannot get the forum's width to match the width of the grass patch image:


How would I go about fixing that?

edit: my link wasn't working: gyazo.com/7bd79c60ae61099e995f8e7536f5b37c

[Alanna 🥀🖤]

Remove any extra CSS you added to the #wrapper ID that I did not provide and is not within the Visual Editor. Also tell the wrapper background image to repeat on x and y and add "background-position: center center;" to the #grass-patch ID.

[weaselgun]

I have the extra css on the wrapper to make the dirt texture a border around the forum, otherwise it looks like:

gyazo.com/b8f24c92c5177c723a478fd0170fad23

Is there a way I could just set it up as another div? This is my first time doing anything like this so I'm a little lost on the most effcient ways to go about things.

[Alanna 🥀🖤]

What I am trying to do is the best way to do it. What you have added is unnecessary is just makes things harder to work around. There is also no reason to make another div when there is one you can use already.

This is ALL you should have for your CSS:

#grass-patch { background-image:url('http://i.imgur.com/rAjIp1n.png');background-position:center center;width:@wrapper_width;height:202px;margin:0 auto 0 auto; }
#wrapper { background-position:center center;background-repeat:repeat;padding:20px;margin:0 auto 0 auto;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box; }

[weaselgun]

I've done what you said but now the forum is stretched?

gyazo.com/ce4552c49dc4aee8bdb654a78371f26d

I think thats the forum width getting messed up? But I dont understand what's wrong since I have it defined. Also, the grass patch is not displaying the entire texture/its cut off.

[Alanna 🥀🖤]

You don't have a width set to your forum. Go to Themes > Colors & Theme Creator and set the width as 700px since that is the width of the grass patch image.

I also forgot a pretty important style in the CSS so copy and paste that again. It should work splendidly after that.

[weaselgun]

gyazo.com/bc1b66a114049e916f8d3acd12045064

I have it set as 700px, that's why I'm confused.

Thank you for helping so far, too(:

[Alanna 🥀🖤]

Hrm. Can you go to Admin > Themes > Advanced Styles & CSS > Style Sheet and with your cursor active in the text area hit ctrl+F and search for #wrapper. It will highlight all of them it finds. Copy and paste all of the styles attached to that ID you find here.

[weaselgun]

I figured out what I had done, it was just a mispelling when I was manually entering things into the CSS. :'D

Two more things until this theme is ready to go: gyazo.com/694ee68ddef57830b72a916a1e8231b3

That extra dirt and the grass is still cut off, if i increase the width it just stretches the image.

EDIT: I 'fixed' the grass getting cut off. but the extra dirt I'm not what could be causing it.

[Alanna 🥀🖤]

That's because you need to have the width entered inside the Colors & Themes Creator and not entered manually.

EDIT: Just kidding, it's taking the width that it needs to be. Just add "padding:0 9px;" to the #grass-patch ID. It's not completely center over the wrapper and I'm not sure why yet... *pokes at*

[Cat of Birds]

Beep beep, Cat of birds butting in. Im taking over doing the thing for now, I'll try not to break anything...more. Not so concerned about the grass, I can fix that, but any idea how to close the gap between the boards and the banner? prntscr.com/583zhz that dirt splotch is really getting on my nerves because no matter what I change it won't go away :'D

[Alanna 🥀🖤]

That's your banner. Change the banner height to 0px.

[Cat of Birds]

...oh my god I feel like the biggest idiot on the fricking planet. Thank you!