A couple of tips on what I did with the tabs and the Movie entries (as shown above/on top of this page).
Naturally, the idea is to categorize the entries you want to show as a tab, or in case of a static page, just go ahead and create it as explained before.
Prepare the tabs
Most of the code was taken from Unraveled.com with additional changes made by myself. Currently it looks like this:
ul#tabnav {
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 35px;
border-top: 1px solid silver;
margin: 0;
}
ul#tabnav li {
float: left;
height: 21px;
background-color: silver;
margin: 2px 2px 0 2px;
border: 1px solid silver;
}
body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 {
border-top: 1px solid #fff;
background-color: #fff;
}
body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a {
color: #000;
}
#tabnav a {
float: left;
display: block;
color: white;
text-decoration: none;
padding: 4px;
}
#tabnav a:hover {
color: silver;
background: white;
}
If you wish to have one of the tabs in the ‘selected’ mode, make sure that you add the tab’s ID to the body tag, as shown in here:
...
<body id="tab3">
<div id="banner">
<h1><a href="<$MTBlogURL$>
"accesskey="1"><$MTBlogName$></a></h1>
...
Create the index template file
Go to your templates, select the main index and select all text and copy it to the clipboard. Go back the template list, and click the ‘Create new index template’ link. Fill out the fields and make sure you memorize the name you have given this template. Paste in the code and remove all text between (and including) the macros MTEntries. Replace it with the following code:
<table border=0> <tr><td><em>Month.Day.Year</em> </td> <td> <em>Title of the movie</em> </td> </tr> <MTEntries category="The-screen-or-chest-of-desire"> <tr> <td><$MTEntryDate format="%m.%d.%Y"$> </td> <td><a href="<$MTEntryLink$>"><$MTEntryTitle$></a> </td> </tr> </MTEntries> </table>
Mind that I used a table to seperate the entries. Also, mind the category name, which should be replaced with the one you have created before starting this endeavour. While you’re here in this template, add the tabs.
<ul id="tabnav">
<li class="tab1">
<a href=
"http://hoogervorst.dyndns.org/~arthur/weblog">
Blog
</a></li>
<li class="tab2"><a href="#">Articles</a></li>
<li class="tab3"><a href="#">Movies</a></li>
<li class="tab4"><a href="#">About</a></li>
</ul>
Final thoughts
Naturally it’s possible to add more tabs as long as you don’t forget to add them to the CSS file. Have fun!
Only movies and blog work for me. Looks interesting though. Make it look more like a tab?
Only movies and blog work for me
Those are the only ones active .