Del

Developer: Stylesheets

You can customize your site to any degree - there are no design limitations when writing CSS for FirstMagic.

For example, one can port a WordPress theme into a FirstMagic Skin - it is just a matter of replacing CSS class names and tweaking their values where necessary. If any extra functionality is needed for support, the /Library/HTML/ files can be used to include third-party html and Javascript.
The HTML and CSS files are only initially visible in the Web Developer Website Model. You can access them via the FirstClass Client Navigator Pane in any other model [shift-click the directory arrow in the Navigator Pane to display these items].

Note: FirstMagic has MooTools built in: if at all possible, use MooTools instead of jQuery for any extras - it will do the same job, and the footprint will be much smaller.


WRITING A CUSTOM FIRSTMAGIC SKIN IN CSS

Get Started:

  • Set the SkinDesigner to CSS. This will activate a field where you can insert the URL to your stylesheet.
  • You can host your stylesheet anywhere on the internet, but the field is pre-filled, and points to the FMskin.CSS example in /Library/HTML/. This is a commented, working example of a basic FirstMagic Skin, and is meant to be a jump-off-point.
  • You might want to import the stylesheet into some software you prefer to use and host it yourself - as long as you tell FirstMagic it´s URL, it will use it - you can code while the site displays your work in realtime.
The FirstClass Administrator can provide a number of FirstMagic Skins as different - some more complex - starting points than the default example. You can also get CSS support for building FirstMagic Skins at http://support.firstmagic.net


Overview - a list of the important classes in FirstMagic:

Structure
#wrapper
Wrapper div for everything in body
#page
Wrapper div for everything in body #wrapper exept for #footer
#header
Wrapper div for the logo and header widgets: use #headercontent to target the inline block. Note: it may be useful to target #header differently when #dropmenu do not exist - use body.nomenu #header
#dropmenu
The Top Menu wrapper. Use #dropmenu ul to access the actual menu, and #dropsearch to access the menu Search Widget
#pageframe
Wrapper div for #pagecontent, #sidebar, .contentfooter. The #pageframe div is special: it knows if #sidebar floats left, right or do not exist, and will position any background image accordingly [left | center | right].
#pagecontent
FirstClass contentarea wrapper if the site has #sidebar. If #sidebar do not exist, use #pagecontentsec
#sidebar
Sidebar content wrapper
#footer
The page footer outside #pageframe, outside #page, inside #wrapper


Inner content - divs
#headerticker
The Newsticker Widget
.contentheader
H1 & .date wrapper
.contentbody
Inline contentwrapper [wraps generated FirstClass content]
.contentbox
Wrapper for smaller inline objects [like Tiles, Condensed Blog entries, singular Calendar events]. Target Digital Signage boxes with .contentbox.timebox, .contentbox.event to differentiate between event elements.
.contentfooter
Footer widgets wrapper inside #pageframe
Note: .contentheader, .contentbody, .contentbox and .contentfooter should have identical margin-left and margin-right values to do perfect alignments.
.odd, .even
To alternate list items
.fctable
FirstClass generated old-style table that surrounds .fctext output
.paragraph
FirstClass generated div that surrounds .fctext output [inside table.fctable tr td]
.sidebaritem
Wrapper for items in  #Sidebar [ H2 + .fctable ]


Inner content - fonts
H1
Page titles
.date
Header metadata in documents [in contentheader: Date and Byline below H1]
H2
Sidebar titles, large contentbox titles [in major inline elements]
H3
Inline subtitles - very rarely used
a.toplink
Top-level links in the Menu: equivalent of #dropmenu ul li a
a.droplink
Second-level links in the Menu: equivalent of #dropmenu ul li ul li a
.current a
Active link in the Top Menu [.current a.droplink for singling out second-level]
H4, h4.fctext
Inline small-item box titles [like Tile titles and sub-titles in Widgets]
a.sidebarlink
Sidebaritem menu link [listing container link if in #sidebar]. Target with .fctext a.sidebarlink for block access
.fctext
FirstClass generated font declaration: fonts, sizes, colors and styles of editable body. Will default to Lucida Grande 13/16 if undefined, and is disregarded in the Freestyle template.

Note: For consistency, the .fctext class is also used on similar, non-generated elements [like exerpts in Tiles,  Condensed Blog entries, form labels etc.]
.wswrap *
FCWS disregards CSS font formatting [family, size and color]: it will not respect the .fctext tag, since it does not go through Internet Services. The .wswrap * tag will conform FCWS output to IS output, by overriding native FCWS HTML tags - it is basically a global .fctext tag.

To make sure content published from FCWS looks the same as content published with the traditional FirstClass Client, simply add your .fctext declarations to a .wswrap tag, like so:

.wswrap * {font-family:whatever !important;font-size:whatever !important;}

... Note the wildcard [ * ]; it is what makes the .wswrap declaration propagate down through all inline html elements.
.smallfctext
div that Inherits from .fctext, for smaller details [like inline timestamps, singular monthly calendar events]
.fcquote
FirstClass generated Quote class [class attached to any text using the FirstClass quoted style].

Note: very useful for creating exceptions to the .fctext class. For example, a .fcquote .fctext is by default used in FirstMagic to format inline links with quoted style as buttons identical to the .formbtn class.

A practical example use could be .fcquote .fctext {font-size:130%;} - to enable subtitle formatting inside FirstClass generated body text...
.todaydate
Only in monthly calendars: class to single out Today
#signature
Footer signature text [#footer #signature]. Useful to separate from #footer, #footer a colors and styles.


Forms elements
.label [.fctext.label]
Input Labels
.txtfield [input.txtfield]
Input + textarea. One can target search boxes with .txtfield.searchfield
.formbtn
button, submit
.searchsubmit
Search Widget submit button [formatted as graphic element]


Forms iframe elements
.commentbody
<body> class for iframe in Commenting Widget
.messagebody
<body> class for iframe in template forms [pages that are forms]
.minibox
#sidebar iframe class [iframe.minibox]
.fullbox
#pagecontent iframe class


Tweaks
body
Body can be addressed with a class to differentiate between UIs: body.website, body.mobilesite, body.digitalsign
All website elements can be targeted by Layout by adding classes to #wrapper: the class name will be the Layout name:
#wrapper.blogdir
Blog
#wrapper.newsdir
Condensed Blog + Daily Calendar View
#wrapper.portaldir
The Portal container if the site is in Tiles -> Expanded Mode [use #wrapper.tilesdir if not]
#wrapper.tilesdir
Tiles
#wrapper.listingdir
Listing Container
#wrapper.gallerydir
Gallery
#wrapper.podcastdir
PodCasts
#wrapper.tabsdir
Tabs
#wrapper.firstclassdir
Normal FirstClass conferences and folders
#wrapper.webpage
All document and template types
#wrapper.calendarmonth
Monthly Calendar View
All website elements can be targeted differently depending on if the site has a Top Menu or not by adding a class to body:
body
No distinction
body.nomenu
Any element if the Top Menu does not exist [can be useful to reposition #header]
The #pageframe div is special: it knows if #sidebar floats left, right or do not exist, and will position any background image accordingly [left | center | right].
#pageframe
{background-image:(whatever)} ... With no positioning declaration allows you to attach an Y-tiling backdrop that is 3x wider than the page: the visible portion will always follow the #sidebar div around...
#wrapper
#page

#header
#dropmenu
#pageframe
#pagecontent
#sidebar
.contentfooter
#footer