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;
font-size:90%;
margin: 0;
}

#content{
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.

layout

Bootstarp

Bootstrap and jQuery files added to webroot/js directory:
boot1

Bootstrap file added to webroot/css directory:

boot2

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

Bootstrap overrides existing styling:
boot4

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

Final efect:
boot6