Add snow to the top of board list and shoutbox

[Ben Goodman]

The title explains everything, i need a css code that adds a little snow onto the top of each board list (category name) and to the top of the shoutbox.

[Tumbleweed]

Nov 26, 2017 10:40:20 GMT -8 Ben Goodman said:

The title explains everything, i need a css code that adds a little snow onto the top of each board list (category name) and to the top of the shoutbox.

You can't add snow with just css, like I think your asking, without a image. However, I made a terrible looking snow image just to test this out.

If you go to your Home Template add the blue below to where I've indicated:

$[news]
{foreach $[category]}
$[category.anchor]
<div class="container boards"><div class="pileofsnow"></div>



And do the same for your shoutbox template.....

<div class="$[shoutbox_class] container full"><div class="pileofsnow"></div>


And then add this to the bottom of your style sheet:

.container.boards .pileofsnow, .shoutbox.container.full .pileofsnow{
background-image:url(//storage.proboards.com/3392378/images/lXINXEkFVOkwohcwhNHO.png);background-repeat:repeat-x; width:100%; height:49px; position:relative; top:28px;
}

I left my very poor snow image in the css just for your testing purposes but please do find a better image. (You can see it on my test site) Not sure if that will work for you but when you add a good image, be sure to change the height to that of your image and you may have to play with the positioning a bit to get it right.

 

[Ben Goodman]

Thank you!

It is working fine, I will try to find a better snow picture as soon as possible!

[🐱‍🐉ValSG]

Tumbleweed, my apologies if I'm out of line in putting this here. Just wasn't sure whether to start my own thread on it or not. Doing so really didn't make sense because the Op might also like what I request below (or anyone else that reads and finds the above useful). IF my added request should be in a thread of it's own, just let me know please. I'm still trying to learn when to speak up in a thread and when to do it in a different one.

Firstly, I wanted to say, I love this and am so glad Ben Goodman asked for it. It truly couldn't be more perfect for our forum.

I've saved the snow pile image to my hard drive, uploaded to my own forum. I also figured how to add it over the Legend and Stats also and all looks perfect. Love it.

My question is, surely this could also be added over the main menu bar (or is the term navigation bar?) But, I can't figure out which line to put the <div class="pileofsnow"></div> with and then need to make sure I use the right words in the CSS. The Legend and Stats ones were fairly easy to figure out. But the menu bar (navigation bar?) (dang, the one with Home Search Help Members... etc) on it. (I've seen menu bar and navigation bar used interchangeably and thus not sure which term to use). I've studied and studied and cannot figure out where to put that code for it.

As I said up top, the Op (and everyone else that reads this) might like having it over their 'bar' also. So could you give us a hint of where to put it please? Very much appreciate your help with the Op's idea.

(Was actually just wondering earlier last night myself, on how I could put garland across the bars/boards, or something, even if not garland, and finally decided to not bother trying to figure it out. Then I just now come in here and find this exact request, doing just what I had wondered about... Except, this is even better, being the snow drapes. The contrast of the white snow draping on red bars against a jet black background with holly greenery & green candle accents, is just absolutely perfect.)

Sorry, I talk too much too, getting too enthusiastic over things. I just love learning all this and watching "magic happen" with the right coding put in the right places. ^_^

[Tumbleweed]

Nov 27, 2017 8:37:49 GMT -8 🐱‍🐉ValSG said:

Tumbleweed , my apologies if I'm out of line in putting this here. Just wasn't sure whether to start my own thread on it or not. Doing so really didn't make sense because the Op might also like what I request below (or anyone else that reads and finds the above useful). IF my added request should be in a thread of it's own, just let me know please. I'm still trying to learn when to speak up in a thread and when to do it in a different one.

Firstly, I wanted to say, I love this and am so glad Ben Goodman asked for it. It truly couldn't be more perfect for our forum.

I've saved the snow pile image to my hard drive, uploaded to my own forum. I also figured how to add it over the Legend and Stats also and all looks perfect. Love it.

My question is, surely this could also be added over the main menu bar (or is the term navigation bar?) But, I can't figure out which line to put the <div class="pileofsnow"></div> with and then need to make sure I use the right words in the CSS. The Legend and Stats ones were fairly easy to figure out. But the menu bar (navigation bar?) (dang, the one with Home Search Help Members... etc) on it. (I've seen menu bar and navigation bar used interchangeably and thus not sure which term to use). I've studied and studied and cannot figure out where to put that code for it.

As I said up top, the Op (and everyone else that reads this) might like having it over their 'bar' also. So could you give us a hint of where to put it please? Very much appreciate your help with the Op's idea.

(Was actually just wondering earlier last night myself, on how I could put garland across the bars/boards, or something, even if not garland, and finally decided to not bother trying to figure it out. Then I just now come in here and find this exact request, doing just what I had wondered about... Except, this is even better, being the snow drapes. The contrast of the white snow draping on red bars against a jet black background with holly greenery & green candle accents, is just absolutely perfect.)

Sorry, I talk too much too, getting too enthusiastic over things. I just love learning all this and watching "magic happen" with the right coding put in the right places. ^_^

It's best to always start your own thread because it can get confusing if more than one person is asking questions and you can always refer to a thread by posting a link in your own thread. But that's o.k. this time since it seems the OP has no more questions. 

To add to your menu bar you head to your wrapper template and it worked best for me when I added like I did below: (around line 18)

<div id="banner-container" role="banner">
$[forum.title]
</div><div class="pileofsnow"></div>

[🐱‍🐉ValSG]

Okay, many thanks Tumbleweed I will duly start making my own threads and just link back if needed. Honestly, that option didn't cross my mind. Should have, but didn't.

Many thanks for where to put the code. I looked and looked in the wrapper and did spot the part you've stated, and it made sense to me and I tried it. Except. I put the code on the first line and used banner.container for the CSS and it didn't work. No where else up and down the page made sense though. I didn't know it could be just under a $[ at the end of another </div>.

So much to learn. I'm working on it. Notepad is now full of code sequences that you and others have posted. As I said, love watching "magic happen" when it's plugged into the right spots.

Thanks again. ^_^