Becoming Friends With The Drupal Color Module - Part 1 - Mearra

Becoming friends with the Drupal Color module Part 1 | Mearra
English
Page 1
Business of Open Technology
Business
Open Technology
Clients
Working at Mearra
Blog
Contact
Becoming friends with the Drupal Color module Part 1

25. November 2011 - 17:09 -- Sampo Turve
Sampo Turve
Planet Drupal Sampo has over 4 years of experience in working as a developer on digital media projects. Sampo has been working intensively with Drupal since 2007 and has strong knowledge of web programming languages and web standards. As Mearra's youngest employee Sampo can be lovingly teased by calling him a Wunderkind. ;) That said, Sampo enthusiastically takes on large projects with impressive results. Sampo is located in Mearra's Turku office.
Drupal 7
Color module
Theming
Modules
This is a tutorial how you can easily take advantage of Color module on your custom theme on Drupal 7. Color is a module that comes with the Drupal core. It offers very nice re-coloring of your theme with minimal coding. Many popular themes are taking advantage of the Color module, such as AdaptiveTheme, BlogBuzz, Pixture Reloaded, RootCandy, Sky and multiple others.
Part 1: Basic Color module settings

This is the basic configuration part of your friendship with Color and will only handle the background color/text color changes. The Part 2 (coming up!) will take your relationship with Color into a more intimate level. So let's get started with the basics. Since Color comes with the Drupal core, it's very humble with requirements. Here are the only things that you really need: A custom theme Color module enabled Few lines of code There's an archive attached at the bottom of the post with the implementation that I'm going to create here. I suggest you to read through this and then download it. I have a simple theme that looks like this by default. I'm going to add Color module's functionality in it and guide you through it:
This serie
Becoming friends with the Drupal Color module Part 2
Blogauthors
Agnese telce Cristian Andrei Emma Mkinen Ernests Gabrns Henri Hirvonen Ilari Mkel Ilze Zaria Jani Palsamki Joonas Kiminki Juha Niemi
http://mearra.com/blogs/sampo-turve/becoming-friends-drupal-color-module-part-1
19/06/2012 21:26:36
Page 2
Teemu Merikoski
Step 1. If you don't have a custom theme, create one. It's easy. I will be using my custom theme called
Tomi Mikola Vesa Palmu
ss in this tutorial.
Step 2. Create a directory called color into your custom theme directory (I have: sites/all/themes/ss/ color). Step 3. Add file called color.inc to the color folder (I have: sites/all/themes/ss/color/color.inc). Step 4. Add a image file called base.png to the color folder. We don't use this on the basic configuration but Color requires it. You can copy one from the attached archive at the end of this post or here. Step 5. Create a CSS file called colors.css into your theme's directory where you have your CSS styles located (I have: sites/all/themes/ss/styles/colors.css) Note: We could also use the theme's default
Latest inMearrablog
Setting up Drupal development environment using Ubuntu and VirtualBox

Henri Hirvonen - 20.6.2012
stylesheet that you might have, but I prefer to keep Color module stuff in its own file.
Now your theme directory should look something like this:
Publish your module code It's the best thing for you and your customer
Joonas Kiminki - 18.3.2012
Can you offshore Drupal

Step 6. Lets roll and add some color configurations to the color.inc file. To keep it simple: Now we're creating a simple array called $info that contains all the information that we want to give for Color. First, lets define the possible replacing patterns for the user to choose. Simple key => value pairs with translatable label through t().
work?
Vesa Palmu - 15.3.2012
<?php /** * PART 1. Basic Color module settings */ $info = array(); // Define the possible replaceable items and their labels. $info['fields'] = array( 'bg' => t('Main background'), 'link' => t('Link color'), 'text' => t('Text color'), 'titles' => t('Titles'), 'menu_item_color' => t('Menu item link color'), 'menu_item_a_bg' => t('Menu active item background color'), 'menu_item_a_color' => t('Menu active item link color'), );
Step 6.1. Then let's define the color schemes for the site. Keys in here are the same ones that were used above. The Hex color code values (for example #ffffff for white, #ff7f00 for orange, etc) are the values that the Color module is going to replace from our CSS file (will be defined later). Good note by Kristi: You should use only lowercase letters, otherwise Color won't pick up your colors correctly. Here we have two schemes defined, one called default (Our site default colors) and one called drupal_
Boosting happiness at Valmiera office

Ilze Zaria - 8.3.2012 MORE
Getintouch
Helsinki
+358 20 7912 940 Emma Mkinen
Riga
+371 29 849 696 Ernests Gabrans
Turku
+358 44 010 0667 Juha Niemi
Valmiera
+371 26 426 777 Mikelis Zalais
love (Drupal Love).

// Color schemes for the site. $info['schemes'] = array( // Define the default scheme. 'default' => array(
MORE
19/06/2012 21:26:36

