GUIDE: How to customize the default templates

[westis]

In the documentation, there are now guides about how templates and stylesheets are used in CMS Made Simple. You can for example read about how to customize the default templates and the stylesheets that are attached to them.

Start with the page I am a designer.

Please don't hesitate to comment on the texts, ask if you don't understand and suggest improvements to make it easier for anyone to understand how to use templates and stylesheets!

[pedrotuga]

Cooool!!!
This document was really really necessary... I have to say that i though it would be a bit easy to play with your cms ( i am a begginer ) well.. it was not that easy...
i recomend reading the documentation before installing CMS.

Good job!

Look forwarth for the documentation update

PS: i am starting to love wikis!

[r_jendra]

The documentation regarding default template customization is nice but incomplete yet. I'm begginer and read documentation " i'm beginer" step by step.. i learn lot of.....

I want to ask you one question for now. lots of later  .

how can we add test, image on the left sidebar i.e. below the bullet menu??

please, reply

[Snake]

Hi


Not Found

The requested URL /en:gettingstarted:designer was not found on this server.


new link?

[westis]

Hi


Not Found

The requested URL /en:gettingstarted:designer was not found on this server.


new link?

Hi Snake. Yeah, we've changed to another wiki. I've updated the link now, so it should link correctly. Thanks!

[kentfx]

A quick question -- I'm finding it a bit of a challenge to find things in the Help files.  For example, somewhere in them (I can't find where anymore) it talks about setting up the DOCTYPE statements, and the header and so on -- all the basic stuff you begin with. 

While the explanation is clear enough, it never did say where the files were located it was talking about, or what they were called.  I did a search and found that 91 files have the word "DOCTYPE" in them, so I guess you could be talking about any one of the files. 

Any hints as to which one I should be looking at?  I recall the instructions said it was for the "default" theme, and I found a file called defaultTheme.php, though it turns out that wasn't the one the instructions were talking about.

Peeking ahead, I notice that hardly any instructions actually identify the names of the files they're talking about.  Surely I'm missing something fundamental here...

[westis]

Hi kentfx,

The templates are stored in the database, not in files. Normally, the only file you may need to look at is config.php. The rest is usually doen throught the Admin Panel.

In the admin panel, go to Layout -> Templates and you will find all the templates. The ones that are there when you install CMS Made Simple are the default templates. Click on any of the template names and you find the code for the template, including the DOCTYPE that each template begins with.

Hope that helps.

[kentfx]

Thank you.  That got me on the right road.

[kentfx]

I wonder if anyone knows how one can edit the menu structure?  I had hoped to use the single column menu on the left of the main screen, but there is nothing obvious in the documentation as to how it can be edited.  I'd imagined the Admin Panel would let you edit the site, but apparently there's some other way of doing it.

There's a page in the docs called "Customizing the default templates" with something about Menus, but it breaks off without any instructions on actually making menus.

My long-term hope is to have my own list of categories in the vertical menu and then be able to call up pages from it.

Thanks for your help.

[Dr.CSS]

are you trying to change the look of the menu or the way it makes the
i've changed the way it handles
if that is what your looking for it's in  Layout » Menu Manager
you'll find 2 tabs second one is the default templates, to change them you need to goto the far left you see what looks like 2 papers on top of each other clik that and name the new menu and submit now you have a menu script you can change.
if you just want to style the menu that's in the CSS associated with the menu such as the bullet menu might have,,
Layout » Stylesheets » Edit Stylesheet: Nav-Vertical
CSS that will let you change the look of the menu

    mark

[kentfx]

I changed the max-width and min-width of the pagewrapper to 800px (in Layout > Stylesheets > Edit Stylesheet: Layout).  This worked fine in Firefox, but IE ignores the new pagewidth.

I noticed when I "VIEW SOURCE" from the home page, this is in the code --



#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}



This is obviously the reason that IE is ignoring the new pagewidth.  How does one change the #pagewrapper line so that IE also sees it?

Thanks for your help.

[cdstg]

Hi
Global Content Blocks
then JavaScript for IE page width
then edit the max and min eg 720,950

[Muzzy]

I changed the max-width and min-width of the pagewrapper to 800px (in Layout > Stylesheets > Edit Stylesheet: Layout).  This worked fine in Firefox, but IE ignores the new pagewidth.



#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}



This is obviously the reason that IE is ignoring the new pagewidth.

Hi Kentfx.
If you are wanting to just use a fixed width of 800px, then you can delete out all of the IE code. That's only included to make IE adjustable. For an idea check out my post here: http://forum.cmsmadesimple.org/index.ph ... 107.0.html
You will find that I have included my template and css for others to use, download them and take a look at the source code. This is a fixed width site, hope this helps.

Mike.

[dtism]

• Hi,
  I have just installed cmsms to build a site from scratch and I'm trying to modify the templates and stylesheets to suit my needs.
  
  On the wiki page http://wiki.cmsmadesimple.org/index.php ... tylesheets
  it refers to 'Stylesheets that are attached to all default templates'
  • Layout -- Here you set general layout settings, that are the same for all the default CMSMS templates. But for each project you work on this stylesheet needs to be customized.
  • Typography -- This is where you do all the styling for fonts, links, headings, images, lists etc.
  • Colours-- All the colors are gathered in this stylesheet. The only properties here are color, background and border-color. Don't add any other properties here or it may affect the layout of your entire site! However, for now the colors of menus are in the menu stylesheets.
  • Forms -- To more easily make forms to look the same across different browsers, the styling for forms is in its own stylesheet. You will not need to touch this very often.
  • Tools -- This is a stylesheet that needs to be attached to all templates for cross-browser behaviour. But you don't really need to touch it at all.
  
  I'm probably just being a bit slow, but I can only find these in the cms
  Accessibility and cross-browser tools     
  Handheld     
  Layout: Left sidebar + 1 column     
  Layout: Left sidebar + 1 column (copy)     
  Layout: Top menu + 2 columns     
  Module: News     
  Navigation: CSSMenu - Horizontal     
  Navigation: CSSMenu - Vertical     
  Navigation: Simple - Horizontal     
  Navigation: Simple - Vertical     
  Print
  
  Am I missing something? Where are the typography and colours stylesheets accessed?
  
  Thanks in advance,
  
  Doug.

[Dr.CSS]

You are not slow  ...

That is kind of out dated at this point, they were set up that way before...

Now the colors are in the Layout or the other ones pertaining to which thing they are for i.e. Module: News has all the colors for News...

Typography is mostly in the Layout: CSS but can be changed if you call out the thing you are trying to change, i.e. #header h1 {font-family:comic sans ms} or your choice...