Style Manager

How to

1. Access Style Manager
2. Add or Edit a Style
3. Apply Styles to an Object
4. Edit or Remove Applied Styles
5. Apply Styles to a Masterpage
6. Apply Styles to Page Sections
7. Use Colour Picker

Other Topics on this Page

• Article Styles
• Hierachy of Styles

Accessing the Style Manager

To access the Style Manager you must be logged in with the administrator toolbar visible at the top of your screen. The Style Manager may be accessed in various ways. Two methods are outlined below:

• Via the Tools Menu - this governs styles for most objects.
• Via Objects on a page or Masterpage - to select individual styles for that object.

Tools Menu:

Select the button from the administrator toolbar. This will load the Tools Menu, from here select 'Style Manager'.

Individual Objects:

Selecting above each object while in 'edit mode' will load the Edit Article box on the left side of your browser window. The items displayed here are specific for the selected object. Some objects may have styles applied to them directly. For this option, click 'Select Object Styles' from this menu.

Style Manager:

For both methods above, the Style Manager will load, showing you a list of any styles already created within your site. Each style in the table will show the ID number, a name (identifying the style) and the current attributes of that style (displayed in 'CSS').

Up to ten styles will appear listed on each page. When more than ten exist in a folder the top of the Manager will change. Forward and back arrows allow movement through the pages. The drop down list on the right shows the ID numbers for the objects on each page.

Adding or Editing Styles

• To Add a new style to the Manager, select 'Add' from the Manager Options menu on the left of the Style Manager.
• To Edit an existing style, select the radio button next to that style's ID button and click 'Edit' from the Manager Options menu.

Clicking the 'Add' button or selecting 'Edit' for a particular style will show you a screen similar to the one below:

When creating a new style all of the values shown on this screen will be the defaults. The ONLY time you should change a value from the defaults is when you specifically want that change to take place. As an example, if your text is already displaying as black then do not select 'black' as the new 'Type Colour' - only change this if you want a colour other than black. By changing these values you add small levels of complexity to your layout. Adding too much complexity will make the system harder to manage long-term.

A more complex example might be that if you want to apply a background COLOUR to an object there is no need to set the 'repeat' attribute as background colours repeat by default. Images, on the other hand, do not.

Style Name

When creating a new style you must fill in this text box before saving. The value given here will appear in the Name column of the Style Manager. It is recommended that the title given to the style identifies the attributes of the style, or the location in your site where the style is applied.

Each of the tabs in the edit screen relate to different properties that can be set in the style. They are explained below:

