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
Please take accessibility seriously.
Some of the specific inititatives adopted by VTCSOM that are specific to the web include
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.
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.
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
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.
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.