Now visit the site to see the changes, it will not look pretty but this is PROGRESS!
Now comes the more involved part, editing the index.
There is one part of the index file that you must keep! Most of it contains the "glue" for Expression Engine to work.
Now we dive into the coding below BODY.
We just have to look for the similar code and replace it with the EE code. I suggest working inside the NEW DESIGN index file first and then moving code over into the Expression Engine edit box.
Main Navigation
On this site the navigation is very similar to the original navigation for the EE default template! So this is not very hard at all. We just need to insert the EE links into the new navigation. And add any other links that you have in mind!
This is what we replace so far:
Code:
<body>
<div id="topbar"></div>
<div class="secondbar"></div>
<div id="wrapper">
<div id="header">
<ul id="navbar">
<li id="home"><a href="{homepage}" title="Home">Home</a></li>
<li id="about"><a href="{path={my_template_group}/about}" title="About">About</a></li>
<li id="archives"><a href="{path={my_template_group}/archives}" title="Archives">Archives</a></li>
<li id="contact">{encode="{webmaster_email}" title="Contact"}</li>
</ul>
with
Code:
<body><div id="header">
<div id="logo">
<h1><a href="#">Expression Engine Templating!</a></h1>
<p><a href="http://www.freecsstemplates.org/">This template is by Free CSS Templates!</a></p>
</div>
<div id="rss"><a href="#">Subscribe to RSS Feed</a></div>
</div>
<!-- end header -->
<!-- star menu -->
<div id="menu">
<ul>
<li class="current_page_item"><a href="{homepage}" title="Home">Home</a></li>
<li><a href="{path={my_template_group}/about}" title="About">About</a></li>
<li><a href="{path={my_template_group}/archives}" title="Archives">Archives</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- end menu -->
<!-- start page -->
<div id="page">
I personally didn't want a search bar so I took that out.
Content and Posts
So now we have to fix the "meat" of the page which is where the posts will go. The "page" div which we ended with sets the scene for the next bit of code that we will transfer over.
First I removed this next because I don't want any ads either!
Code:
<!-- start ads -->
<div id="ads"><a href="#"><img src="http://www.surmunity.com/images/ad160x600.gif" alt="" width="160" height="600" /></a></div>
<!-- end ads -->
<!-- start content -->
Then I edited and ended up with the following:
Code:
<div id="content">
<div class="post">
<div class="title">
<h2><a href="#">About this Template</a></h2>
<p><small>Posted on August 20th, 2007 by <a href="#">Free CSS Templates</a></small></p>
</div>
<div class="entry">
<p>This is <strong>Mr. Techie</strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</a> license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)</p>
<p>This template is also available as a <a href="http://www.freewpthemes.net/preview/level2/">WordPress theme</a> at <a href="http://www.freewpthemes.net/">Free WordPress Themes</a>.</p>
</div>
<p class="links"> <a href="#" class="more">Read More</a> <a href="#" class="comments">No Comments</a> </p>
</div>
This is the good part! This is what must go after the "page" div:
Code:
<div id="content">
{exp:weblog:category_heading weblog="{my_weblog}"}
{exp:weblog:entries weblog="{my_weblog}" orderby="date" sort="desc" limit="15" disable="member_data|trackbacks"}
<div class="post">
<div class="title">
<h2>{title}</h2>
<p>{date_heading}<small> {entry_date format=' %l, %F %d, %Y '}</small>{/date_heading}</p>
</div>
<div class="entry"><p>
{summary}
{body}
{extended}
</p>
</div>
<p class="links"> Posted by <a href="{profile_path=member/index}">{author}</a> on {entry_date format='%m/%d'} at {entry_date format='%h:%i %A'}
{if allow_comments}
({comment_total}) <a href="{url_title_path="{my_template_group}/comments"}">Comments</a> •
{/if} {if allow_trackbacks}
({trackback_total}) <a href="{trackback_path="{my_template_group}/trackbacks"}">Trackbacks</a> •
{/if}
<a href="{title_permalink={my_template_group}/index}">Permalink</a> </p>
</div>
Of course once you get the hang of it you can play around with the different codes.
Now this is how our site looks:
This is how the ENTIRE code should look inside of the index template box, SO FAR:
Code:
{assign_variable:my_weblog="default_site"}
{assign_variable:my_template_group="site"}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{exp:weblog:info weblog="{my_weblog}"}{blog_title}{/exp:weblog:info}</title>
<meta http-equiv="Content-Type" content="text/html; charset={charset}" />
<link rel='stylesheet' type='text/css' media='all' href='{stylesheet={my_template_group}/site_css}' />
<style type='text/css' media='screen'>@import "{stylesheet={my_template_group}/site_css}";</style>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{path={my_template_group}/rss_2.0}" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="{path={my_template_group}/atom}" />
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="#">Expression Engine Templating!</a></h1>
<p><a href="http://www.freecsstemplates.org/">This template is by Free CSS Templates!</a></p>
</div>
<div id="rss"><a href="#">Subscribe to RSS Feed</a></div>
</div>
<!-- end header -->
<!-- star menu -->
<div id="menu">
<ul>
<li class="current_page_item"><a href="{homepage}" title="Home">Home</a></li>
<li><a href="{path={my_template_group}/about}" title="About">About</a></li>
<li><a href="{path={my_template_group}/archives}" title="Archives">Archives</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- end menu -->
<!-- start page -->
<div id="page">
<div id="page">
<div id="content">
{exp:weblog:category_heading weblog="{my_weblog}"}
{exp:weblog:entries weblog="{my_weblog}" orderby="date" sort="desc" limit="15" disable="member_data|trackbacks"}
<div class="post">
<div class="title">
<h2>{title}</h2>
<p>{date_heading}<small> {entry_date format=' %l, %F %d, %Y '}</small>{/date_heading}</p>
</div>
<div class="entry"><p>
{summary}
{body}
{extended}
</p>
</div>
<p class="links"> Posted by <a href="{profile_path=member/index}">{author}</a> on {entry_date format='%m/%d'} at {entry_date format='%h:%i %A'}
{if allow_comments}
({comment_total}) <a href="{url_title_path="{my_template_group}/comments"}">Comments</a> •
{/if} {if allow_trackbacks}
({trackback_total}) <a href="{trackback_path="{my_template_group}/trackbacks"}">Trackbacks</a> •
{/if}
<a href="{title_permalink={my_template_group}/index}">Permalink</a> </p>
</div>
{/exp:weblog:entries}
</div>
<div id="sidebar">
<h2 class="sidetitle">About</h2>
<p>Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p>
{exp:weblog:calendar switch="calendarToday|calendarCell"}
<table class="calendarBG" border="0" cellpadding="5" cellspacing="1" summary="My Calendar">
<tr>
<th class="calendarHeader"><div class="calendarMonthLinks"><a href="{previous_path={my_template_group}/index}"><<</a></div></th>
<th class="calendarHeader" colspan="5">{date format="%F %Y"}</th>
<th class="calendarHeader"><div class="calendarMonthLinks"><a class="calendarMonthLinks" href="{next_path={my_template_group}/index}">>></a></div></th>
</tr>
<tr>
{calendar_heading}
<td class="calendarDayHeading">{lang:weekday_abrev}</td>
{/calendar_heading}
</tr>
{calendar_rows }
{row_start}<tr>{/row_start}
{if entries}<td class='{switch}' align='center'><a href="{day_path={my_template_group}/index}">{day_number}</a></td>{/if}
{if not_entries}<td class='{switch}' align='center'>{day_number}</td>{/if}
{if blank}<td class='calendarBlank'> </td>{/if}
{row_end}</tr>{/row_end}
{/calendar_rows}
</table>
{/exp:weblog:calendar}
{exp:search:simple_form search_in="everywhere"}
<h2 class="sidetitle">Search</h2>
<p>
<input type="text" name="keywords" value="" class="input" size="18" maxlength="100" />
<br />
<a href="{path=search/index}">Advanced Search</a>
</p>
<p><input type="submit" value="submit" class="submit" /></p>
{/exp:search:simple_form}
<h2 class="sidetitle">Categories</h2>
<p>
{exp:weblog:categories weblog="{my_weblog}" style="nested"}
<a href="{path={my_template_group}/index}">{category_name}</a>
{/exp:weblog:categories}
</p>
<h2 class="sidetitle">Monthly Archives</h2>
<ul>
{exp:weblog:month_links weblog="{my_weblog}"}
<li><a href="{path={my_template_group}/index}">{month} {year}</a></li>
{/exp:weblog:month_links}
<li><a href="{path={my_template_group}/archives}">Complete Archives</a></li>
<li><a href="{path={my_template_group}/categories}">Category Archives</a></li>
</ul>
<h2 class="sidetitle">Most recent entries</h2>
<ul>
{exp:weblog:entries orderby="date" sort="desc" limit="15" weblog="{my_weblog}" dynamic="off" disable="pagination|custom_fields|categories|member_data|trackbacks"}
<li><a href="{title_permalink={my_template_group}/index}">{title}</a></li>
{/exp:weblog:entries}
</ul>
<h2 class="sidetitle">Syndicate</h2>
<ul>
<li><a href="{path={my_template_group}/atom}">Atom</a></li>
<li><a href="{path={my_template_group}/rss_2.0}">RSS 2.0</a></li>
</ul>
</div>
</div>
<br class="spacer" />
<div id="footer">
<div class="entry">
<h2 class="sidetitle">Site Statistics</h2>
<p>
This page has been viewed {hits} times<br />
Page rendered in {elapsed_time} seconds<br />
{exp:stats}
Total Entries: {total_entries}<br />
Total Comments: {total_comments}<br />
Total Trackbacks: {total_trackbacks}<br />
Most Recent Entry: {last_entry_date format="%m/%d/%Y %h:%i %a"}<br />
Most Recent Comment on: {last_comment_date format="%m/%d/%Y %h:%i %a"}<br />
Total Members: {total_members}<br />
Total Logged in members: {total_logged_in}<br />
Total guests: {total_guests}<br />
Total anonymous users: {total_anon}<br />
Most Recent Visitor on: {last_visitor_date format="%m/%d/%Y %h:%i %a"}<br />
The most visitors ever was {most_visitors} on {most_visitor_date format="%m/%d/%Y %h:%i %a"}
{if member_names}
<p>Current Logged-in Members:
{member_names backspace='6'}
<a href="{member_path=member/index}">{name}</a>
{/member_names}
</p>
{/if}
{/exp:stats}
</p>
<p><a href="{path={my_template_group}/referrers}">Referrers</a></p>
</div>
<p><br /><a href="http://expressionengine.com/">Powered by ExpressionEngine</a></p>
</div>
</div>
</body>
</html>
It obviously needs a lot of tweaking but so far this is the basic way of getting a template into working condition!