+ Reply to Thread
Page 1 of 3 1 2 3 LastLast
Results 1 to 9 of 23

Bookmark and Share

  1. #1
    Senior Member Surpass Staff
    Points: 142,843, Level: 100
    Level completed: 0%, Points required for next Level: 0
    Overall activity: 100.0%
    Achievements:
    Three FriendsVeteranOverdriveCreated Album pictures50000 Experience Points
    Kayla's Avatar
    Member since
    May 2003
    Location
    Orlando
    posts
    25,678
    Points
    142,843
    Level
    100
    Thanks
    1,037
    Thanked 941 times

    Tutorial: Expression Engine : Customize Template

    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!

    Kayla Selans
    Surpass is simply the best.

  2. These users thank Kayla for this great post!

    Edwin (November 12th, 2007), pizzicar (November 12th, 2007), puckchaser (November 11th, 2007)

  3. #2
    Sur, pass the salt Excelling Contributor
    Points: 7,585, Level: 26
    Level completed: 6%, Points required for next Level: 565
    Overall activity: 0%
    Achievements:
    Veteran5000 Experience PointsTagger Second Class
    benjamin's Avatar
    Member since
    Sep 2005
    Location
    kayla's dvd-rw tray
    posts
    835
    Points
    7,585
    Level
    26
    Thanks
    49
    Thanked 54 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

  4. This user thanks benjamin for this great post!

    Kayla (November 11th, 2007)

  5. #3
    Senior Member Surpass Staff
    Points: 142,843, Level: 100
    Level completed: 0%, Points required for next Level: 0
    Overall activity: 100.0%
    Achievements:
    Three FriendsVeteranOverdriveCreated Album pictures50000 Experience Points
    Kayla's Avatar
    Member since
    May 2003
    Location
    Orlando
    posts
    25,678
    Points
    142,843
    Level
    100
    Thanks
    1,037
    Thanked 941 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*
    Kayla Selans
    Surpass is simply the best.

  6. #4
    He shoots.. He scores! Super #1
    Points: 7,879, Level: 26
    Level completed: 55%, Points required for next Level: 271
    Overall activity: 0%
    Achievements:
    Veteran5000 Experience Points
    puckchaser's Avatar
    Member since
    Feb 2007
    Location
    A room with no windows.
    posts
    1,488
    Points
    7,879
    Level
    26
    Thanks
    48
    Thanked 141 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

  7. This user thanks puckchaser for this great post!

    Kayla (November 11th, 2007)

  8. #5
    Senior Member Surpass Staff
    Points: 142,843, Level: 100
    Level completed: 0%, Points required for next Level: 0
    Overall activity: 100.0%
    Achievements:
    Three FriendsVeteranOverdriveCreated Album pictures50000 Experience Points
    Kayla's Avatar
    Member since
    May 2003
    Location
    Orlando
    posts
    25,678
    Points
    142,843
    Level
    100
    Thanks
    1,037
    Thanked 941 times
    I made those screenshots a while ago.. had to catch up my writing part to the images part.

    Kayla Selans
    Surpass is simply the best.

  9. #6
    He shoots.. He scores! Super #1
    Points: 7,879, Level: 26
    Level completed: 55%, Points required for next Level: 271
    Overall activity: 0%
    Achievements:
    Veteran5000 Experience Points
    puckchaser's Avatar
    Member since
    Feb 2007
    Location
    A room with no windows.
    posts
    1,488
    Points
    7,879
    Level
    26
    Thanks
    48
    Thanked 141 times
    As long as it is an old screen cap.. we'll let it slide... :-)

    However, it is an excellent tutorial!!
    SH110

  10. #7
    \ (^_^) / Super #1
    Points: 11,536, Level: 32
    Level completed: 41%, Points required for next Level: 414
    Overall activity: 99.4%
    Achievements:
    Friendy!Tagger Second ClassVeteran10000 Experience Points
    ceo's Avatar
    Member since
    Jan 2005
    posts
    1,600
    Points
    11,536
    Level
    32
    Thanks
    83
    Thanked 33 times
    what's wrong with ws_ftp?

  11. #8
    Senior Member Surpass Staff
    Points: 142,843, Level: 100
    Level completed: 0%, Points required for next Level: 0
    Overall activity: 100.0%
    Achievements:
    Three FriendsVeteranOverdriveCreated Album pictures50000 Experience Points
    Kayla's Avatar
    Member since
    May 2003
    Location
    Orlando
    posts
    25,678
    Points
    142,843
    Level
    100
    Thanks
    1,037
    Thanked 941 times
    It's covered in cob webs and laughs.
    Kayla Selans
    Surpass is simply the best.

  12. #9
    Surpassing Dutch Super #1
    Points: 19,660, Level: 42
    Level completed: 79%, Points required for next Level: 190
    Overall activity: 0%
    Achievements:
    Created Album picturesVeteranTagger Second Class10000 Experience Points5000 Experience Points
    Edwin's Avatar
    Member since
    Sep 2004
    Location
    a home
    posts
    3,142
    Points
    19,660
    Level
    42
    Thanks
    252
    Thanked 66 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
    sh150

Thread Information

Users Browsing this Thread

There are currently 9 users browsing this thread. (0 members and 9 guests)

     

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts