The following Compass plugins are available for use on this site. When available, a link is provided to give further detail on their use:

• Accordion
• Bulletin course info
• Bulletin subject info
• Card
• General content
• Hero
• Modal
• Notification
• Responsive embed
• Tabs

Power User Only

• Code
• Code Advanced
• File
• Google Analytics
• Htaccess file
• Sitemap

The following 'CHS' content types were created especially for use on College of Humanities and Sciences websites. Each link goes to the content type's documentation in the CHS web support wiki. There you can learn more about their use and display.

• CHS-AFAM BHM Item (Black History in the Making)
• CHS Bookshelf Item
• CHS Directory Item
• CHS Event Item
• CHS Home Page Spotlight Carousel
• CHS In the Media Item
• CHS News Item

Visit the CHS Compass Media folder in your T4 media library and take your pick of our library of select images of campus, faculty, students, etc. in a variety of popular sizes for the web for use on your pages. As a bonus, they are already compressed for web use!

Link to CHS Compass Media folder on T4: Be sure to expand the folder to see the contents.

'Hero' images (i.e., large images at the tops of pages that use the hero plugin) are 21:9 (1800px x 771px).

Tips and Tricks

• Add the word feature after the name in the name field of the hero to make it go full width at the top of the page
• Add this code snippet after the name in the name field to force the caption to display under the image instead of the default behavior of on top: float:{false}

See full hero documentation for more tricks and options for this plugin.

The home page hero image/graphic was specially contracted for this site and is designed to serve as its permanent image until the next redesign. Though the image may become stale to internal stakeholders, it should be remembered that the primary audience for all CHS department sites is prospective students above all others and that it will always be new to that audience. A custom, static hero on the homepage has a secondary benefit of serving as an unofficial brandmarker of the department and it will be a reassuring visual cue for regular or semi-regular visitors that they are in the right place.

If a department has special content it needs to draw attention to on its home page, it should be added to the Homepage Spotlight content type instead of to the hero section. 

If a change to the hero is nevertheless desired in the future, contact the CHS director of communications.

You can easily apply a special blockquote formatting to key quotes on a page: Select the text you want to format and then go to Format-->Formats-->Block-->Blockquote and select that option. Be sure to omit any quotation marks since those will automatically output. Example:

You have brains in your head. You have feet in your shoes. You can steer yourself any direction you choose.

If you'd like to add an author, simply push enter after the end of your quote and add the name.

You have brains in your head. You have feet in your shoes. You can steer yourself any direction you choose.

Dr. Seuss

The Compass theme color for the site is #b50000 (red). Green (#007e00) and black (#222222) are also used in various places to achieve the Pan African color theming.

Dropcaps have been added to the first letter of the first paragraphs of pages that primarily use the general content plugin. This styling should be maintained as new pages are added in the future by adding the following code snippet/name injector to the name field of the general content plugin that contains the first paragraph on the page.

class:{cwf-paragraph--drop-cap}

Level 2 headings <h2> in general content plugins and CHS Directory Items are set to output with a Pan African flag to the left.

Example

Level 3 headings <h3> in general content plugins and CHS Directory Items are set to output with a gold chevron to the left.

Example

All icons are generated using FontAwesome. Below are some available for use on this site accompanied by the code needed. Details for how to use the icons follow the chart below. 

How to Use

To add an icon, you simply copy the code snippet for the desired icon and paste it into the source code just ahead of the text you want to put it in front of.

Example

Here is a sentence and what it looks like in the source code:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

I'd like to insert the round, blue exclamation point icon ( ) just ahead of the first word to call special attention to the text. In order to get my desired result, I simply add the code snippet from the chart just ahead of the first word in the sentence as demonstrated below in bold text:

<p><span class="icon exclamation-circle-blue"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

That will get me this result:

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

In the text editor, select Format --> Formats and you will see there are a variety of 't4_....' listings. This site has a few of those listings pre-styled for your use.

t4_text-info

Applying this to text will give it a dark blue border and light blue fill.

t4_text-success

Applying this to text will give it a dark green border and light green fill.

t4_text-warning

Applying this to text will give it a dark yellow border and light yellow fill.

t4_text-primary

This format has a different effect depending on the element it is applied to. One use is for making a gold 'marker' appear to the left of headings. See the Compass-->Marker documentation for examples.

t4_button

Applying this to a link will wrap it in a button.

Note: You have to apply the hyperlink first and apply the button format second.

t4_text-primary

Gives a gold marker to the left of headings 1->3. Visit the Compass marker page for a demo.

In addition to those special formats listed here, don't forget Compass has its own set of special formatting options, so be sure to visit the Compass documentation site at compass.vcu.edu for the details on how to use those. Some examples include:

• Adding decorative 'markers' to headings
• Putting content into a grid display
• And more!

Classes

