Overrides

Elements such as divs, Canvases and form objects can have overrides applied to them. Overrides are simply CSS instructions embedded into the XHTML itself, rather than in a separate CSS file. The override is held in the 'style' attribute, this attribute is handled automatically by Flux, and you do not need to edit it.



 <div id="infoPanel" style="background-color:#ff0000"> <div>

In the above example, the div will inherit its style for the #infoPanel style, but the background color will be set by the override, in this case, to a red color. Overrides are useful when mocking up a page without having to create styles first, as you can change the layout quickly and easily, and once you are happy with your layout, Flux can help you create CSS styles based on the overrides. You can examine all the overrides applied to an element, select the element, and the overrides will be shown in the Inspector palette, you can enable and disable them using the checkbox on the section headers.

Creating CSS styles based on overrides

Once you have created an element which uses overrides, you can create a CSS style based on those overrides. Of course, the CSS style is still just as editable as the overrides, but it will be held in the CSS file, so it's separate from the content which is 'The Right Thing To Do'. Once those styles are in a seperate CSS file, it is so much simpler to re-use styles over and over in your website.

Select the element, Right-Click (or Command-Click) on the element, and choose 'Create Style With...' from the contextual menu. You will be presented with a dialog, that you can choose what to call your new style, what type of style is to be, and which CSS file to store it in.

The new style will be created using the overrides as a base, you can choose to remove the overrides at this point, so from now on, all changes will be made to the CSS.