Writing a stylesheet for FirstMagic

FirstMagic User Guide: CSS

lf you are familiar with CSS you can customize FirstMagic websites to any degree: there are no limitations to what kind of design you can implement.

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.

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.

Get Started:

Open Setup --> SkinDesigner, and select the SkinDesigner radio button on the upper right, then select the CSS Preset: 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.

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

Page titles

.date

Header metadata in documents [in contentheader: Date and Byline below H1]

Sidebar titles, large contentbox titles [in major inline elements]

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.]

.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

Note: other classes exist for generic formatting but should not be needed for normal design purposes. Browse the page source...

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

Introduction

Own your website

QuickStart: Publish your first web page

The Website Root

The FirstMagic Setup form

Using Templates and Layouts

HOW-TOs: useful tips and tricks

Editing in FirstClass - best practices

Extend your site with Widgets

Managing Inbound Messages

Using the Library

Writing a stylesheet for FirstMagic

FirstMagic Pro

Copyrights and Credits

Where to purchase FirstMagic

Top of this page • Print this page

FirstMagic 2.0