• Content Management
• ››CSS

CSS

Pages are formatted and styled by the CSS. This is a site-wide CSS that applies to all pages in a site. When you change a pages CSS it will affect the entire site. Each site comes with default CSS styles.

CSS stands for Cascading Style Sheets. It allows you to store style presentation information (such as colors, fonts, layout, etc.) separately from your HTML structure. This allows precise control over your page's layout and format.  

These CSS editing instructions are meant for users with knowledge of CSS.  If you are new to CSS or need a refresher, check out this great resource: http://codex.wordpress.org/

• Add or Edit CSS
• Applying CSS Styles
• Styles and Format Drop-Downs
• Changing the Default Font
• Reverting Back to the Default CSS
• Multiple Sites and CSS
• Mobile/Tablet CSS

You can change a page's CSS. However, you cannot change the application's CSS. You can control the theme, header, and other options by customizing the site.

Add or Edit CSS

To edit the CSS, press the toolbar button. An overlay will appear displaying all of your site's CSS. You can add or edit the CSS as you wish.

The CSS file comes with the system defaults style. However you can change any of these styles. This includes:

• The default font style: body {}
• Bullet and list styles:  ul {}, li {}, ol {}
• Table styles and classes
• Horitzontal Rule: HR {}
• Hyperlink colors and styles: a{}, a:link, a:visited, a:active, a:hover {}
• Styling for the home page: #startcontainer {}

You are welcome to change any of the default CSS. You can also add more CSS styles and classes to control the layout for any page.

Applying CSS Styles

Many CSS styles are applied automatically to elements. However, you can manually apply CSS styles to elements, such as links, images, DIVs, tables, etc., by double-clicking on the element to open the dialog and then selecting the Advanced tab. You can then enter in the CSS class name or ID that you want applied to the element.

Here is an example for an image.

Styles and Format Drop-Downs

The styles, format, and other options in the toolbar are powered by the CSS. If you want to change the formatting, such as the fonts, sizes, colors, etc., you will need to do it in the CSS.

In the  Styles drop-down, here is the mapping to the CSS:
 

In the Format drop-down, here is the mapping to the CSS:

Changing the Default Font

This guide is only intended for advanced users. However, the default font could be changed for all pages as follows:
 

1. Click on the CSS icon in the toolbar
2. Locate the Body {} class on the top of the list
3. Locate the font family attribute and font size as highlighted below.
   body {
   background-color:#FFF;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   padding:15px;
   margin: 0px;
   margin-right: 0px;
   margin-bottom: 20px;
   }
4. Make the change and click OK.

Here are some web-safe font options to COPY and PASTE :

• font-family:Verdana, Geneva, sans-serif
• font-family: Georgia, "Times New Roman", Times, serif
•  font-family: Arial, Helvetica, sans-serif
• font-family:Tahoma, Geneva, sans-serif
• font-family: "Trebuchet MS", Arial, Helvetica, sans-serif
• font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif

You can also follow this same guide for changing the paragraph and heading styles.

Reverting Back to the Default CSS

If you break or damage the CSS code, you can click Revert to default CSS. This will restore the CSS back to the original setting. However, any CSS you changed or added will be deleted.

Multiple Sites and CSS

Each site you create will have its own separate CSS styles. Sites do not share CSS styles. If you want to use the same CSS styles from a site you already created, you will need to copy the CSS from one site and paste it to the new site.

Related Articles:

Code Highlighter
Editor Toolbar
Links