[Display Template] Customization for Info Block

[trenchteam]

I've been searching far and wide for some sort of starting point, but cant seem to find the information Im looking for in this board.  Anyway, I've been wanting to customize my display.template to match this screenshot I attached. Can someone give me some links or help getting this started. I really like how it is organized for the user.  Thanks!

[Sir Osis of Liver]

This should help -

http://www.simplemachines.org/community/index.php?topic=445250.0

[trenchteam]

Thanks Krash.  I was looking more into having each item, in it own box via CSS.  Im not too familiar with the display.template for 2.0 so if someone can show me how to surround something such as "POST COUNT" in a table, Im sure I can take that example and accomplish the look and feel I am after. I'd want something very similar to the two screenshots I provided.

[Gary]

This should help -
http://www.simplemachines.org/community/index.php?topic=445250.0

How would that help, that's nothing to do with this situation.

trenchteam - give this a shot by adding it to your index.css file.

Code Select Expand


.poster h4
{
   border: 1px solid #000000;
   padding: 5px;
}
.poster ul li, .poster ul li ul li
{
   border: 1px solid #000000;
   padding: 5px;
}


Though, keep in mind that I haven't tested it.

[trenchteam]

This worked Gary. Thanks a million. Now lets see if I can style it better. I'll let you know! 

[trenchteam]

okay, now Im stumped with removing the borders around each icon inside of the block. Im looking at the profile icon and its also boxed in.  The padding is fine, the box around it I'd like to remove. 

[trenchteam]

fixed it with a little playing around..

Code Select Expand

.poster h4
{
   border: 1px solid #000000;
   padding: 5px;
   text-align: center;
   margin-top: 0.5em;
   }
.poster ul li
{
   border: 1px solid #000000;
   padding:5px;
   text-align: center;
   margin-top: 0.5em;
}
.poster ul li ul li
{
border: 0px solid #000000;
   padding:5px;
   text-align: center;
   margin-top: 0.5em;
   }