Joomla like theme for symfony admin generator

October 29th, 2008 by Carlos Barros

When I first started working with symfony admin generator, I searched for some nice themes that I could use in my project, and for my surprise, I didn’t find anything. Searching a bit more I came across a blog post on SymfonyLab (http://www.symfonylab.com/backend-generator-theme/) asking about themes. In the post the author pointed an joomla like theme (http://www.symfony-project.org/forum/index.php/m/16515), created by a user called Draven, that I really liked, but it’s outdated. I’m not really a joomla fan, but I must admin I like their backend design, so I decided to do a new implementation of this theme. It’s based on Draven’s implementation, in fact the css is almost the same, with some changes here there, and some small layout changes as well (specially in the edit page). Just one note that’s worth saying, it’s not really a THEME, but just a css, some layout templates and a collection of images, that changes the look of generated admin module. Here are some screenshots:

Also you can see it in action here (use anything as username/password).

It’s pretty simple to install and use this theme, just download the files here. This package contains a web directory with a set of images, javascripts and css, all stored in a dir called sf_admin. Also, it contains a set of layout templates that you must add to your backend application. Note that along with the layout templates, there are two files that are NOT layout templates, but templates that you should moved to the appropriated action, loginSuccess.php and dashboardSuccess.php. loginSuccess.php is the login screen and should be moved to your login module, and dashboard is the main admin screen and should be moved to your main module.

First file that needs to be changed is the main view.yml file for the backend app, in order to add the custom javascripts, css and set the layout.

app/backend/config.view.yml:

  stylesheets:    [sf_admin/main,sf_admin/theme]
  javascripts:    [sf_admin/JSCookMenu_mini,sf_admin/theme]
 
  has_layout:     on
  layout:         layout

Note that loginSuccess.php template must NOT have a layout because it has a different look, so, don’t forget to set has_layout: off to the correct view.yml when using it. Now, for each module, you must set a new css in the generator.yml config file:

app/backend/modules/some_module/config/generator.yml:

generator:
  class:              sfPropelAdminGenerator
  param:
    model_class:      SomeModel
    theme:            default
    css:              sf_admin/main

Also in generators, I suggest to ALWAYS add a fieldset caption to the edit page, otherwise it will not look as expected. You can do something like:

app/backend/modules/some_module/config/generator.yml:

    edit:
      title:          User manager: edit
      display:
        "Details":             [id,name]
      fields:
        name:           { name: Name, help: "Enter name here" }
      actions:
        _delete:        { name: Delete }
        _list:          { name: Close }
        _save_and_list: { name: Save }

One drawback this theme has is the fact that all “actions” have absolute positioning, in order to place it at top right. This means that each action as a static location, thus, you cannot add an save action as the first button in one view, and then add as the second button in another view, they will ALWAYS be placed in the same position (btw, to change actions location/order/etc, just edit css/sf_admin/main.css file and search for .sf_admin_action_create – or any other action name – and change the right value). I tried to move it’s container and then set contents to float:right, but it didn’t work as expected. Actually it worked just fine, but the problem was with the delete button. Delete button is in a different container, because it needs to live in a new <form> tag, so it was not possible to make it float. But as original author (Draven) said, it’s not a real theme. One can create a complete new theme to address these small details, but for me, this works like a charm :) .

Share this post...
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Ma.gnolia
  • MySpace
  • Rec6
  • Reddit
  • StumbleUpon
  • Technorati

In symfony | 13 Comments

Comments

      Carlos BarrosNo Gravatar in January 6th, 2009 at 17:09

    • Hi Kevin.. I didn’t test with 1.2 yet, but as it’s mostly CSS, if 1.2 admin generator didn’t change too much generated HTML, it should work fine… If you successfully implement it in 1.2, drop me a line…

      Carlos

      KevinNo Gravatar in January 12th, 2009 at 18:03

    • Hi Carlos,

      I tried it out of the box with 1.2 and there are some issues. 1.2 introduced an overhaul of the admin generator so I think as a consequence it broke this ‘theme’.

      At this point I am not going to try and fix it but if I ever do I will let you know.

      You are right though – I wish there were more actual ‘themes’ available to download.

      Kevin

      VortekNo Gravatar in January 16th, 2009 at 9:43

    • Hi there,

      When i first found this theme i was thrilled. I just copied it to my project and everything looked good. Unfortunatlty, 1 week later i updated to sf1.2 and the new generator is diferent. So now i don’t know what to do. I have about 4 or 5 modules with this theme working good, but still have about 20 left to do which look bad. And the sfGuardPlugin looks completely messed up as it uses the 1.2 admin generator.

      Any chance you will update this please?? :P
      Or i’ll just have to remove the theme from every module i’e created and use the default css :( which i really didn’t want…

      Congratz on the theme it looks very good.
      Regards

      Carlos BarrosNo Gravatar in January 16th, 2009 at 10:09

    • Hi..
      I’m still working on some projects that use Symfony 1.1, so I still don’t have enough time to upgrade this theme… As I’m myself a user of this theme, I will upgrade it as soon as I start working with 1.2, but not sure when… I’ll post it here when I get it..

      Regards

      KevinNo Gravatar in February 4th, 2009 at 18:05

    • Hi Guys,

      I have taken this theme and created a plugin for symfony 1.2. It is still not a ‘theme’ the way I would like it to be but there is a bug in 1.2 that prevents overriding default theme items in 1.2. As of right now you have to copy the entire theme over. The documentation explains how it works.

      The plugin, sfAdminDashPlugin (http://www.symfony-project.org/plugins/sfAdminDashPlugin) adds some cool features such as controlling dashboard/menu items through a configuration file, even setting credentials. Still needs some work and polishing (especially the css) but I installed it successfully on several projects.

      Let me know what you guys think.

      Kevin

      Carlos BarrosNo Gravatar in February 4th, 2009 at 20:18

    • Hi Kevin.. I didn’t have a chance to test it but it sounds really great… thanks for sharing this….

      Carlos

      DanieleNo Gravatar in February 12th, 2009 at 14:07

    • Hi there,
      I am an utilizer of joomla like theme from some months and now I have found this post and I am trying the sfAdminDash Plugin.
      It’s a really good stuff, congrats Kevin :)
      I have a question about personalization of layout: what is the best way for preserve possibility of future plugin upgrade? (sorry for my bad english…)