How to make content fade in over image in board description?

[Mint]

Forum URL: moonandstars.boards.net/

I think this is the right place to put this but if not please correct me c:

I would like to be able to have my text fade in over an image in the board descriptions. I see many people do this but I just don't know how they do it. I tried the Presto Box plugin but I couldn't figure out how to set everything up.

Could someone help me out?

[Tumbleweed]

Mint ,
Is this going to be a new theme you are making or are you going to be using the one done by Margie from Adoxograpy? If the one by Margie, you may want to check if it is o.k. to alter her theme like that. Also since the description on that theme includes the threads and posts, depending on how you want it, there might be a little more template changes than I thought, initially.

There is a plug in that is supposed to do that but I've never gotten it to work right but I do have a way to do it with minor a minor template change and the change we'd have to do if this is for Margie's theme. But it is mostly using css to target each board. It's a little bit more leg work for you but not bad and it's really easy.

Anyway, let me know about if this is for Margie's theme or a new theme and if the css way is the route you want to go.
 

[Mint]

Tumbleweed,

Thank you for being willing to help me out c:

It is for Margie's theme but I haven't had any success in contacting her. I would like to go the CSS route.

[Tumbleweed]

Jul 30, 2017 19:29:01 GMT -8 Mint said:

Tumbleweed ,

Thank you for being willing to help me out c:

It is for Margie's theme but I haven't had any success in contacting her. I would like to go the CSS route.

You're welcome, happy to help you.  So my question to you is, do you want the image to fill up that whole board which would include behind the posts/thread or just the top and bottom area of the side that has the descriptions. I ask because as you can see by the screen shot I am posting below using the  inspect element/the coding tool that comes with browsers, the only thing she has an id on or class on is a class called .board-description. The other classes/id's are just for the posts/threads circles.
And just in case you aren't aware of the tools one can use on their browser, a person like me can change things on any site but it is only changed for me and nothing on your site is actually altered. Just telling you this so you don't freak as I added a image just so you can see what I mean when adding an image to the class .board-description. The screen shot below I made a horrible red line around the class I'm talking about and an arrow to where we will need to add a class.
Just wanting to give you a heads up as to what "we" will be having you do (add a class to the td tag) if you do indeed want the images on the description side.
I'm also assuming you want a different image for each board so please correct me if that is or is not the case. 

[Mint]

Tumbleweed

I would prefer to have it in just the description side. I understand, I use that when I get bored during class and alter my homework assignment for my own amusement XD. I would like a different image for each board to help member get a visual of what I am describing for them.

[Mint]

Tumbleweed, you still there? ^^

[Tumbleweed]

Aug 1, 2017 11:16:10 GMT -8 Mint said:

Tumbleweed , you still there? ^^

Yep, Just had relatives visiting so got a bit side tracked and then was waiting for a plumber to show up for hours and when he quoted the price he wanted to fix my problems, I went into shock  for a few hours, so I was a bit delayed. Gosh I hate plumbers. They get paid more than doctors.  

Anyway, I'll try to have instructions and the coding by the end of today. Sorry for the delay.

[Mint]

Aug 1, 2017 13:25:13 GMT -8 Tumbleweed said:

Aug 1, 2017 11:16:10 GMT -8 Mint said:

Tumbleweed , you still there? ^^

Yep, Just had relatives visiting so got a bit side tracked and then was waiting for a plumber to show up for hours and when he quoted the price he wanted to fix my problems, I went into shock  for a few hours, so I was a bit delayed. Gosh I hate plumbers. They get paid more than doctors.  

Anyway, I'll try to have instructions and the coding by the end of today. Sorry for the delay.

That's okay, I understand ^^

[Tumbleweed]

Aug 1, 2017 13:43:31 GMT -8 Mint said:

Aug 1, 2017 13:25:13 GMT -8 Tumbleweed said:

Yep, Just had relatives visiting so got a bit side tracked and then was waiting for a plumber to show up for hours and when he quoted the price he wanted to fix my problems, I went into shock  for a few hours, so I was a bit delayed. Gosh I hate plumbers. They get paid more than doctors.  

Anyway, I'll try to have instructions and the coding by the end of today. Sorry for the delay.

That's okay, I understand ^^

Thanks^^

First I did two boards on this test site and I know my test site doesn't have side by side boards but you can see how it works just for reassurances purposes. 

O.K. The first thing I need you to do is go to your Board List template (Admin> Themes> Layout Templates>and the Board List tab) and find that td tag I indicated in the screen shot and within that td tag you should see this: 

$[board.description]

I want you to replace that $[board.description] with this:

<div class="board_image"><div class="description"><div>$[board.description]</div></div></div>

Save and head to your style sheet: 

Now I already have images in the css for testing purposes and I have the css already set so the image will go in your board called "northclan" which is board 11 and 
"breezeclan"  which is board 10, so go ahead and paste this at the very bottom of your style sheet:


