Customising Layout and Style

To make the web site more personalised, the layout and style have been changed. This was done by updating the default.ctp and cake.generic.css files.
To change the site title, $cakeDescription in default.ctp file has been updated:
$cakeDescription = __d('cake_dev', 'Football Stars: CakePHP');

I customised the body and content backgrounds, header, header icon, and by editing cake.generic.css:
body {
background: #fff url('../img/grass.jpg') top center no-repeat;
color: #fff;
font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
margin: 0;

background:rgba(255,255,255, 0.9);
clear: both;
color: #333;
padding: 10px 20px 40px 20px;
margin: 0 10px;
overflow: auto;

h1 {
color: #003d4c;
font-size: 120%;
font-weight: bold;

The body background is an image. The content background is transparent. To set transparency rgba(255,255,255, 0.9) function was used. RGBa extends the RGB colors model to include the alpha channel, allowing specification of the opacity of a color(the 4th value – 0.9- means 90% opaque white). ‘0’ means transparent; ‘1’ means opaque.



Bootstrap and jQuery files added to webroot/js directory:

Bootstrap file added to webroot/css directory:


The references to Bootstrap and jQuery libraries in default.ctp:

Bootstrap overrides existing styling:

To fix styling and layout an existing cake.generic.css overrides unwanted Bootstrap styling:

Final efect: