Jump to content


Photo

Need Pointing In The Right Direction Please


  • Please log in to reply
24 replies to this topic

#1 DaveM

DaveM

    Etomite Forum Newbie

  • Member
  • 13 posts

Posted 30 December 2007 - 04:07 PM

Hi,

Sorry to bother you again, but I've been going round in circles trying to find out how to load templates.

I have read the documentation, but that doesnt tell me how to load them, or if it does, I can't see it. :huh:

The problem I have, is that I downloaded a couple of templates from here, unzipped them, uploaded them via FTP to my server, and put them in the templates folder.

In the "tree", they aren't visible and I'm not sure why.

Is there a certain way of uploading the templates to the server, or have I done it completely wrong?

If someone could point me in the right direction, that would be fantastic, thank you :)

Dave.

#2 Jelmer

Jelmer

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,173 posts

Posted 30 December 2007 - 04:14 PM

See the documentation. Save them as a template via Manage Resources --> Templates

#3 Ralph

Ralph

    Loves Etomite Forums!

  • Admin
  • 6,539 posts

Posted 30 December 2007 - 04:15 PM

The /templates/ directory is merely a file system level repository for those resources... If you were to look in an existing template folder you would see that it is broken up into resource components... The template code itself needs ot be copied into a new template record within the Etomite manager... Any snippets or chunks also need to be copied over into the manager before they will be available.. The only real exception to this is the CSS and images which can be pointed to from within your template, documents, snippets, or chunks using relative paths...

#4 mikef

mikef

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,551 posts

Posted 30 December 2007 - 04:18 PM

its a common misunderstanding - see http://docs.etomite....-templates.html towards the bottom - publishing templates

#5 DaveM

DaveM

    Etomite Forum Newbie

  • Member
  • 13 posts

Posted 30 December 2007 - 04:47 PM

The /templates/ directory is merely a file system level repository for those resources... If you were to look in an existing template folder you would see that it is broken up into resource components... The template code itself needs ot be copied into a new template record within the Etomite manager... Any snippets or chunks also need to be copied over into the manager before they will be available.. The only real exception to this is the CSS and images which can be pointed to from within your template, documents, snippets, or chunks using relative paths...



Thanks for the replies :)

I'm still not quite grasping this (sorry :))

The templates that I downloaded from here, I have uploaded them to my server via ftp, to the templates folder - I've done this bit correctly right?

So, now, in the manager, there is no reference to these new templates anywhere. This is as far as I got.

I read you above post, and went to the resouces bit, copied the template info from the style.css file for the JustGrey template and pasted it into a new template in the resources bit, gave it a title, and a description and then saved it.

I then went to the only document that I have, and saved it with the JustGrey template, tried to preview it and get this in the preview window;

