Science Labs building




The CNAS sub-theme

We have built this 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:

Slider 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").





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

view classes


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.



Existing CNAS Sites

Any existing CNAS sites that are using the default or hybrid theme can switch to the CNAS theme. If the site is live (already launched at an domain), please be extra cautious and keep the following in mind:
  • View modes and styles for different components will be deferred in separate releases corresponding to UCR’s monthly releases.
  • A header image and footer image will automatically be available once the CNAS Theme is applied. In order to use a custom header or footer image, they must be approved by University Communications (for those outside CNAS) or the CNAS Site Factory Managers. Your Site Factory Manager can upload these images on your behalf. A header and footer image are OPTIONAL. If no images are present, then the CNAS Theme color will display in those sections.
  • Any blocks that have been placed using Block Layout will need to be placed in the CNAS Theme. Every theme has a separate Block Layout. Once the theme is enabled (but not set as default), you can place the block BEFORE switching themes. All CNAS sites are in Layout Builder, so this only applies to other campus units. You still have to switch to CNAS view modes in Layout when applying the CNAS theme to a website built in the UCR default or hybrid theme.
  • The CNAS Theme uses the full width layout on the <front> (home) page. This is by design. Other pages can either be full width or centered (fixed to grid). 
If any other issues are noticed, please email us at


Misc things that are good to know how to do


Layout Builder - How to find the name of the block you want to edit on a page. View Video
How to add a new page to your site, and at the same time place it in the top navigation menu (3 minutes)
The basics of editing your top Menu Navigation (10 minutes) View Video
A detailed tour of the WYSIWYG editing toolbar for pages and blocks (26 minutes) View Video
Learn the two different ways to add hero images to your page, and how they differ (16 minutes) VIEW VIDEO
How to adjust the focal point for your hero image if you don't like how it sits on the page (1.5 minutes)
This will work with any image.  The video was made for a specific dept so it is a bit abrupt but the information is clear and we hope it will help you.  
Remember the best approach is to optimize your hero image at the correct size and have it looking the way you want before you upload.
View Video
How to work with Images on a page or in a custom block (11 minutes) View Video
Two ways to link to documents: direct download, or open in a new window to view/choose to download (5 minutes)
(note that word docs will always automatically download.  Opening in a new window without auto-downloading is best practice - use PDFs instead of docs as often as possible.) 
DON'T include your root website in your link.
DON'T include your root website in your link.
DO include everything after the root including forward slash.  Check box to open in new window.
DO include everything after the root including forward slash.
Check box to open in new window.
How to view the source code of a Basic Page or Basic Block (13 minutes) View Video
Extra lines of blank space in your content?  Learn how to look at source code to work with paragraphs (10 minutes) VIEW VIDEO
Best Practice for when you are copying and pasting content into your Basic Page, to avoid unexpected font styling (2 minutes) VIEW VIDEO
Adding Profile embeds from (and how to make the buttons blue/change to the CNAS style) (7 minutes)  Note: Since this video was made, CNAS changed the buttons in the profiles from yellow to blue.  You will see the yellow result in the video.
view the code you'll need for the CNAS style
View Video
Editing your website footer (13 minutes) View Video
Housekeeping:  301 redirects for 404 error messages.  Good to do periodically (7 minutes) VIEW VIDEO

More Housekeeping:  Deleting and Removing Files to keep a clean library

Read Instructions



Let us help you with your search