• Home
  • Add-ons
  • Templates
  • Docs
    • Get Started
    • Quick Setup
    • Style Editor
    • Resources
    • Updates
    • Tutorials
  • Blog
     
  • Home
  • Add-ons
  • Templates
  • Docs
    • Get Started
    • Quick Setup
    • Style Editor
    • Resources
    • Updates
    • Tutorials
  • Blog

    Color settings


    • The brand colors

      01

    • Default Jimdo settings

      02

    • Helper classes

      03

    • Questions and Answers

      04

    This page has been archived by Matrix Themes. It is now read-only and valid only for the templates installed before 2022.

    Setting the brand colors

    Each Matrix theme includes 4 different brand colors which can be identified with the following classes:

    bg-primary The main accent background color
    bg-secondary The secondary accent background color
    bg-primary-dark The primary dark background color (footer)
    bg-secondary-dark The secondary dark background color
    has-promo-tag
    Example of the main brand color

    How to setup the main brand colors

    Go to Design > custom template > CSS  ( or click directly the Custom Layout in Matrix themes menu ) and on the top of CSS find the section "setting global brand colors".

    As alternative, you can use the command Ctrl+F (for Windows) or cmd+F ( for iOS)  tap "brand colors".

     

    You should find 2 blocks inside of it : brand backgrounds and brand links. So all you have to do is to add your own color in 2 positions and click the save button

    bg-grey  mid-round add-20 has-shadow wow animated fadeInUp
    
    
    /*** setting global brand colors ***/
    /* brand backgrounds */
    #hs-container .brand-bg .j-product .cc-shop-product-desc .cc-shop-addtocard...{
        background: #3498db;
    }
    
    /* brand links */
    .brand-link h1 a... {
        color:#3498db;
    }

    Tip

    - The same color you add for your brand color should be applied also for the global link (menu> design> font settings).

    - The main brand color can't be black (#000000) or white (#ffffff) otherwise  you will  have a conflict between other colors and backgrounds ( e.g. white link will be invisible on the white background etc )

     

    How to setup the secondary colors

    In your template you have also the primary and secondary dark colors  which are the background colors of footer and some custom elements.

    It works exactly the same like with the brand colors:

    
    .brand-bg .hs-footer,
    .brand-bg .bg-primary-dark,
    .brand-bg .top-nav{ 
        background:#0E333B; /* color 2 */
    }
    
    .brand-bg .footer-btm,
    .brand-bg .bg-secondary-dark,
    .brand-bg .hs-menu .j-nav-variant-nested > ul > li > ul,
    .brand-bg .hs-header,
    .brand-bg .form-dark .cc-checkout-user-note-form textarea,.brand-bg .form-dark #cc-checkout-billing-address-form input[type="text"],.brand-bg .form-dark #cc-checkout-shipping-address-form input[type="text"],.brand-bg .form-dark .commententry textarea,.brand-bg .form-dark .commententry input[type="text"],.brand-bg .form-dark .j-formnew .cc-m-form-view-sortable input[type='text'],.brand-bg .form-dark .j-formnew .cc-m-form-view-sortable input[type='email'],.brand-bg .form-dark .j-formnew .cc-m-form-view-sortable textarea,.brand-bg .form-dark .j-newsletterbox input[type='email'],.cc-pagemode-overlay
    .brand-bg .form-dark #password,.brand-bg .form-dark  .newsletterbox input.newsletterInput,.brand-bg input#mce-EMAIL,.brand-bg input#mce-FNAME,input#mce-LNAME  {
         background:#11414b; /* color 3 */
    }
    
    
    

    Tips and suggestions

    The default footer background should always have a dark color. To make it white, gray or other colors,  it should be setup directly in HTML using the helper classes

    Example of footer with white background


    <div class="hs-footer bg-white o-form color-hr-3 g-font">

    The  alternative main brand colors

    In CSS you can also add the secondary brand color which can be used for custom widgets ( backgrounds or buttons)


    /* additional brand backgrounds */ .bg-secondary { background:#616369; }
    Designer Palettes (Beta)

    Default Jimdo settings

    The colors of some template elements  can be setup using the default Jimdo tools

    In admin menu, navigate Design> Font Settings and here you setup the following elements:

    1. The color of the global text <p> of your content
    2. The color of your headings(H1, H2, H3) in content section
    3. The global link color (you need to apply the same color as you setup for brand color in CSS)
    4. The color of horizontal line in content section
    bg-grey mid-round add-20

    Store style

    In admin menu, navigate Design> Store Styles to change the style of your online store elements

    bg-grey  mid-round add-20 has-shadow wow animated fadeInUp

    Helper classes

    Using the helper classes you can further alter your colors in custom widgets or in global template settings. 

    More details about it can be found in Matrix Themes menu> helper classes

     

    Background colors

    bg-transparent The transparent background color
    bg-primary The main accent background color
    bg-secondary The secondary accent background color
    bg-primary-dark The primary dark background color (footer)
    bg-secondary-dark The secondary dark background color
    bg-white White background color
    bg-dark        
    bg-turquoise        
    bg-emerald        
    bg-peter-river        
    bg-amethyst        
    bg-wet-asphalt        
    bg-green-sea        
    bg-nephritis        
    bg-belize-hole        
    bg-wisteria        
    bg-midnight-blue        
    bg-sun-flower        
    bg-carrot        
    bg-alizarin        
    bg-clouds        
    bg-concrete        
    bg-orange        
    bg-pumpkin        
    bg-pomegranate        
    bg-silver        
    bg-asbestos        
    bg-red        
    bg-blue        
    bg-green        
    bg-yellow        
    bg-pink        
    bg-purple        
    bg-amber        
    bg-lime        
    bg-brown        
    bg-teal        
    bg-cyan        
    bg-gray        
    bg-gradient-1 The background gradient style 1
    bg-gradient-2 The background gradient style 2
    bg-gradient-3 The background gradient style 3

    Text and links colors

    color-dark The headings and text color #000000
    color-white The headings and text color #ffffff
    link-white The global link color #ffffff
    link-dark The global link color #000000
    link-grey The global link color #cccccc
    has-dark-link The text color in custom buttons (not hover)

    Do you have any further questions?

    You can ask here!

    Comments: 12 (Discussion closed)
    • #1

      Walter Schweizer (Sunday, 11 February 2018 14:19)

      Hello, Thanks for the installation. Unfortunately, I have not yet remove the filter on the main picture. Where can I find this? Have unfortunately not found this area on the info:

      HOW TO REMOVE THE OVERLAY FILTER
      The overlay filter has been added to the Matrix themes using fullscreen slideshow, image or video. You can change the opacity value or remove it completely in CSS.

      Find the below part of code in your CSS folder:


      /* overlay */
      .backstretch:after,#tubular-container:after{
      background-color: rgba(52,52,52,0.7);
      content:'';
      width: 100%;
      height: 100%;
      top:0;
      left:0;
      position: absolute;



      Best Regards

    • #2

      Serhiy (Sunday, 11 February 2018 21:31)

      @Walter the page with correct tutorial about hero image and overlay can be found in Matrix themes menu > section "help" ( https://www.matrix-themes.com/support/help )

    • #3

      Mario (Sunday, 13 May 2018 21:37)

      Hi there, I have "Pro Photography" theme installed on my website, but I want to change the main color, which is now dark black, into a light white, in order to make the webpage look more clean and tidy. I already have read the tutorial, but it doesn't change, I don't know what I'm doing wrong. Also i have set as a background a slide of images, but sometimes (almost on smartphone devices) they don't appear, i have to refresh so many times the webpage in order to see them appear. Instead of these images, it shows a dark black background which i have not set. Can you help me, please?

    • #4

      Bruno (Wednesday, 23 May 2018 00:03)

      Hi there, sounds stupid but I can not find the safe button on css
      please help.

    • #5

      Serhiy (Wednesday, 23 May 2018 21:36)

      @Bruno you need to scroll to the bottom of iframe to see the the save button. Otherwise, please contact from support page:
      https://www.matrix-themes.com/support/

    • #6

      Alice (Tuesday, 28 July 2020 11:13)

      Hello, Is it possible to use gradient in footer?

    • #7

      Matrix themes (Wednesday, 29 July 2020 00:10)

      @Alice yes

    • #8

      Michael (Friday, 04 September 2020 12:10)

      Hello, anybody could tell me how to change the color of the fonts of the buttons? Thank you!

    • #9

      Matrix themes (Friday, 04 September 2020 13:50)

      @Michael the color of the fonts in button should be always white

    • #10

      Peter Litke (Thursday, 10 June 2021 10:34)

      I do have a black footer background.
      The color of the fonts of the link do cookie.settings, privacy presetted from from jimdo is black too.
      I could not figure out how to change the black color of the link do cookie.settings-link, privacy-link to white. Can you help e how to change the color to white? Thank you in advance.

    • #11

      Matrix themes (Thursday, 10 June 2021 14:17)

      @Peter In admin mode > design> font settings > links

    • #12

      emmanuel herschon (Tuesday, 09 November 2021 12:32)

      Hi, I use the Altona theme
      version 4.0 multilingual ( September 2020 ).
      I would like to set the background of all pages in black and text in white.
      I tried hard but could not find the solution.

      What should I do?

    Matrix Themes


    Stand out with professional Jimdo website

    Premium 24/7 Support · Lifetime Updates




    has-right-col-border

    Resources

    • Templates
    • Pre-made Templates
    • Matrix Builder
    • Add-ons
    • Pricing
    • Marketplace

    Documentation

    • Get Started
    • Quick Setup
    • Style Editor
    • Tutorials
    • Updates

    Quick links

    • Made with Matrix
    • Style Guide
    • Shortcodes
    • Jimdo Creator
    • Small Business websites
    • Feedback

    Try Matrix Builder
    draggable-logo

    Global colors
      bg-primary
      bg-primary-light
      bg-primary-dark
      bg-secondary
      bg-secondary-dark
    Template colors
      body
      top-header
      top-header-inner
      header
      header-inner
      navigation-inner
      navigation color
      dropdown background color
      content
    Footer Styles
      background
      text color
      link color
      horizontal line
    Buttons
      style 1
      style 2
      style 3
      text color
    Mobile navigation
      background color
      navigation color
    Other elements
      social icons
      top header border
      header border
      nav inner border
    Template configurations
     
    has-center-nav has-sticky-logo has-large-header g-font no-shopping-cart
     
    Top header inner
     
     
     
    Header inner
     
     
     
    Navigation inner
     
     
     
    Navigation styles
     
    snip-nav --line01
     
    Sub-menu (breadcrumbs) styles
     
    size-15
     
    Mobile Navigation styles
     
    size-30
     
    Content styles
     
    form-white
     
    Footer styles
     
    o-form color-white
     
    Footer background image
     
     

     

    Typography

    Heading H1
    weight-400
     
    Heading H2
    weight-400
     
    Heading H3
    weight-400
     
    Buttons
    weight-400
     
     
    Advanced settings
     
    Custom CSS

     

    #cc-inner .my-class {

      color:#f0f0f0;

    }

     


    Note:
    All changes made here will be applied to your entire website.
    is-switcher

    About | Privacy Policy | Cookie Policy | Sitemap
    Created with Jimdo
    Log in Log out | Edit
    • Scroll to top
    Close