Getting started

• Main Page
• Tutorials

Sections

• Layout

Help

• Get assistance

Site design (Icy)

From Snowfire Wiki

What Icy can change

Icy is the tool in Snowfire used to change the design of your site/theme. Changes can be made to

Logotype

• Change logotype text
• Upload image which will replace the logotype text

Background

• Change background color by picking a predefined color, or by selecting any custom color with the colorpicker
• Change backdrop (this loads a new css, overriding the default)

Font

• Pick a font-set for the site, the set consists of a font for headers and a font for the paragraphs.

How do I configure this for my theme?

If you plan to make a theme, it must be Icy-ready! You control what can be changed by editing the Icy configuration file which is written in XML-format.

Icy configuration path and syntax

The XML file resides in your account folder:

/design-studio/toolbox.xml

It is configured with the toolbox tabs in mind, which means it has 3 main areas: background, font and logotype.

You need to add a css-link in your container.liquid for Icy. Please add this line right after the last css file:

{{ '../modules/icy/system/styletheme.css' | css }}

XML syntax

<?xml version="1.0" encoding="utf-8"?>
<theme>
	<name>simplicity</name>	
	<tabs>
 
		<background>
			<colors>
				<color>98bf24</color>
				<color>2a7ba1</color>
			</colors>
 
			<fields>
				<field>
					<selector>html</selector>
					<value>background-color</value>
				</field>
			</fields>
		</background>
 
		<font>
			<families>
				<family>
					<header>"Helvetica Neue", Helvetica, Verdana, Arial</header>
					<paragraph>"Helvetica Neue", Helvetica, Verdana, Arial</paragraph>
				</family>
				<family>
					<header>"Trebuchet", Tahoma, Arial, Verdana</header>
					<paragraph>Arial, Verdana</paragraph>
				</family>
			</families>
 
			<elements>
				<header>li a, h1, h2, h3</header>
				<paragraph>a, p, blockquote, blockquote p, span, body</paragraph>
			</elements>
		</font>
 
		<logotype>
			<maxWidth>550</maxWidth>
			<maxHeight>100</maxHeight>
		</logotype>
 
	</tabs>
</theme>

Name

<name>simplicity</name>

This line is the name of your theme only visible to the system, you can use whatever you want but no spaces here!

Logotype

Icy generates a png as your logo, you need to link to that png in your layout-files (tpl). It is recommended to use our resource function to avoid the browser caching the old logo. Wrap it in an element with class logotype so Icy can find it. The path is always the same:

<div class="logotype">
	{ fnc_resource (file:'../modules/icy/system/logotype.png', alt:'Logotype') }
</div>

Use toolbox.xml to change the size of generated png.

Font

The user can choose different font-packages with a font for the titles (header) and a font for the body (paragraph). You can tell icy which HTML-elements are titles and which are body, in the elements tag.

Background

There are two approaches to change background with Icy; either by a color-picker, which will affect the defined css-elements, or by switching between different overriding CSS-files.

Color-picker approach

<background>
	<colors>
		<color>98bf24</color>
		<color>2a7ba1</color>
	</colors>
 
	<fields>
		<field>
			<selector>html</selector>
			<value>background-color</value>
		</field>
	</fields>
</background>

The colors are the predefined color-boxes that shows up in the background tab. The fields tells Icy where in the CSS the changes should be. In this example, if the user picks the first colorbox, Icy would change the color like this:

html {
	background-color: #98bf24; 
}

You can put multiple comma-separated selectors to change more elements on the site, like this:

<field>
	<selector>#wrapper-top .content .menu li a, #wrapper-bottom a, #wrapper-bottom .content a</selector>
	<value>color</value>
</field>

You can also tell the colors of certain fields to behave within limits. Properties roof and floor sets the brightness limits, and the properties satroof and satfloor sets the saturation (strength of color) limits of the element. The color will never, on this element, go outside its limited bounds. The values are 0 to 1.

When using these values, a conflict could occur if you set the background color as bright or dark as the text on that background. If you set conflict to true like in the example below, this element will use the opposite brightness of the color picked.

Example of color limits and the conflict boolean:

<field>
	<selector>#wrapper-top .content .menu li a, #wrapper-bottom a, #wrapper-bottom .content a</selector>
	<value>color</value>
	<roof>0.95</roof>
	<floor>0.3</floor>
	<satroof>0.25</satroof>
	<satfloor>0.1</satfloor>
	<conflict>true</conflict>
</field>

This would limit the color to be pretty grayish in color, and never be total dark or total bright

Background approach (overriding css-files)

With this approach, the user selects a feeling rather than a color. Maybe different backdrops, or a combination of colors.

You need to add a css-link in your container.liquid for this mode. Please add this line right after the last css file:

{{ '../modules/icy/system/override-icy-output.css' | css }}

The syntax in the xml-config for this approach is a bit different:

<background>
	<colors>
		<color>
			<name>fields</name>
			<whitelogo>false</whitelogo>
		</color>
		<color>
			<name>citynight</name>
			<whitelogo>true</whitelogo>
		</color>
	</colors>
</background>

Instead of configuring colors and selectors, you now configure names of your different css-overrides. Whitelogo is exactly what it sounds like, false will use a black logotype text.

This is where the name tag is used:

Button graphics in the Icy toolbox:

• /design-studio/backdrop-button-<name>.png
• 142x47 px

The buttons switch to override-css files which will be the last loaded css in container:

• /design-studio/override-<name>.css