Template and Menu structure in EE

#1 / Nov 20, 2010 1:18pm

Renegades

33 posts

Hello again

Maybe it’s really just me but I try to get one of my pages into the EE CMS on my local machine setup and - I am lost

What I wanted to achieve is setup a basic template that includes Header / Footer and also the login panel (those part, however are not hard-coded in the template but rather kinda chunks created separately (since they may vary from one template to another template) The rest of the page are all separate chunks as well which I add to the template as needed. - - - In other words, the template itself is pretty much empty and build on call depending on what I wanted to have on it.

I also tried to figure out on how to connect the menu links (navigation) but I can’t find any reference that would help me further.

This is a sample page which I tried to work into EE.

Also, I have no idea on how to structure and where to place the information in between the <head> what goes in here and how </head> tags. Below is a typical page head of my pages but how is this part put together in EE and how are the link paths to CSS / JS files?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta name="robots" content="noindex, nofollow">
<html >
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>China Business Registration: Outsourcing | Company Formation Service</title>
  <meta name="description" content="" />
  <meta name="keywords" content="En" />
  <meta name="robots" content="ALL" />
  <meta name="rating" content="general" />
  <meta name="distribution" content="global" />
  <meta name="object type" content="China Business Development index Page" />
  <meta name="owner" content="IFE Group Limited" />
  <meta http-equiv="cache-control" content="cache" />
  <meta http-equiv="expires" content="0" />
  <meta name="author" content="Norbert Harms - <a href="http://www.chinabiz21.com">http://www.chinabiz21.com"</a> />
  <meta name="generator" content="Norbert Harms" />
  <meta http-equiv="imagetoolbar" content="no" />
  <meta http-equiv="view-source" content="no" />
  <link rel="Shortcut Icon" href="/cb21.ico" />
<!-- _________________________________ COMMON CSS  __________________________________ -->
<link rel="stylesheet" href="css/pg_globals2.css" type="text/css">
<link rel="stylesheet" href="css/pg_navigation.css" type="text/css" />
<link rel="stylesheet" href="css/biz_style2.css" type="text/css" />

<!-- _______________________________ LOGIN PANEL CSS ________________________________ -->
<link rel="stylesheet" type="text/css" href="css/login_panel/login_panel.css" media="screen" />

<!-- _________________________________ NEWSFEED CSS _________________________________ -->
<link rel="stylesheet" type="text/css "href="css/newsfeed/newsfeed.css" media="screen" />

<!-- _________________________________ FEEDBACK CSS _________________________________ -->
<link rel="stylesheet" type="text/css" href="css/forms/feedback_slidein.css" media="all">

<!-- ******************************* VALIDATE FILES ********************************* -->
<link rel="stylesheet" href="css/forms/validate.commons.css" type="text/css" />
[removed][removed] 

<!--[if IE 6]><link rel="stylesheet" href="css/ie_css/fix_ie_css_cb21.css" type="text/css" media="screen" /><![endif]--> 

<!--[if lt IE 7]>
[removed][removed]
<![endif]-->
</head>

Help - please - to kick me off :down:

#2 / Nov 21, 2010 2:38pm

Greg Salt
3988 posts

Hi Renegades,

Have you seen the Getting Started tutorial in our documentation? I encourage you to start off small with a simple template following along with some of the concepts outlined in that tutorial. Stylesheets can be linked directly from the server in exactly the same way that you would do it with a static website or you can use a template. The documentation has a couple of examples and some background information about this.

Cheers

Greg
#3 / Nov 21, 2010 3:04pm

Renegades
33 posts

Hi Greg

Thanks for your reply.
I read all that and - sorry - it’s a bit over my head. I claim to surely being quite fluent with (X)HTML and CSS but being a PHP programmer NOVICE - I’m a bit lost in translation! :down:

Though, I have not found anything in the document referring to how to create a proper <head></head> entry, containing all the important tags, etc. and how to slice a common HTML page into a;
* template
* channels
* variables ... etc. ( a sample would be really helpful to me since I am a “visual” learner)

I’ll try to read through it again and hopefully it makes more sense to me this time.
Cheers
#4 / Nov 21, 2010 3:36pm

Renegades
33 posts

Sorry Greg ...
am I the only stupid here?
Link doesn’t do anything to me. I’d have at least a dozen questions to documentation.

Just for example - it mentions “template group” but then uses “channel” [ {stylesheet=channel/channel_css} ] where is the channel coming from all of a sudden? As said, this is just one confusing point.

I apologize but, a “real world” sample would be certainly helpful for me to understand the logic. 😉

Thanks again!

BTW: What about javascript files in the <head></head> tag? ... like [(script type=“text/...script” src=“js/folder/file.js”></script)] (the tag was altered to indicate)
#5 / Nov 22, 2010 1:00am
John Henry Donovan
12339 posts
Renegades,

Below is a typical page head of my pages but how is this part put together in EE and how are the link paths to CSS / JS files?

You don’t need to have your JS and CSS inside EE. It is not fundamental that you have them in there. IF you were going to themn I would do this.

Make a new template group called _styles. I use an underscore becuse its and easy one to spot if I have a lot of template groups.
Inside of this template group make a template with its type set to CSS called pg_globals2
Do not add the file ending .css
Now copy in your css into the template from your already existing css.

Now to link to this in the header you would do this
```
<link rel="stylesheet" type="text/css" media="all" href="{stylesheet=_styles/pg_globals2}" />
```
You would do this for all your CC templates. Likewise for the JS although you would change the template type to JavaScript

When you installed EE2 for the first time you might recall you had a choice of installing with the Agile theme? If you set-up a second install of EE and choose this option it will pre-fill an EE install for you and show you some great methods of how a site is setup

Other learning resources are http://train-ee.com/ and http://eequickstartguide.com/

Does that help?
#6 / Nov 22, 2010 11:04am

Renegades
33 posts

Hi John ...
Thanks again!

“Does that help?” ... Kinda 😉
You don’t need to have your JS and CSS inside EE. It is not fundamental that you have them in there.

If I understand you correct, Greg, then - if I have EE installed in my root folder on my server, I could just upload my /css/ and /js/ folders - outside EE - and to the same location as if they would be if I had a hard-coded (static) HTML website uploaded.

All the head stuff in between the <head> </head> tags, I then just leave it as it is,
• title tag,
• meta tags,
• links to css files
• links to javascript files … etc.,

all stays as it is on my static pages? Really? But that would mean then that I need to set up a template for each page I have and will create in the future …! What is the benefits of the CMS then?

How does this work with “pages” - for example? ALl the SEO stuff like html headers, etc… now I am really confused, sorry … 🙄
When you installed EE2 for the first time you might recall you had a choice of installing with the Agile theme?

I know but I didn’t think I’d need it ... bah :cheese: Now that I have MSM nicely set up and also the Forum (almost) complete, can I just add the “Agile Theme” to my second site nominated under the MSM? How to go about it without having to uninstall and install everything again?

Thanks a lot for your patience on my ignorance!
#7 / Nov 22, 2010 3:34pm

Ingmar
29245 posts

If I understand you correct, Greg, then - if I have EE installed in my root folder on my server, I could just upload my /css/ and /js/ folders - outside EE - and to the same location as if they would be if I had a hard-coded (static) HTML website uploaded.

Exactly. Just make sure there’s no conflict with rewriting (if you do remove index.php from your URL)

all stays as it is on my static pages?

That is one option, yes.

But that would mean then that I need to set up a template for each page I have and will create in the future …! What is the benefits of the CMS then?

What? No, why? You’ll add this once to your main template which you can then use for much of your site. Or you could use a snippet in multiple templates: if you ever change that snippet it will change in all of your templates as well.
#8 / Nov 22, 2010 4:11pm

Renegades
33 posts

Hi Ingmar

Thanks again!

makes all sense what you say, but my brain is a little slow on working this through to get it all together 😉 Also on how to make use of weblog and/or pages to add nice title tags, etc ... still far away from grasping it. Could you point me there to some possible hands-on tutorials? (I learn much faster by going through examples rather than reading a document :red:

Thanks
#9 / Nov 22, 2010 5:27pm

Ingmar
29245 posts

I think the most important thing here is to understand EE’s URL structure. To that end I strongly recommend to read up on the importance of semantics. Slightly dated but still highly relevant.

Thread

Renegades

Greg Salt

Renegades

Renegades

John Henry Donovan

Renegades

Ingmar

Renegades

Ingmar

Username

Password

Thread