Question About Changing Board Images via IDs

[Sammiie]

Hello! 

I was working all day yesterday to get my board images the way I want them, which included combining separate image & description divs into one and making it a picture, which upon hover, shows the description. That I seemed to manage, but upon doing so, I realized I'd have to somehow change each board image on its own... which is fine. I've seen code utilizing ids to do this before, only I think I did it right, but it's not working on my board

Does anyone have any direction for me? 

Here's my board

Here's the id code I'm trying to use in the Style Sheet:
#board-21 .mw_descimg { background-image:url('https://images2.imgbox.com/ae/0e/EgabKXaT_o.png'); z-index:1; }
#board-20 .mw_descimg { background-image:url('https://images2.imgbox.com/ae/0e/EgabKXaT_o.png'); z-index:1; }

Here's my Boards List code from Layout Templates:
<table class="list" role="grid">
<!--<thead>
<tr>
<th class="icon"></th>
<th class="main">Board</th>
<th class="threads">Threads</th>
<th class="posts">Posts</th>
<th class="latest last">Last Post</th>
</tr>
</thead>-->
   <table>
<tbody>
       <tr>
           <td class="mw_boardmaintd">
           {foreach $[board]}
{if !$[board.is_redirect]}
               <div class="mw_boardmaindiv">
                   
                   
                   <table cellspacing="0" cellpadding="0" class="mw_brdtoptbl">
                       <tr>
                           <td class="mw_tdava">
                            {if $[board.icon.title] == "New Posts"}
                                   <div class="newpostavatar circlepostavatar">
                                       {if $[board.posts] > 0}
                                           <a href="$[board.last_thread.recent_link.href]">$[board.last_thread.last_post.created_by.avatar_medium]</a>
                                       {else}
                                       <div class="blankboardava"></div>
                                       {/if}
                                   </div>
                                   {else}
                                   <div class="nonewpostavatar circlepostavatar">
                                       {if $[board.posts] > 0}
                                           <a href="$[board.last_thread.recent_link.href]">$[board.last_thread.last_post.created_by.avatar_medium]</a>
                                       {else}
                                           <div class="blankboardava"></div>
                                       {/if}
                                   </div>
                                   {/if}
                           </td>
                           
                           <td class="mw_tdbrdlink">
                               $[board]<br>
                               <!--<div class="mw_brddesc"></div>-->
                               
                               <div class="mw_lpinfo">
                                   
                                   
                                   {if $[board.posts] > 0}
                                       {if $[board.last_thread]}

                                           <div class="mw_lpfld">$[board.last_thread.recent_link] </div>
                                           <div class="mw_lpfld">BY $[board.last_thread.last_post.created_by] ON $[board.last_thread.last_post.created_on] </div>
                                  <div class="mw_lpfld">{if $[board.threads] == -1}N/A{else}<font>$[board.threads]</font>  THREADS{/if} // {if $[board.posts] == -1}N/A{else}<font>$[board.posts]</font>  POSTS{/if}</div>
                                       {/if}
                                   {else}
                                       <div class="mw_brddesc">No posts have been made on this board.</div>
                                   {/if}

                               </div>

                           </td>
                           
                           <td class="mw_tdbrddesc">
                               <div class="mw_descdiv">
                                <div class="mw_sbbrd">
                                       {if $[board.sub_board]}
{foreach $[board.sub_board]}<a href="$[board.sub_board.href]">$[board.sub_board.name]</a> | {/foreach}
{/if}
                                       
                                   </div>
                                   <div class="mw_descimg"><div class="description">$[board.description]</div></div>
                               </div>
                           </td>
                       </tr>
                   </table>
                         

                   
               </div>
           {else}
<tr id="$[board.content_id]" class="$[board.content_class]">
                   
<td class="icon">$[board.icon]</td>
<td class="main clickable redirect last" colspan="4">
<span class="link">$[board]</span><br />
<p class="description">$[board.description]</p>
</td>
</tr>
{/if}
{/foreach}
       {if !$[board]}
