Change look and feel

Home → First Steps → Change Look & Feel

Change Look & Feel

This is where you set the global design that applies to all pages. With the picturemaxx configuration you can define basic design elements and give your website an individual look.

  1. General color scheme
  2. Background colors for Paragraph Types
  3. Add your logo
  4. Main navigation
  5. Favicon
  6. Back-to-top button
  7. Fonts
    7.1. Custom Fonts
    7.2. Import fonts / Google API Key
    7.3. Add font display

 

To configure your basic design elements:

  1. In Main Administrative Menu, navigate to Configuration → picturemaxx Configuration → Theme settings → Colors, logos & styles.
  2. Within the Configuration page locate a design element control and follow the instructions below.

1. General color scheme

 In the Color scheme panel, specify custom colors for general settings by:

  • manually entering a HTML color code, or 
  • selecting a color from the palette

  • Screenshot

     

  • Color set
    Define your own Custom scheme. The Default Scheme option resets the settings to the picturemaxx CMS color scheme.

    Main Background
    Set the main background color for all of your pages.

    Text
    Set the main color for text displayed across all your pages.

    Weakened Text
    Select a text color for links within style accordeons, e.g., Team

    Links
    Select a text color for links.

    Header-Bar Background
    Set the background color of the header bar.

    Header-Bar Links
    Set the link color within the header bar.

    Header-Bar Accent
    Set the color for links on hover or otherwise active within the header bar.

    Header Background
    Set the background color for the header.

    Navigation Background
    Set the background color for Navigation.

    Navigation Links
    Select a link color within Navigation.

    Navigation Accent
    Set the color for links on hover or otherwise active within Navigation.

    Button Text Color
    Set the color for text and icons on buttons.

    Border Color
    Only used for borders and box shadows of some elements (e.g. sticky header).

    Footer Accent
    Set the color for links on hover or otherwise active within Footer.

    Doormat Background
    Set the background color for Doormat.

    Footer Background
    Set the background color for Footer.

    Footer Links
    Select a link color within the Footer.

Video: Access theme settings to assign colors, specify display options, add logo and favicon.

2. Background colors for paragraph types

