Page Template: A lightweight grid style

[John]

First the html.  Note the use of the classes in <table> & <td>.

<table class="modellist" width="100%">
<tbody>
<tr>
<td width="25%">...</td>
<td width="25%" class="opentop">...</td>
<td width="25%" class="opentop">...</td>
<td width="25%">...</td>
</tr>
<tr>
<td class="openleft">...</td>
<td class="closed">...</td>
<td class="closed">...</td>
<td class="openright">...</td>
</tr>
<tr>
<td class="openleft">...</td>
<td class="closed">...</td>
<td class="closed">...</td>
<td class="openright">...</td>
</tr>
</tbody>
</table>

... and now the <style>.   It goes in the Page's Custom Code Box.  You'll need to check the "Manage title and meta tags manually (advanced)" checkbox to access the page's Custom Code Box.

I also checked the "Use full page width (hide sidebar)" checkbox.

<style>
table.modellist {
border: 0px;
}

table.modellist td {
}

table.modellist td.closed {
border:1px solid #CCC;
padding-top:20px;
padding-bottom:20px;
}

table.modellist td.openleft {
border-top:1px solid #CCC;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
padding-top:20px;
padding-bottom:20px;
}

table.modellist td.opentop {
border-left:1px solid #CCC;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
}

table.modellist td.openright {
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
border-left:1px solid #CCC;
padding-top:20px;
padding-bottom:20px;
}

table.modellist td.openbottom {
border-top:1px solid #CCC;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
padding-top:20px;
padding-bottom:20px;
}
</style>

Hope this gives some inspiration!

 

[Jen]

Great job, looks awesome!

[John]

Thank you Jen :)

[Jen]

Hi John,

This is really a great page template. I'm guessing a lot of NCs won't realize that's what it is, based on the title. If you don't mind me suggesting, I suggest adding "Page Template" to discussion title. And explain that the <style> tag goes in Page Custom Code Box.

Best,

Jen

[John]

I did what you said.

[Patrick Chappelle]

It did something, but it doesn't look anything like what's in that picture.

[John]

how does it look different?

[Ed]

thanks John

[Fire-Tech]

Great tip. Thanks for sharing.

[Baqur mehdi]

it didnt work for me.

[Damien Hannah]

This is an excellent tip, and is exactly what I was looking for! I wanted to create a "Featured Albums" page on my photographic social network. I wanted a grid to display album slideshows on a dedicated page. I wanted a page flooded with photography that people can just stare at and be entertained. I had to resize each embed code, I had to create a link to each album under each slideshow, so it took me quite a while. I'm still going to edit the borders of the table, make them thicker and to match the network "theme."
This TIP is absolutely amazing, thank you for sharing it, I'd love if you came to see what I have created with your TIP!
CLICK HERE
PS. I had no idea each page had a custom code box! I wonder what else I can do now! Must research, thank you! :)