body { margin: 0; padding: 0; line-height: 2em; font : 80% "Trebuchet MS",  "lucida sans", Arial, Helvetica, Tahoma, sans-serif; color: #000; background:  #bbb; } /*TITLE BAR*/ #top { height: 50px; background: #677278; margin-top: 0; }  /*BANNER*/ #header { height: 150px; background: #666 url(images/img.jpg)  no-repeat; margin:0; border-bottom : 3px solid #eee; } /* TOP MENU */ /*  Commented Backslash Hack hides rule from IE5-Mac \*/ #nav_main { width:100%;  height: 40px; background: #677278; font-size:93%; line-height:normal;  border-bottom: 3px solid #eee; } #nav_main ul { margin:0; padding: 13px 0 0 0;  list-style:none; } #nav_main li { float:left; display: inline; background:  url(images/tableft6.gif) no-repeat top left; /* margin-right: 2px; nur einfügen  bei ECKIGEN Ecken */ padding: 0 0 0 4px; margin: 0; border-bottom:1px solid  #000; } #nav_main a { float:left; display:block; background:  url(images/tabright6.gif) no-repeat top right; padding:5px 11px 3px 8px;  text-decoration:none; font-weight:normal; color: #FFF } /* Commented Backslash  Hack hides rule from IE5-Mac \*/ #nav_main a {float:none;} /* End IE5-Mac hack  */ #nav_main a:hover { background-position:100% -42px; } #nav_main li:hover {  background-position:0% -42px; } #nav_main #current { background-image: url(" ");  background-color: transparent; border-bottom:0px solid #eee; } #nav_main  #current a { color:#334; background-image: url(" "); font-weight:bold;  padding-bottom:4px; padding-top:5px; } /*3 COLUMNS*/ #gutter { clear:both;  float: left; width: 3%; height: 1px; } #col1 { float: left; width: 20%;  background: #bbb; margin-bottom: 10px; } #col2 { float: left; width: 48%;  margin-left: 3%; background: #bbb url(images/main_bg.jpg) center no-repeat;  margin-bottom: 10px; } #col3 { float: left; width: 20%; margin-left: 3%;  background-color: #bbb; margin-bottom: 10px; } /*BOTTOM*/ #bottom { border-top:  3px solid #eee; height:200px; clear:both; color: #000; background: #677278; }  #bottom a { color : #eee; background : transparent; text-decoration : none; }  #bottom a:hover { color : #484452; text-decoration : none; } /*LIST*/  .list3,.list3center { float: left; width: 28%; margin-left : 10px; }  .list3center { margin: 0 6%; } /*FOOTER*/ #footer { border-top: 1px solid #bbb;  clear: both; padding:5px; background: #666; color:#eee; } #footer a {  background: inherit; color: #D5D9B4; } #footer a:hover { background: inherit;  color: #333; } /*TYPOGRAPHY*/ h1 { margin: 0; padding : 10px 0 0 30px; font-size  : 200%; letter-spacing: 5px; color : #333; background : inherit; } h2 {  margin-top: 10px; font-size : 150%; letter-spacing: 3px; color : #666972;  background :transparent; } h3 { margin : 10px 0 0 20px; font-size : 160%;  letter-spacing: 5px; text-transform: uppercase; color : #484452; background :  inherit; } p { margin-left: 7px; margin-right: 7px; } blockquote { font-weight :  bold; font-style : italic; color : #677278; } /*LINKS*/ a:link { color :  #677278; background : transparent; text-decoration : none; } a:visited { color :  #677278; background : transparent; text-decoration : none; } a:hover { color :  #484452; text-decoration : none; } li { list-style-image: url(images/arrow.gif);  padding-left: 3px; } a img { border : 0; } /*CLASS*/ .clear { clear: left;  overflow: hidden; width: 0; height: 0; } Powered by [url="../"]Etomite CMS[/url].

This seems an awfully long winded way of previewing a template, isn't there a quicker/easier way?

Thanks :)

#6 mikef

mikef

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,551 posts

Posted 30 December 2007 - 05:53 PM

re-read the documentation on templates. the CSS file is NOT the template.

#7 DaveM

DaveM

    Etomite Forum Newbie

  • Member
  • 13 posts

Posted 30 December 2007 - 06:34 PM

re-read the documentation on templates. the CSS file is NOT the template.


Do you mean this part that you linked to earlier?



"Publishing Your Templates
After adding the needed elements to your template should be ready to test it so fire up your Etomite manager.

  • Click “manage resources”. - Done this.
  • Now click “new template”. - Done this
  • Give your new template a name, and a brief description. - Done this
  • Copy and paste the new template from your text editor into the textarea. This bit I'm stuck on - this is if you have made the template yourself I'm guessing? - I have a pre made template downloaded from here.
  • Click “save”.
To be able to view your new template we must now assign a document to use the template. Just to test the template, let's create a new document.

  • Click “new document”.
  • Name your document.
  • Set the document options as you see fit.
  • Write something in the content of the document.
  • Assign the document to use the new template.
  • Click “save”.
If everything went ok, you should now see your new template with whatever you just wrote in the document displayed in the content preview area. There's your new template!" - This doesnt work for me, the template is not visible anywhere, so I am unable to choose it.


