(Sorry this post is very messy, I am running late, but wanted to post it up before I had to leave until tonight.)

Hello all! I’ve been recently trying to learn skinning and feel like I’ve got a hold of the basics of css and stuff. But when I got to the boards list part it’s like I’ve hit a wall. I’m probably just a big dumb dumb, but I can’t seem to understand how it works. Can someone help me understand wtf I’ve messed up and help me fix it?



Okay, here is the board concept image I made:



i.ibb.co/zsj6vG8/biardlistmockup1.png



I was easily able to create the top banner section. But when it came to the board list…

I went wildy off mock up because I was bumbling through it. I actually like the way this looks more anyway, so yay!



i.ibb.co/8YqSsD4/biardlistmockup2.png



...The not so yay part? Well, firstly when I go to the thread list it’s broken into a billion pieces!



i.ibb.co/KL96mmk/biardlistmockup3.png



BUT EVEN WORSE, if I add more than one board per section, it all breaks.



i.ibb.co/Jc4nNhc/biardlistmockup4.png



All this failure can probably be attributed to me not really understanding tables, and the fact I don’t know what the heck the if/else and the proboard attributes are really.



Here is my horrible attempt at the coding.



My board list:

<table class="list" role="grid">

<thead>

       <table class ="animaltable">{foreach $[board]}

{if !$[board.is_redirect]}

<tr id="$[board.content_id]" class="$[board.content_class]">

<tr> <th class="animalcategory"></th> </tr>

<tr> <td class="animaltitleboard"><div class="animaltitle">$[board]</div></td>

<td class="animaldescriptionbox"><div class="animaldescription">$[board.description] </div></td> </tr>

<tr><td class="animalsubboardsbox"><div class="animalsubboards">{if $[board.sub_board]  > 0} {if $[board.sub_board] != 1}{/if}

{foreach $[board.sub_board]}<a href="$[board.sub_board.href]">$[board.sub_board.name]</a>$[board.sub_board.comma] {/foreach} </div>

{/if}</td>

<td class="animalrecent">{if $[board.posts] > 0}

{if $[board.last_thread]}

$[board.last_thread.recent_link] by $[board.last_thread.last_post.created_by]

{/if}

{else}

{/if}</td> </tr> </table>











And my css:





.animaltable {width: 1060px;background-color:#ececec;background-image:url(https://i.ibb.co/gdcXtQ9/subtle-freckles.png);padding: 5px;

}



.animalcategory { }



.animaltitleboard { }

.animaltitle{display: inline-block; height: 100px; width: 450px;background-image:url(https://i.ibb.co/gdcXtQ9/subtle-freckles.png);font-size: 50px;font-family:'Charm', cursive; text-align:center;background-color: #c8a9b3; padding:5px; color: #ececec; margin-top: -40px;border: 3px solid transparent;

-webkit-border-image: url(https://i.ibb.co/12p2f5X/tumblr-luvtrl-ZDs-C1qiav1uo1-400.png) 50 round; /* Safari 3.1-5 */

-o-border-image: url(https://i.ibb.co/12p2f5X/tumblr-luvtrl-ZDs-C1qiav1uo1-400.png) 50 round; /* Opera 11-12.1 */

border-image: url(https://i.ibb.co/12p2f5X/tumblr-luvtrl-ZDs-C1qiav1uo1-400.png) 50 round;

                   box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19); }

.animaldescriptionbox{}

.animaldescription {height: 100px; overflow: auto; padding: 15px;font-size: 11px; margin-left: -55px; }

.animalsubboardsbox {}

.animalsubboards {}



.animaltitle a:link, a:active {text-shadow: 0px 1px rgba(63,107,169, 0.5);font-family:'Charm', cursive; color: #ffffff; }

.animaltitle a:hover {color: white;}





.animalsubboards a:link {                  

  background-image:url(https://i.ibb.co/gdcXtQ9/subtle-freckles.png); background-color: #6a9a8c;

 color: white;

   font-family: arial;

   font-size: 10px;

 padding: 8px 15px;

 text-align: center;

 text-decoration: none;

 display: inline-block;

position: relative;

   text-transform: lowercase;

   top:-15px;

text-shadow: 0 1px 2px #283322;

border: 3px solid transparent;

-webkit-border-image: url(https://i.ibb.co/12p2f5X/tumblr-luvtrl-ZDs-C1qiav1uo1-400.png) 50 round; /* Safari 3.1-5 */

-o-border-image: url(https://i.ibb.co/12p2f5X/tumblr-luvtrl-ZDs-C1qiav1uo1-400.png) 50 round; /* Opera 11-12.1 */

border-image: url(https://i.ibb.co/12p2f5X/tumblr-luvtrl-ZDs-C1qiav1uo1-400.png) 50 round;

                   box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);}







.animalrecent {  background-image:url(https://i.ibb.co/gdcXtQ9/subtle-freckles.png); background-color: #6a9a8c;

 color: white;

   font-family: arial;

   font-size: 10px;

   width: 100%;

 padding: 3px;

 text-align: center;

 text-decoration: none;

 display: inline-block;

margin-top: 7px;

   text-transform: uppercase;

}



.animalrecent a:link {font-size: 11px; color: #ffffff;}