Admin Resources


Notable Image Widths

  • Home Page - Rotator/Slideshow: 1400px wide by 950px tall
  • Home Page - News & Events: 669px wide by 507px tall  
  • Home Page - How Do I graphics: 783px wide by 480 tall
  • Interior Page - Banner Image: 1400px wide by 950px tall
  • Interior Page - Left Column Ads: 669px wide â€‹minimum 
  • Get Social module - 280px wide

Due to the fluid responsiveness of the site, and the nature of the homepage rotator and interior page banner, the images used will be cropped on the top and bottom. It is a good rule of thumb for these areas to use images that meet the dimension standards noted above, but where the main focus of the image is vertically centered.

Social Networking Icon Maintenance

The areas on the site where social networking icons are displayed are driven by FontAwesome icons and the sitemap, and therefore are easily maintainable given a few set of simple instructions.

In the sitemap, there is a channel labeled, "SOCIAL MEDIA LINKS." Within that channel links can be added, edited, or removed.

  1. Right-click the label "SOCIAL MEDIA LINKS" and select, Create Page
  2. Go through the step of creating the page
  3. Once the page is in the sitemap, feel free to change the order of their display by right-clicking the parent label and select, Sort Channel
  4. Once the channel is sorted correctly, select the new page or the page you want to edit so that we see that page's properties in the right window pane
  5. Update the Redirect To: option with the URL to the social media page
  6. Next, we need to update the Custom HTML tag attributes: option:
    1. Go to the FontAwesome cheatsheet page
    2. Find the icon you'd like to use and make note of its CSS Class. Ex. "fa-facebook"
    3. Update the Custom HTML tag attributes: with the FontAwesome general class, "fa", and the CSS Class of the desired icon. Ex. "fa fa-facebook"
  7. Click "Save"

Online Resources

Fontawesome

Your pages are setup to allow fontawesome icons. Visit fontawesome.io to view all available icons. Simply copy the markup from their page and paste it into WYSIWYG editor while in "HTML" mode. (ex. <em class="fa fa-info-circle"></em>)

If you notice some icons appearing incorrectly or not appearing at all, it may be the case that the Fontawesome library needs to be updated. Please contact your account manager to request updating the Fontawesome library, should these issues arise.

Pixlr

Pixlr.com is a great online resource for editing and enhancing images.

Embed Responsively

When embedding third-party media sources such as a YouTube video or Google Map, Embed Responsively is a fantastic resource for generating embedding code that is responsive for tablet and mobile devices. It is good practice to utilized this resource whether or not your site is responsive.


Header One

Lorem ipsum emphasised text dolor sit amet, strong text consectetur adipisicing elit, abbreviated text sed do eiusmod tempor acronym text incididunt ut labore et dolore magna aliqua. Ut quoted text enim ad minim veniam, quis nostrud exercitation link text ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute deleted text inserted text irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat code text cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blockquote. Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

Cite author with link text, 2008

Header 2

Extended paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  1. Ordered list
  2. Item 2 Consectetur adipisicing elit
  3. Item 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  4. Item 4
  5. Item 5

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Header 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Unordered list
  • Consectetur adipisicing elit
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • Item
  • Item
  • Item

Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

pre and code pair{
display:block;
line-height:1.833em;
border-top:0.083em solid #200;
}

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Header 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Table Caption
Header Header Header
Content 1 a
Content 2 b
Content 3 c
Content 4 d
Content 5 e
Content 6 f
Author text
(202) 806-5857