The UCR campus is partially open. View campus updates and Coronavirus information and resources.

CNAS Theme Drupal documentation, resources, and video tutorials

By CNAS Communications Staff |


The CNAS sub-theme

We have built the CNAS Theme documentation website in order to provide the UCR Drupal community with a CNAS sub-theme documentation that will show & explain things and offer resources and help in an intuitive way ("show me how to do that"). In our experience, a lot of folks really like to SEE how things are done, that's why we have included a lot of video tutorials (along with links to ITS written documentation on, the authority on all things UCR Drupal -- please also view the ITS CNAS theme overview here). Please keep in mind that the CNAS theme is a work in progress and evolving on a monthly basis: some video tutorials were made before certain colors or other features were available, but the overall logic should still apply. Also please note that the the default font color of the CNAS Theme is a dark shade of blue, not the UCR gray.


View modes

Our CNAS theme can be more visual than the UCR Drupal default and hybrid themes -- if you want it to. The CNAS theme has all the components of the UCR Drupal instance, but in addition, you can choose so-called view modes to achieve different looks for certain custom blocks, for instance, for the carousel slider custom block:

View modes




You can animate the Articles Preview custom block (not the feed display) and the Statistics Grid. Or you can have content slide in from the side (learn how). To animate, click on Layout > Configure Section" > Advanced Settings > Classes for Column: animate (and click the "update" button, then "Save layout").


Animate class




Please view the 2-column layout example to learn how to use the classes "equalheights" as well as "blue-gradient", "yellow-gradient", and "green-gradient".



CNAS custom Headers & Footers

Your new site will be spun up with the new header and footer images that you can see on this website (UCR blue pattern) as a default. The background images were created in June 2020 to match the new UCR branding perfectly. Please reach out to if you wish to have your own unique header and footer background images (they will have to be be approved).


CNAS Theme navigation bar

We are using a larger font size for the horizontal navigation bar text than the UCR default and hybrid theme, and the vertical drop-down tabs are not all caps for better readability.


New CNAS Sites

Your CNAS Site Factory Manager will spin up a new site with the CNAS Theme already in place. It is not mandatory for sites under CNAS to use the CNAS Theme. Let your Site Factory Manager know if your department, lab, center, etc. does not want to utilize the CNAS Theme. This can be notated on the Request a Website form in the special considerations section. It is mandatory for all new site builders and editors to take the 2-hour ITS Drupal training before editing their site.



CNAS Theme website



CNAS Theme website




Let us help you with your search