• The img-r-50 class will float an image to the right of the page when the viewport is >=768 pixels and restrict its width to 50% of the container
• The img-l-50 class will float an image to the left of the page when the viewport is >=768 pixels and restrict its width to 50% of the container
• The img-r-33 class will float an image to the right of the page when the viewport is >=768 pixels and restrict its width to 33% of the container
• The img-l-33 class will float an image to the left of the page when the viewport is >=768 pixels and restrict its width to 33% of the container
• The img-r-25 class will float an image to the right of the page when the viewport is >=768 pixels and restrict its width to 25% of the container
• The img-l-25 class will float an image to the left of the page when the viewport is >=768 pixels and restrict its width to 25% of the container

Example Use

Say I want to take the following image of Rodney and make it float on the right hand side of this page while taking up no more than 25% of this container.

Here is what that image looks like in the source code, which is accessible by going to Tools-->Source Code.

<p><img class="t4-tag-content-item mceNonEditable" style="width: -1px; height: auto;" src="https://t4.vcu.edu/terminalfour/SiteManager?ctfn=download&fnno=60&ceid=718e8e1a5fe38421dd2ecd46aa71ae9dab012dc5" alt="v.c.u.'s mascot rodney the ram cheering while a pep band surrounding him plays instruments" data-t4-instance-id="3178" data-t4-media-id="466381" data-t4-markup-for="466381" data-t4-media-attributes="" data-t4-media-formatter="image/*" data-t4-media-language="en" data-t4-type="media" /></p>

In order to get my desired result, I simply add the img-r-25 class to the <p> element as demonstrated below in bold text:

<p class="img-r-25"><img class="t4-tag-content-item mceNonEditable" style="width: -1px; height: auto;" src="https://t4.vcu.edu/terminalfour/SiteManager?ctfn=download&fnno=60&ceid=718e8e1a5fe38421dd2ecd46aa71ae9dab012dc5" alt="v.c.u.'s mascot rodney the ram cheering while a pep band surrounding him plays instruments" data-t4-instance-id="3178" data-t4-media-id="466381" data-t4-markup-for="466381" data-t4-media-attributes="" data-t4-media-formatter="image/*" data-t4-media-language="en" data-t4-type="media" />

Result

Classes

• The columnar2 class will split a bulleted or numbered list into two columns when the viewport is >=768 pixels
• The columnar3 class will split a bulleted or numbered list into three columns when the viewport is >=768 pixels
• The checklist class will remove the bullet or number from a list, replace it with an red checkbox and add a bit more margin between the bulleted or numbered items

Example Use 1: Split One Column Into Two

Say I want to take the following list of items and put them in two columns instead of one.

• cat
• dog
• fish
• llama
• raccoon
• marmut
• bird
• guinea pig
• shark
• chipmunk

Here is what that list looks like in the source code, which is accessible by going to Tools-->Source Code.

<ul>
<li>cat</li>
<li>dog</li>
<li>fish</li>
<li>llama</li>
<li>raccoon</li>
<li>marmut</li>
<li>bird</li>
<li>guinea pig</li>
<li>shark</li>
<li>chipmunk</li>
</ul>

In order to get my desired result, I simply add the columnar2 class to the <ul> element (stands for 'unordered list') as demonstrated below in bold text:

<ul class="columnar2">
<li>cat</li>
<li>dog</li>
<li>fish</li>
<li>llama</li>
<li>raccoon</li>
<li>marmut</li>
<li>bird</li>
<li>guinea pig</li>
<li>shark</li>
<li>chipmunk</li>
</ul>

Result

• cat
• dog
• fish
• llama
• raccoon
• marmut
• bird
• guinea pig
• shark
• chipmunk

Example Use 2: Add Checkmarks Instead of Bullets/Numbers

Say I want to take the following list of items and replace the bullets with orange checkboxes.

• cat
• dog
• fish
• llama
• raccoon
• marmut
• bird
• guinea pig
• shark
• chipmunk

In the source code, I simply add the checklist class to the <ul> element as follows:

<ul class="checklist">
<li>cat</li>
<li>dog</li>
<li>fish</li>
<li>llama</li>
<li>raccoon</li>
<li>marmut</li>
<li>bird</li>
<li>guinea pig</li>
<li>shark</li>
<li>chipmunk</li>
</ul>

Result

• cat
• dog
• fish
• llama
• raccoon
• marmut
• bird
• guinea pig
• shark
• chipmunk

Example Use 3: Add Checkmarks Instead of Bullets/Numbers and Split Columns Into Three

Say I want to take the following list of items and replace the bullets with orange checkboxes and display in three columns.

• cat
• dog
• fish
• llama
• raccoon
• marmut
• bird
• guinea pig
• shark
• chipmunk

In the source code, I simply add the columnar3 AND the checklist class to the <ul> element as follows:

<ul class="columnar3 checklist">
<li>cat</li>
<li>dog</li>
<li>fish</li>
<li>llama</li>
<li>raccoon</li>
<li>marmut</li>
<li>bird</li>
<li>guinea pig</li>
<li>shark</li>
<li>chipmunk</li>
</ul>

Result

• cat
• dog
• fish
• llama
• raccoon
• marmut
• bird
• guinea pig
• shark
• chipmunk

Classes

• The subhed class will make text taller, thinner and orange. It would typically be used in a subheading or other special location where you want to draw attention to an important sentence. Not recommended for more than one sentence.

