How to customize the template?

[fiveflat]

I don't know how to customize the template.  What should I use to easily manage this? 

I want to put a logo in place of the compactcms logo and add some images to the navigation bar on the left.  I also want to remove the navigation links up top.

Please help?

I'm using the ccms template, but I want to change it quite a bit.  Color, pictures, etc.

[Xander]

Hi Fiveflat,

The templates in CompactCMS use very basic HTML and CSS. If you open up the template (./lib/templates/ccms.tpl.html) you'll see in the source that tags such as {%content%} and {%subheader%} are used to dynamically fill the template with the contents of the requested page.

The two files that you'll need are ccms.tpl.html and the base.css file in the ccms directory. For example you'll find the following line in base.css which places the logo in the page.

Code: [Select]

#header h1 {background: url('logo.gif') no-repeat;height: 81px;}
You could either just replace the logo.gif file, or you could modify the line above. To remove the top navigation, all you need to do is open up ccms.tpl.html and remove these lines:

Code: [Select]

<div class="span-18 last" id="navigation">
<a href="http://www.compactcms.nl">CCMS Home</a> | <a href="http://community.compactcms.nl/forum/">Forum</a> | <a href="http://community.compactcms.nl/wiki/">Wiki</a> | <a href="http://www.compactcms.nl/files/">Download</a>
</div>

Please refer to CSS tutorials to see how you can change colours using the base.css file.

Good luck!
Xander.

[fiveflat]

Thank you Xander.
I managed to remove the navigation and changed the logo.gif file, but the new picture I put in it's place got cut of width wise. 

I guess I need to learn CSS a bit better.  I'll look for some tutorials.  Thanks!


Also, how to I add "blocks" to the left or right side of the page as well?  for instance I'd like a block below the Menu area on the left.

[Xander]

That might indeed be a bit tricky (my bad). If you need more width for your logo you should change the value of the span-4 tag in the base.css file.

Code: [Select]

Current:
   .span-4 {width:150px;}
   .span-18 {width:710px;}

New:
   .span-4 {width:200px;}
   .span-18 {width:660px;}

See if that works. With this change you increase the space for the logo and decrease the space where the navigation used to reside. Look at some tutorials and see if it works out. The CCMS template is mend as an example only, but could easily be extended with your own CSS coding.

Cheers!
Xander.

[fiveflat]

Thanks for the quick and details responses!!!

I'll try that and see how it works out.

[fiveflat]

okay, that seems to narrow the page where I have the text, etc below the header section too much. 

I fooled around and changed these lines and got it to work as I hoped.  I'm not sure what effect it will have when I try other modifications, but I'll find out. 

Code: [Select]

#header {background: transparent url('logo.png') no-repeat 0 0;padding-top: 10px;height: 114px;}
#header h1 {display: none;}
#header h1 span {display: none;}