Tutorial: Expression Engine : Customize Template

**Kayla** · November 11th, 2007, 10:20 PM

Today we are going to learn how to take any free CSS template and make it into an Expression Engine theme.

I will be using the design Mr. Techie from OpenWebDesign.org:
Open Web Design - View Design

Big, round and flashy. Let's go!

1. First download the template pack at http://www.openwebdesign.org/downloa...ie.zip?id=4239
Keep that on ice.. meanwhile.

2. Second let's download Expression Engine. It's free and available here:
https://secure.expressionengine.com/...greement&id=34
(Users of the Core License may use the Software only on a website engaging in personal, non-commercial, or non-profit activities.)

Via FTP, upload all files.
I am uploading them to Default Site Weblog

After uploading everything, just go to the directory of the folder via http.
In this case I went to Default Site Weblog

You will have to chmod some of the files and folders to be writable and create a MySQL database. Everything else should be pretty simple but if you have a question just reply to this thread and I will help!

All done! Delete that install.php file!

Now for the fun part. CUSTOMIZING!

3. Go find your mrtechie folder and upload the images for the new design into Expression Engine's images folder. This is all you need to upload via FTP from the NEW DESIGN folder.

Now go back to your EE install and log into your control panel.

We have to focus on two templates inside Expression Engine: site_css and index. First go to the site_css template and delete EVERYTHING inside of it!

So delete all the existing CSS code and copy and paste the CSS for the new design, save, finish!

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> &nbsp;&nbsp;&nbsp; <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'>&nbsp;</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:&nbsp;
{member_names  backspace='6'}
<a href="{member_path=member/index}">{name}</a>&nbsp;
{/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!

Default Site Weblog

**benjamin** · November 11th, 2007, 10:26 PM

Nice! I think I missed the boat on this new forum feature of having tutorials. Shouldn't they be stickied or placed in a special area?

**Kayla** · November 11th, 2007, 10:47 PM

Ohhh it's not a feature. But we do need something like that!

We had that "articles" system before... it was really intensive to customize into the forum. Maybe it's a plug in now. *checks*

**puckchaser** · November 11th, 2007, 11:19 PM

Way coool. I will have to give that a try...

hey.. you still using wsftp? After all that 'favorite ftp' thread... for shame.....

**Kayla** · November 11th, 2007, 11:21 PM

I made those screenshots a while ago.. had to catch up my writing part to the images part.

**puckchaser** · November 11th, 2007, 11:35 PM

As long as it is an old screen cap.. we'll let it slide... :-)

However, it is an excellent tutorial!!

**ceo** · November 12th, 2007, 12:00 AM

what's wrong with ws_ftp?

**Kayla** · November 12th, 2007, 12:02 AM

It's covered in cob webs and laughs.

**Edwin** · November 12th, 2007, 4:52 AM

Thank you very much for the tutorial. Almost there. Now I'm going to take a look at why I don't get my blogs to show, but that is something I did wrong, somehow

November 11th, 2007, 10:26 PM	#2 (permalink)
benjamin Sur, pass the salt Excelling Contributor Joined in Sep 2005 Lives in kayla's dvd-rw tray Hosted on Pass44 768 posts Gave thanks: 40 Thanked 51 times	Nice! I think I missed the boat on this new forum feature of having tutorials. Shouldn't they be stickied or placed in a special area? __________________ Benjamin Server: Pass44

November 11th, 2007, 10:47 PM	#3 (permalink)
Kayla Searcher Surpass Staff Joined in May 2003 Lives in Orlando 24,448 posts Gave thanks: 935 Thanked 783 times	Ohhh it's not a feature. But we do need something like that! We had that "articles" system before... it was really intensive to customize into the forum. Maybe it's a plug in now. checks __________________ Follow Surpass on Twitter and Facebook Check out interesting finds on the Surpass Blog .... it's coming.

November 11th, 2007, 11:19 PM	#4 (permalink)
puckchaser He shoots.. He scores! Super #1 Joined in Feb 2007 Lives in A room with no windows. Hosted on SH110 1,419 posts Gave thanks: 42 Thanked 137 times	Way coool. I will have to give that a try... hey.. you still using wsftp? After all that 'favorite ftp' thread... for shame..... __________________ SH110

November 11th, 2007, 11:21 PM	#5 (permalink)
Kayla Searcher Surpass Staff Joined in May 2003 Lives in Orlando 24,448 posts Gave thanks: 935 Thanked 783 times	I made those screenshots a while ago.. had to catch up my writing part to the images part. __________________ Follow Surpass on Twitter and Facebook Check out interesting finds on the Surpass Blog .... it's coming.

November 11th, 2007, 11:35 PM	#6 (permalink)
puckchaser He shoots.. He scores! Super #1 Joined in Feb 2007 Lives in A room with no windows. Hosted on SH110 1,419 posts Gave thanks: 42 Thanked 137 times	As long as it is an old screen cap.. we'll let it slide... :-) However, it is an excellent tutorial!! __________________ SH110

November 12th, 2007, 12:00 AM	#7 (permalink)
ceo ＼(^o^)／ Super #1 Joined in Jan 2005 Lives in Albany, NY Hosted on SH134 1,522 posts Gave thanks: 69 Thanked 33 times	what's wrong with ws_ftp?

November 12th, 2007, 12:02 AM	#8 (permalink)
Kayla Searcher Surpass Staff Joined in May 2003 Lives in Orlando 24,448 posts Gave thanks: 935 Thanked 783 times	It's covered in cob webs and laughs. __________________ Follow Surpass on Twitter and Facebook Check out interesting finds on the Surpass Blog .... it's coming.

November 12th, 2007, 4:52 AM	#9 (permalink)
Edwin Surpassing Dutch Super #1 Joined in Sep 2004 Lives in Arnhem, the Netherlands Hosted on SH98 2,371 posts Gave thanks: 172 Thanked 40 times	Thank you very much for the tutorial. Almost there. Now I'm going to take a look at why I don't get my blogs to show, but that is something I did wrong, somehow __________________ sh98

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread: