• Home
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Altona
    • Hafen
    • Enkel
    • Horten
    • Agen
    • Hisingen
    • Tjörn
    • Lacksund
    • Öland
  • Page builder
  • Support
  • Blog
  • Home
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Altona
    • Hafen
    • Enkel
    • Horten
    • Agen
    • Hisingen
    • Tjörn
    • Lacksund
    • Öland
  • Page builder
  • Support
  • Blog
    22. January 2020

    Template Configuration - Jimdo

    The advanced options for custom Jimdo layout with template configuration which defines the global design of the website

    How it works

    The template configuration is very similar to custom body classes you're using in Matrix themes. For example,  you  can add the body class 'no-hero'  in Edit Head section to hide the hero image in specific page, while the template configuration applies to the whole site and all pages.

    With template configuration you can define whether your header has white or dark background, decide left, center or right aligned navigation and much more.

     

     

    where to edit

    The configuration template line can be found in Design > custom template > HTML

    Configuration options

    • brand-bg - the template is using brand background color you set up in CSS
    • brand-link - the brand color link you set up in CSS
    • has-play-of-columns - customized style for module ' text with photo'
    • has-custom-header - the alternative background color for the header
    • has-left-nav - left aligned navigation
    • has-center-nav - center aligned navigation
    • has-right-nav - right aligned navigation
    • has-preload - supports page preload plugin
    • has-slope - slope element for the hero image
    • has-custom-text - custom font for the global text
    • has-custom-nav - the last dropdown menu box has custom style

     

    Advanced customization

    Advanced customization for specific  elements  of the template.

    
    /* -------------------------------------------------------------------------------- /
            [9]     ADVANCED CUSTOMIZATIONS
    / -------------------------------------------------------------------------------- */
    
    /*** template color customizations ***/
    
    /* custom background */
    #hs-container .has-custom-bg {
       background:#3544ee!important;
    }
    
    /* custom color */
    body .has-custom-color, .has-custom-color p, .has-custom-color table, .has-custom-color td {
       color:#3544ee;
    }
    
    /*  custom links */
    #hs-container .has-custom-link a:link,#hs-container  .has-custom-link a:visited {
        color:#3544ee;
    }
    
    /* custom buttons */
    #hs-container .has-custom-btn .j-product .cc-shop-product-desc .cc-shop-addtocard,#hs-container .has-custom-btn  #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout,#hs-container .has-custom-btn #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn,#hs-container .has-custom-btn .j-blogarticle .blogreadmore:link,#hs-container .has-custom-btn  .j-blogarticle .blogreadmore:visited,#hs-container .has-custom-btn .j-blogarticle .comment:link,#hs-container .has-custom-btn .j-blogarticle .comment:visited,#hs-container .has-custom-btn .post .blogreadmore:link,#hs-container .has-custom-btn .post .blogreadmore:visited,#hs-container .has-custom-btn .post .comment:link,#hs-container .has-custom-btn .post .comment:visited,#hs-container .has-custom-btn .commententry input[type="submit"],#hs-container .has-custom-btn .j-formnew input[type='submit'],#hs-container .has-custom-btn .j-downloadDocument .cc-m-download-link,#hs-container .has-custom-btn .j-newsletterbox input[type='submit'],.cc-pagemode-overlay #hs-container .has-custom-btn input[type="submit"].submitUser,#hs-container .has-custom-btn .j-rss br+a[target="_blank"],#hs-container .has-custom-btn input#mc-embedded-subscribe.button,#hs-container .has-custom-btn a.j-calltoaction-link.j-calltoaction-link-style-1,#hs-container .has-custom-btn a.j-calltoaction-link.j-calltoaction-link-style-2,#hs-container .has-custom-btn a.j-calltoaction-link.j-calltoaction-link-style-3 {
      background:#3544ee;
    }
    
    /* custom buttons hover */
    #hs-container .hs-button.has-custom-btn-hover:hover,#hs-container .has-custom-btn-hover .j-product .cc-shop-product-desc .cc-shop-addtocard:hover,#hs-container .has-custom-btn-hover #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout:hover,#hs-container .has-custom-btn-hover #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn:hover,#hs-container .has-custom-btn-hover .j-blogarticle .blogreadmore:hover:link,#hs-container .has-custom-btn-hover .j-blogarticle .blogreadmore:hover:visited,#hs-container .has-custom-btn-hover .j-blogarticle .comment:hover:link,#hs-container .has-custom-btn-hover .j-blogarticle .comment:hover:visited,#hs-container .has-custom-btn-hover .post .blogreadmore:hover:link,#hs-container .has-custom-btn-hover .post .blogreadmore:hover:visited,#hs-container .has-custom-btn-hover .post .comment:hover:link,#hs-container .has-custom-btn-hover .post .comment:hover:visited,#hs-container .has-custom-btn-hover .commententry input[type="submit"]:hover,#hs-container .has-custom-btn-hover .j-formnew input[type='submit']:hover,#hs-container .has-custom-btn-hover .j-downloadDocument .cc-m-download-link:hover,#hs-container .has-custom-btn-hover .j-newsletterbox input[type='submit']:hover,.cc-pagemode-overlay #hs-container .has-custom-btn-hover input[type="submit"].submitUser:hover,#hs-container .has-custom-btn-hover .j-rss br + a[target="_blank"]:hover,#hs-container .has-custom-btn-hover .j-product .cc-shop-product-desc .cc-shop-addtocard:active,#hs-container .has-custom-btn-hover #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout:active,#hs-container .has-custom-btn-hover #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn:active,#hs-container .has-custom-btn-hover .j-blogarticle .blogreadmore:active:link,#hs-container .has-custom-btn-hover .j-blogarticle .blogreadmore:active:visited,#hs-container .has-custom-btn-hover .j-blogarticle .comment:active:link,#hs-container .has-custom-btn-hover .j-blogarticle .comment:active:visited,#hs-container .has-custom-btn-hover .post .blogreadmore:active:link,#hs-container .has-custom-btn-hover.post .blogreadmore:active:visited,#hs-container .has-custom-btn-hover .post .comment:active:link,#hs-container .has-custom-btn-hover .post .comment:active:visited,#hs-container .has-custom-btn-hover .commententry input[type="submit"]:active,#hs-container .has-custom-btn-hover .j-formnew input[type='submit']:active,#hs-container .has-custom-btn-hover .j-downloadDocument .cc-m-download-link:active,#hs-container .has-custom-btn-hover .j-newsletterbox input[type='submit']:active,#hs-container .has-custom-btn-hover .cc-pagemode-overlay input[type="submit"].submitUser:active,#hs-container .has-custom-btn-hover .j-rss br + a[target="_blank"]:active,#hs-container .has-custom-btn-hover .j-product .cc-shop-product-desc .cc-shop-addtocard:focus,#hs-container .has-custom-btn-hover #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout:focus,#hs-container .has-custom-btn-hover #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn:focus,#hs-container .has-custom-btn-hover .j-blogarticle .blogreadmore:focus:link,#hs-container .has-custom-btn-hover .j-blogarticle .blogreadmore:focus:visited,#hs-container .has-custom-btn-hover .j-blogarticle .comment:focus:link,#hs-container .has-custom-btn-hover .j-blogarticle .comment:focus:visited,#hs-container .post .blogreadmore:focus:link,#hs-container .has-custom-btn-hover .post .blogreadmore:focus:visited,.post .comment:focus:link,#hs-container .has-custom-btn-hover .post .comment:focus:visited,#hs-container .has-custom-btn-hover .commententry input[type="submit"]:focus,#hs-container .has-custom-btn-hover .j-formnew input[type='submit']:focus,#hs-container .has-custom-btn-hover .j-downloadDocument .cc-m-download-link:focus,#hs-container .has-custom-btn-hover .j-newsletterbox input[type='submit']:focus,.cc-pagemode-overlay #hs-container .has-custom-btn-hover input[type="submit"].submitUser:focus,#hs-container .has-custom-btn-hover .j-rss br+a[target="_blank"]:focus,#hs-container .has-custom-btn-hover input#mc-embedded-subscribe.button:hover,#hs-container .has-custom-btn-hover a.j-calltoaction-link.j-calltoaction-link-style-1:hover,#hs-container .has-custom-btn-hover a.j-calltoaction-link.j-calltoaction-link-style-2:hover,#hs-container .has-custom-btn-hover a.j-calltoaction-link.j-calltoaction-link-style-3:hover {
        border:none;
        background: #fff!important;
        color:#222!important;
    }
    
    /* custom dropdown menu hover and active */
    .has-custom-menu-hover .hs-menu nav ul ul li.cc-nav-parent>a:link,.has-custom-menu-hover .hs-menu nav ul ul li.cc-nav-parent>a:visited,.has-custom-menu-hover .hs-menu nav ul ul li.cc-nav-current>a:link,.has-custom-menu-hover .hs-menu nav ul ul li.cc-nav-current>a:visited,
    .has-custom-menu-hover .hs-menu nav ul ul li a:link:hover,.has-custom-menu-hover .hs-menu nav ul ul li a:link:active,.has-custom-menu-hover .hs-menu nav ul ul li a:link:focus,.has-custom-menu-hover .hs-menu nav ul ul li a:visited:hover,.has-custom-menu-hover .hs-menu nav ul ul li a:visited:active,.has-custom-menu-hover .hs-menu nav ul ul li a:visited:focus {
        background: #3544ee!important;
        color:#fff!important;
    }
    
    /* custom mobile menu hover and active */
    .cc-page .has-custom-menu-mobile .slicknav_nav a:hover,
    .has-custom-menu-mobile .jmd-nav .j-nav-current>a:link,.has-custom-menu-mobile .jmd-nav .j-nav-current>a:visited,.has-custom-menu-mobile .jmd-nav a:active,.has-custom-menu-mobile .jmd-nav a:focus,.has-custom-menu-mobile .jmd-nav a:hover,
    .cc-page .has-custom-menu-mobile .slicknav_nav a.cc-nav-current.j-nav-current.jmd-nav__link--current {
       color:#3544ee!important;
    }
    
    /* custom form styles */
    .has-custom-form .cc-checkout-user-note-form textarea,.has-custom-form  #cc-checkout-billing-address-form input[type="text"],.has-custom-form #cc-checkout-shipping-address-form input[type="text"],.has-custom-form .commententry textarea,.has-custom-form .commententry input[type="text"],.has-custom-form .j-formnew .cc-m-form-view-sortable input[type='text'],.has-custom-form .j-formnew .cc-m-form-view-sortable input[type='email'],.has-custom-form .j-formnew .cc-m-form-view-sortable textarea,.has-custom-form .j-newsletterbox input[type='email'],.cc-pagemode-overlay
    .has-custom-form #password,.has-custom-form .newsletterbox input.newsletterInput  {
        background-color: #f0f0f0;
        color: inherit;
        border: 0px solid #ededed;
        border-radius:0px;
        padding: 10px 0;
        outline: none;
        width:99%!important;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    
    /* custom horizontal line */
    #hs-container .has-custom-hr .hr{
        border-bottom-width:0px;
        height: 1px;
        border-bottom-width: 0px;
        border-color:transparent;
        background:#2af5dd!important;
    }
    
    /* custom shopping cart */
    .custom-basket-color .j-cart-icon {
        color: #fff;
        background-color: rgba(252, 252, 252, 0.0);
    }

    In case you needed to change the background color of contact form in content or footer sections, you  can add the class 'has-custom-form' like shown in following examples

    
    <div class="hs-content has-custom-form g-font">
    
    
    
    
    <div class="hs-footer has-custom-form color-hr g-font">
    
    
    

    Template tweaks

    A new section of CSS with some specific customization called "template tweaks." Here you can change  for example a style of default buttons or your own code keeping the original  template's CSS

     

    
    /*** template tweaks ***/
    
    #cc-inner #hs-container .j-formnew input[type='submit'],#cc-inner .hs-content .hs-button,#cc-inner .hs-footer .hs-button {
        padding:18px 45px;
    }
    
    
    

    Q&A

    • Which templates include the configuration options?

      All themes installed from 20/01/2020

    • Special notes

      Specific themes such as Halmstad or Bergen don't support navigation alignment

    tagPlaceholderTags:

    Support

    • Docs
    • Guides
    • Style Editor
    • Global Updates
    • Theme Updates
    • Helper classes
    • Common support issues
    • Contact

    Features

    • Templates
    • Page Builder
    • Add-ons
    • Landing pages
    • Alt Classes
    • Matrix variables

    Get inspired

    • Most popular templates
    • Website examples
    • Custom widgets
    • Block Elements
    • Fluid Sections

    Quick links

    • Marketplace
    • Pricing
    hide-in-doc-page

    draggable-logo

    Showcase

     

    Main colors
       bg-primary
       bg-primary-light
       bg-primary-dark
       bg-secondary
       bg-secondary-dark
    Template sections
       body
       top-header
       header
       content
    Footer Styles
       background
       text color
       link color
       horizontal line
    Buttons
       style 1
       style 2
       style 3
       text color
    Other elements
      social icons
      navigation color
      subnav background
    Mobile navigation
       background color
       navigation color
    Template configurations
     
    has-center-nav g-font has-large-header
     
    Navigation styles
     
    size-15 weight-400 snip-nav --line01 is-uppercase
     
    Content styles
     
    form-white
     
    Footer styles
     
    o-form color-white

     

    Typography

    Heading H1
    weight-600 is-uppercase
     
    Heading H2
    weight-400 is-uppercase
     
    Heading H3
    weight-600 is-uppercase
     
    Buttons
    weight-600 is-uppercase
     
    Animations
     

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

    MATRIX THEMES

    STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

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