- CMS Made Simple Development Cookbook
- Samuel Goldstein
- 695字
- 2021-04-09 21:13:19
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
See also
- Using Smarty to do the math in your stylesheet recipe
- Using Smarty loops to generate similar stylesheet constructs recipe
- Photoshop 2022從入門到精通
- Photoshop CC 2017實戰基礎培訓教程（全視頻微課版）
- 中文版CorelDRAW X7基礎培訓教程（移動學習版）
- Photoshop CC超級學習手冊
- YUI 2.8: Learning the Library
- 計算機·手機生活應用
- 無師自通AutoCAD：中文版室內設計
- NHibernate 3.0 Cookbook
- 用Cubase輕松制作你的短視頻音樂
- PowerPoint 2013從新手到高手（超值版）
- OpenCart 1.4 Template Design Cookbook
- SVG動畫
- Moodle Course Conversion: Beginner's Guide
- Flash CC動畫制作與應用（第3版）
- After Effects 2023實訓教程