How to create a Custom CakePHP Template

How to create a Custom CakePHP Template

If you want to create custom cake PHP templates then I hope that you have already downloaded CakePHP and installed it, and make some necessary changes like changing security settings and connected to database.

You have seen the messages in the welcome screen has changed after each of your action.

Now you will note the following:
Editing this Page

1. To change the content of this page, create: APP/views/pages/home.ctp.

2. To change its layout, create: APP/views/layouts/default.ctp.

3. You can also add some CSS styles for your pages at: APP/webroot/css.

Create DEFAULT Home Page

First create a new folder called 'pages' under app/views/ . And then create a new file (using any text editor) and saved that file as 'home.ctp' under 'app/views/pages/'.

Now point your browser to: http://caketest.local/

After opening you can see all the messages are gone!!! You can see this is a nearly empty page!

As the name says, 'home.ctp' is the default homepage for your website. You can write anything here (with HTML tags). Those will be displayed at your homepage.

Create Default LAYOUT for your website

Now create another new file (using any text editor) and save it as 'default.ctp' under 'app/views/layouts/' folder.

'default.ctp' is the default layout to display your content. If it is empty, CakePHP will display nothing. This is exactly what you see after saving default.ctp - a completely blank page!!!

Do not worry!

Just copy and paste the following code in the newly created 'default.ctp' file.

--: BEGIN COPY :--

charset(); ?>

meta('icon');

echo $html->css('cake.generic');

echo $scripts_for_layout;
?>

Header Elements Will Go Here

flash(); ?>

NOTE: 4

$cakeDebug SHOULD be placed before closing

AND you are done! You can add any CSS style/'div' layer to this page ('default.ctp') to give your website the layout/look you want.

For example, I tried a simple TWO Column Layout.

menu-box">
menu items go here!

content-box">

flash(); ?>

I have added one div layer 'menu-box' and another one 'content-box' to display menu items and content items in two separate columns.

Now I need to add these CSS styles in a stylesheet file.

Modifying Style sheet

As such Cake ('short-form of CakePHP) has already told us how to do that:

You can also add some CSS styles for your pages at: APP/webroot/css.

You can see the default CSS file under 'app/webroot/css' folder. The name of the file is 'cake.generic.css'. You can simply modify the content of this file (cake.generic.css).

I preferred to go to the bottom of that page and type the following lines

/* Custom CSS */

#menu-box{
width:250px;
float:left;
}
#content-box{
width:700px;
float:left;
}

It gives me a workable presentation for my custom template.

But I really need to make some more changes.

So, I just pressed (Ctrl+U) to view the source code, and I located the CSS division layers/ HTML tags being displayed in the source code, and modified them.

Here is the code: (Remember: I added the code at the bottom of cake.generic.css file.)

/* Custom CSS */

#menu-box{
width:250px;
float:left;
border-right:1px solid #CCCCCC;
}
#content-box{
margin-left:10px;
width:700px;
float:left;
border:1px solid #CCCCCC;
padding:10px;
background-color:#F3F3F3;
}
#header {
height:100px;
width:100%;
color:#000000;
background-color:#b5fad1;
font-size:2.0em;
border-bottom:1px solid #cccccc;
}
body
{
background-color:#FFFFFF;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#footer
{
text-align:center;
}

..............................................................
And here is my custom template:

So, I have done it and hope If you are following me, you MUST have done so as well.