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 websites.ucr.edu, 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.
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:
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".
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 firstname.lastname@example.org 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.
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.
|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.)
|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 profiles.ucr.edu (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
|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