Example Use

Say I want to give a bit of special emphasis to the first paragraph below.

Here is what that looks like in the source code, which is accessible by going to Tools-->Source Code.

In order to get my desired result, I simply add the subhed class to the <p> element as demonstrated below in bold text:

Result

The School of World Studies offers Virginia’s only certificate program in Spanish-English Translation and Interpretation (SETI).

SETI combines translation and interpreting theory with applied practice, preparing you to use your translation and interpretation skills in a variety of community settings. As a SETI student, you have ample opportunity for meaningful engagement with the local community through volunteering and a specialized SETI internship.

For the homepage spotlight, you can choose to have one stationary image with accompanying text or a slideshow of up to five slides with accompanying text. If more than five slides are added, they will not be displayed. Visit the wiki documentation for the CHS Home Page Spotlight Carousel for more information on use.

The CHS-AFAM BHM Item content type is used to add recipients to this page. See full wiki documentation on the content type. If the filter categories should need to be changed in the future, please contact the CHS webmaster for assistance.

Note: For the 2023 awards season, there was only one category, "Students;" as such, the filter has been hidden via the page's stylesheet. If more than one category should be needed in future seasons, it will be necessary to unhide the filter.

The Careers page contains content taken directly from the department's Major Maps page. The web manager should check in with department leadership annually to ensure the Careers page in this site has the most current content as changes made to the Major Maps page will not automatically occur to the page on this site.

Please contact the CHS webmaster if any people are added or removed from the Community Advisory Board section of the Community Engagement page. (The grid programming will need to be adjusted.)

As with all CHS content types, the CHS Directory Item content type has full documentation on the CHS web wiki for more information.

Directory Exemplar

The exemplar for a faculty page can be found in the In Development section. It demonstrates the recommended headings, voice, nomenclature, etc. As new faculty come to the department, they may be sent the following link to serve as a guide in constructing their content:

https://afam.vcu.edu/in-development/directory-sample.html

Adding a Person to the Directory

New people are added to the main Directory page. From there, they may be mirrored to other subsections.

Please note it will be necessary to use 'drag and drop' ordering to maintain alphabetical ordering on the main Directory page. You will need to go into each subsection where they are mirrored to drag and drop for ordering as well  (this does not happen automatically).

Deleting a Person from the Directory

To delete someone, go to the blue Actions button and select 'Delete.' In the pop-up window, the option 'Remove from section' will only remove them from the page you are on, whereas 'Delete content' removes the person from all the other pages where they are listed.

Visit the CHS Event Item content type page for all the information you need to add an event to your site.

On the Meet a Student page and the subsections of the Alum Success Stories page:

• See Images-->Image Ratio Cheat Sheet for image specs
• Be sure to format the pullquote by selecting it and then going to Format-->Formats-->Blocks-->Blockquote for the proper display output
• Be sure to format the questions in the Q&A as bold for proper display output

The News page is programmed to bring in VCU News articles tagged as 'Department of African American Studies' and intermingle them seamlessly according to the ArticlePubDate field in the content type with locally-created articles.

The VCU News articles are imported daily into the /news/newsroom/vcu-news-auto-import/ section. Articles created by the Department of African American Studies should be done so in the /news/newsroom/african-american-studies-news/ section using the CHS News Item content type. There is no need to manually order the articles since they will automatically be pulled into the feeds using the ArticlePubDate field in the content type.

Troubleshooting: If you notice any VCU News articles in the feed that shouldn't be there, please contact chswebmaster@vcu.edu to remedy.

On some web pages (e.g., the home page), site managers will notice code plugins with OPEN and CLOSED designations. Wherever this is the case, the items contained within the OPEN and CLOSED fields must remain within; otherwise the page display will break.

Example:

Site managers will sometimes notice pieces of HTML and CSS code in the 'name' field of content in T4. See red boxes in example:

These have been placed there by the site developer and are important for formatting and layout, so please do not remove. Site managers can simply pay attention to the name that appears before the | symbol in this naming convention. In the above example, that would be 'Explore careers.'

All links upon launch are set to open in the same tab, which is the default behavior in T4. Opening links in a new tab is not mobile-friendly and may create accessibility issues for certain types of users.

If new level one menu items are added to the main navigation bar, you must also add a level two link section that links back to the level one menu item. For example, the 'About' menu item also has a subsection titled 'About' that links back to the main menu item.

The following metadata values are recommended for all pages:

• description
• title
• og:description
• og:image
• og:title
• twitter:site

Metadata images are stored in the hidden Metadata Images section so that an absolute URL to each can be generated.

Guidelines for adding metadata

Associated Press style (the editorial style VCU uses in its official communications, including websites) is now to capitalize Black in a racial, ethnic or cultural sense, conveying an essential and shared sense of history, identity and community among people who identify as Black, including those in the African diaspora and within Africa. The lowercase black is a color, not a person. AP style will continue to lowercase the term white in racial, ethnic and cultural senses. AP style also now capitalizes Indigenous in reference to original inhabitants of a place.

Read more about the history and context behind these editorial standards.