Virginia Tech®home

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.

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

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.  

Vianne Greek, MBA, CPWA

Web and Social Media Manager
Certified Professional in Web Accessibility

540-526-2587
vmgreek@vt.edu
Zoom link

Get hands-on training

Until you become more comfortable with making changes to the website, we recommend you schedule a Zoom or in-person session with the VTCSOM Web Manager so they can walk you through the process.

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.  

decorative
vtcsom-image-maroon
decorative
vtcsom-image-teal
decorative
vtcsom-image-blue
decorative
vtcsom-image-purple
decorative
vtcsom-image-orange
decorative
vtcsom-image-black

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

bg-blue
regular links
no 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.

maroon_outline_solid

maroon_outline_double

maroon_outline_dashed

maroon_outline_dotted

blue_outline_solid

blue_outline_double

blue_outline_dashed

blue_outline_dotted

orange_outline_solid

orange_outline_double

orange_outline_dashed

orange_outline_dotted

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>

text-maroon
text-bold

text-teal
text-bold

text-blue
text-bold

text-purple
text-bold

text-orange
text-bold

text-purple

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"/>

Redirect Page How To

This 1 minute video walks a user through visually how to create a redirect page to populate pages such as our Social Mentions or Job Opportunities pages.