Breadcrumb

CNAS Theme

Overview of the CNAS Theme

The CNAS department has created their own website on editing within the CNAS Theme. This includes best practices and video tutorials. 

CNAS Theme Website

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.

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 ucr.edu domain), please be extra cautious and keep the following in mind.

  • New view modes and styles will be available. You will need to manually switch block's view modes. 
  • A header 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 Manager. 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. 

If any other issues are noticed, please email CNAS Site Manager, Tom Windeknecht at tom.windeknecht@ucr.edu.

CNAS Theme example screenshot
CNAS Theme in use on bees.ucr.edu

Global Settings

UCR Custom Site Settings

There are differences in the display of UCR Custom Site Settings. Remember, these are updated by site builders under Configuration > System > UCR Custom Site Settings. 

Adding Social Links will display the icons in the top left blue area. 

CNAS Theme header screenshot
CNAS Theme header styles

Header and Footer Background

New CNAS sites spun up will already have an approved themed header and footer background image in place. Any new images must be approved by University Communications, for those outside CNAS, or the CNAS Site Factory Manager for CNAS sites. These images must be sized appropriately and created with a certain style or they may not pass branding standards and will possibly negatively impact accessibility. These images are not stored in the Media Library. 

backgrounds for theme
Note: the actual name of the backgrounds will vary

CNAS Theme Block Styles

Any Custom Block that has multiple design styles will utilize the View Mode. You can get to the View Mode in the Layout tab. Once in Layout, hover over the block, a pencil icon will appear, click on "Configure". The view modes specifically for the CNAS Theme will have the naming convention "CNAS". Below are a subset of the custom blocks available. Review the CNAS Theme website for more information. 

Carousel Sliders

Additional View Modes will be available for Carousel Sliders within the CNAS Theme. These will determine the look of the carousel.

CNAS carousel view modes

*Please note that once you switch to the CNAS theme, these view modes will be displayed in all themes but will not work for other themes. 

Partial-height blue band behind text

In the block configuration, set View Mode to ‘Hero Slider – CNAS Short Blue’.

Positioning the Text
Set the text-alignment Left to start the blue band on the left side then fade away to the right. The text will be positioned on the left side but will be left justified. Set the text-alignment Right to start blue band on the right side then fade away to the left. The text will be positioned on the right and will also be left justified.

Text aligned left.

CNAS Carousel short blue left
CNAS Short Blue - left aligned text

Text aligned right.

CNAS Carousel short blue right
CNAS Short Blue - right
Full-height blue band behind text

In the block configuration set View Mode to ‘Hero Slider - CNAS Tall Blue’.

Positioning the Text
Set the text-alignment Left to start the blue band on the left side then fade away to the right. The text will be positioned on the left side but will be left justified. Set the text-alignment Right to start blue band on the right side then fade away to the left. The text will be positioned on the right and will also be left justified.

Text aligned left.

CNAS Carousel full blue left
CNAS Tall Blue - left

Text aligned right.

CNAS Carousel full blue right
CNAS Tall Blue - right
No blue band behind text

In the block configuration set View Mode to ‘Hero Slider - CNAS No Banner'. 

Text aligned left.

CNAS Carousel no banner left
CNAS No Banner - left

Text aligned right.

CNAS Carousel no banner right
CNAS No Banner - right
Testimonials

In the block configuration set View Mode to ‘Hero Slider - CNAS Testimonials'. 

CNAS Carousel testimonial
CNAS Testimonial

Basic Block

The Basic Block will have additional background color options for the CNAS Theme. Set the background color within the Style Options tab.

The example below displays a color background gradient. This is not an option within the Styles Option tab, instead, you will need to know the div style and apply it using source in the WYSIWYG. 


<div class="welcome-message cnas-yellow-bg">
CNAS Basic Block
CNAS Basic Block

Info Card Grid

A "CNAS" view mode for the Info Card Grid is available.  It will not centrally position content and will not show the card separation.  If you use the default view mode, it will centrally position content and add the gray to show the separation. Please see the two examples below. 

CNAS Theme view modes for Info Card
CNAS Info Card Grid example
CNAS Info Card Grid
Info Card grid in CNAS theme
CNAS Info Card Grid (using default view mode)

Teaser Callout

Teaser callout text will be displayed in a blue color. The example below is using the “callout media” and not a background image.

CNAS Teaser Callout example
CNAS Teaser Callout

News

This uses the Autoblock ‘Latest Articles (News)’.

CNAS News Autoblock example
CNAS News (Autoblock)

Localist Events

LOCALIST - TEXT ONLY
This uses the Localist ‘Modern’ template. Set the text format to Rich Text Editor (Source) then paste the Localist embed code as source code. In Configure Block settings select CNAS Localist Text.

CNAS Localist Events text example
CNAS Localist Events - Text Only

LOCALIST - TEXT and IMAGE
This uses the Localist ‘Horizontal List’ template. Set the text format to Rich Text Editor (Source) then paste the Localist embed code as source code. In Configure Block Settings select CNAS Localist Image.

CNAS Localist Events image and text example
CNAS Localist Events - Text & Image

LOCALIST - CARD STYLE
This uses the Localist ‘Card UCR Version’ template. Set the text format to Rich Text Editor (Source) then paste the Localist embed code as source code. In Configure Block settings select CNAS Localist Card.

CNAS Localist Events card example
CNAS Localist Events - Card