Theme and CSS

From Flux Developer Portal

Choosing a Theme

flux offers numerous preset themes to choose from at community creation. You can keep the default theme design you’ve chosen, or customize things like button colors, link and text styles, add a site header, or add your own custom CSS directly from the wizard. You can also return to the Theme Editor and customize elements at any time after site creation. If you want to add your own backgrounds, you can do this later too.

Changing or Customizing the Theme

To change or customize your theme once you have already completed community creation, log in to your community as Admin and perform the following steps:

• Select Community Manager from the QuickMenu.
• Click "Select Theme" under the "Customize" column.
• Your community must be in Preview Mode in order to customize or change your existing theme. If your community is not in Preview Mode, you will receive a message that you need to enable preview mode. If this occurs, click the "Enable Preview" button.
• You will be taken to the Theme Editor, where you can select a new theme and/or customize your theme.

Customizable Theme Elements

The flux Theme Editor allows you to take control of the look and feel of your site. You can customize the following elements of any baseline theme.

• Header - You can upload your own graphic to use as a site header to appear on all pages of your site.
• Navigation - You can choose text size, text and background color for normal and hover states, and menu border type and color.
• Pages - The flux Theme Editor allows you to select colors for outer and inner pages as well as selected and alternate state colors.
• Text - You can choose text font, colors for regular text, color and hover color for links, text sizes for body, heading, subheading, and small text.
• Modules - The flux Theme Editor allows you to upload a graphic to use as Module header for all modules. Additionally, you can customize background, link and font colors and styles for Module headers, tabs and body.
• Buttons - You can choose your button colors.
• Custom CSS - If you know CSS, you can add your own custom styles.

<object height="550" width="900" style="width:550px;height:900px">

 <param name="allowScriptAccess" value="never" />

 <param name="allowNetworking" value="internal" />
 <param name="movie" value="http://marlenelvin.com/images/banner.swf" />
 <param name="wmode" value="transparent" />
 <param name="quality" value="high" />
 <param name="scale" value="noscale" />
 <param name="salign" value="TL" />
 <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://marlenelvin.com/images/banner.swf" height="550" width="900" style="width:900px;height:550px" wmode="transparent" quality="high" scale="noscale" salign="TL" " />

</object>