How to create a new theme from the Acquia Commons theme
One way to create a new theme for Commons using the "Acuia Commons" theme as a starting point.
This has the advantage of inheriting a bit of customization that exists in template.php and panels.
I am working on the premise that it will be easier to maintain through updates by using it from the Drupal default
sites/default/themes/
A new Commons install will not have a typical Drupal default theme directory
thinking from [document root] and using "website" as the new theme name
mkdir sites/default/themes
copy the Commons acquia_commons
rsync -a profiles/drupal_commons/themes/acquia_commons sites/default/themes/
cd sites/default/themes/
mv acquia_commons website
set the file permissions if needed
chown --ref . * -R
cd website
mv acquia_commons.info website.info
edit website.info
and change 3 lines
from:
name = Acquia Commons
description = Fusion Starter sub-theme. Requires <a href="http://drupal.org/project/fusion">Fusion Core</a> and th
stylesheets[all][] = css/acquia_commons-style.css
to:
name = website
description = website brief description
stylesheets[all][] = css/website-style.css
edit template.php
and change all the function names
from:
function acquia_commons_breadcrumb($breadcrumb) {
function acquia_commons_preprocess_comment(&$vars) {
function acquia_commons_preprocess_user_profile_item(&$vars) {
function acquia_commons_shoutbox_post($shout, $links = array(), $alter_row_color=TRUE) {
function acquia_commons_item_list($items = array(), $title = NULL, $type = 'ul', $attributes = NULL) {
function acquia_commons_preprocess_block ($variables) {
to:
function website_breadcrumb($breadcrumb) {
function website_preprocess_comment(&$vars) {
function website_preprocess_user_profile_item(&$vars) {
function website_shoutbox_post($shout, $links = array(), $alter_row_color=TRUE) {
function website_item_list($items = array(), $title = NULL, $type = 'ul', $attributes = NULL) {
function website_preprocess_block ($variables) {
rename two files in css directory
mv css/acquia_commons-style-rtl.css css/website-style-rtl.css
mv css/acquia_commons-style.css css/website-style.css
and finally change the name of two functions in ./panels
in these:
panels/twocol_30_70.inc
panels/twocol_70_30.inc
rename the functions:
panels/twocol_30_70.inc:function acquia_commons_twocol_30_70_panels_layouts() {
panels/twocol_70_30.inc:function acquia_commons_twocol_70_30_panels_layouts() {
to:
panels/twocol_30_70.inc:function website_twocol_30_70_panels_layouts() {
panels/twocol_70_30.inc:function website_twocol_70_30_panels_layouts() {
Now, with any luck, you can change now go to themes and enable this new one [website].
A minor tip might be:
I have used fusion base for many websites and have been making all of my CSS additions and overrides in
local.css (example local.css for 1.4 at http://commons.acquia.com/wiki/example-localcss-dc-14)
mv css/local-sample.css css/local.css
This is a special css file that is not consolidated with all the other css files
/admin/settings/performance
Optimize CSS files
which would have a performance hit, but is very easy to develop a new theme because changes take affect with page refreshes. Otherwise the cache would have to be cleared to rebuild the consolidated css file.
Personally, I have found it helpful to remove all the comments at the top of the file and change the first line to
/* website (the theme name) */
so that I can tell one local.css from another if I have more than one open in an editor.
I hope this is useful for someone.


Comments
Wow, that's very useful.
Wow, that's very useful. Thank you for providing that information. I'd love to see more custom themes pop up. Maybe we should keep a running list of them.
Actually, the best thing
Actually, the best thing would be to have them contributed to Drupal.org.
I wonder..
.. how many people that can create a theme actually have any idea how to contribute them to d.o? This is one of the complaints many in the design community have; they don't know how, nor care to learn how, CVS works.
I wonder if we should provide some simple method here for people who don't know how (e.g. attach to a page here as an attachment), then have others in the community who know how to upload push them to d.o?
The downside of this approach is that the theme creator is not listed as the "maintainer" on d.o - which is bad.
Comments, all?
I really appreciate very much
I really appreciate very much your suggestion:
Allow me to say that "we" generic Drupal User that may want to contribute but do not have the time and the passion to learn also CVS but due to the simplicity to build a Theme in Drupal may desire to share our examples to the community, also for getting feedback and learn more out of it. But as not developers we will mostly continue to be a marginal group on Drupal.org.
Contributing themes to drupal.org
Jay wrote:
Using CVS, or soon Git, is unfortunately necessary for designers to contribute their themes. To make it easier for them -who are visual people rather than coders-, a solution is to use graphical user interfaces (GUIs) instead of command line. I've just added a few details on this to "Adding your theme to Drupal.org" and other handbook pages.
Some references:
@JerryS , really cool. +1 for
@JerryS , really cool.
+1
for this awesome step by step documentation. Thanks for sharing
Exactly what I needed!
thanks a lot for this little tutorial ;)
sites/default vs. sites/all
Any particular reason for choosing sites/default instead?
Thanks,
JP
site specific into /sites/default
I typically put site specific modules into /sites/default/. I used to put my modules there too, but it seems the community prefers /sites/all. (Default made more sense to me when not setup as a multi-site.) My themes always end up being very custom for a site, where I also put theme related images, js, widgets, and all CSS tweaks, so /sites/default works well for me.
Jerry
Few questions,
You wrote:
1st question
cd website
mv acquia_commons.info website.info (I am assuming mv = move. then I see two file names here? Also, where do I find website.info?)
2nd question
A minor tip might be:
I have used fusion base for many websites and have been making all of my CSS additions and overrides in local.css ... it might have a performance hit. (What other option do we have? Since I am interested in performance, as I expect quite a bit of traffic. I think that with the devel module one can clear the cache fairly easily <I am new to Drupal, please advise if one should not clear cache>)
3rd question:
If we have to go with the above suggestion, then please explain this section a bit more (sorry: I just do not what file and we are renaming something)
Trying to set up my environment prior to theming, so that I do not encounter headaches because of it; drupal commons theming seems to be a bit different because of the profile approach and I am bit lost. Any help would be greatly appreciated.
Thanks,
JP
Few answers
1. mv is linux command for rename which also accomplishes a move across the path.
http://linux.about.com/library/cmd/blcmdl1_mv.htm
2. You could develop all your CSS (new and overrides) in local.css and then move them all to
css/website-style.css
which will be consolidated. Personally I don't care much since both the consolidated CSS and local.css are cached by the browser. For performance you would likely gain more by moving both to a CDN than reducing the files downloaded by one.
The vast majority of sites I have worked on do not have significant performance demands. My current project likely will and I might be eliminating local.css. The nice thing about using the consolidated CSS and flushing the cache is to force varnish to serve a new version.
3. I am sorry, but I don't understand what your question is.
For many projects it will make sense to use any theme and likely a new one based on fusion would be ideal. My example is just if you want a method of creating your own sub-theme of fusion based on aquia_commons. An alternative would be to start with fusion, create a sub-theme, and copy in the *.tpl.php files, template.php functions, and /panels/* files into your sub-theme; making the name required name changes from aquia_commons to your theme name. For me the above approach was quicker.
Jerry
It all makes sense now... Thanks
This all makes sense now, with your comments and the help of Claes. Step by step approach to utilize DC as a start. I did skip the "mv css/local-sample.css css/local.css" part. I am wondering if this will have a negative impact on my work later on.
Great tutorial..
I little hick up...
First of all thank you for the very descriptive help you provided above.
I followed all the steps except the one you mentioned "A minor tip might be:" which deals with a local CSS. I did not perform any other CSS editing - that may be the problem, but I just do not know what else to do; I do expect high traffic on the site, is there some other step I should follow. I did go to site/perfom and clicked on 'clear cache data'.
Problem: It is missing the border and some colors. Here is how it looks http://screencast.com/t/NjA1MTk4Nzct
Check the renaming of CSS files and in .info
Once you clone the theme, it should look the same. Check that all the CSS files are loading. Do this by not consolidating theme under "performance" and viewing the page source. Check that you renamed the theme in .info.
You could use firebug to view an element on the Commons theme and see which CSS file is providing the attributes.
Regarding performance, I would not be concerned about using local.css on most sites. Long before you have serious traffic there are many other performance issues to address long before you worry about that this one additional server request. It is cached and until you are putting all of your graphics into sprites and hosting them on a CDN, I would ignore this local.css issue as it will have less of an impact. If you are not making any changes to the theme, then you might copy the CSS into ../css/my_theme.css and remove/rename local.css, but it is unlikely you could measure the difference in performance or bandwidth by more than a few bytes, and the request.
Worked like a charm
..The css renaming in the .info file was missing.
Thanks for the heads up on FireBug and the performance comment makes total sense. Will rename css/local-sample.css to css/local.css as you suggeste. I am also trying, like you, to have this customized theme easier to maintain through updates.
Further questions in order to customize the theme, and withstand an update to the commons theme:
A little issue...
I followed your advice and now on the home page I have a couple issues with my login fields;
Can you point me in the right direction to resolve this issue ?