Natalino

Picone

Tech machine


CakePHP Debug Styles

luglio 11, 2008Nat0 Comments

I just wanted to document this somewhere but whenever I work on a CakePHP project, there’s always the debug info that sits at the bottom of the page. It’s big and bulky and once I’m off the default CakePHP styles, it’s usually pretty ugly.

I’ve done various stylings but I finally took a moment to implement a really simple idea: Fixed position the table and then use hover styles to toggle the visibility. It’s still not a perfect solution but darn close and certainly good enough for my needs right now.


.cake-sql-log {
	position:fixed;
	top:99%;
	z-index:10;
	width:100%;
	background-color:#000;
	color:#FFF;
	border-collapse:collapse;
}

.cake-sql-log caption {
	background-color:#900;
	color:#FFF;	
}

.cake-sql-log:hover {
	top:auto;
	bottom:0;
}

.cake-sql-log td {
	padding:3px;
	border:1px solid #999;
	background-color:#EEE;
	color:#000;
}

You’ll see a red sliver at the bottom of your page and as you move your mouse over it, voila, there’s your debug info. It’d be nice to actually have a Firebug plugin that could have CakePHP debug info pushed to it automatically. (Maybe one day I’ll work on that!)