CakePHP CSS Enhancements From 1.2 To 1.3 CakePHP CSS Enhancements From 1.2 To 1.3

This article does seem a bit late since CakePHP 2.0 is on it's way.  However, I felt it prudent to point out a few things that I'm really happy to see in the new default CSS provided by CakePHP.

On CakePHP's website, you will find an excellent migration guide from 1.2 to 1.3 here:

It describes in great detail the various changes throughout the entire application and there are a lot of them.  But I think it left out some of the most important stuff, the default CSS provided for people who use the bakery to create their websites!

One of the things that irked me in 1.2 was I had to manually update the paginator helper to display what field is currently being sorted on.  Many times I had to ensure my peers were also doing the same thing and a lot of time was wasted checking this and ensuring it was done correctly.

I'm really happy to see this addressed in 1.3.  If you look at the migration guide, it's there, but quite subtle under the "PaginatorHelper":

"sort(), prev(), next() now add additional class names to the generated html. prev() adds a class of prev. next() adds a class of next. sort() will add the direction currently being sorted, either asc or desc."

What's not mentioned is the associated CSS that accompanies this inside of the cake.generic.css:

th a.asc:after {

content: ' ?';


th a.desc:after {

content: ' ?';


Unfortunately, the above character encoding didn't carryforward and I'm not sure what symbol it's using; however, it is an excellent start to get you on the right track to simply add some CSS to call attention to the column currently being sorted on.

Additionally there are several small form CSS changes:

- Removing the requirements for "div" tags on the "required" class CSS as well as the "input" class CSS.

- Making checkboxes inline.  This is another simple, but great improvement, always felt I had to do a lot of extra CSS work to get checkboxes working correctly.

- Some stylistic changes to the submit buttons.

If you are interested in changes from 1.3 to 2.0, it currently doesn't look like any just yet (that I could find).  It's still early though.

Published on Feb 23, 2011

Tags: The Ultimate CSS Tutorial for Beginner Programmers | CakePHP Tutorial | paginator

Related Posts

Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article that you just finished reading.


Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.

No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in and improve your skillset with any of the tutorials below.