Guide/Tutorial [Solved]

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
Chandd!
Forum Members
Forum Members
Posts: 13
Joined: Wed Jan 27, 2010 12:08 pm

Guide/Tutorial [Solved]

Post by Chandd! »

Heya!

I was wondering.

A lot of beginners just don't know where to start with designing/coding your own template.
It's a lot of searching and asking.

Wouldn't it be a great idea to create a guide/tutorial with a step-plan.
This way you can send everybody who doesn't understand (including me xD) to that tutorial.

And i'm not talking about just edit a template you downloaded, ofcourse, this is a great way to learn it too.
But it's still to difficult for some people, including me again xD.

Ofcourse, who wants to offer his time for something like this?
Atleast he/she will be worshipped.
Last edited by Chandd! on Fri Jan 29, 2010 3:21 pm, edited 1 time in total.
Jos
Support Guru
Support Guru
Posts: 4019
Joined: Wed Sep 05, 2007 8:03 pm

Re: Guide/Tutorial

Post by Jos »

Hi Chandd,

This one shows you the basics: http://cmsmadesimple.org/uploads/media/ ... colate.htm

You'll see the cms backend has another design nowadays, but the menu is the same.

Another thing that has changed is the way menu and news can be called. They use the long version in the tutorial, but can also be done with {menu} and {news}

Hope this helps  :)
Chandd!
Forum Members
Forum Members
Posts: 13
Joined: Wed Jan 27, 2010 12:08 pm

Re: Guide/Tutorial

Post by Chandd! »

Hey thanks for the video!
This explains some questions I had about the coding part.

I got another question. Let's see, you make an template in photoshop,
you start slicing it up. Then what? How do you create an .xml file of it?
I know how to arrange it in html with css. Do I manually put the html & css in the template and then export it to xml?

Oh and lol that mouse is so slow in the vid :')
Last edited by Chandd! on Thu Jan 28, 2010 10:35 am, edited 1 time in total.
Jos
Support Guru
Support Guru
Posts: 4019
Joined: Wed Sep 05, 2007 8:03 pm

Re: Guide/Tutorial

Post by Jos »

Forget xml  ;) You don't need that.

After you have created your design and sliced it, you can create a simple html/css site. After you are ready, that's where the video tutorial starts.

The xml part comes in when you want to create themes, or import them. You never edit a xml-file.
Last edited by Jos on Thu Jan 28, 2010 11:01 am, edited 1 time in total.
Chandd!
Forum Members
Forum Members
Posts: 13
Joined: Wed Jan 27, 2010 12:08 pm

Re: Guide/Tutorial

Post by Chandd! »

Yeah =)

I was so confused because everywhere I looked I saw a xml file XD
Now I know it's just an exported theme or something, anyways, like you said,
no need to worry about that anymore!
Jos
Support Guru
Support Guru
Posts: 4019
Joined: Wed Sep 05, 2007 8:03 pm

Re: Guide/Tutorial

Post by Jos »

Okay... solved then?
Chandd!
Forum Members
Forum Members
Posts: 13
Joined: Wed Jan 27, 2010 12:08 pm

Re: Guide/Tutorial

Post by Chandd! »

Yeah =) Just got an template done....
Let's see if I'll get in online
Jos
Support Guru
Support Guru
Posts: 4019
Joined: Wed Sep 05, 2007 8:03 pm

Re: Guide/Tutorial

Post by Jos »

Chandd!
Forum Members
Forum Members
Posts: 13
Joined: Wed Jan 27, 2010 12:08 pm

Re: Guide/Tutorial

Post by Chandd! »

:o

Got a question again, so before getting the page on solved, why still not use this thread =)

I used someone else's template as a basic then made some adjustments & then imported it in CMSMS...

So my question is: How can I add more content at "Middle content", "Bottom left" & "bottom right"?
I saw that you can make global content boxes, but that's not really the solution.

http://www.chandlerhoman.nl/chand/index.php
Last edited by Chandd! on Fri Jan 29, 2010 2:09 pm, edited 1 time in total.
Jos
Support Guru
Support Guru
Posts: 4019
Joined: Wed Sep 05, 2007 8:03 pm

Re: Guide/Tutorial

Post by Jos »

You can define extra content blocks in your template.

Warning: you need to have at least the normal {content} tag. that is there allready, do not change it!

Your template could look like this:

Code: Select all

<div id="indexImageText"><p>{title}</p>
{content}
</div>
</div> 
</div> 

<div id="body"><div class="magic"> 
<div id="contentColumnOuter">
<div class="contentColumn1">
{content block='Middle content'}
</div><!-- CONTENT COLUMN OUTER CLOSE-->

</div><!-- Closes magic -->
</div><!-- Closes Body -->
<div class="clear"></div>

<div class="footerContainer">
<div class="morefoot"><div class="magic">

<div class="Bottom">
<div id="tiny-contact-form" class="widget widgetTcf">
  <h3>bottom left</h3>
		  <div class="contactform" id="tcform">
{content block='Bottom left'}
      </div></div></div>



<div class="column3">
<div id="stray_widgets-2" class="widget widget_stray_quotes">
  <h3>Bottom right</h3>
{content block='Bottom right'}
     content rechts</div></div>
<div class="clear"><!-- YWD SPACE --></div>
</div><!-- END magic -->
</div><!-- END morefoot -->
Also take a look at Admin >> Extentions >> Tags >> Content for more parameters for this tag besides block='' (And a list of other tags you may find usefull)
Chandd!
Forum Members
Forum Members
Posts: 13
Joined: Wed Jan 27, 2010 12:08 pm

Re: Guide/Tutorial

Post by Chandd! »

Ah great it worked!
I think this solved all my questions! ( for now xD )

Thanks for all the help! You got a karma point from me!
Jos
Support Guru
Support Guru
Posts: 4019
Joined: Wed Sep 05, 2007 8:03 pm

Re: Guide/Tutorial [Solved]

Post by Jos »

y're to kind  ;D  thank you  8)
Post Reply

Return to “Layout and Design (CSS & HTML)”