Install Colrrr just like any premium plugin.
- Download the plugin file (.zip)
- Upload it to your WordPress plugins page
- Activate the plugin
- Enter your license key
*Your license key can be found in your account page.
Colrrr turns blocks into a random color with click to copy — based on applying the ‘colrrr’ class.
Create color blocks
- Create your layout. It can be anything you wish.
- Select the block you want Colrrr to do its magic on
- In the options panel, under the “advanced” section, add the ‘colrrr‘ class
That’s it. Colrrr will turn the block into a random color and make it “click-able” to copy the copy too.
Create a button to refresh colors
- Add a button or link to your page
- Set the link to #
- In the options panel, under the “advanced” section, add the ‘colrrr-btn‘ class
That’s it. Colrrr will refresh the colors whenever the button is clicked. Also, you can style the button any way you want.
Create a list of clicked colors
- Add a custom HTML block to your page
- Paste this inside: “<div class=”colrrr-list”></div>”
Now Colrrr will append the colors clicked in the location you pasted this code.
Colrrr has automatic updates (when your license is active). Just click the update link on your plugins page.
Move license to new site
If you wish to move your copy of Colrrr to a different site, no problem. Here’s how:
- In the Colrrr options page, deactivate your current license
- On the plugins page, deactivate Colrrr, and delete it
- On the new site, upload Colrrr and activate it
- Finally, activate your license on the new server
The most common issue is applying the wrong class. Remember, the class to apply is ‘colrrr’ with no ‘o.’ It’s very easy to apply ‘colorrr’ and not catch it.
Block doesn’t show random color
If you’re applying the colrrr class to an empty block, make sure the block has some padding (or put a spacer inside it) — or else the block won’t have any height/width.
I’ve applied colrrr class correctly, and containers have width/height, but no colors
First, check that Colrrr is installed and activated. If it is, there could be something preventing the files from loading. While I do my best to prevent caching/minification/combination issues — there could still be something.
If you use Google Chrome, check the developer tools. The console may show you an error to resolve. Or look in the “network” tab to verify the colrrr.min.js JS script is loading.
If it is not loading, or there is an error, there could possibly be an issue caused by another plugin to resolve. Check cache plugin settings, or some performance plugins that prevent scripts/plugins from loading.