The theme is basically the look and feel of your website. It specifies regions in which you assign content, placement of menus and key elements of the website. The theme contains templates (which can be also specialised for specific content types), style sheets, and set of libraries, f.e. Javascript for advanced animations. For CERN usage, CERN Theme is provided in order to set a similar look & feel to the websites of the organisation.

The CERN Theme is the recommended Drupal theme because it defines a common Look & Feel for the CERN websites. In other words, the websites that use the CERN Theme share specific common characteristics which relate to the styling, the appearance and specific features which are supported by the CERN Theme. 

In addition, the theme inherits the Drupal Bootstrap theme, which consequently means that it includes all the elements of the Bootstrap theme. 

How to enable the CERN theme

The CERN Theme is placed in the CERN infrastructure, meaning that you don't have to actually install the theme in the website. When you get a new CERN website, the theme is already installed and enabled. If for any reason the theme is not enabled, you can enable by clicking on "Set as default" option in the Appearance page.

Regions

The CERN Theme is constituted of 9 theme regions: Header, Left Sidebar, Main Content, Right Sidebar, Content Footer, Footer Column 1, Footer Column 2, Footer Column 3, Footer Column 4. They are designed in such way to satisfy most needs in terms of content placement. 

Color Settings

Another important feature of the CERN Theme are the options provided in the appearance page. If you browse the settings of CERN Theme in /admin/appearance/settings/cernclean , you will find a set of options which define how all the already mentioned elements will look like. More Specifically, you have the option to set up the color palette of your website for a pre-defined set of elements like headers, footers, tables, tabs etc.

The right side of the page is used to display a preview of how the website will look like if the current colors were chosen.

Logo / Site Name / Site Slogan settings

By default the options regarding the site logo and name are placed under the Global Settings of the Appearance Menu. However, in order to modify those settings while using the CERN theme, you have to change them in the Appearance settings of the theme.

More analytically, if you navigate to /admin/appearance/settings/cernclean and scroll to the bottom of the page, you will mention a group of settings called Display Site Settings. 

1. Show Site name: Whether or not you want the site name to be rendered
2. Show Site slogan: Whether or not you want the site slogan to be rendered
3. Show Search link on Main menu: Whether or not you want the search link on main menu
4. Show Dark LOGO on footer: Whether or not you want a dark logo on footer (by default it’s light). If you chose a light-colored background on your footer, then we suggest this option to be checked so that the logo will be visible.
5. Upload logo: Option to upload a custom logo.

Note: If you apply a logo then the logo will be rendered automatically.

Styling

The styling is defined by very specific elements which are designed in such way to constitute the look & feel of the CERN theme. 

Header 

The current header version supports up to two levels of menu items. The header items are rendered using a specific font, size and animation. More specifically, whenever the user hovers over a menu item, an underlinement animation is triggered in order to show the current pointer position. In a similar way, when a user is located in a page, the underlining shows where the user is located. 

To render the header, you need to construct the menu on the "Main Navigation" menu of your website and place the "Main Navigation" block on the Header region. The menu is then automatically rendered in the default way.

Footer

The footer constitutes a branding element of the websites that use the CERN Theme. The common elements of the Footer are the CERN Logo, the Copyright text and the 4 regions of the footer.  The footer can be used to place quicklinks in order to help the users navigate to external websites. It can also be used to place links of Social Media. The latter is easily achievable by using the CERN Full HTML text format along with the CERN font.

To create footer menus, you need to follow the steps below:

1. Create a Menu in /admin/structure/menu

2. Add the menu items in the menu

3. Place the menu in one of the 4 footer regions/columns. This can be achieved by visiting /admin/structure/block and click on "Place Block" in region that you want to place it.

4. Done!

At this point it is important to mention that menu blocks placed under the footer are rendered in a specific way: on hover they are underlined and the chevron next to the link casts a specific animation.

Sidebars

Sidebars are mostly used to place custom blocks and/or menu blocks. The custom blocks are normally rendered. Menu block have styles applied like the following example.

Another important note is about the color inheritance of menu blocks under the sidebars. The colors are inherited from the color settings:

• Links => BODY: link
• Links on hover => BODY: link on hover 
• Chevron and underline => ICONS: Chevrons & animated underline

Blocks with Shadowed borders

This feature was deployed in version 2.5.0 of CERN Base Theme.

The blocks under sidebars also give possibility to add a shadow style around the blocks placed under sidebars like example below.

In order to achieve this:

1. Install and enable the Block Class module. It is a stable module so no worries about it.
2. Navigate to the block settings of your theme and add the value shadow-block in the CSS Class field. If you dont see the field then repeat step 1.

   

3. Save block and clear caches.