My first e107 theme. Need help!

e107 CMS » Forums » e107 v1.x Support » Third Party Code / Theme Support

<< Previous thread | Next thread >>

Jonas Karlsson

Jun 05 2012, 10:34AM

Registered Member #46819

Joined: Aug 15 2008, 10:51AM

Location: Sweden

Posts: 71

All right. I am completely new to creating themes for e107 and i need some help if it's okay?

I've just learned to code HTML and CSS but can not write PHP. I asked a month ago what I need to learn to create e107 themes. I got the response HTML and CSS. Here is the post I got the answer: Here

So I've learned HTML and CSS and I think I'm ready to learn to create themes for e107.

First: I have hand coded the HTML and CSS code now with my images and so on. Now I wonder if I should change my .html file to .php format instead?

Second: If i have this layout example:

// [layout]
    $layout = "_default";

    $HEADER = "
<table>
    <tr>
        <td colspan='2'>
            <h1>{SITENAME}</h1>
            <h2>{SITETAG}</h2>
        </td>
    </tr>
    <tr>
        <td colspan='2'>
            {SITELINKS}
        </td>
    </tr>
    <tr>
        <td>
             {MENU=1}
        </td>
        <td>";

 // Main Content is placed here between the header and footer.

    $FOOTER = "
        </td>
    </tr>
    <tr>
        <td colspan='2'>
            {SITEDISCLAIMER}
        </td>
    </tr>
</table>";

where do I put my html code?:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[]>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Test Theme</title>



    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />

   <style type="text/css">