I have a pre-made template that I downloaded from here called JustGrey.

The JustGrey template is NOT showing in the "manage resources" bit or anywhere else.


I really am lost here, so if anyone would be kind enough to help me, I would really appreciate it. :)

#8 mikef

mikef

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,551 posts

Posted 30 December 2007 - 07:59 PM

Do you mean this part that you linked to earlier?

no, read the whole section again. I just pointed to that section as you'd said initially you'd read the documentation. Since you loaded the CSS file as template, its clear you haven't really understood whats going on.

"Publishing Your Templates
After adding the needed elements to your template should be ready to test it so fire up your Etomite manager.

  • Click “manage resources”. - Done this.
  • Now click “new template”. - Done this
  • Give your new template a name, and a brief description. - Done this
  • Copy and paste the new template from your text editor into the textarea. This bit I'm stuck on - this is if you have made the template yourself I'm guessing? - I have a pre made template downloaded from here.

A premade template just contains the text that you need to put into the template, plus any resources, such as the CS file, that may be needed. You need to open the template file witha TEXT editor (in the case of the greys template its the file index.html). If you are using Windows, Notepad is fine for this job, Word most definitely is not! Copy and paste the text into the textarea.

  • Click “save”.
  • To be able to view your new template we must now assign a document to use the template. Just to test the template, let's create a new document.

    • Click “new document”.
    • Name your document.
    • Set the document options as you see fit.
    • Write something in the content of the document.
    • Assign the document to use the new template.
    • Click “save”.
    If everything went ok, you should now see your new template with whatever you just wrote in the document displayed in the content preview area. There's your new template!" - This doesnt work for me, the template is not visible anywhere, so I am unable to choose it.


    I have a pre-made template that I downloaded from here called JustGrey.

    The JustGrey template is NOT showing in the "manage resources" bit or anywhere else.


    I really am lost here, so if anyone would be kind enough to help me, I would really appreciate it. :)

    You should now have template to installed to use. You may need to change the path to the CSS file, depending on where you put it.

    #9 DaveM

    DaveM

      Etomite Forum Newbie

    • Member
    • 13 posts

    Posted 30 December 2007 - 10:13 PM

    no, read the whole section again. I just pointed to that section as you'd said initially you'd read the documentation. Since you loaded the CSS file as template, its clear you haven't really understood whats going on.

    A premade template just contains the text that you need to put into the template, plus any resources, such as the CS file, that may be needed. You need to open the template file witha TEXT editor (in the case of the greys template its the file index.html). If you are using Windows, Notepad is fine for this job, Word most definitely is not! Copy and paste the text into the textarea.

    You should now have template to installed to use. You may need to change the path to the CSS file, depending on where you put it.


    Thanks Mike, That did the trick.

    The thing that threw me is that the justgrey template doesnt have file named "template".

    Thanks :)

    P.S. One last thing. One of the new templates just looks like plain text and links. Is that the CSS path that you mentioned? Is it just a case of editing the css file? - fixed this, the template came in a sub folder within a sub folder, and I had uploaded them all.

    Edited by DaveM, 31 December 2007 - 03:12 AM.


    #10 cathode

    cathode

      Loves Etomite Forums!

    • Staff
    • 663 posts

    Posted 31 December 2007 - 04:30 PM

    Just fix the path to the css file at the top of the template... it may not be right by default.

    #11 DaveM

    DaveM

      Etomite Forum Newbie

    • Member
    • 13 posts

    Posted 31 December 2007 - 08:32 PM

    Just fix the path to the css file at the top of the template... it may not be right by default.


    Thanks :)


    I have been looking at the various free templates, and I can't find anything that looks like I want it to do.

    I have been looking at paid for templates and found 4templates.com - theres a couple there that I fancy, but there's no mention of them working with etomite. Does anyone know if these will work, or if they will need a lot of modification?

    This kind of thing - not particularly this one, but something along these lines.

    thanks for the help so far,

    Happy New Year :)

    #12 Cris D.

    Cris D.

      Loves Etomite Forums!

    • Developers
    • PipPipPipPip
    • 1,104 posts

    Posted 31 December 2007 - 10:23 PM

    One of the main benefits of Etomite is the fact that you can make your site look like ANY template.

    Althought there is not a step by step guide to adapting templates for Etomite, you might find this thread helpful... It takes you through the basic steps. All you need to know is a little css and html to do most templates.

    #13 DaveM

    DaveM

      Etomite Forum Newbie

    • Member
    • 13 posts

    Posted 01 January 2008 - 08:29 PM

    One of the main benefits of Etomite is the fact that you can make your site look like ANY template.

    Althought there is not a step by step guide to adapting templates for Etomite, you might find this thread helpful... It takes you through the basic steps. All you need to know is a little css and html to do most templates.


    Thanks Cris,

    I was reading this post in the thread you linked to, but I am struggling to understand a few things.

    The template that I want to use has got several folders and files.

    We have the main folder, which contains;

    HTML FOLDER - default.css, homepage.html, subpage1.html, subpage2.html and an Images folder.
    PSD FOLDER - with all the photoshop stuff inside.
    XHTMLCSS - default.css, layout.css, homepage.html, subpage1.html, subpage2.html and an images folder.

    I'm not sure which of the files I should be editing, or what exactly I should edit, once I know which files to edit.

    Thanks :)

    #14 Dean

    Dean

      Loves Etomite Forums!

    • Admin
    • 4,786 posts

    Posted 01 January 2008 - 10:11 PM

    I'd say learn how the ones that are already done work first ;)

    #15 Cris D.

    Cris D.

      Loves Etomite Forums!

    • Developers
    • PipPipPipPip
    • 1,104 posts

    Posted 01 January 2008 - 10:44 PM

    I agree with Dean, however I also know the extra motivation a personally significant challenge can provide... Definately having a look at existing templates will give you a good idea, but in essesnce:
    You can do a "viewsource" of any page on the web, copy and paste it into the template library in Etomite and it will be available to use (except you will probably be breaking a range of copyright laws) but the idea is there. However you will notice a few things when you apply it to a page and view it...
    1) It won't look the same (that's because you need to point the css file to the correct place where ever it is).
    2) The pictures won't show up (that's because you need to point to them correctly: select and
    save-as the pictures and save to your server).
    3) Your navigation will be hard-coded and you will need to re-code this every time you make a structural change to the folders (or use a snippet as suggested above that makes these changes automatically).
    4) The content in your etomite page does not show up (that is because the individual's page content is called into the template by typing [*content*] where you want it to show.

    Each of these steps start to take advantage of the power of Etomite... Try this activity to help to see how it all works (don't just read it, you will learn more by actually DOING it!):

    1) Put this code in your manager- template library

    <html>
    <head>
    <title>My first etomite page</title>
    </head>
    <body>
    This is my first etomite test template.
    </body>
    </html>

    call it something like "my_template"

    2) Apply the "my_template" template to any existing page (edit/publishing/users template) and view it...pretty boring hey.

    3) Now put in some snippets that do Etomite stuff like

    <html>
    <head>
    <title>My first etomite page</title>
    </head>
    <body>
    This is my first etomite test template.
    [[ListMenu]]
    [*content*]
    </body>
    </html>

    You should now see navigation and page content. B)

    Once you know how to put Etomite stuff INTO a page, you will then know what to take OUT of an existing non-etomite template and how to REPLACE it with dynamic content using snippets and chunks.

    #16 DaveM

    DaveM

      Etomite Forum Newbie

    • Member
    • 13 posts

    Posted 02 January 2008 - 12:09 AM

    I'd say learn how the ones that are already done work first ;)


    Absolutely, looking at andreas09 and one thing clicked into place (I think - see below).

    I agree with Dean, however I also know the extra motivation a personally significant challenge can provide... Definately having a look at existing templates will give you a good idea, but in essesnce:
    You can do a "viewsource" of any page on the web, copy and paste it into the template library in Etomite and it will be available to use (except you will probably be breaking a range of copyright laws) but the idea is there. However you will notice a few things when you apply it to a page and view it...
    1) It won't look the same (that's because you need to point the css file to the correct place where ever it is).
    2) The pictures won't show up (that's because you need to point to them correctly: select and
    save-as the pictures and save to your server).
    3) Your navigation will be hard-coded and you will need to re-code this every time you make a structural change to the folders (or use a snippet as suggested above that makes these changes automatically).
    4) The content in your etomite page does not show up (that is because the individual's page content is called into the template by typing [*content*] where you want it to show.

    Each of these steps start to take advantage of the power of Etomite... Try this activity to help to see how it all works (don't just read it, you will learn more by actually DOING it!):

    1) Put this code in your manager- template library

    <html>
     <head>
     <title>My first etomite page</title>
     </head>
     <body>
     This is my first etomite test template.
     </body>
     </html>

    call it something like "my_template"

    2) Apply the "my_template" template to any existing page (edit/publishing/users template) and view it...pretty boring hey.

    3) Now put in some snippets that do Etomite stuff like

    <html>
     <head>
     <title>My first etomite page</title>
     </head>
     <body>
     This is my first etomite test template.
     [[ListMenu]]
     [*content*]
     </body>
     </html>

    You should now see navigation and page content. B)

    Once you know how to put Etomite stuff INTO a page, you will then know what to take OUT of an existing non-etomite template and how to REPLACE it with dynamic content using snippets and chunks.


    Thanks for all that. I roughly understand how this works, it's just a case of it falling into place, I suspect that I'm 80% there :)

    You are right about it being a personal challenge, more of a mountain climb :)

    Just so I know i'm going in the right direction, is this ok?

    Beginning of the homepage.html template in the html folder looks like this;

    <!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">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="default.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    	@import url("layout.css");
    -->


    Am i right in thinking I should be stripping this bit;

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <title></title>
     <meta name="keywords" content="" />
     <meta name="description" content="" />

    And replacing it with

    [!MetaTagsExstra!]

    OK so far? :)

    thanks.

    #17 DaveM

    DaveM

      Etomite Forum Newbie

    • Member
    • 13 posts

    Posted 02 January 2008 - 03:02 AM

    I'm getting the hang of this now.

    The metatags bit appears to have worked, but I'm stuck on the next bit, which is the Content.

    I got the content working, but one of the pages in the template is like this and it's the one in the first picture that I'm trying to do, so I wasn't sure how to get several different sets of content to work.

    Getting there, but slowly :)

    Edited by DaveM, 02 January 2008 - 03:18 AM.


    #18 Dean

    Dean

      Loves Etomite Forums!

    • Admin
    • 4,786 posts

    Posted 02 January 2008 - 11:21 AM

    The Content bit is like this - remove the garbage <p>Text Here</p> and change it with [*content*]

    #19 DaveM

    DaveM

      Etomite Forum Newbie

    • Member
    • 13 posts

    Posted 02 January 2008 - 03:16 PM

    Thanks Dean :)

    I have hit a strange problem with one of my templates.

    If I view the template locally in firefox or ie, direct from the folder, it looks correct, like this;

    http://i256.photobuc...ve-m1/local.png

    But as soon as I load it into etomite, it loses its shape. This is before I have done anythinge to it, and is regardless of me setting the css and image paths;

    http://i256.photobuc.../in-etomite.png

    Thats the third of three templates and the other two dont do it, and this is the least complicated of the three.

    Any ideas what could be causing it?

    Thanks :)

    #20 Dean

    Dean

      Loves Etomite Forums!

    • Admin
    • 4,786 posts

    Posted 02 January 2008 - 05:03 PM

    I think it's the patch to the CSS that's incorrect.




    0 user(s) are reading this topic

    0 members, 0 guests, 0 anonymous users