#board-11 .board_image{
background: url(//storage.proboards.com/3393080/images/gwjsa0KYirWodooe0DeP.png);
background-repeat:repeat;
}
#board-10 .board_image{
background: url(//storage.proboards.com/3393080/images/gJBT0UDWqDocttaJhG0V.png);
background-repeat:repeat;
}
#board-11 .board_image .description,
#board-10 .board_image .description
{width:100%;
height: 130px;
transition-timing-function: ease-in-out;opacity:0.0;
-webkit-transition-duration: 700ms;
-moz-transition-duration: 700ms;
-o-transition-duration: 700ms;
transition-duration: 700ms;
}
#board-11 .board_image .description:hover,
#board-10 .board_image .description:hover
{width:100%;height: 130px;
background-color: rgba(244,244,255,0.6);
opacity:1.0;
}
#board-11 .board_image .description div,
#board-10 .board_image .description div
{
padding:8px 30px 8px 8px;    
}



Now don't panic if this isn't perfect, it might take some tweaking and once we get these first two boards how you like it I'll tell you how to add all the rest of your images to the boards if you aren't sure by looking at the css. It is fairly easy but a bit time consuming. But just in case something is just not working I may need you to pm me the board list template but first, let's see how this looks.

[Mint]

Tumbleweed

I got it up and I think it looks good to me c:

[Tumbleweed]

First, I just noticed that link I gave you wasn't set to the right theme so the hover fade wasn't over the descriptions so sorry about that, although I did have a hover fade going on elsewhere on that theme.

But anyway, just checked your site and it seems pretty good. Couple things I might do, if I were you, is position that image a bit more evenly so the edges on top, right and bottom have the same amount of space and add that radius on the right corners to mimic the board radius. You could do that by just adding this to the very top of the styles I gave you:

.board_image{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin: 4px -4px 0px 0px;
}

With the above, the margin is what is positioning it and the first 4px is for the top, then the minus is for the right, 0px for the bottom and 0px for the left. (In case you want to remember, you start with a margin for the top and then it goes clockwise.)

I also noticed your text doesn't go far enough to the right so you may want to change the 30px to a lesser number in this:

#board-10 .board_image .description div,
#board-4 .board_image .description div
{
padding:8px 30px 8px 8px;
}

-------------

And just so you know, the image width and height showing on your site is 401px by 130px so that is what you probably want to make your images.

-------------

Now to add more of your boards just click on the board that you want to add an image to and look in your address bar to get the id. Like when I click on "Stormclan" this is what shows in my address bar: moonandstars.boards.net/board/12/stormclan So that is board 12.

So what you'll want to do next is copy one of the boards I have in the css and make a copy and paste it right below the last one, edit the board id so it says 12 and then add the image you want.  Also I have repeating backgrounds in mine so I had them repeat but I doubt you will so you'd need to change the repeat to no-repeat. I did that on the last one but you'll want to change the others too.

#board-11 .board_image{
background: url(//storage.proboards.com/3393080/images/gwjsa0KYirWodooe0DeP.png);
background-repeat:repeat;
}
#board-10 .board_image{
background: url(//storage.proboards.com/3393080/images/gJBT0UDWqDocttaJhG0V.png);
background-repeat:repeat;
}
#board-12 .board_image{
background: url(//storage.proboards.com/3393080/images/newimage.png);
background-repeat:no-repeat;
}

And just keep adding the boards you want.  Now for the rest of the css all you need to do is add a comma after the last board id and add the next board id (no comma until you add another) so here I added board 12 to these: 


#board-11 .board_image .description,
#board-10 .board_image .description,
#board-12 .board_image .description
{width:100%;
height: 130px;
transition-timing-function: ease-in-out;opacity:0.0;
-webkit-transition-duration: 700ms;
-moz-transition-duration: 700ms;
-o-transition-duration: 700ms;
transition-duration: 700ms;
}
#board-11 .board_image .description:hover,
#board-10 .board_image .description:hover,
#board-12 .board_image .description:hover
{width:100%;height: 130px;
background-color: rgba(244,244,255,0.6);
opacity:1.0;
}
#board-11 .board_image .description div,
#board-10 .board_image .description div,
#board-12 .board_image .description div
{
padding:8px 30px 8px 8px;
}

And that's it. Just keep adding until you are done. Oh, and if you want to change the color of the background on hover, this is the part you change and I bolded it above:

background-color: rgba(244,244,255,0.6);

You can change any hex color to rgb here: www.webpagefx.com/web-design/hex-to-rgb/

The first 244 is the red/cyan color, the second 244 is the green/magenta color and the 255 is the blue/yellow color. The 0.6 is the opacity. 0.0 would be totally transparent while 0.9 would be nearly opaque but not quite and 1.0 would indeed be opaque.

Let me know if you have any issues or just questions.

[Mint]

Tumbleweed,

Thank you so much for your help! I think I got it all and should be able to do it now c:

[Tumbleweed]

Aug 2, 2017 9:27:23 GMT -8 Mint said:

Tumbleweed ,

Thank you so much for your help! I think I got it all and should be able to do it now c:

I did add a couple corrections/ things to my last post probably while you made this reply. But anyway, you're welcome and I'm here if you do need help. Have fun!


Mint , I was just going to add a label to this that your request was complete when I did a quick check of your forum to see how you were getting along. Looks really nice but I do see the hover background will need the rounded corners too. Now you probably could have worked this out on your own but just in case, you'd add it to this like I did in blue.

#board-11 .board_image .description:hover,
#board-10 .board_image .description:hover
{width:100%;height: 130px;
background-color: rgba(244,244,255,0.6);
opacity:1.0;border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}