.art-post .layout-item-0 { border-top-width:2px;border-top-style:solid;border-top-color:#B7A59A;margin-top: 10px;margin-bottom: 10px; }
.art-post .layout-item-1 { padding-right: 10px;padding-left: 10px; }
   </style>

</head>
<body>
<div id="art-page-background-glare-wrapper">
    <div id="art-page-background-glare"></div>
</div>
<div id="art-main">
    <div class="cleared reset-box"></div>
    <div class="art-header">
        <div class="art-header-position">
            <div class="art-header-wrapper">
                <div class="cleared reset-box"></div>
                <div class="art-header-inner">
                <div class="art-headerobject"></div>
                <div class="art-logo">
                                                </div>
                </div>
            </div>
        </div>
        
    </div>
    <div class="cleared reset-box"></div>
<div class="art-bar art-nav">
<div class="art-nav-outer">
<div class="art-nav-wrapper">
<div class="art-nav-inner">
	<ul class="art-hmenu">
		<li>
		</li>	
	</ul>
</div>
</div>
</div>
</div>
<div class="cleared reset-box"></div>
<div class="art-box art-sheet">
        <div class="art-box-body art-sheet-body">
            <div class="art-layout-wrapper">
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-content">
<div class="art-box art-post">
    <div class="art-box-body art-post-body">
<div class="art-post-inner art-article">
                                <div class="art-postcontent">
<div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-1" style="width: 100%;">
        <h3><span style="color: rgb(48, 46, 34); font-size: 13px; font-weight: normal;"><span style="color: rgb(104, 86, 74); font-size: 26px; font-weight: bold;"><br /></span></span></h3>
    </div>
    </div>
</div>
<div class="art-content-layout-br layout-item-0">
</div><div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-1" style="width: 33%;">
        <h3><br /></h3>
    </div><div class="art-layout-cell layout-item-1" style="width: 34%;">
        <h3><br /></h3>
    </div><div class="art-layout-cell layout-item-1" style="width: 33%;">
        <h3><br /></h3>
    </div>
    </div>
</div>
<div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-1" style="width: 33%;">
        <p><span style="font-weight: bold;"><br /></span></p>
        
        <p></p>
    </div><div class="art-layout-cell layout-item-1" style="width: 34%;">
        <p><span style="font-weight: bold;"><br /></span></p>
    </div><div class="art-layout-cell layout-item-1" style="width: 33%;">
        <p><span style="font-weight: bold;"><br /></span></p>
    </div>
    </div>
</div>

                </div>
                <div class="cleared"></div>
                </div>

		<div class="cleared"></div>
    </div>
</div>

                          <div class="cleared"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cleared"></div>
            
    		<div class="cleared"></div>
        </div>
    </div>
    <div class="art-footer">
        <div class="art-footer-body">
            <div class="art-footer-center">
                <div class="art-footer-wrapper">
                    <div class="art-footer-text">
                        <a href="#" class="art-rss-tag-icon" title="RSS"></a>
                        <p><br /></p>
                        <div class="cleared"></div>
                        <p class="art-page-footer">Designed by Jonas Karlsson.</p>
                    </div>
                </div>
            </div>
            <div class="cleared"></div>
        </div>
    </div>
    <div class="cleared"></div>
</div>

</body>
</html>

Sorry that code falls outside the frame.

Thanks in advance!

Go to top

Moc

Jun 05 2012, 11:18AM

Registered Member #44563

Joined: Apr 12 2008, 03:01AM

Location: The Netherlands

Posts: 3511

Great to see your progress! Well done so far.
This link [-link-] will help you with creating the e107 theme

Let us know if you have any specific questions.

[ Edited Jun 05 2012, 11:19AM ]

Go to top

Jonas Karlsson

Jun 05 2012, 01:36PM

Registered Member #46819

Joined: Aug 15 2008, 10:51AM

Location: Sweden

Posts: 71

Thanks Moc!

Yeah im stock with where i should put the HTML code in the .php file?

Go to top

Moc

Jun 05 2012, 01:43PM

Registered Member #44563

Joined: Apr 12 2008, 03:01AM

Location: The Netherlands

Posts: 3511

The wiki link I provided explains it all. There is one theme.php file in which you include several pieces of code, as instructed per wiki, to render the theme.

Quick tip: the HTML starts where $HEADER is defined

Go to top

Tgtje

Jun 06 2012, 04:19AM

Registered Member #30653

Joined: Sep 18 2006, 01:25AM

Location: Born, The Netherlands

Posts: 1989

Be carefull. You are using tables and divs.

An interesting article (just in time i hope to save you extra work) [-link-]

Think it over..

Follow Moc's advice at least, and split your body in 2 (header and footer part) as it is prebuild as 1.

Always take a look at a core build theme php next to your modell, it works, and you see how things are done.
(peeking is allowed)

Go to top

Jonas Karlsson

Jul 24 2012, 07:18AM

Registered Member #46819

Joined: Aug 15 2008, 10:51AM

Location: Sweden

Posts: 71

Thanks mate! I have skipped the e107 for now and focuses more on learning HTML and CSS fully. But I will come back when I sure need more help from you guys. hahaha

Go to top

Tgtje

Jul 24 2012, 08:12AM

Registered Member #30653

Joined: Sep 18 2006, 01:25AM

Location: Born, The Netherlands

Posts: 1989

Why not keep updated ?
keep a install (with xampp f.e.) on your pc and design
and test behind your desk ?

Go to top

septor

Jul 24 2012, 09:24AM

Registered Member #37

Joined: Aug 11 2002, 03:20AM

Location: United States

Posts: 2649

J.K wrote ...

Thanks mate! I have skipped the e107 for now and focuses more on learning HTML and CSS fully. But I will come back when I sure need more help from you guys. hahaha

I've been using HTML, CSS, and e107 for a number of years. I still learn new things related to HTML and CSS every single time I sit down to code a little bit. I know most of what I know regarding HTML, CSS, and PHP, just by messing with things related to e107.

While I'm not trying to talk you out of setting e107 aside to learn more HTML and CSS at all, you should remember that there is always something more to learn. Especially with how the Internet is growing and changing on a daily basis. What worked well and was the "standard" years ago is outdated and frowned upon now. I'm sure a great deal of what we're using right now will be the same dinosaur technology in a few years.

My overall point is, I guess, why not dive in head first with your initial plan? The theme engine for e107 is extremely easy to use and you can adapt pretty much HTML template into a theme in just a few easy steps. Plus, there are many of us here that will help you along the way if you have any questions or issues crop up.

Just, for the sake of everyone involved, make sure that your questions are semi-detailed so we can pin-point the problem better. The best possible thing to do is show us what isn't working instead of just a blanket "this code doesn't work".

Hopefully, for everyone's sake, some of your questions and issues are tough to tackle. This way we all learn a little bit.

edit: As for your question a few posts up: generally a theme will consist of everything in between the body tags of an HTML file.

[ Edited Jul 24 2012, 09:29AM ]

Go to top

Moc

Jul 24 2012, 11:08AM

Registered Member #44563

Joined: Apr 12 2008, 03:01AM

Location: The Netherlands

Posts: 3511

septor wrote ...

J.K wrote ...

Thanks mate! I have skipped the e107 for now and focuses more on learning HTML and CSS fully. But I will come back when I sure need more help from you guys. hahaha

Hopefully, for everyone's sake, some of your questions and issues are tough to tackle. This way we all learn a little bit.

Yep for sure. I've learned a great deal ever since I became active in giving support to other e107 users. There is always more to learn, and that will never stop

Go to top