You will design sections of your pages with elements called Paragraph Types. To define a range of background colors consistent across the paragraphs, scroll the Color configuration page to Color settings:

  • Add new colors into the Override palette of background colors box:
    • Enter web colors using the Hex triplet format that consists of a hashtag (#) followed by six symbols.
    • Color codes shall be separated by a comma and quotation marks and enclosed in square brackets. For example, ["#BBE6FA","#E3FFEC","#FFDEC2"]
  • In the Dark background colors box, define the font colors you want to invert against the background color for better visibility. With the dark background color, the font will automatically turn white. Use the colors defined in Override palette of background colors.
    • Here, color codes shall be separated by a comma. Do not use quotation marks or square brackets. For example, #8c8c8c, #414141.                  

  • In Main Administrative Menu, navigate to Configuration → picturemaxx Configuration → Theme settings → Colors, logos & styles. Scroll down to Color settings, as shown below.

    Background

     

  • New color codes are available on the Settings page of every paragraph type in Display Options → Background-Color Paragraph. This helps ensure that background colors are consistent across your website pages.

    Background

     

3. Add your logo

Scroll the Configuration page down to Override global settings and select the Logo image option.

  • Before uploading, delete the path information in the Path to custom logo box, to remove the existing file from your template.
  • Recommended: Upload a png file cropped to the exact size you want it to appear on your pages.

Note: For best results on high-resolution (e.g. 4K) displays, make sure to upload your logo with a height of 300px. This prevents it from appearing blurry or pixelated. This recommendation does not apply to the Headers 1 & 2, which display the logo always in the original size.

  • In Main Administrative Menu, navigate to Configuration → picturemaxx Configuration → Theme settings → Colors, logos & styles and scroll down to Logo image, as shown below.

    Logo

     

4. Main navigation

Choose between three display options for your main menu. Scroll the Configuration page down to picturemaxx Theme settings and click Display options, as shown below. 

  • Main Navigation Formats

     

5. Add your favicon

Scroll the Configuration page down to Override global settings and select the Favicon option. 

  • Before uploading, delete the path information in the Path to custom icon box, to remove the existing file from your template.
  • Recommended: Upload a png file, square, max. size 48x48 px.

  • Favicon

     

6. Add 'back-to-top' button

Help your users get back to the top of a long page without scrolling:  

 On the Configuration page, locate Display Options and enable the Use back-to-top option (see Settings Page below).

  • Screenshot of the Color, Logo and Style settings area, with special highlight on the 'Back-to-top' button area.

     

7. Browse and add fonts

The picturemaxx Drupal basic theme uses the Open Sans font family as a default font.

To display other fonts on your site, you can:

  • upload custom fonts to your system, or
  • import fonts from Google Fonts


Important: Data protection information:

When using Google Fonts, the user's IP address is automatically transferred to Google. The European Courts have ruled that such a data transfer via Google Fonts violates the GDPR and, therefore, the constitutional right to informational self-determination might be violated. 

Recommended: Download the fonts and embed them locally to picturemaxx Drupal as explained in 7.1 Custom fonts below.

7.1. Custom fonts

Select desired font attributes and upload fonts to apply your own font style (WOFF format only).

To upload custom fonts:

  • In Configuration → picturemaxx Configuration → Theme settings → Font selection and configuration, select Custom Fonts and click Add Custom Font:

  • Custom FontsAdd custom font

     

  • Label
    Enter the Custom Font name. Note that this name is unique, while Font Family is not necessarily unique.

    Font Family
    Enter the CSS Font Family. The @font-face name will be based on this.

    Font Style
    Choose between Normal and Italic.

    Font Weight
    The Font Weight property sets how thick or thin characters in text should be displayed. The dropdown offers different options to choose from.

    Font Classification
    Select applicable font classifications from a list of available options: Serif, Sans Serif, Slab Serif, Handwriting, Decorative, Monospace.

    Font File
    Choose a font file to upload. The font file must be in the WOFF format since it is accepted by all modern browsers.

7.2. Import fonts / Google API Key

To import fonts from the Google Fonts service, navigate to Configuration → picturemaxx Configuration → Theme settings → Font selection and configuration.

  • 1. First, follow this link https://developers.google.com/fonts/docs/developer_api#APIKey to aquire a Google API Key for fonts. In Font Selector, click the Settings tab to add the aquired API key.

    Google API Key Settings

    2. Enter the Google API Key into the Google Fonts Settings box and click Save configuration:

    Fonts

    3. Scroll up and click Import from google_fonts_api to import the fonts you want to display on your website:

    Fonts

     

  • To enable specific font sizes and styles, in Font Selector select the Browse tab. Explore available fonts and select the fonts you'd like to use. Just click on each font applicable.

    Fonts

     

7.3. Add font display

After you have imported a Custom font or a Google font, take the last step to implement a Font display for the imported font. Navigate to Configuration → picturemaxx Configuration → Theme settings → Font selection and configuration. On the Font Selector page, select the Font display tab and assign a font style to specific selectors (e.g., headers, standard text) and the front-end theme.

  • 1.On the Font display page, click Add Font display:

    Add font display

     

    2. Now you can assign a font to specific selectors and the front-end theme. 

    Fonts

     

  • Label
    Enter the font's name here.

    Font
    Select a font to use as a part of the font style.

    Fallback font
    Select a fallback font if the selected font fails to load. 

    Preset selectors
    Use preset selectors to display your font easily.

    Theme
    Select the theme this display will work for.

Before publishing the page:

  • Click Preview to make sure everything looks the way you want. You can preview any change before publishing it. 
  • To return to the Edit page, click Back to content editing.
  • To make new content visible on your website, turn on the Content is live (published) option.
  • Click Save to store your changes. The website content items are listed on the Content page.