Styling Nodes
|
This is documentation for the new styling nodes - need to review. |
wpStyles
This node is inserted into a canvas to control the styles (appearance) of a variety of elements in specific nodes, such as the newslist node or the RSS Feed node. This style node was introduced to further enhance the flexibility in styling sepcific elements of a node. For instance, a newlist item may have:
date - The date of the news item
synopsis - A broief synopsis of the news item
link - A link which on-click will take you to the detailed news article
In this scenario the designer may want to have a unique font style for the date and synopsis, and in turn have a unique link style which over-rules the cascading style for that particular design. This node allows you to do all of this
Where to use this node
Sub Nodes
| Name | Type | Help |
|---|---|---|
| style | wpStyle | This is an instance of a group of styles for a specific WebPal node, such as the newlist or RSS Feed node. |
Sample
wpStyle
This is an instance of a group of styles for a specific WebPal node, such as the newlist or RSS Feed node.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|---|---|---|
| name | oneof | text, standard_table, newslist, rss, webform, agenda, stafflist |
Sub Nodes
| Name | Type | Help |
|---|---|---|
| font | wpNodeStyle | This will define the font styles of the selected element. |
| link | wpNodeLinkStyle | This will define the link styles of the selected element. |
| boxstyle | wpNodeBoxStyle | This will define the box styles of the selected element. |
Sample
wpNodeStyle
This is the node which represents font styles withing the style node.
Inherits from:
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|---|---|---|
| name | oneof | standard_table, standard_table_header, standard_table_header p, standard_table_header h1, standard_table_header h2, standard_table_header h3, standard_table_header h4, standard_table_header h5, standard_table_header h6, standard_table_cell, standard_table_cell p, standard_table_cell h1, standard_table_cell h2, standard_table_cell h3, standard_table_cell h4, standard_table_cell h5, standard_table_cell h6, standard_table_highlight, text_standard_paragraph, text_page_heading, text_sub_heading, text_subsub_heading, text_numbered_list, text_unordered_list, text_list_item, text_quote, text_formatted, text_code, newslist, newslist_item_title, newslist_item_date, newslist_item_synopsis, newslist_item, newslist_item_highlight, newslist_button_row, newslist_button_archive, newslist_button_rss, rss, rss_item, rss_date, rss_link, rss_description, webform, webform_title, webform_page, webform_actions, webform_action_email,webform_action_clear, webform_action_database, webform_action_url, webform_group_title, webform_label, webform_element, webform_radio, webform_checkbox, webform_help, webform_checkboxlist, webform_input_field, webform_field_stacked, webform_field_sidebyside, webform_group_stacked, webform_group_sidebyside, agenda, agenda_left, agenda_left_highlight, agenda_right, agenda_right_highlight, agenda_header_left, agenda_header_right, stafflist_name_details, stafflist_title, stafflist_title_details, stafflist_other |
Sample
wpNodeLinkStyle
This is the node which represents link styles withing the style node.
Inherits from:
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|---|---|---|
| name | oneof | standard_table_cell, newslist_link, rss_link, stafflist_name_listings | |
| action | oneof | normal, visited, hover, active | |
| color | optional |
Sample
wpNodeBoxStyle
This is the node which represents box styles withing the style node.
Inherits from:
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|---|---|---|
| name | oneof | text_standard_paragraph, text_page_heading, text_sub_heading, text_subsub_heading, text_numbered_list, text_unordered_list, text_list_item, text_quote, text_formatted, text_code, standard_table, standard_table_header, standard_table_cell, standard_table_highlight, newslist, newslist_item_title, newslist_item_date, newslist_item_synopsis, newslist_item, newslist_item_highlight, newslist_button_row, newslist_button_archive, newslist_button_rss, rss, rss_item, rss_date, rss_link, rss_description, webform, webform_title, webform_page, webform_actions, webform_action_email, webform_action_clear, webform_action_database, webform_action_url, webform_group_title, webform_label, webform_element, webform_radio, webform_checkbox, webform_help, webform_checkboxlist, webform_input_field, webform_field_stacked, webform_field_sidebyside, webform_group_stacked, webform_group_sidebyside, agenda, agenda_left, agenda_left_highlight, agenda_right, agenda_right_highlight, agenda_header_left, agenda_header_right |
Sample
wpFont
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|---|---|---|
| face | oneof | default, Sans-Serif, Serif, Fixed, Arial, Verdana, Courier, Comic Sans MS, Helvetica, Newspaper, Lucida, Tahoma, Terminal, Utopia, Century Gothic, Georgia | |
| size | oneof | default, 5pt, 7pt, 7.5pt, 8pt, 8.5pt, 9pt, 9.5pt, 10pt, 11pt, 12pt, 14pt, 16pt, 18pt, 20pt, 22pt, 26pt, 32pt, 48pt, 72pt, 0.500em, 0.583em, 0.667em, 0.750em, 0.833em, 1.000em, 1.167em, 1.333em, 1.500em, 1.667em, 2.000em, 2.500em, 2.667em, 3.000em, 3.333em, 4.000em, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 19px, 20px, 21px, 22px, 23px, 24px, 30px, 32px, 36px, 40px, 48px, 50px, 60px | |
| line-height | oneof | default, 17px, 18px, 19px, 20px, 21px, 22px, 23px, 24px, 26px, 28px, 30px | |
| weight | oneof | default, standard, bold, bolder, lighter | |
| style | oneof | default, normal, italic | |
| variant | oneof | default, normal, small-caps | |
| text-transform | oneof | default, none, capitalize, uppercase, lowercase | |
| stretch | oneof | default, normal, wider, narrower, condensed, semi-condensed, extra-condensed, ultra-condensed, expanded, semi-expanded, extra-expanded, ultra-expanded | |
| decoration | oneof | default, none, underline, overline, line-through, blink | |
| color | optional | ||
| background-color | optional | ||
| margin-top | oneof | default, 0px, 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 19px, 20px, 36px, 40px, 48px, 0pt, -5pt, -10pt, 5pt, 7pt, 8pt, 9pt, 10pt, 11pt, 12pt, 14pt, 16pt, 18pt, 20pt | |
| margin-left | oneof | default, 0px, 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 19px, 20px, 36px, 40px, 48px, 0pt, -5pt, -10pt, 5pt, 7pt, 8pt, 9pt, 10pt, 11pt, 12pt, 14pt, 16pt, 18pt, 20pt | |
| margin-bottom | oneof | default, 0px, 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 19px, 20px, 36px, 40px, 48px, 0pt, -5pt, -10pt, 5pt, 7pt, 8pt, 9pt, 10pt, 11pt, 12pt, 14pt, 16pt, 18pt, 20pt | |
| margin-right | oneof | default, 0px, 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 19px, 20px, 36px, 40px, 48px, 0pt, -5pt, -10pt, 5pt, 7pt, 8pt, 9pt, 10pt, 11pt, 12pt, 14pt, 16pt, 18pt, 20pt | |
| text-indent | oneof | 0pt, -5pt, -10pt, 5pt, 7pt, 8pt, 9pt, 10pt, 11pt, 12pt, 14pt, 16pt, 18pt, 20pt | |
| list-style-type | oneof | default, none, square, disc, cricle, katakana-iroha, hiragana-iroha, katakana, hiragana, cjk-ideographic, decimal-leading-zero, hebrew, lower-greek, upper-alpha, lower-alpha, upper-roman, lower-roman | |
| list-style-position | oneof | default, outside, inside | |
| text-shadow | optional |
wpFontStyles
Where to use this node
Sub Nodes
| Name | Type | Help |
|---|---|---|
| font | wpFontStyle |
wpFontStyle
This node may be added to a design node and describes the formatting of fonts used for your web site. Changes to his node will reflect on all pages created with WebPal.
The appearance of certain fonts used is set with these attributes: face: sets the font face. Ex: Verdana, sans-serif, MS Comicsize: sets the size. Ex: 12pt, 7ptweight: sets the weight of the font. 'bold' and 'standard' is allowed.colour: sets the colour of the font. Currently, the colour is set using a #RRGGBB code. a more convenient colour selector will be part of upcoming versions of WebPal. Leave this empty to have a default (usually black) font colour.background-colour: similar to the font colour, the background colour may be set. Leave this empty to have a transparent background.decoration: This may be set to 'underline' or 'none'paragraph-image: defines a stylisitic image which is displayed as a marker for each paragraph.
Inherits from:
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|---|---|---|
| name | oneof | standard, footnote, heading, heading1, heading2, heading3, heading4, heading5, heading6, paragraph, numbered list, bulleted list, quote, formatted, chapter-title, list-item-title |
Sub Nodes
| Name | Type | Help |
|---|---|---|
| paragraph-image | wpImage | |
| background-image | wpImage |
wpLinkStyles
Where to use this node
Sub Nodes
| Name | Type | Help |
|---|---|---|
| link | wpLinkStyle |
wpLinkStyle
Inherits from:
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|---|---|---|
| name | oneof | normal, visited, hover, active | |
| color | optional |
wpGroupBackground
You would use this node to add a background image or colour within a group.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|---|---|---|
| color | optional |
Sub Nodes
| Name | Type | Help |
|---|---|---|
| background-image | wpImage |
