Hello CakePHP users!
With this first article, i will start the series of tutorials including some freebies so that your work with this excelent easy to user framework will be piece of “cake” .
What i am about to show you in this tutorial is something rather simple, not based on php code but on CSS.
In [...]
Hello CakePHP users!
With this first article, i will start the series of tutorials including some freebies so that your work with this excelent easy to user framework will be piece of “cake” 
.
What i am about to show you in this tutorial is something rather simple, not based on php code but on CSS.
In the various applications you will develop using cake, you will want to see the debugging details (while in development mode of course). After reading the article, you will have a nice
styled debug code without interfering with your application design or whatsoever.CakePHP comes by default with a nice and simple looking CSS. While this is ok, when you will start implementing the layouts and views for your application, you will most likely delete the CSS that cake provides (if not, you will have weird looking tables and stuff like that).
However, following the next steps, you will have a separate CSS file in which the design, strictly for cake’s debug code, will reside. It won’t affect your application in any way (unless you define your styles like cake does – which i believe you would not have any motive to do ) .
- Create a file named “cake-debug.css” in your app/webroot/css/ folder.
- Insert in all your layouts, in the head section, the following code : <?=$html->url(“/css/cake-debug.css”);?>
- Add the following code to it (mostly taken from cakephp’s default styles, but tweaked abit based on preferences):
#cakeControllerDump h2 {
font-size:16px;
color:red;
font-weight:bold;
}
.cake-sql-log caption {
font-family:Arial;
padding:15px;
text-align:right;
font-size:14px;
}
.cake-sql-log table {
background: #f4f4f4;
}
.cake-sql-log td {
padding: 4px 8px;
text-align: left;
border:1px solid #CCC;
font-family:Arial;
}
.cake-sql-log th {
border:1px solid #CCC;
padding: 4px 8px;
font-weight:bold;
}
/* Debugging */
pre {
color: #000;
background: #f0f0f0;
padding: 1em;
}
pre.cake-debug {
background: #ffcc00;
font-size: 120%;
line-height: 140%;
margin-top: 1em;
overflow: auto;
position: relative;
}
div.cake-stack-trace {
background: #fff;
border: 4px dotted #ffcc00;
color: #333;
margin: 0px;
padding: 6px;
font-size: 120%;
line-height: 140%;
overflow: auto;
position: relative;
}
div.cake-code-dump pre {
position: relative;
overflow: auto;
}
div.cake-stack-trace pre, div.cake-code-dump pre {
color: #000;
background-color: #F0F0F0;
margin: 0px;
padding: 1em;
overflow: auto;
}
div.cake-code-dump pre, div.cake-code-dump pre code {
clear: both;
font-size: 12px;
line-height: 15px;
margin: 4px 2px;
padding: 4px;
overflow: auto;
}
div.cake-code-dump span.code-highlight {
background-color: #ff0;
padding: 4px;
}
div.code-coverage-results div.code-line {
padding-left:5px;
display:block;
margin-left:10px;
}
div.code-coverage-results div.uncovered span.content {
background:#ecc;
}
div.code-coverage-results div.covered span.content {
background:#cec;
}
div.code-coverage-results div.ignored span.content {
color:#aaa;
}
div.code-coverage-results span.line-num {
color:#666;
display:block;
float:left;
width:20px;
text-align:right;
margin-right:5px;
}
div.code-coverage-results span.line-num strong {
color:#666;
}
div.code-coverage-results div.start {
border:1px solid #aaa;
border-width:1px 1px 0px 1px;
margin-top:30px;
padding-top:5px;
}
div.code-coverage-results div.end {
border:1px solid #aaa;
border-width:0px 1px 1px 1px;
margin-bottom:30px;
padding-bottom:5px;
}
div.code-coverage-results div.realstart {
margin-top:0px;
}
div.code-coverage-results p.note {
color:#bbb;
padding:5px;
margin:5px 0 10px;
font-size:10px;
}
div.code-coverage-results span.result-bad {
color: #a00;
}
div.code-coverage-results span.result-ok {
color: #fa0;
}
div.code-coverage-results span.result-good {
color: #0a0;
}
And your done! Now go to your application and try to get an error. Doesn’t the debug look much better now ?
P.S. This tutorial is based on the fact that you will have in your application “DEBUG” set on 1, 2 or 3 at least.
Hope you liked it!
