--- title: Theme Administration tags: Content Management System --- # Theme Administration ## Resources ### CMS Instructions #### Themes A Theme is a set of files that define the visual look and feel of your site. The core software and modules that run on your site determine which content (including HTML text and other data stored in the database, uploaded images, and any other asset files) is displayed on the pages of your site. The theme determines the HTML markup and CSS styling that wraps the content. The US Pharma MVP design system offers a base theme, Monochromatic, and prioritized subset of components, starting with content blocks and configuration foundations with additional components to be added post-MVP. For MVP, the base Monochromatic theme will house all the default styles for the platform and the Cosentyx theme will be the first set of Brand overrides to be used within the platform. #### Color, Font and Type Styles Color, Font and Type Style overrides are configured via the Drupal Admin Interface. These values will not be available to Content Editors, only site administrator roles. Colors are grouped by Primary Colors, Gradient Colors and Standard Colors. See [colors documentation](/HQza5JlYQg6dRMG8GCLg2w) for details. Updating the values below with Brand specific overrides will result in site-wide changes. #### Color and Font Administration Site administrators can make changes to the Color, Font and Type Styles leveraging the Drupal Admin interface as follows. These configuration options control the display settings for your theme. When your site is displayed using this theme, these settings will be used. **Step 1** : Navigate to the **Appearance** menu and click **Settings**: ![Appearance Menu Item](https://hackmd.io/_uploads/SkHKhHhQq.png) On the Appearance Settings screen, select **Global Settings**: ![Configuration Library](https://hackmd.io/_uploads/ByV2YGKLq.png) **Step 2:** To change the color settings, scroll down the settings window to the **Color Settings** section and expand the section: ![Color Settings](https://hackmd.io/_uploads/SyDkL2lwq.png) Color settings use Hex color codes that start with hashtag (**#**) and are followed by six letters and/or numbers. - Choose from any of the colors available in the site-level color palette for **Principal Colors**. Select at least two color values. Do not make a color selection that appears outside the color palettes: ![Principal Colors](https://hackmd.io/_uploads/B1uJm2gDq.png) - Choose from any of the colors available in the site-level color palette for **Standard Colors**. Please ensure colors entered are from the Brand color pallete: ![Standard Colors](https://hackmd.io/_uploads/By0M42eD9.png) - Choose from any of the colors available in the site-level color palette for **Gradient Colors**. Do not make a color selection that appears outside the color palettes: ![Gradient Colors](https://hackmd.io/_uploads/r1kqEhePc.png) - Choose from any of the colors available in the site-level color palette for **Background Colors**. Page background color defaults to *#FFFFFF*: ![Background Colors](https://hackmd.io/_uploads/S1K1B2gw9.png) **Step 3:** To change the global fonts settings, scroll down the settings window to the **Fonts Settings** section and expand the section. Only Google fonts are allowed (fonts.googleapis.com). ![Global Fonts Settings](https://hackmd.io/_uploads/rJEH_es7c.png) **Step 4:** Be sure to click the **Save configuration** button to ensure that your changes are updated. ![Save Configuration Button](https://hackmd.io/_uploads/r1Gv_go75.png)