One hour of setting CSS and clone a different Acquia_Commons Theme

wolfflow's picture
Submitted by wolfflow(1292)
Frequent contributor
14 August, 2010 - 00:11
Groups:
Terms:

 I want to share with you my newbie designer hacks and report about my simple action of modify a bit the base Theme of Drupal Commons, Acquia_Commons.

Step 1: 

I just copied the entire theme folder acquia_commons in the same profile/drupal_commons/themes folder and rename it  mytheme_commons.

Step 2: 

Then change the name of: acquia_commons.info in mytheme_commons.info and add the line  stylesheet[all][] = css/typografy.css and I copied also the fusion css file typography.css to mytheme css folder, this as to avoid to have to use the not quite simple for me to set and manage skinr.module and because I made just very few changes.

Step 3:

Then made only 6 changes in the themes/mytheme_commons/themplate.php file according to all  acquia_commons_  functions  as to have mytheme_commons_  functions correctly named and 2 change in theme/mytheme_commons/panels/twocol_30_70.inc and twocol_70_30.inc, so you may continue to use panel and skinr configuration settings feature.

Note:

 I prefer to use sweaver.module just to see immediately what my change will render and indicate me where CSS code changes can be rightly made.

 I worked for about 1 hour and here the result.

 

EDIT: you may want to see the theme live? ok go to community.thanage.eu

note: this is just a test site so please post your feedback or questions here, thanks.

Comments

wolfflow
wolfflow1 year 39 weeks ago

A more complete screeshot

A more complete screenshot you may see here

WH Hammond
WH Hammond1 year 18 weeks ago

My Commons Theme Changes

Why exactly did you change these:

"2 change in theme/mytheme_commons/panels/twocol_30_70.inc and twocol_70_30.inc, so you may continue to use panel andskinr configuration settings feature."

And, what exactly did you change?

I skipped this change and haven't seen a difference...yet...?

wolfflow
wolfflow1 year 18 weeks ago

 The changes are only needed

 The changes are only needed if you want to start to work on a custom theme not as subtheme of acquia_commons default theme.

 At the beginning there were some issues building sub-theme so I started with an independent on but still compatible and working with Fusion Core theme.

WH Hammond
WH Hammond1 year 17 weeks ago

K ool

Ok, cool.

I like the default theme, so far. I just wanted my own copy that wouldn't be overwritten on upgrades.

Thanks for your quick response in clarification. It's appreciated.

jay
jay1 year 39 weeks ago

Very cool!

A good example of how a short time of work can result in a good new branding!

Thanks for showing us the example.

-jb

wolfflow
wolfflow1 year 39 weeks ago

Thanks @Jay

I really appreciate and of course without the base Acquia_Commons Theme I would have worked almost a months to get an almost usable theme!!

bribiz
bribiz1 year 37 weeks ago

Nice -- try other fusion themes?

One feature I liked when I first looked at commons was that it's theme was based on fusion.  I previously modified the Acquia Prosper theme for another site.  I wanted my community to match so all I had to do was copy my Acquia Prosper theme to my commons site so they matched.

I defined my columns as a percentage in the theme config.  Using Skinr I'm able to control the look and feel of the blocks.  One trick I learned was that you have to change the style of blocks in panels displayed through panels.  Otherwise blocks set with context can be set by clicking the skinr icon on the block.

For me this also means I haven't had to change anything in code yet.  I still have more work to do but I continue to like commons.

wolfflow
wolfflow1 year 37 weeks ago

Thanks @bribiz, with your

Thanks @bribiz,

with your comment I may figure out a bit how to use Skinr  to be honest I did not found yet a good documentation about

so if you know a good link I would appreciate to know and give it a try. 

mysty
mysty1 year 36 weeks ago

Hey wolfflow this is a great

Hey wolfflow this is a great guide for people new to Fusion/Skinr - thanks so much.

Of course the next step to customisation for one's community has got to be the themeing, so this is  really very useful!

Most importantly, thanks for referencing the amazing looking sweaver! What a time save this could be for CSS n00bs like me

wolfflow
wolfflow1 year 36 weeks ago

Hi @mysty, thanks. I'm glad

Hi @mysty, thanks.

I'm glad you appreciate. Please take also look at this quite detailed Theme customizing Wiki post:

 How to create a new theme from the Acquia Commons theme

tempster
tempster1 year 18 weeks ago

Fusion Local.css

I tried the sweaver module in Drupal Commons and I found that some of the changes made via Sweaver do not show up.   The Acquia C0mmons theme  seems to override some of the mods done by the sweaver module.

Based on my limited experience with Drupal Commons and the Sweaver Module, the Sweaver Module works best if you set the Fusion Core theme as the default theme and work from there.

I only wanted to make some rather minor changes to the Drupal Commons theme and I found that following Fusion Core's documentation for creating a local.css file worked best for me.  For Drupal Commons, I was able to change the background color, the color of a:link text and the background color of the tables by putting modified css from the Acquia Commons theme into the local.css file.

wolfflow
wolfflow1 year 18 weeks ago

Yes, you are right

 Actually after having build really a quite number of custom themes for Drupal Commons , using the local.css  way is far more simple and stable. 

 Thanks for pointing to.

tempster
tempster1 year 16 weeks ago

sweaver module good on test install

The sweaver module on a local desktop installation of Drupal Commons (either via damp stack or EasyPHP) is very useful for identifying CSS code.  For example, if you install and turn on the sweaver module on a test install, if you simply click on anything on Drupal Commons, the sweaver module will identify the relevant CSS code .  You can use the sweaver module to experiment with custom CSS changes without making the changes permanent.  Once you id what CSS code needs to be modified, you can copy the relevant code from the Drupal Commons Theme CSS, modify it and paste it into a local.css file.

While I would not use the sweaver module on my production Drupal Commons sites, I probably would not have known what CSS code to modify if I had not used the sweaver module on a Drupal Commons test site to identify the relevant css code.  Drupal Commons seems too "complex" to add another complexity (the sweaver module) to the mix when you don't have to.