Frequently Asked Questions

Oct 21, 2019 - 11:40pm

 [F] Frequently Asked Questions  / Appearance  / Style Sheets (V5.0+)  /

Replacing the built-in stylesheet

Rate This FAQ
 (Not yet rated)

Created On: 3 Dec 2003 11:35 am
Last Edited: 3 Dec 2003 11:36 am

Question Email This Printer Friendly

Replacing the built-in stylesheet

Answer

You can totally replace the built-in stylesheet by turning off the default
stylesheet in control panel (or edit folder) > theme manager > edit theme
settings > global settings, and then replacing it with your own as
described in "adding a stylesheet of your own."

However, if you do this, the user font size controls won't work anymore
unless you tie into our existing system of variables.

This is how to do that:

* Your stylesheet must be WCTL-evaluated. (Perhaps the simplest way to
accomplish this might be to just edit our stylesheet, replacing it
entirely with yours. Otherwise you can use "add web page," put your
stylesheet on it, and afterwards edit it to set the content-type to
"*text/css" so it is evaluated as WCTL.)

* You must call the macro getCSSDefaultsAndVariables to set up some font
size/font face variables. This calculates the proper font size and face
to show, based on site defaults and user preferences.

* After this has been called, these variables are available, with
appropriate defaults built in.

 * ff - body text default font face
 * fs - body text default font size, in pixels
 * mff - monospaced default font face

An example of how they might be used:

.text {
 font-size: %% fs %%px;
 font-family: %% ff.fromSgml %%;
 }

There are a number of other variables available from
getCSSDefaultsAndVariables - the variable names are relatively
self-explanatory. However, these may or may not exist, and they may be
set to the text string "none" - so you need to check these things before
you use them. For example:

body,p,ul,li,td, th { 
 font-size: %% fs %%px;
 %% if wrap_TextColor && wrap_TextColor != "none" %%
  color: %% wrap_TextColor %%;
 %% endif %%
 }

Here's the complete list:

wrap_contentBgColor
wrap_TextColor
wrap_footerHoverColor
wrap_footerALinkColor
wrap_footerVLinkColor
wrap_footerLinkColor
wrap_footerFontColor
wrap_bannerHoverColor
wrap_bannerALinkColor
wrap_bannerVLinkColor
wrap_bannerLinkColor
wrap_bannerFontColor
wrap_multiHoverColor
wrap_multiALinkColor
wrap_multiVLinkColor
wrap_multiLinkColor
wrap_multiFontColor
wrap_navHoverColor
wrap_navALinkColor
wrap_navVLinkColor
wrap_navLinkColor
wrap_navFontColor
wrap_HoverColor
wrap_ALinkColor
wrap_VLinkColor
wrap_LinkColor