-
Notifications
You must be signed in to change notification settings - Fork 1
Palette creation tutorial
The easiest way to create a new palette, that is compatible with BlockPress themes, is to copy an existing one into your palette directory, rename and edit it. Once you know what colours you are going to be using you can do 'find and replace' on the colour codes and edit their names.
Note that palettes do not include styles such as font types, sizes, positioning, alignment etc. These are defined in the theme. All you define are colour values of the theme elements.
Each BlockPress palette is structured in a similar way. This section describes this structure.
At the top of the file, there is a list of included colours together with their hexadecimal and RGB values. This section is helpful when you are editing and debugging your palette. It does not include any CSS and it's commented out. RGB values are useful when defining gradient and opacity. Do not forget to replace them when you are editing existing palette. This section should include all colours used in the palette, you can add and subtract from it as you edit to keep it up to date.
Next comes a list of standard HTML classes. It's good to define them even if you plan to overwrite them with more specific classes and ids.
This is the main bulk of your palette. Generic classes are assigned to different elements of theme HTML. If you are creating a palette for personal use only you might not need all of them. Defining all of the generic classes ensures that your palette is compatible with all official BlockPress themes and it's highly recommended for this reason. See Developer reference for further details.
This section can include both classes and id's and its function is to overwrite the generic classes and other styles in the module templates.
Once you edited the palette file you want to see how it looks and tweak it. To do this you have to implement it first. Type its name inside the quotation marks under 'palette' section of your local config file. It's positioned third from the top, right under 'tagline'. Now your palette is ready to preview.
Once you preview your palette you might notice that some elements do not look so good. Perhaps the link colours blend too much with a background of the banner image, or you text shadows look bad on some of the headers. If the issue is with a particular instance of the generic class, it is best to fix it using ids. This way you are decreasing a likelihood of a conflict with styles when your palette is being implemented with another theme.
If you created a palette for personal use only you are ready to go. If you want it to be compatible with other BlockPress themes you will need to test it with each one individually to ensure compatibility. We implemented generic classes to make this step easier so hopefully, you will not need to change much if anything at all.
Back to Styling