Site Style Guide

This page provides an overview of the styles and formatting used throughout the site.


Site Colors:

 

Orange: #DC773A


Grey: #666666


Green: #B0ca7a


Purple (BizLaunch): #431E6C



Buttons

Buttons can be found in the Template drop down in the WYSIWYG toolbar. Be sure to UNCHECK "replace actual contents" before adding the button. Once the button is added, double click on the button to update the button text and set the hyperlink.   

 

Old 'Standard Button' (currently In use): mura-button mura-shortcode-button

Original button color currently set incorrectly. SHOULD be background color #DC773A; hover color #e38410 to match the New Standard Button

Submit

 

New 'Standard Button': btn btn-orange

Background color #DC773A; hover color #e38410

Submit

 

Orange Button w Border: btn btn-border-orange

Background color #DC773A; hover color #e38410

Submit

 

Grey Button w Border: btn btn-border-grey

Background #666666; hover color #777777

Submit

 

Green Button w Border: btn btn-border-green

Background #8ca161; hover color #B0ca7a 

Submit

 

Purple Button w Border: btn btn-border-purple

Background #431E6C; hover color #684a89 

Submit


Hyperlinks

When a hyperlink is added to body copy it appears in orange. It gets underlined on mouse-over but does not change color after selection. Hyperlinks that go to arlingtoneconomicdevelopment.com web pages should stay in the same window. Links that go to external sites or documents should open in a new window. ON THIS PAGE ONLY I violate that rule so that links to internal pages can be viewed as an example and then closed.


Content Heirarchy

Page titles are large orange, first level headings are large grey, third level headings on bold black. A content page with a good example of this structure is our International Business page.

Page Title

Page Title Grey

Header 1

Header 2

Header 3 User might bold a portion like is done here

Header 3 Grey

Body Copy

Caption

 


Image Caption

Here is an example of using the caption function within the picture properties toolbox.

Sample Alt Text
Caption Caption goes here

Table Formatting

A good example of table formatting is shown on our Demographics page.


Horizontal Lines

The lines between these sections were added using the WYSIWYG Horizontal Line button.


Create an Alert Box

Use the source code that starts here:

Weather Alert: Arlington County government offices, programs, courts and facilities are closed today, Tuesday, March 14, 2017. If possible, stay off the roads while snow and ice removal efforts continue throughout the day.


BizLaunch Call Out Box

A BizLaunch call out box was added by assigning BizLaunch purple 

<div class="resourceBox">
    <hr style="background-color:#431E6C;height:10px;" />
    <h4><strong>Key BizLaunch Resources</strong></h4>

     <hr style="background-color:#431E6C;height:10px;" /></div>

 


 

Key BizLaunch Resources

   

 

Copyright © 2019 Arlington Economic Development