Community » Forums » Spark - Spark > Skinning Your Site's Look'n'Feel
February 18, 2010 9:07:09 AM PST (23 weeks ago). Seen 179 times.
Photo Aleksandar Gargenta
Partner
Marakana, Inc.
Member since Jan 19, 2007
Location: San Francisco
Posts: 72
Spark allows extensive controls over your site's loon'n'feel via a number of system settings.

By default, Spark loads four CSS files:
  • /css/layout.css controls the general layout of the site, including the sidebar, header, footer, and big containers/panels. While this file cannot be edited, it can be enabled/disabled via skin.default-layout.css.enabled system setting.
  • /css/common.css controls the common simple/inline elements of your site, like the formatting of numbers, notes, status-codes, etc. While this file cannot be edited, it can be enabled/disabled via skin.default-common.css.enabled system setting.
  • /css/style.css controls the basic style of the site, including fonts, colors, and general look'n'feel. While this file cannot be edited, it can be enabled/disabled via skin.default-style.css.enabled system setting.
  • /css/ie6.css contains CSS workarounds for Microsoft Internet Explorer 6. This file only gets loaded by IE 6, and it is ignored by other browsers. While this file cannot be edited, it can be enabled/disabled via skin.default-ie6.css.enabled system setting.


You can define your own CSS files, which would get loaded after the CSS files listed above - giving you ability not only to define new CSS rules, but also to override existing ones. We strongly recommend using Firebug for Firefox (or an equivalent tool on other browsers like Safari/Chrome) that can make it easy to understand the cascading rules.

Use the following system settings to point to your own static CSS files:
  • skin.css gets loaded without the media attribute, making it applicable to all media types (and all browsers).
  • skin.print.css gets loaded with media="print", making it applicable only for printing purposes.
  • skin.screen.css gets loaded with media="screen", making it applicable only for screen-display purposes.
  • skin.ie6.css gets loaded only for Internet Explorer version 6 and earlier.
  • skin.ie7.css gets loaded only for Internet Explorer version 7 and earlier.
  • skin.proposal.css gets loaded on the training proposal page. See below on how to enable/disable the embedded CSS on this page.


There are additional system settings that control other aspects of the user interface:
  • skin.favicon can point to a static file that becomes your site's favicon.
  • skin.javascript can point to a static file that gets load as JavaScript.
  • skin.html.head allows you to inject additional HTML at the end of the <head>...</head> section.
  • skin.proposal.style.enabled allows you to enable/disable the embedded CSS that gets loaded into training proposal page.
  • skin.html.body.begin allows you to inject additional HTML at the beginning of the <body>...</body> section.
  • skin.html.body.end allows you to inject additional HTML at the end of the <body>...</body> section.
Edited one time. Last edit by Aleksandar Gargenta on Jun 14, 2010 at 4:35:00 PM (about 5 weeks ago).