Then I carefully position it over my design reference until the important features match. To make it easier to match sizes and spaces, I use WinWarden to make my browser window 20% translucent. If you want to change the shortcut key, the source is available as an AutoHotkey script. This shows the hex code for colors, and allows me to quickly copy the code with the F12 shortcut key. To quickly get the color of a pixel, I use WhatColor. If I want to figure out the values for a few simple changes, I’ll sometimes make the changes directly in Chrome (you can use arrow keys to adjust values), then copy the values to my Sass source file.Ī second monitor is totally awesome and well worth it.ĭesigns rarely specify all the colours, sizes, and spacing needed. This makes it easy to manually toggle the display of some elements while allowing me to refresh style rules. Most of the time, I make my CSS changes in the text editor, then use the CSS Reloader to reload the stylesheet without refreshing the page. The Chrome CSS Reloader extension is handy, too. I prefer doing the initial tweaking in Google Chrome, because I like the way that the developer tools make it easy to modify the stylesheet. You’ll need Ruby in order to install Sass, but the tool will give you CSS that you can use on any web platform. This makes my code cleaner and easier to write. I use Sass (Syntactically Awesome Stylesheets) so that I can use nested selectors, variables, and mixins. I rarely do CSS/front-end theming work, but when I do, I try to make it as fun and easy as back-end development. Since that seems like something other people might find handy, here it is. I told her about how I do my CSS theming, and she pulled another coworker over and made me repeat the explanation. “Why is your window transparent?” a coworker asked me when she noticed my screen. Unfortunately, there is no div that encloses both the header and the preview. Our workaround is to use CSS to hide both the preview and the header above it. The gradient is created by color.js, and there doesn’t seem to be a way around it. The Color preview appears to use hardcoded HTML.Color rewrites the stylesheet, so changes aren’t picked up until the stylesheet is regenerated. It’s probably a good idea to add a comment to your style.css reminding developers to resubmit the colour settings after making changes to the stylesheet.This can lead to interesting combinations. Copy the color directory from the Garland theme into your themeĬolor will attempt to figure out unspecified colours based on those colours’ relationship with the base colour.So, the easy way to colourize your theme: In your stylesheet, make sure your base colour uses the shortened version (ex: replace #cccccc with #ccc) or use a very similar colour instead (ex: #cbcbcb). If the base colour is found in the stylesheet, it will be replaced by an empty string. Any colour that exactly matches one of the colours defined in the default scheme is replaced by the colour in the selected scheme, with the caveat that the base colour should not appear in the stylesheet. You will also need to follow the Drupal 6 or Drupal 7-specific instructions for calling the Color module when preprocessing pages.Ĭolor searches your style.css (and imported stylesheets or other stylesheets defined by the ‘css’ part of your $info array) for colour definitions. The documentation wasn’t clear, but the easiest way to get started seems to be to copy the color/ directory from the Garland theme into a subdirectory of your theme, and then customize it from there. The first trick was to get the colour picker to show up on the theme settings page. Color rewrites your CSS to include the user-configured colours, and adds the resulting stylesheet link to your header. We spent a few hours trying to figure out how to use Color to make our custom Drupal 6 theme configurable.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |