CMS Styling Options

Listed below are the styling options available when using Bluefield’s Content Management System (CMS). Use this page to preview the available styling options, including: headings, block quotes, tables, and buttons.

Headings

Heading Example <H2>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 

Heading Example <H3>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 

Heading Example <H4>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 

Heading Example <H5>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 

Heading Example <H6>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Choosing a Heading Style

 

HOW TO:





Go to the dropdown menu in the top-right corner of the WYSIWYG toolbar.
heading-step-1





From the dropdown list, select your heading style.
heading-step-2





Type your text into the WYSIWYG. Alternatively, you may highlight your text and then choose a heading style.
heading-step-3

 

Block Quotes

 

Block Quote - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

 

Inserting a Block Quote

 

HOW TO:





Highlight your text in the WYSIWYG.
block-quote-step-1





Click the Block Quote button on the toolbar.
block-quote-step-2





The block quote will be indented in the WYSIWYG.
block-quote-step-3

Tables

Creating a Table

 

HOW TO:





Click the Insert/Edit Table button on the toolbar.
table-step-1




In the Insert/Edit Table dialog box, specify the number of columns and rows needed. Set the width to 600px. The width can be adjusted as necessary.
table-step-2





Click the Advanced tab.
table-step-3





Under the Advanced tab, type gradient-style in the ID text field.
table-step-4





Click the Insert button in the bottom-left corner of the Insert/Edit Table dialog box.
table-step-5





Add the table's contents. Use the formatting tools as necessary (Bold, Align Left, etc.).
table-step-16





The table will look similar to this on a webpage.
table-step-17
Optional:




To create a row with one heading, highlight the entire row. Then click the Merge Table Cells button on the toolbar.
table-step-6





Type the heading and click the Table Cell Properties button.
table-step-7





In the Table Cell Properties dialog box, select Header from the Cell Type dropdown menu.

table-step-8





Click the Update button in the bottom-left corner of the Table Cell Properties dialog box. Click OK when asked if you want to continue without specifying a scope.
table-step-9





The heading should look similar to this in the WYSIWYG.
table-step-10




For a row with multiple headings, do not merge the row's cells. Type the individual headings into the desired cells and perform the steps listed above for each.
table-step-11





The headings should look similar to this in the WYSIWYG.
table-step-12





Continue adding the table's contents. Use the formatting tools as necessary (Bold, Align Left, etc.).
table-step-13





A table with a single heading will look similar to this on a webpage.
table-step-14





A table with multiple headings will look similar to this on a webpage.
table-step-15

Buttons

Creating an Image Button

 

HOW TO:





Highlight the desired text and click the Insert/Edit Link button on the toolbar.
image-button-step-1





In the Insert/Edit Link dialog box, type the link URL or select your page from the Link List dropdown menu.
image-button-step-2





Click the Advanced tab.
image-button-step-3





Under the Advanced tab, type button in the Classes text field.
image-button-step-4





Click the Insert button in the bottom-left corner of the Insert/Edit Link dialog box.
image-button-step-5





This is how the image button will appear in the WYSIWYG.
image-button-step-6




This is how the image button will appear on a webpage.

 

 

 

 

Image Button