Content Management Systems (CMS) typically give you themes & schemes that give you the background style of your website. For LunpaCMS, the layout design & artistic possibilities are only limited by your imagination.
However, since things are easier when working with a palette, Color Manager helps by allowing you to organize that palette.
Color Manager starts you out with a default palette, which LunpaCMS uses automatically on various website elements. The palette is organized alphabetically by Color Description, which are simple shortcuts to automating the website color scheme. So, instead of memorizing which Hex Color Code needs to be used with a particular element, you only need to create a Color Description such as "soylent_green" and implement it for the element by using the code :::color_soylent_green:::.
Should you choose to use CSS, Color Manager is still a helpful back-end product to centralize color palette coordination. Update your stylesheet template with LunpaCMS Color Codes (e.g. :::color_soylent_green::: ) and you can see the full palette being used by your stylesheet under Color Manager. A simple tweak to the Hex Color of "soylent_green" under Color Manager ripples through the website whether directly or through CSS if you are using the the auto-updated CSS file.
Creating a simple color palette to display the main colors of a website for demonstrations is easy with the :::PALETTE::: tag. By default the tag creates a palette with 5 blocks: (background, text, heading_1, heading_2, heading_3). These are easily modified by adding an ARGS section to the tag (e.g. :::PALETTE:ARGS: color_1=heading_4&color_3=background :::). To add more blocks to the default 5, place a column argument in ARGS with the total number of blocks and add the colors by including color_# up to the number of columns you have. For example, if you want 7 columns: :::PALETTE:ARGS: columns=7&color_6=white&color_7=text ::: to add a 6th column with white and 7th with text. Other optional arguments are height and width of the palette as well as the title.
Getting the highest contrast between the text colors on the site and the background color is simple with the :::COLOR_CONTRAST::: tag. It chooses between the colors you have in Color Manager set for "text" and "reverse_text" and by default it compares them to the color set for "background" but it can be sent a different comparison color by using :::COLOR_CONTRAST:ARGS: comparison_color=<your color> ::: It will also warns site admins if the contrast ratio between the text and background color is lower than 5.
Example: <font color=:::COLOR_CONTRAST:::>example test<font>
All colors in color manager have an associated image in the images directory of the website that is a 1x1 pixel image. These images can be used alongside the :::IMAGE::: tag to create various images that can be used for styling on a website.
Example: If there is an image in your colors table that is called "link" the tag to make a bar image with the IMAGE tag would be:
:::IMAGE:color_link_pixel.gif:ARGS: maxwidth=250&maxheight=2&allow_upscale=1&allow_distortion=1 :::
|
Copyright © 2024 Peregrine Computer Consultants Corp. All rights reserved.
About Lunpa, our mascot. Her mother was a hamster and her father was an ill-tempered Chilean M00se. Oddly, neither smelt of elderberries. The artist is Jennifer Lomax. |
|
Add Your Comment