'link' => '#ff7f00', 'text' => '#777777', 'titles' => '#333333', 'menu_item_color' => '#666666', 'menu_item_a_bg' => '#eeeeee', 'menu_item_a_color' => '#000000', ), ), // Let's create a scheme called Drupal Love. 'drupal_love' => array( // Scheme title. 'title' => t('Drupal Love'), // Scheme colors (Keys are coming from $info['fields']). 'colors' => array( 'bg' => '#008CFF', 'link' => '#ffffff', 'text' => '#ffffff', 'titles' => '#ffffff', 'menu_item_color' => '#000000', 'menu_item_a_bg' => '#ffffff', 'menu_item_a_color' => '#000000', ), ), );
Step 6.2. Now it's time to add the stylesheet into the mix. Remember the colors.css we created couple steps back? (I have sites/all/themes/ss/styles/colors.css). We have to inform the Color module that this is the file we want it to use. This also goes to the color.inc :
Page 3
// Define the CSS file(s) that we want the Color module to use as a base. $info['css'] = array( 'styles/colors.css', );
Step 7. Your theme should also be aware that there's a new stylesheet. Add this into your theme's .info file (I have sites/all/themes/ss/ss.info).
; Add our stylesheet for the Color module to override. stylesheets[all][] = styles/colors.css
Step 8. CSS properties. Pretty simple styles, just for the body and menu item backgrounds and some text colors. Note: The Hex color codes are the same than the ones we defined in the previous step's default scheme.
/* Site background color */ body { background-color: #ffffff; color: #777777; } /* Lists */ ul, li, ul li.collapsed, ul li.expanded, ul li.leaf { color: #777777; } /* Site titles */ h1, h2 { color: #333333; } /* Main content area links */ #main-content a:link, #main-content a:visited, #main-content a:hover, #main-content a:focus, #main-content a:active { color: #ff7f00; } /* Main menu links */ #site-menu ul li a { color: #666666; } /* Main menu active links */ #site-menu ul li.active-trail a, #site-menu ul li a.active { background: #eeeeee; color: #000000; }
19/06/2012 21:26:36

<?php /** * Implements template_process_html(). * * Override or insert variables into the page template for HTML output. */ function YOURTHEMENAME_process_html(&$variables) { // Hook into color.module. if (module_exists('color')) { _color_html_alter($variables); } } /* * Implements template_process_page(). */ function YOURTHEMENAME_process_page(&$variables, $hook) { // Hook into color.module. if (module_exists('color')) { _color_page_alter($variables); } }
Step 10. Advanced options. We are not going to get deeper into the advanced options in this chapter, but we must give Color some default values for these. Otherwise it's going to be angry and throw up a tons of errors. We're handling these settings more in the Part 2 (coming up!). I strongly recommend to take a peek of those settings in that chapter. If you want to just mess around with your site background colors, you can just copy this stuff here to your color.inc file and leave it there.
Page 4
/***** Advanced Color settings - Defaults. Will be used in the Part 2. *****/ /** * Default settings for the advanced stuff. * No need to edit these if you just want to play around with the colors. * Color wants these, otherwise it's not going to play. * * We dive deeper into these in the Part 2. Advanced Color settings */ // Files we want to copy along with the CSS files, let's define these later. $info['copy'] = array(); // Files used in the scheme preview. $info['preview_css'] = 'color/preview.css'; $info['preview_js'] = 'color/preview.js'; $info['preview_html'] = 'color/preview.html'; // Gradients $info['gradients'] = array(); // Color areas to fill (x, y, width, height). $info['fill'] = array(); // Coordinates of all the theme slices (x, y, width, height) // with their filename as used in the stylesheet. $info['slices'] = array(); // Base file for image generation. $info['base_image'] = 'color/base.png';
Step 11. You need to clear the caches of your Drupal site and let your theme know about the new files. Head to your site's Performance section (admin/config/development/performance) and click the 'Clear all caches' button. Step 12. Enable the Color module if you already haven't. Step 13. Visit your theme settings page (I have admin/appearance/settings/ss). Now the Color module has detected that you have its stuff in your theme directory, and is showing you the color picker:
19/06/2012 21:26:36
Page 5
Step 14. Ready. Now you can select from your predefined schemes or with just a couple of clicks, you can turn your site into a pink dream!
P.S. If you have issues with the fields not appearing correctly at the settings form, take a look at Theme settings form should include newly added colorable elements. Attachment color-module-example-ss-basic.zip Size 54.55 KB
sampo turve's blog
add new comment
19/06/2012 21:26:36
Page 6
Wonderful Tutorial
Submitted by Samuel Ayela (not verified) on 27. November 2011 - 1:36 Thank you very much for such a wonderful tutorial.
reply
Hi,
Submitted by Perry Prabhat Jain (not verified) on 27. November 2011 - 22:57 Hi, Thanks for the tutorial, it worked, however I was not able to get preview image. I am using omega 3.0 theme. I will look forward for the next part in the series. Thanks, Perry.
reply
Hi,
Submitted by Sampo Turve on 28. November 2011 - 8:38 Hi, The preview builds out of three different parts: HTML, CSS and the Javascript that is handling the preview. It's not meant to be working in this basic tutorial. I will try to get the Part 2 out asap, and I will cover the preview handling there also.
reply
Omega
Submitted by Stijn (not verified) on 28. November 2011 - 15:28 Perry, I'm trying to get this working with Omega 3.0 to but something is going wrong.... Did you edit Omega itself or are you working with a subtheme?
reply
sub-theme of course!!
Submitted by Perry Jain (not verified) on 29. November 2011 - 21:47 sub-theme of course!!
reply
Excellent tutorial! I hope to

Submitted by Wahiaronkwas (not verified) on 28. November 2011 - 2:41 Excellent tutorial! I hope to make use of it soon.
reply
Thansk for this great article

Submitted by Drupal Theme Garden (not verified) on 28. November 2011 - 14:05 Thansk for this great article. Can't wait for part 2.
reply
19/06/2012 21:26:36
Page 7
This would be a great

Submitted by Heather (not verified) on 5. December 2011 - 12:29 This would be a great addition to the handbook! If you would be interested, this would be a great addition in the Drupal 7 theming handbook. You could link back to your site as the source if you wanted to. Do you need help figuring out where to put it? Email me :)
reply
Step 10.
Submitted by Syg (not verified) on 16. January 2012 - 12:37 Step 10. If you add the ['preview_html'] in the color.inc configuration array, the color module will search for the preview.html file in your theme directory. So you have to copy it from the module to your theme or delete this line from the config file. ---color.inc--// Files used in the scheme preview. $info['preview_css'] = 'color/preview.css'; $info['preview_js'] = 'color/preview.js'; $info['preview_html'] = 'color/preview.html'; ---color.module--// Attempt to load preview HTML if the theme provides it. $preview_html_path = DRUPAL_ROOT . '/' . (isset($info['preview_html']) ? drupal_get_path('theme', $theme) . '/' . $info['preview_html'] : drupal_get_path('module', 'color') . '/preview.html'); => This works for me without copying the preview.html file ---color.inc--// Files used in the scheme preview. $info['preview_css'] = 'color/preview.css'; $info['preview_js'] = 'color/preview.js';
reply
Did this throw any errors for

Submitted by Sampo Turve on 16. January 2012 - 13:30 Did this throw any errors for you if you're defining the preview.html and it doesn't exist? I haven't seen any. Not defining the $info['preview_html'] will give you the default preview output that relies on the default fields (text colors, titles, link colors). It might not be very accurrate since you don't have any logic for it. That's why I think it's better to have it hidden instead.
reply
Step 9.
Submitted by Syg (not verified) on 16. January 2012 - 13:08 Step 9. /* * Implements template_process_page(). */ function YOURTHEMENAME_process_page(&$vars, $hook) { // Hook into color.module. if (module_exists('color')) { _color_page_alter($variables); } } Be carefull $variables is different from $vars. You pass the wrong variable name.
19/06/2012 21:26:36
Page 8
Thanks for the update, that's

Submitted by Sampo Turve on 16. January 2012 - 13:25 Thanks for the update, that's simply an accident. Wonder why that's not spitting out any errors. Updated into the post.
reply
Case sensitivity in D7
Submitted by Kristi (not verified) on 17. February 2012 - 1:24 I spent a day trying to figure out a problem where the color module wasn't replacing my hex codes as expected, but instead was color shifting all my values. Turns out, the default color scheme is case sensitive! Check out: http://drupal.org/node/1415206.
reply
This is true, I kind of

Submitted by Sampo Turve on 17. February 2012 - 7:55 This is true, I kind of forgot to mention this. Updated the post, thanks!
reply
thanks
Submitted by bekasu (not verified) on 3. June 2012 - 6:04 thanks for the info and the link at the bottom referring to the problem encountered when adding a new colorable item to the 'custom' preset.
reply
Add new comment

Your name
E-mail
The content of this field is kept private and will not be shown publicly.
Homepage
Subject
Comment *
Save
Notify me when new comments are posted
19/06/2012 21:26:36
Page 9
Latest from Twitter
Stay up to date
Subscribe to Mearra's newsletter! We will send a newsletter twice a year to inform you
OlliErinko @kunfu_code #android, if you're buying a phone now. Might be worth waiting for iPhone 5 though.
20.06.2012 - 09:43
on the latest news and events.

E-mail... Subscribe
2012 Mearra
19/06/2012 21:26:36

Becoming Friends With The Drupal Color Module - Part 1 - Mearra

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Becoming Friends With The Drupal Color Module - Part 1 - Mearra

Загружено:

Авторское право:

Доступные форматы

Becoming friends with the Drupal Color module Part 1 | Mearra

Business of Open Technology