Styling

jQuery-UI

DF/Manager uses jquery-ui themes to style the site. You can easily roll your own themes and attach them to your DF/Manager site. Here's how to do it:

  1. Go to http://jqueryui.com/themeroller/ and create your theme.
  2. Download your theme to your computer. Inside the zip are a number of directories. The only one you need in the css directory.
  3. Inside the css is a directory with the name of your theme (remember this name, you need it in the next step). Inside that is a .css file. Rename this to jquery-ui.css (remove any version info created by the download script)
  4. Upload the directory mentioned in the previous step to /app/webroot/css
  5. Open the default layout header-file from /app/views/layouts/head.php. If the file does not exist, copy it from /app/views-default/layouts/head.php. Also copy all the .ctp files from the same directory (the ctp files use head.php for shared settings).
  6. Search for the line containing 'dfm/jquery-ui', and rename dfm with the name of your theme.
  7. Save the layout file and upload it to your site.
  8. Refresh your site to see the new design.

Custom stylesheet

DF/Manager uses a number of stylesheets:

  • blueprint.css
    Contains the blueprint css library. 
  • dfm-admin-style.css
    Contains styling for the administrator pages. You should not change this. 
  • dfm-style.css
    Contains web site styling.
  • ie.css
    Contains Internet Explorer specific styling elements. Part of the blueprint library.
  • menu.css
    Contains styling for collapsible menus (categories).
  • style.css
    Contains your style elements. 

If you wish to changes to your site's stylesheet, edit only /app/webroot/css/style.css. Create the file if it does not exist. To override individual stylesheet elements, copy them from one of the above mentioned files into the new style.css and enter your own properties. Editing only style.css ensures your changes are maintained when DF/Manager is updated.

For instance, to alter the default background color into bright red add this line to style.css

body { background-color: #ff0000; }