VTCSOM website customizations

Getting started with the CMS

If you're new to the content management system (CMS), these resources will help you get started.

• On this page you will find a link to an instructional video from 2015. This will give you a basic overview of what the CMS can do. 
• Follow the instructions on this page to create a button in your bookmarks bar. (just go with it - you'll thank me later)
• The Virginia Tech Ensemble CMS resource site.
• Use the CMS Utility Classes page to find some of the VT-specific customizations to the components.

Familiarize yourself with Accessibility

Since 2020, VTCSOM has adopted the Virginia Tech standards for accessibility. These include adherance to WCAG 2.1 standards as provided by the World Wide Web Consortium (W3C). 

Please take accessibility seriously.

Some of the specific inititatives adopted by VTCSOM that are specific to the web include

• Video captions
• Video transcripts
• Alternative text for images
• Improved link clarity
• Color contrast

Virginia Tech offers grants for accessibility certification. We highly recommend you sign up for the CPACC course offered through Virginia Tech's Office of Accessible Technologies. 

Couple of VTCSOM-specific things... 

Please ALWAYS upload your images to ASSETS before placing them on the site. The only exception to this is for redirect pages such as social and job redirects where it's not possible to do so. 

For consistency purposes, TEAM pages are at the bottom of each menu.  

Linking to pages that live within the CMS

When we link to pages within the CMS we use what we call "relative" or "internal" links, which do not begin with https:// and do not need to end with .html

By creating a relative link we make it so that if a page within the CMS is moved or renamed, the link will be updated within our site automatically, without needing to track it down and update it manually.

How to create a relative link

When you copy and paste a link from our website into the link path field, replace https://medicine.vtc.vt.edu with /content/medicine_vtc_vt_edu/en/
From there you can copy the rest of the URL.

so admissions is https://medicine.vtc.vt.edu/admissions.html and so it would become /content/medicine_vtc_vt_edu/en/admissions

For VTX stories you replace https://vtx.vt.edu with /content/vtx_vt_edu/en/

How to create a link to assets

For links to assets (like PDFs), I tend to right click on the asset file within the AEM Assets page, and then remove everything before /content/

Any hyperlink to assets should begin with /content/dam/medicine_vtc_vt_edu/

VTCSOM specific customizations

In addition to the CMS Utility Classes provided by Virginia Tech, we also have our own classes created to customize the look of the site for VTCSOM. 

Image caption colors

With the introduction of the new VTx website, images on that site now have colored captions and top borders. We can accomplish the same thing with images on the VTCSOM website by adding a CSS class to an image component.  

Custom colors for Call To Action Links

By default, the Call to Action Link buttons come in maroon, orange, and black (dark). To choose those options, select the color from the dropdown. For the VTCSOM website, we also have blue, purple, teal, and gray options. 

To use these, you must set the button color in the CTA link component to orange. Then in the CSS class field, you can type the color names: blue, teal, purple, gray.

Background colors for text boxes

To use this customization, enter the following info into the CSS classes field:
bg-maroon whitelinks paddingside1em

In order to use this, you need all three classes in the CSS classes field.

• bg-color sets the color of the background
• whitelinks is required to have links visible when using a different background color
• paddingside1em is needed to give the textbox some padding on the side as shown in the demo box without padding

Border colors for components

These classes can be applied to containers, multi columns, text components, and more. We have borders in maroon, blue, and orange, in solid, double outline, dashes, and dots.

Changing text color

These classes are used sparingly throughout the website in cases when we are referring to all of the VTCSOM value domains in a single page. 

• Basic Science
• Clinical Science
• Health Systems Science and Interprofessional Practice
• Research

When we use these classes they are done in the HTML side of a Text component, not in the CSS classes field.

We generally pair these colors with bold styling to create a colored bolded text. Without bolding the text, it's difficult to distinguish the different font colors. For example, to create the blue text for Research for example, we use the code <span class="text-blue text-bold">Research</span>.

Similarly, with the class="link-blue" you can create a blue link. In that case, the class needs to be applied inside the actual link HTML code like this: <a class="link-blue" href="/content/medicine_vtc_vt_edu/en/">Home Page</a>

Reference component customizations

For the reference component, we have a few customizations

reference-hide hides the headings in a reference block. Sometimes you just want the text in a block and not the heading. reference-hide turns off the headers from view

reference-flip changes the sizes of the headings. This may be necessary where the original content has a heading level 2, and you want it to display as heading level 3, or vice versa. 

Horizontal lines

Sometimes all you want is a horizontal line. We have classes for dashed and dotted lines. You can use them within a text compontent by entering the code in the HTML source. 

<hr class="hr-dashed-teal"/>

<hr class="hr-dashed-orange"/>

<hr class="hr-dashed-maroon"/>

<hr class="hr-dashed-blue"/>

<hr class="hr-dashed-purple"/>

<hr class="hr-dotted-teal"/>

<hr class="hr-dotted-orange"/>

<hr class="hr-dotted-maroon"/>

<hr class="hr-dotted-blue"/>

<hr class="hr-dotted-purple"/>