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.
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.
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.
|Header Background||Background color of the header|
|Header: Site name text||Site name color|
|Menu: Link||Color of menu links|
|Body: text||Color of the text within the body|
|Body: link||Color of the links within the body|
|Body: link on hover||Color of the link within the body when the user hovers over the link.|
|Body: Background||Background color of body|
|Body: Line in u tag & list bullets||Underline color and list bullets color|
|Body: Caption text||Caption text color within body|
|Tabs: Active tab background||Background color of active tab (currently selected tab)|
|Tabs: Active tab text||Text color of active tab|
|Tabs: Inactive tab background||Background color of inactive tab|
|Tabs: Inactive tab text||Text color of inactive tab|
|Table: Background||Background color of tables|
|Table: Header background||Header background of tables|
|Table: Header text||Header text of tables|
|Table: Rows even background||Background color of even rows|
|Table: Rows odd background||Background color of odd rows|
|Table: Rows text||Text color of tables' rows|
|Table: Footer background||Background color of tables' footer|
|Table: Footer text||Text color of tables' footer|
|Icons: Slider navigation active||Color of active navigation bulltes|
|Icons: Slider navigation inactive||Color of inactive navigation bullets|
|Icons: Chevrons & animated underline||Color of chevrons and animated line under links|
|Icons: Blockquotes||Color of blockquotes icon|
|Icons: Slider navigation arrows active||Active navigation arrows|
|Icons: Slider navigation arrows inactive||Inactive navigation arrows|
|Views: Card background||Background color of cards.|
|Views: Card title||Card title color of views|
|Views: Card text||Card text color of views|
|Taxonomy terms: Tag Background||Background color of taxonomy terms|
|Taxonomy terms: Tag text||Text color of taxonomy terms|
|Buttons: border||Border color of buttons|
|Buttons / Primary: background||Background color of primary buttons|
|Buttons / Primary: text||Text color of primary buttons|
|Buttons / Primary: background hover||Background color on hover of primary buttons|
|Buttons / Primary: text hover||Text color on hover of primary buttons|
|Buttons / Secondary: background||Background color of secondary buttons|
|Buttons / Secondary: text||Text color of secondary|
|Buttons / Secondary: background hover||Background color on hover of secondary buttons|
|Buttons / Secondary: text hover||Text color on hover of secondary buttons|
|Footer: Background||Background color of footer|
|Footer: Text||Text color of footer|
|Footer: Link||Link color of footer|
|Footer: Link on hover||Link color on hover|
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.
- Show Site name: Whether or not you want the site name to be rendered
- Show Site slogan: Whether or not you want the site slogan to be rendered
- Show Search link on Main menu: Whether or not you want the search link on main menu
- 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.
- Upload logo: Option to upload a custom logo.
Note: If you apply a logo then the logo will be rendered automatically.
The styling is defined by very specific elements which are designed in such way to constitute the look & feel of the CERN theme.
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.
Second level not rendered
One of the most common mistakes/errors that we receive is when the second level of a menu item is not rendered even though it is added in the menu structure. This can be solved by enabling the "Show as expanded" option of the parent menu item
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:
Create a Menu in /admin/structure/menu
Add the menu items in the menu
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.
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 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:
- Install and enable the Block Class module. It is a stable module so no worries about it.
- 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.
- Save block and clear caches.