<tr class="last"><td class="last center" colspan="5">No boards were found.</td></tr>
{/if}
    </td>
       </tr>
       <!--
{foreach $[board]}
{if !$[board.is_redirect]}
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="icon">$[board.icon]</td>
<td class="main clickable">
<span class="link">$[board]</span>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}<br />
<p class="description">$[board.description]</p>
{if $[board.num_mods]}
<p class="moderators">
Moderator{if $[board.num_mods] != 1}s{/if}:
{foreach $[board.moderator_group]}$[board.moderator_group.comma_before] $[board.moderator_group]{/foreach}{if $[board.moderator]}{if $[board.moderator_group]}, {/if}{/if}
{foreach $[board.moderator]}$[board.moderator]$[board.moderator.comma] {/foreach}
</p>
{/if}
{if $[board.sub_board]}
<p class="sub-boards">
Sub-board{if $[board.sub_board] != 1}s{/if}:
{foreach $[board.sub_board]}<a href="$[board.sub_board.href]">$[board.sub_board.name]</a>$[board.sub_board.comma] {/foreach}
</p>
{/if}
</td>
<td class="threads">{if $[board.threads] == -1}N/A{else}$[board.threads]{/if}</td>
<td class="posts">{if $[board.posts] == -1}N/A{else}$[board.posts]{/if}</td>
<td class="latest last">
{if $[board.posts] > 0}
{if $[board.last_thread]}
$[board.last_thread.recent_link]<br />
by $[board.last_thread.last_post.created_by]<br />
<span class="date">$[board.last_thread.last_post.created_on]</span>
{/if}
{else}
No posts have been made on this board.
{/if}
</td>
</tr>
{else}
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="icon">$[board.icon]</td>
<td class="main clickable redirect last" colspan="4">
<span class="link">$[board]</span><br />
<p class="description">$[board.description]</p>
</td>
</tr>
{/if}
{/foreach}
{if !$[board]}
<tr class="last"><td class="last center" colspan="5">No boards were found.</td></tr>
{/if}
-->
</tbody>
</table>

I suspect it might have something to do with the Layout Templates portion of it, but I'm not at all savvy in Javascript and the code used in there, so I don't want to mess with it too much.

I'll be happy to provide anymore information you need to help me fix this issue! Thanks in advance!

[Nori]

I'm not super savvy on this all, but the links to your images don't work so that could be the beginning of the problem perhaps? When I put the URL you have in the supplied code into my browser it gives me a Page Not Found error.

The call to your custom classes look good, so here's hoping it's something as simple as that!
( Assuming the links are still relevant of course and you didn't intentionally remove/update them ^^;  )

[Sammiie]

Hiya Nori!

Thanks for checking it out for me. I'm sorry you had issues with my links I provided them to show that I thought I was doing the right things on my board. They are both working fine for me (checked on multiple browsers), so not sure why you couldn't see them =/

Either way, thanks for looking for me. Hopefully someone else can roll around and give some more insight on why these dang pictures aren't showing up how I want them to xD

[Nori]

Well I just tried again and they're working now :0 Maybe I derped somehow and copied something extra..? Or the server was down when I looked, I dunno, but they show up now! And now today when I test around your board I find that there is a background image showing that wasn't there yesterday too :0 It's around one of your descriptions. Board #10 (Accepted Characters), when you hover over it there's a background on just the area of the text.


But! Onto the important things.
You are missing the <tr id="$[board.content_id]" class="$[board.content_class]"> which might be why the CSS can't find the board ID... maybe? Try putting the id="$[board.content_id]" into the td containing your description image and see if it works :3

Also I notice that you have 2 open tables at the top of your Layout code. Could probably remove that 2nd one.


If nothing else I'm bumpin' the thread to hopefully get attention! XD Good luck!

[Sammiie]

Nori  Bear with me, I'm a little slow about these Layout Template codes xD

So, I do have that string of code in there, but maybe it's in the wrong place? Any idea what should be moved where? Also, sticking the id into the description image div did not make the board images show.

[Nori]

No worries! I'm in the process of studying all this web dev stuff too :3

So the place it is in your current Layout Template code in the first post is not anywhere in your custom styling. Currently what it's location means is 'if the board is not a redirect (so not a regular ol' listed board), give the tr the board ID & class, then proceed to build the backup space cause something's wrong.' So the area that ID code is in doesn't effect what your forum will normally look like.

Placing the ID assignment in the Image div also wouldn't work based on how you need to call to the CSS. The CSS is saying, 'find the container with the ID, and then look at the containers inside it for one with a class called mw_descimg to change. Also any of those little divs should not be the thing that has the entire board ID, just in case you ever need to use the Board ID to change something else in the real board list. You should make the Table Row (I said td before but that was typo. Though it'd also work there too just isn't as appropriate ^^; ) have the board ID.

I tested on a blank theme, putting in your board list template & the 1 line of CSS and it works! So fingers crossed

<table class="list" role="grid">
<tbody>
<tr>
<td class="mw_boardmaintd">
{foreach $[board]}
{if !$[board.is_redirect]}
<div class="mw_boardmaindiv">


<table cellspacing="0" cellpadding="0" class="mw_brdtoptbl">
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="mw_tdava">
{if $[board.icon.title] == "New Posts"}
.
.
.

Right near the top after the foreach board loop s'where it should be :3