It’s known that theming in Drupal is not the easiest thing in the world. There’s generally a lot of markup to deal with, specific hooks and JavaScript behaviors can be confusing, and honestly – it’s takes a ton of time to build a new theme. Depending on the project, you are probably building a custom theme every time.
If you just need a new theme for your projects or client, what are your options? Well, you can build your own theme, you can buy a steam and got it, but what happens if you just need a theme that needs to change colors ever so slightly for mold see the clients. Well thats all you build automatic themes generation in using bootstrap and less. This gives us an easy way for clients to put in their own colors and generate a theme on the fly but makes it really easy to take a really nice looking themes and customize it on a first name basis.
You may find this concept similar to using the Color module in Drupal core, except the Color model is only swapping out different CSS files. We’re actually altering the variables that Bootstrap uses to regenerate the entire theme. We built this functionality into Open Enterprise we added less settings to our theme that allows you to insert a five different colors. There is a primary and secondary an accident and then to ditional accent colors, not all colors will be use it really depends on the steam, but the most important ones are the primary and the accident secondary. Now if you were to do this yourself, it really it is really important that you use the colors correctly and throughout your thinking process, it really all depends on how you use these variables on how you and set them up. We are also using the last module to compile these files using the last PHP library, once you add the variables to your info file, you actually get this nice UI that adds these setting feels that you can adjust. Now for our purposes we were the one to make this easier for the end user, so we added in a color library the jQuery color picker the let the client are in use or easily change which colors they want and you can see in the video. Some other fields you can add for instance we use bootstrap for almost all of her project how much as you can add additional variables you like to overwrite in blood in the trap variables file. This give me anything from the number of columns to demand padding on a button on to know great side, so really the the options are limitless, but you don’t want to give to me options to the user as it can get a little clunky and out of control. Now, looking at the scene we have, you can see the the we use the white and grey a lot as like standard base colors are at the theme to every version of him will have these, and we’re just going to be changing the primary secondary and accident colors with you’ll see that’s a lot of orange other similar grace and then we’ll add like an extra red or blue in there. Now we can go in and we went ahead and added a default button to our colors so you can always refer back to the default settings and we added a shuffle but so if you don’t like the order in which two colors appear, if you can change the month.
We’ve integrated a couple different modules to help out with making our themes a little more dynamic. The first one we wrote integrates a service called ColourLovers, a community platform that allows you to build your own color palettes and share them with the world. If I log into my personal account, you can see that I have a handful of color palettes in there: Honeypot, Sea Wolf, etc. By using ColourLovers, I can build my own list of palettes and pull them into our theme as palette options. This is great for designers who want to set up their own profile and have a handful of dynamic color palettes that they can rotate through based on the project. In the theme settings, just enter the desired username, hit submit, and you’ll then see a list of color palettes you can click on that will automatically fill in the color fields.
The second module is called Pictaculous. Created by MailChimp, it allows you to upload your own logo and then returns a color palette for that logo, as well as color palette suggestions from Adobe Kuler and from ColourLovers. Once I upload an image in the Pictaculous admin form, I can go back to the theme settings fuel then see the pic oculus module from sorry the color palette / to track it was in the other suggested by Adobe Kuler ColourLovers deacon now choose from in your color palettes. This is a great way to give the clients a little bit of flexibility in choosing the color palette for the site. And maybe they don’t have a color palette maybe they don’t have a designer I can, this is great way they can just upload the logo and get a pallet back from that. Now most of the time to look at work out will have 5 colors they don’t need to have 5 colors but in our case we just want to make sure we cover all of our bases. So what do we have so far, we have our bootstrap base team, we have are less model integration, we have ColourLovers, and take calculus, and putting all this together we can now generate scenes on automatically just by clicking a button. We’ve also added a “shuffle“ button to switch the colors around until you find one that works, and a “reset” button to change back to the theme defaults.