Side-by-side boards modification?

[Shadow]

Forum URL: fantasiapocalypse.boards.net

Ok, so it is a different theme than what is shown, that I am creating/working on for the site. Failing to code...

So, I would like to have side-by-side boards, and be able to potentially put boxes around them, like a sort of frame for each, where the title is on top and below it directly are last post/post by, and below that another box containing description, total threads/posts, and below that (in between outer frame and description box) will be moderators, and the sub-board list, each in their own small solid box. Also potentially an opaque image covering the board upon hover. How would I go about doing that? Sorry if this is too much stuff!

[Tumbleweed]

Aug 13, 2017 17:53:26 GMT -8 Shadow said:

Forum URL: fantasiapocalypse.boards.net

Ok, so it is a different theme than what is shown, that I am creating/working on for the site. Failing to code...

So, I would like to have side-by-side boards, and be able to potentially put boxes around them, like a sort of frame for each, where the title is on top and below it directly are last post/post by, and below that another box containing description, total threads/posts, and below that (in between outer frame and description box) will be moderators, and the sub-board list, each in their own small solid box. Also potentially an opaque image covering the board upon hover. How would I go about doing that? Sorry if this is too much stuff!

It looks like you have a pretty nice layout now. Do you still want this? I know you posted this just a few days ago so you probably do but just checking. Is this something you want someone to talk you through with you doing it yourself since you didn't post this in the request template board?

I already have various layouts sort of done how you like. Take a look here but it sounds like instead of a image showing you want the image to only show on hover? (I only added images in the first two boards and there is nothing for sub-boards or moderators.  I also have this set up here but no images involved but that could easily be changed and as the other one, would need to add back in subboards/moderators.

I don't think I'd have the time to talk you through doing it all yourself from scratch but I'd be happy to talk you through changes on either of those layouts or I can just modify them to your liking. Which ever route you want to go.

[Shadow]

Tumbleweed, yes, please! Perhaps not talking through if you don't have time, but the hover and image on the first board is close if not exactly what I had in mind! I currently have found a code for half of it (side by side boards of fluid width I think it was called), but the hover and image parts are what are confusing for me to do/add now.

[Tumbleweed]

Aug 15, 2017 10:42:36 GMT -8 Shadow said:

Tumbleweed , yes, please! Perhaps not talking through if you don't have time, but the hover and image on the first board is close if not exactly what I had in mind! I currently have found a code for half of it (side by side boards of fluid width I think it was called), but the hover and image parts are what are confusing for me to do/add now.

Without seeing the side by side template you found, I can just give you some general steps on how to do this. (I don't want you to post the template here if you got it from somewhere besides here on Support.)

I guess the first thing you want to do is head to the new board list template you put on your site and look for the tag you want the hover affect on. For example, if you were wanting the hover affect just around the description you will need to add a div around I did in red: 


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

Now normally, the description is in p tags like this (<p class="description">$[board.description]</p> )but I changed mine to div tags.

Now I do all my board images via my style sheet so this is the css to be put at the bottom of your style sheet:

.show_desc {width:496px;height:100px;
background-color:@container_background_color_1!important;
}
.description{height:100px;
display: none; overflow:auto;
}
.show_desc:hover .description{width:470px;height:86px;
background-color:@container_background_color_1!important;opacity:0.6;
display:block; padding:12px;
}
#board-6 .show_desc {
background-image: url('storage.proboards.com/3480743/images/WgmVZVtvZm0aFnDNLwzE.png');
background-repeat:no-repeat;}

#board-5 .show_desc {
background-image: url('storage.proboards.com/3480743/images/WgmVZVtvZm0aFnDNLwzE.png');
background-repeat:no-repeat;
}

The bolded part at the top is the size you want the area for your images and on your pre-made template, that might already be set. Also on mine, I had to make the hover color smaller than my image size.

The green is the board id and you can get that by clicking on the board and looking in the address bar and you should see something like this:http://putteraroundvii.proboards.com/board/6/poker

And of course the orange is where to add your image.

I don't know if the above will help since everyone does their board list templates differently.

[Shadow]

Tumbleweed, I will set my new theme as default so you can see it, but the id numbers I placed were 4 and 5 (changed nothing else), they are supposed to be the top two boards on the site. But the ones showing the hover effect are more than just those two, id numbers 32, 34, 19, 16, and 24. This is odd, seeing as I did not enter those id numbers?

Be warned this is a HUGELY unfinished project...

[Tumbleweed]

Aug 15, 2017 22:53:49 GMT -8 Shadow said:

Tumbleweed , I will set my new theme as default so you can see it, but the id numbers I placed were 4 and 5 (changed nothing else), they are supposed to be the top two boards on the site. But the ones showing the hover effect are more than just those two, id numbers 32, 34, 19, 16, and 24. This is odd, seeing as I did not enter those id numbers?

Be warned this is a HUGELY unfinished project...

I'm not real sure what is going on there. When I view your source on the ones that are actually hover changing I see the traditional class .description and I see the div you put around the description as I said you should but when I view the ones you wanted to change I see .board .board-description and no divide surrounding it.

Can you post your css in case there is a minor error and if that isn't it, then you may have to pm me (don't post it here in this thread) the template (and probably the css that goes with it and I'm hoping it is at the bottom of the style sheet) so I can toss it on one of my tests sites to see what is going on.

Also, if it comes to the latter where I have to check out the template, if you are going to use the same image in each, there would be a much easier way to just target all of them at once. I gave you the board id route because most people want a different image in each for their role play forums.

[Shadow]

Tumbleweed, you mean the css that you gave me?
.show_desc {width:496px;height:100px;
background-color:@container_background_color_1!important;
}
.description{height:100px;
display: none; overflow:auto;
}
.show_desc:hover .description{width:470px;height:86px;
background-color:@container_background_color_1!important;opacity:0.6;
display:block; padding:12px;
}
#board-4 .show_desc {
background-image: url('storage.proboards.com/3480743/images/WgmVZVtvZm0aFnDNLwzE.png');
background-repeat:no-repeat;}

#board-5 .show_desc {
background-image: url('storage.proboards.com/3480743/images/WgmVZVtvZm0aFnDNLwzE.png');
background-repeat:no-repeat;
}

Thanks!- and I was planning on having them each be different, some not having images at all. Thanks for the help!

[Tumbleweed]

Shadow, Your css is fine and I knew that probably wasn't it. However, I did take a fresh look at your site today and it's working on the last board in every category so the browser is not finding where to apply the css so as default it just put it there.

So a couple things you can check and I'm not sure if I'm barking up the wrong tree or not. 
#1. Make sure you put that div I had you add around the very first $[board.description] you find and not the other one further down. (There are two typically. And then look at what the theme creator used as the class which I bolded.

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

What ever is in the class name should be changed in  the css. So if you see board-description like I'm seeing when viewing your source then the css should reflect that:


.show_desc:hover .board-description{width:470px;height:86px;

background-color:@container_background_color_1!important;opacity:0.6;

display:block; padding:12px;

}

If no joy with the above changing anything, go ahead and pm me the board list template and any css that goes with it. We'll get this figured out.

[Shadow]

Tumbleweed, I will send you the codes, I'm probably doing something obviously wrong ha... Thanks again for all your help!

[Tumbleweed]

Aug 16, 2017 16:12:55 GMT -8 Shadow said:

Tumbleweed , I will send you the codes, I'm probably doing something obviously wrong ha... Thanks again for all your help!

Thanks Shadow, I sent off the revised version that is now working correctly via pm.

Marking this as resolved.