Using Smarty to create a color set in your stylesheet_CMS Made Simple Development Cookbook-QQ阅读男频轻小说网

书名：CMS Made Simple Development Cookbook
作者名：Samuel Goldstein
本章字数：695字
更新时间：2025-02-22 11:23:11

Using Smarty to create a color set in your stylesheet

This recipe will show you how to use Smarty variables in your stylesheet to create a color set. By using variables for colors, we make it much easier to change the entire color scheme of a site by updating just a few lines at the top of our stylesheet.

Getting ready

For this recipe, you will need to have CMS Made Simple installed and working. You will need login access to the site's Administration area as a member of the "Admin" group, or as a member of a group with a fair number of permissions: "Add Stylesheets", "Add Stylesheet Associations", and "Manage All Content".

How to do it...

Log in to your CMS Administration area.
Using the top menu, go to "Layout" and click on "Stylesheets".
Click on the "Add a Stylesheet" button.
Enter "colors" into the"Name" field.

Enter the following stylesheet into the "Content" area:

[[assign var='dark_color' value='#2634cf']]
[[assign var='main_color' value='#4a76ef']]
[[assign var='background_color' value='#e0e4ef']]
[[assign var='highlight_color' value='#5fb7ff']]
body
{
color: [[$main_color]];
background: [[$background_color]];
}
h1, h2, h3 { color: [[$dark_color]]; }
a { color: [[$main_color]]; }
.currentpage
{
background: [[$dark_color]];
color: [[$highlight_color]];
}

Under "Media Types", click the checkbox for "all: Suitable for all devices" and then click"Submit".
Next to your stylesheet in the list, click on the CSS icon.

In the drop-down menu, select "Minimal Template" and click on the "Attach to this Template" button.
Using the top menu, go to "Content" and select "Pages".
Click on the "Add New Content" button.
Fill in the name of the new page as "Color Test Page".
Enter "Color Test Page" as the menu text.
For the page content, type in some sample text.
Click on the "Options" tab.
Select "Minimal Template" with the "Template" drop-down.
Hit the"Submit" button.
View your site from the user side. Click on the new "Color Test Page" page.
Admire the page!

Now, imagine that your client called, and wanted a red palette instead of a blue palette. In the Administration area, use the top menu to go to "Layout" and click on "Stylesheets".
Click on "colors" to edit your stylesheet.

Change only the first four lines to read:

[[assign var='dark_color' value='#9f1326']]
[[assign var='main_color' value='#ff3f59']]
[[assign var='background_color' value='#efe0e2']]
[[assign var='highlight_color' value='#ff8f9e']]

Click"Submit".
View your site from the user side. Click on the new "Color Test Page" page.
Admire the changes to the page.

How it works...

This recipe is an example of using variables to simplify your CSS. Instead of specifying colors directly in each style definition, we create variables for commonly used colors.

The first four lines of the stylesheet are where we create those variable definitions. For example, in the first line, we're creating a variable named "dark_color" and assigning it the value "#2634cf" — a value which represents a darkish blue color.

In the stylesheet below, whenever we wish to use that shade, instead of repeating the specific hex code for the color, we use the Smarty variable (as shown when we changed the color palette from blue to red). This approach minimizes the number of changes necessary to update the colors for an entire stylesheet.

Note

If you have worked with Smarty elsewhere in your site, for example, in page templates, it might surprise you that the Smarty commands are set off by the double bracket delimiters instead of the more commonly used curly braces. This decision was made because of the prevalence of curly braces in CSS definitions. If the delimiters had been left as curly braces, the CSS would have been so filled with Smarty {literal} and {/literal} tags that it would have been completely unreadable.

There's more...

While this recipe demonstrates using variables for colors, you can use Smarty variables for any string that might show up in your stylesheet. If there is anything that recurs throughout your stylesheet that you might want to change in a single place, this is a good way to do it. Some other interesting possibilities you might explore:

Font faces
Font sizes
List item bullet styles
Images