Stylesheets and Print Stylesheet

Adding a stylesheet to your site is as simple as changing the default layout.

Open /app/views/layouts/default.ctp and within the first 10 lines of the page is the line

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

Cake comes with a default style in /app/webroot/css/cake.generic.css which you can edit until your heart's content. Or you can create your own stylesheet and put it into the same folder and change that line to direct your pages to the new style. Observe how the .css extension is not included in the cake function call.

For a Print Stylesheet, it is a little different. To set a print stylesheet you need to set the options to include the media type.

echo $this->Html->css('cake.print', 'stylesheet', array('media' => 'print'));

Layout: Default

Further changes to the default layout that we created previously will affect all page views, so develop your default layout with that in mind, putting elements on the page that you would like to be on every page of your site, such as a site logo, main navigation, and copyright notice.

First though, a word about images. Static image files for the site should go into the directory /app/webroot/img/ as this directory allows direct access to the images without processing through a controller and when using the HTML helper (see below) you don't have to remember the beginning path to the image.

The site "favicon.ico" file should go in the /app/webroot/ directory. There is a default file already there, so when you have an image for your site simply replace it.

Edit /app/views/layouts/default.ctp

Inside the "header" div at the top remove the line beginning with "<h1>" and add the following:

    <div class="logo"><?php echo $this->Html->link($this->Html->image('drug-ed-logo.png', array("alt" => "Drug-Ed.com")), Router::url('/'), array('escape' => false)); ?></div>

The Html Helper is included in CakePHP to make creating links and other Html elements easier to code dynamically. The default format for using a helper is with $this->HelperName. Observe in the above code that an image element is contained within an link element. Since the image is stored within the /app/webroot/img/ directory as mentioned above, the path to the image is not required since the helper automatically includes it.

If your Html helper link includes html entities, such as the above image, by default the code is escaped out. To turn that feature off and allow the html in the title to be displayed properly add the options array to the link function as above.

Save and upload the file then browse to site root to observe the changes.

Page Title

From your home page observe the page title, it should be something like this: "CakePHP: the rapid development php framework: Users"

The first part of the title is defined in the default layout. The layout predefines the wrapper HTML code of every page. This file is located in /cake/libs/view/layouts/default.ctp and before editing it you should move it to /app/views/layouts/default.ctp

Next, edit the page and remove the following line:

<?php __('CakePHP: the rapid development php framework:'); ?>

Upload the file and test it and your home page title should just read "Users".

Now click on the username and the title will read "Scaffold :: View :: Users" While the default titles can be helpful, you will want to change them to reflect your site's method.

Edit /app/controllers/users_controller.php and for the first line in the index() method add the following:

$this->set("title_for_layout", 'Drug-ed.com : Drug Education and Medication Adherence');

Save the changes upload the file and test it at site root. This command will also work if you add it to /app/views/users/index.ctp, however, since you are modifying variables it is best practice to do it within the controller.