FORMATS & STYLE
FORMATS & STYLE
| By: clipweaver On: 2008/02/07 15:12 Shared: YES |
In CLIPWEAVER, the system has a default style for each of the stories. The style covers the font name, the font size, the font colour, and the background colour of the story.
For example, the default font for text is one of Ariel, Geneva, Verdana, or Sans-Serif, depending on your browser, with a default font size of 9pt. The default font colour is #333333.
Using what is called CSS (Cascading Style Sheets) styling code, you can change CLIPWEAVER's default appearance. In CSS code the default appearance is expressed like this:
You can change these settings to give your story a more individual look by inserting CSS coded instructions at the top of the story panel using the {style} macro.
For more background information sbout this styling see CSS Style
For information about how to alter the formatting and style of your story go to the items below:
USEFUL NOTE: To view the codes used to create formatting or links in other stories simply click on VIEW SOURCE at the bottom of the content page. You can copy and paste these instructions to your story page in the usual way.
Try it on this page using the VIEW SOURCE below.
Return to main HELP menu.
{style} font-size: 9pt; color: #333333; {style}DETAILS
|
| By: clipweaver On: 2008/02/07 16:50 Shared: YES |
In CSS each colour has a specific code, which is a # followed by a series of letters or numbers. You need to include these codes in the instruction to alter the background and font colours.
The {style} macro precedes and follows each set of codes. Each separate instruction is preceded with a colon and followed by a semi-colon as follows:
{style} background-color: colour code ; {style} REMEMEBER to spell color the American way! To find the codes associated with each colour go to CSS Colours You can also decide how much of the perimeter of the text area you want the colour to extend to. FURTHER HELP TEXT NEEDED HERE Click here to see some examples of the use of colour. Return to FORMATS & STYLE menu. Return to main HELP menu.
{style} background-color: colour code ; {style} REMEMEBER to spell color the American way! To find the codes associated with each colour go to CSS Colours You can also decide how much of the perimeter of the text area you want the colour to extend to. FURTHER HELP TEXT NEEDED HERE Click here to see some examples of the use of colour. Return to FORMATS & STYLE menu. Return to main HELP menu.
| By: clipweaver On: 2008/02/07 15:54 Shared: YES |
Beyond simply typing text and having it looking nice on the page you can modify the appearance yourself to get bold and italics for individual words. This is done by inserting symbols before and after the words you want altered.
By using the CSS codes you can also change the font style and size for the whole story. You can change:
FONT SIZE
To change the font size for the whole story type font-size: xx pt; between the {style} macros. Or you can set it to increase the size by percentages of the default size e.g. 130% would make the font size 30% bigger than the current size, and 70% would reduce the size by 30%.
FONT COLOUR
Type color: CSS colour code ; between the {style} macros. Go to http://www.somacon.com/p142.php for all the colour codes.
FONT STYLE
To apply italic to the whole text type font-style: italic ; between the {style} macros.
FONT WEIGHT
LINE HEIGHT
You can adjust the height of the lines by typing line-height: xx pts ; between the {style} macros. Or you can set line hight to increase or decrease by percentages e.g. 120% to make it 20% higher or 80% to make them 20% lower.
Return to FORMATS & STYLE menu.
Return to main HELP menu.
| Text formatting | ||
|---|---|---|
| __bold__ | bold | simple bold text |
| ~~italics~~ | italics | simple italic text |
- font family
- font size
- font colour
- font style
- font weight
- line height
| FONT FAMILIES | FONTS |
|---|---|
| serif | Times, Times New Roman, Palatino, Bookman |
| sans-serif | Geneva, Arial, Helvetica, Lucida |
| monospace | Courier, Andale Mono, Lucidatypewriter, Fixed |
| cursive | Comic, Comic Sans, Florence, Parkavenue |
| fantasy | Impact, Arnoldboeklin, Oldtown, Blippo, Brushstroke |
| By: clipweaver On: 2008/02/07 15:27 Shared: YES |
Paragraphs
(empty line) produces a new paragraph
Click here to see examples of headers.
Return to FORMATS & STYLE menu.
Return to main HELP menu.
| Headers | |
|---|---|
| To get headers just put one (or more) '1' (number one) in front of the header text: | |
| 1 Title | a level 1 heading |
| 1.1 Title | a level 2 heading |
| 1.1.1 Title | a level 3 heading |
| 1.1.1.1 Title | a level 4 heading |
| By: clipweaver On: 2008/02/07 16:52 Shared: YES |
Creating lists
Click here to see examples of list formats.
Return to FORMATS & STYLE menu.
Return to main HELP menu.
| - text | a list item (with -), several lines create a single list |
| * text | a list item (with *) |
| 1. text | an enumerated list |
| a. text | alphabetical enumerated list |
| A. text | uppercase alphabetical enumerated list |
| i. text | roman enumerated list |
| I. text | uppercase roman enumerated list |
| By: clipweaver On: 2008/02/14 12:34 Shared: YES |
A macro is a rule or pattern that specifies how a certain input sequence (often a sequence of characters) should be mapped to an output sequence (also often a sequence of characters) according to a defined procedure.
Return to FORMATS & STYLE menu.
Return to main HELP menu.
| Macros | ||
|---|---|---|
| {media: id} | embed a video or audio stream, for more detailed information see Embedding media in stories | |
| {clip: id} | embed a clip, for more detailed information see Embedding clips in stories | |
| {list: id} | embed a list, for more information see Embedding media lists in stories | |
| {image: url} |  | embed an image (photo), see for more information see Embedding images in stories |
| {story: user/name} | reference a story, for more information see Story Macro |
| By: clipweaver On: 2008/02/14 15:09 Shared: YES |
| Other | ||
|---|---|---|
| \\ | creates a line break | |
| \X | X | escape special character X (i.e. {) |
| ---- | creates a horizontal rule |