Over the last year rayogram has worked with the New York State Senate to deploy a customized version of CiviCRM 3.2 for each Senate office. In the course of this work, we developed a custom theme for NYSS that leverages much of the template work that we did for the CiviCRM 3.2.
When we presented the work we had done for CiviCRM 3.2 and this theme to the CiviCRM community at CiviCon we got a number of requests for some of the bits of customization we did. Two specific features were requested:
- Sidebar tabs on contact page
- Recent items in footer, with profile "overlay"
This got us thinking: everybody needs a good CiviCRM admin theme, and we were already 80% of the way there. All we needed to do was add some extra customization and abstraction to generalize what we had done so it would work with more use cases. So we added:
- support for standard sidebars that don't get in the way of the CiviCRM workflow
- easy positioning of blocks based on Drupal regions named to match CiviCRM blocks.
- a color palette inspired by the CiviCRM core theme
- easy customization by breaking out different features of the theme into separate css and javascript files
- an attempt at semantic naming of files so that it will be easy for people to copy our work :)
I also worked with Kurund to get the CiviCRM Theme module updated and released, so that it will be easy for people to deploy this theme without impacting the rest of their site.
So here it is - we've dubbed this theme SimplyCivi, as that's what it's all about. Simply CiviCRM. We're adding this theme to all of our clients' sites as we upgrade them to CiviCRM 3.2 and we will be adding minor fixes and features on a completely arbitrary basis. We'd be happy to have contributions from others and we'll try to be quick on commits to the git repository (I'm figuring out what license to put it under, but rest assured it'll be under the least restrictive license we can find - suggestions/requests welcome).
Alright - here's how to install it:
1. Have a working version of CiviCRM installed on your Drupal site
2. Download the latest version of the SimplyCivi theme: http://github.com/kylejaster/SimplyCivi/zipball/master
Place it in you sites/all/themes directory (you may wish to rename the directory to "SimplyCivi" - github adds a silly name) and enable it at admin/build/themes
ALTERNATE OPTION: clone the SimplyCivi project into your sites/all/themes directory with this git command: git clone git://github.com/kylejaster/SimplyCivi.git
3. Download, install and enable the civicrm_theme module: http://drupal.org/project/civicrm_theme
4. Visit the Admin Theme configuration page at: admin/settings/admin Configure the "CiviCRM Administration Theme" to use "SimplyCivi"
5. Configure your CiviCRM blocks for the SimplyCivi theme at: admin/build/block/list/SimplyCivi There are regions for many of the blocks CiviCRM provides, simply match the blocks to the regions (place "CiviCRM full text search" into the "Header" region) Additional blocks may be put into the Left and Right sidebars - these are hidden by default, but show tabs on the left and right sides of the screen when enabled. Once you have configured your blocks, you are done! Visit yoursite.org/civicrm/dashboard?reset=1 and enjoy your clean new CiviCRM admin theme.
Comments
I've had a preview of it in the beta version, and let me repeat: awesome.
I will from now on combine it with the section module, so the website and the /civicrm can have a different layout.
Again: well done.
X+
does the work of the section module, and is already sensitive to pulling out the public facing civicrm pages :)
http://drupal.org/project/civicrm_theme
glad you like it!
Simple and extremely usable. Thank you for sharing this!
Looks really nice! Alas it conflicts with the Admin module (http://drupal.org/project/admin) which I use as standard Drupal "admin shell" currently: Both claim to get full control over the browser window which finally hurts both.
Update: The module civicrm_theme seems to trigger the misbehaviour when calling civicrm_initialize(). So far I did not dive deeper though.
just installed the admin mennu on a test site, and the only conflict i see is with the civicrm menu bar overlapping the admin menu sidebar. is this an issue with admin v1.0? if so, i'm afraid we probably won't support it (unless someone steps up ;)
Tried it with horizontal and vertical layout setting in Admin module - no luck. Let's head over to drupal.org. I filed an issue there: http://drupal.org/node/907032
We should get this on demo.civicrm.org and sandbox.civicrm.org. The existing coloured Garland is pretty ugly to bring potential customers to for a demo.
MIT is probably the least restrictive license. It basically says "I'm not responsible if this blows up your computer, keep the attribution in place, do whatever you want with this code". If you dual license with GPL or AGPL then the theme could be released with CiviCRM core (MIT by itself is not compatible with (A)GPL). But since the theme isn't that useful apart from CiviCRM you may as well just release under AGPL 3.0 the same as CiviCRM core. I wouldn't recommend any license other than the three above.
But if you based your work on something else (did you start with Blueprint?) then that will affect your available choices of license. If you started with anything from Drupal.org your options are basically GPL 2 or later or AGPL 3 or later.
There's a good chance at some point we'll be outting this on d.o. - thanks for clarifying the options!
Will try to document them in the drupal issue queue this weekend. Just a quick note that I'm experiencing some fairly funky behavior.
The site in question is using Garland for default theme and admin_menu for admin navigation so nothing unusual at all. Getting two very strange behaviors. It duplicates the primary links menu at the top of the left column "fly out" and when I move my mouse over the flyout the graphics are suddenly added. And if I hover my mouse over a contact name in the "Recent Items" civi block a pop up screen that looks like my whole webpage duplicated pops up!
On further inspection I think the odd graphics appearing are related to the weird "full screen" popup I get when hovering over a recent item so I think the recent items popup behavior is the problem.
Don't have time to post graphics till this weekend though.
I'm on firefox on Linux (3.6.8).
Hi Kylejaster,
Thanks for the theme, it looks great. Just to point out a couple of bugs:
* If you have the 'Recent Items' along the bottom, as you do in the image above, when you hover your mouse over the contact icon it shows up your own details, not the details of the contact.
* If you use the new toolbars at the bottom, it prevents you from seeing the bottom part of your webpage. Usually there's only footer info there but all the same it'd be good to fix this if possible.
* The hidden left panel is nice, but the arrow that you click on for it to be expanded ends up covering the side of my site icon. It would be better to be moved down so that the top of it is level with the top of the contact name.
Also, a suggestion:
* The configure button that appears on each toolbar is handy, but I'd actually leave it out, as it makes it much too easy to hit it on, say, the 'Create New' button on the bottom. I'm happy to configure blocks the normal way in the admin section.
But great work, I look forward to using it!