Type	Attributes in Type relate to the appearence of text where the style is applied. You can also use the Article Styles to control the Type of the entire site. The properties that can be edited in Type are font, size, weight, style, variant, line height, case, decoration and colour. Most attributes in this section are selected via a dropdown list. Options in these dropdown lists are preset (font for example). They represent the standard type options that, when applied to your site, can be viewed by the majority of your users. Font Size and Line Height may be set by entering a whole number in that textbox. This value may be measured by one of various types, although pixels is recommended. Decoration can be turned on by selecting the radio button and ticking the checkbox next to the desired style. To remove decoration attributes select the radio button next to None. To define the text colour, select the 'Pick' button to open the Colour Picker. Alternatively you may enter a predefined colour name or the hexadecimal colour value (see Colour Name List) in the colour textbox. The hash (#) symbol must be included at the start of any hexadecimal value used. When a value has been entered, an example of that colour value will be shown next to the textbox.
Background	Defining a background colour or image allows you to display a repeating picture or background colour for an object. To define the background colour, select the 'Pick' button to open the Colour Picker. Alternatively you may enter a predefined colour name or the hexadecimal colour value (see Colour Name List) in the colour textbox. The hash (#) symbol must be included at the start of any hexadecimal value used. When a value has been entered, an example of that colour value will be shown next to the textbox. When setting a background image, select the 'Pick' button next to the Background Image textbox. The Image Manager will load. Browse for the desired image and click the 'Select' button above that image's thumbnail. Attachment: may be set to Fixed or Scroll. Please note however that this feature is not compatible with all Internet browsers. Position: determines the location of the image within the space provided. (For example, If your background image was a tree you may want to set the position as bottom, to prevent it hovering in mid air.) Repeat: may be set to no-repeat, repeat, repeat-x or repeat-y. No-repeat will produce a single copy of the image in the background. Repeat will duplicate the background image both horizontally and vertically in order to compleatly fill the space provided. Repeat-x will duplicate the image to fill the space provided on the horizontal only. Repeat-y will duplicate the image to fill the space provided on the vertical only.
Block	How the object 'fits in' with the rest of the objects on the page and how the elements within the object lay themselves out - ie spacing and alignment - is defined here. Display: may be set as Block, Inline or None. Word Spacing: defines the spacing between each word in an article. Letter Spacing: defines the spacing between each letter in the article. Text Align: may be set as Left, Right, Center or Justify. Vertical Alignment: determines the vertical placement of objects controlled by this style. Text Indent: allows you to set a 'gap' on the left side of an object or article. Whitespace: may be set to normal, pre or nowrap. Overflow: may be set to visible, hidden, scroll or auto. Selecting scroll or auto here and defining a height or width in BOX allows you to add a scroll wheel to the object or article where this style is applied.
Box	The width and height, padding and margin of the object can be set here. The term box relates to the W3C Box Layout Model. Width and Height are defined by typing a number in their respective textbox. These attributes can work in tandem with the Overflow property in the Block tab to produce scrollbars on the object where the style is applied. In some instances though the height and width properties entered here will be ignored. One example of this is when an image has been placed into the space where the style is applied. If the image's height and width exceed the dimensions set in the style and no overflow property has been set, the image height and width may override these dimensions. An element's padding is the amount of space between the border and the content of the object. An element's margin is the amount of space external to the edge or border of an object. Both padding and margin are set by entering a value in the appropriate textbox. Selecting the button after the Top Padding or Top Margin has been entered will duplicate this value in the following three fields. This is handy when symetrical padding or margins are required on all four sides of the box or object.
Border	This set of properties allows you to change all four object borders (ie top, left, right and bottom). Border width can be measured in various units, pixels being the default selected by the dropdown list. To create a border enter a numerical value into a textbox to set a width. Each side of the box can have individual values. The border colour will default to black. To define the border's colour, select the 'Pick' button to open the Colour Picker. Alternatively you may enter a predefined colour name or the hexadecimal colour value (see Colour Name List) in the colour textbox. The hash (#) symbol must be included at the start of any hexadecimal value used. When a value has been entered, an example of that colour value will be shown next to the textbox. Selecting the button after the Top Width or Top Colour has been entered will duplicate this value in the following three fields. This is handy when a symetrical boarder is required.
List	This allows you to control how lists are displayed, for example: A List Another List Item Secondary List Another Secondary List Item Will be shown using the default list options. Setting the list style here will alter the default appearence for all list items where the style is applied. The list type may be selected from a predefined list. Alternatively an image may be chosen for the bullet point (small images, the size of a single text character, are recommended when using this option). Selecting 'Pick' will load the Image Manager - browse through the Image Manager and click 'Select' to choose a bullet image.

When all attributes have been set in the Style Editor, click 'Save'. The Style Manager will reload. New styles will appear at the end of the Style Manager table. Edited styles will appear in their original position in the table. Once saved, the style is available for use in your website. If the style has already been applied to an object or page, any editions to the style will be visible next time that object or page is viewed.

Applying Styles to Objects

Once you have created and applied a style to an object, the style will apply to the object in all the instances that style appears in the site. For example, if an image has a style which includes Padding, then that padding will be included in all places the images appears on your site.

To apply a style to an object that is already on a page or Masterpage, you must be logged in with the administrator toolbar visible at the top of the screen. Make sure you are in 'Edit' mode by clicking button in the admin toolbar. Select the button above the object you wish to apply a style to. The object's menu will load on the left side of your screen.

From this menu, click 'Select Style'. This will cause the Style Manager to load in a new window. You may create a style now, or select from the existing styles in the Manager. Once selected, the page containing your object will reload with the new style applied to the object.

Showing the Edit Object menu again, you should see the current style's ID number under the Title of that Object.

Editing Or Removing an Applied Style

To edit or remove a current style, click 'Select Style' again from the Edit Object menu. The Style Manager will load. The applied style will be shown at the top of the Style Manager.

To remove the current style, select the 'Clear' button.
To edit the current style, select the 'Edit' button.
To select a different style, select the 'Pick' button next to the new style.
To retain the existing style, either close the Style Manager, or select the 'Pick' button next to the currently applied style.

Applying Styles to Masterpages

Both Masterpages and containers are groups of objects, so when a style is applied to a one it will affect all objects contained within it. A common way this is used is when a every page in a website requires the same background image behind the page's main content. One style, placed on each Masterpage used in the website, can create this affect. If a change to the page background is required, only the one style requires changing to update the entire site.

To apply a style to a Masterpage, you must be logged in with the administrator toolbar visible at the top of the screen.

• Enter Masterpage by clicking the button in the administrator toolbar.
• This will load the Content Menu. From here, select 'Masterpage' to load the Masterpage Manager.
• Select the radio button of the desired Masterpage and click 'Edit'.
• The Masterpage will load in the same window. Click the brown button to load the edit Masterpage menu on the left side of your screen.
• From this menu, click either 'Edit Page Layout' or 'Select Object Style'.

Clicking the latter will load the Style Manager. Select the 'Pick' button next to the desired style to apply it to the Masterpage.

When 'Edit Page Layout' has been selected, the Page Layout Editor will load. To apply a style to the entire page select 'Additional Settings' from the menu on the left side of the Page Layout Editor. The Additional Settings will load:

Any style currently applied to the page will show its Style ID in the last textbox in this window. To change the style select the 'Pick' button. This will load the Style Manager in the same manner as outlined above. To remove a style from the page while in the Additional Settings window, simply delete the Style ID number from the textbox.

Applying Styles to Page Sections

Styles can be applied to sections of a Masterpage. To do this, load the Page Layout Editor (as outlined above) and select the 'e' (edit) button for the section you wish to apply a style to.

In the image above, no style is currently applied to the section.

Clicking the 'e' (edit) button for the section will load the section's properties. Within these properties, locate Section Style. Any currently applied style will be shown by the Style ID number in the text box.

To remove that style delete the Style ID number.
Selecting the 'Pick' button will load the Style Manager, where a new style may be chosen or edited.

Colour Picker

The colour Picker is accessed by selecting the 'Pick' button in the style Manager where a colour value is required.

Images must be turned on in your Internet browser in order to view the colour wheel and gradient charts in the Colour Picker. The Colour Picker window will appear similar to this:

Hover your mouse cursor over the colour wheel or gradient chart to view colours.
Clicking on a colour within the wheel or chart will temporarilly load that colour's value into one of the three Colour Grabber boxes at the top of the window. To select the colour shown in one of these colour grabber boxes, click on the 'Select' button next to that colour. The hexadecimal value for that colour will then be coppied into the colour textbox in the style editor.
The Colour Picker can also be used to view hexadecimal or predefined colour names. Type the value or name into the custom colour textbox at the bottom of the Colour Picker screen. The coloured box next to this textbox will show the represented value. To select the custom value click the 'Choose Custom' button.

See also Colour Names and Hexadecimal Values.

Article Styles

Articles styles are a very useful way of unifying the formatting of a site. Default styles can be set for items such as headings, paragraphs and links. These defined styles can also be used and viewed when creating an article in the Article Editor.

It is recommended that you choose Heading types, from H1 to H6 to organize your paragraphs, instead of adding font and size each time you have a heading. H1 is usually the most prominent Heading used in the site. By using Article Styles instead of individually editing your articles with their presentational information you can save a lot of time. Just change the Article Style of a paragraph for instance and all the paragraphs in your site will change. Any other formatting within the article however will override the preset Article Styles.

For more information see Article Styles.

Hierachy of Styles

Styles can be used in a myriad of ways and it is recommended that you consider how to best organize your style formatting before you begin. A style placed on one object can be inherited by other objects further down in the hierachy. Opposing styles applied to these objects can have undesirable affects.

This List indicates how styles in Aplinx are designed to override each other:

Formatting directly on an Article

• See Article Editor.

This is not recommended, as it adds presentational code to the HTML markup. Advantages of formatting dircectly on an article however, include the ability to override other settings.

For example, if a single section of the article is required in bold, italics or a different colour, formatting should be applied to that specific section. The remainder of the article would still be governed by the Article Style.

---

Article Style (site specific)

• See Article Styles.

This is where the bulk of the Text Formatting should be placed. It is designed to control the formatting of Articles. Article Styles govern items such as Headings, Paragraphs, links and list.

---

Object Style

• See Apply Styles to an Object

A Style can be set for a specific Object. Every time that object appears in your website, the style will be applied to it.

Certain objects (eg: menus, products) require their own style to be set. These styles will also be specific to that object only and will override section or Masterpage styles.

---

Section Style

• See Masterpage or applying style to Sections.

A Section Style will always override the main Masterpage style.

For example, if the majority of your page has black text on a white background, but for the page footer you want small white text on a black background, create a new style for the footer and apply it to that section.

---

Masterpage or Container Style

• See Masterpage or applying style to Masterpage.

The style set on the Masterpage is often usefull for setting the page background colour and size of the page. Also, if the majority of your site is to have a single font, size and colour applied to the text, it should be set here. This does help to reduce the presentational code in the HTML markup and when optimized can also help to minimise the loading times of your webpage/s in an Internet browser.

Applying styles on a Section or Masterpage instead of the article or object also makes for easier customization and site maintenance.