From previous post you know how to use helper classes in Matrix themes. You can customize your Jimdo website using brand color and backgrounds adapting all elements for your needs. Now, you will find out how to customize specific elements and custom widgets making them different from the global styles

In CSS folder you should find a new section "template color customizations" where you can add further colors and styles for your website. If you're not using the latest release of Matrix theme, you can copy and paste the below part to your website.You should paste it at the end of CSS  

/*** template color customizations ***/

/* custom horizontal line */
.custom-hr .hr {
   background:#c0d34b!important;/* add your own color */
}

/*** custom form styles ***/
.custom-form .cc-checkout-user-note-form textarea,.custom-form #cc-checkout-billing-address-form input[type="text"],.custom-form #cc-checkout-shipping-address-form input[type="text"],.custom-form .commententry textarea,.custom-form .commententry input[type="text"],.custom-form .j-formnew .cc-m-form-view-sortable input[type='text'],.custom-form .j-formnew .cc-m-form-view-sortable input[type='email'],.custom-form .j-formnew .cc-m-form-view-sortable textarea,.custom-form .j-newsletterbox input[type='email'],.cc-pagemode-overlay
.custom-form #password,.custom-form .newsletterbox input.newsletterInput {
    background-color: #f1c40f;
    color: #fff;
    border: 1px solid #e67e22;
    padding: 10px 0;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
     border-radius: 5px; 
}

/* custom input button */
#hs-container .brand-bg .custom-btn .j-product .cc-shop-product-desc .cc-shop-addtocard,#hs-container .brand-bg .custom-btn #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout,#hs-container .brand-bg .custom-btn #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn,#hs-container .brand-bg .custom-btn .j-blogarticle .blogreadmore:link,#hs-container .brand-bg .custom-btn .j-blogarticle .blogreadmore:visited,#hs-container .brand-bg .custom-btn .j-blogarticle .comment:link,#hs-container .brand-bg .custom-btn .j-blogarticle .comment:visited,#hs-container .brand-bg .custom-btn .post .blogreadmore:link,#hs-container .brand-bg .custom-btn .post .blogreadmore:visited,#hs-container .brand-bg .custom-btn .post .comment:link,#hs-container .brand-bg .custom-btn .post .comment:visited,#hs-container .brand-bg .custom-btn .commententry input[type="submit"],#hs-container .brand-bg .custom-btn .j-formnew input[type='submit'],#hs-container .brand-bg .custom-btn .j-downloadDocument .cc-m-download-link,#hs-container .brand-bg .custom-btn .j-newsletterbox input[type='submit'],.cc-pagemode-overlay #hs-container .brand-bg .custom-btn input[type="submit"].submitUser,#hs-container .brand-bg .custom-btn .j-rss br+a[target="_blank"],#hs-container .brand-bg .custom-btn input#mc-embedded-subscribe.button,#hs-container .brand-bg .custom-btn a.j-calltoaction-link.j-calltoaction-link-style-1,#hs-container .brand-bg .custom-btn a.j-calltoaction-link.j-calltoaction-link-style-2,#hs-container .brand-bg .custom-btn a.j-calltoaction-link.j-calltoaction-link-style-3 {
    background: #c0d34b;/* add your own color */
}

/* custom Jimdo button */
#hs-container .brand-bg .custom-j-btn a.j-calltoaction-link.j-calltoaction-link-style-1,#hs-container .brand-bg .custom-j-btn a.j-calltoaction-link.j-calltoaction-link-style-2,#hs-container .brand-bg .custom-j-btn a.j-calltoaction-link.j-calltoaction-link-style-3 {
   background: #c0d34b;/* add your own color */
}

/* custom hover */
#hs-container .custom-hover .j-product .cc-shop-product-desc .cc-shop-addtocard:hover,#hs-container .custom-hover #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout:hover,#hs-container .custom-hover #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn:hover,#hs-container .custom-hover .j-blogarticle .blogreadmore:hover:link,#hs-container .custom-hover .j-blogarticle .blogreadmore:hover:visited,#hs-container .j-blogarticle .comment:hover:link,#hs-container .custom-hover .j-blogarticle .comment:hover:visited,#hs-container .custom-hover .post .blogreadmore:hover:link,#hs-container .custom-hover .post .blogreadmore:hover:visited,#hs-container .custom-hover .post .comment:hover:link,#hs-container .custom-hover .post .comment:hover:visited,#hs-container .custom-hover .commententry input[type="submit"]:hover,#hs-container .custom-hover .j-formnew input[type='submit']:hover,#hs-container .custom-hover .j-downloadDocument .cc-m-download-link:hover,#hs-container .custom-hover .j-newsletterbox input[type='submit']:hover,.cc-pagemode-overlay #hs-container .custom-hover input[type="submit"].submitUser:hover,#hs-container .custom-hover .j-rss br + a[target="_blank"]:hover,#hs-container .custom-hover .j-product .cc-shop-product-desc .cc-shop-addtocard:active,#hs-container .custom-hover #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout:active,#hs-container .custom-hover #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn:active,#hs-container .custom-hover .j-blogarticle .blogreadmore:active:link,#hs-container .custom-hover .j-blogarticle .blogreadmore:active:visited,#hs-container .custom-hover .j-blogarticle .comment:active:link,#hs-container .custom-hover .j-blogarticle .comment:active:visited,#hs-container .custom-hover .post .blogreadmore:active:link,#hs-container .custom-hover .post .blogreadmore:active:visited,#hs-container .custom-hover .post .comment:active:link,#hs-container .custom-hover .post .comment:active:visited,#hs-container .custom-hover .commententry input[type="submit"]:active,#hs-container .custom-hover .j-formnew input[type='submit']:active,#hs-container .custom-hover .j-downloadDocument .cc-m-download-link:active,#hs-container .custom-hover .j-newsletterbox input[type='submit']:active,#hs-container .custom-hover .cc-pagemode-overlay input[type="submit"].submitUser:active,#hs-container .custom-hover .j-rss br + a[target="_blank"]:active,#hs-container .custom-hover .j-product .cc-shop-product-desc .cc-shop-addtocard:focus,#hs-container .custom-hover #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout:focus,#hs-container .custom-hover #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn:focus,#hs-container .custom-hover .j-blogarticle .blogreadmore:focus:link,#hs-container .custom-hover .j-blogarticle .blogreadmore:focus:visited,#hs-container .custom-hover .j-blogarticle .comment:focus:link,#hs-container .custom-hover .j-blogarticle .comment:focus:visited,#hs-container .custom-hover .post .blogreadmore:focus:link,#hs-container .custom-hover .post .blogreadmore:focus:visited,.post .comment:focus:link,#hs-container .custom-hover .post .comment:focus:visited,#hs-container .custom-hover .commententry input[type="submit"]:focus,#hs-container .custom-hover .j-formnew input[type='submit']:focus,#hs-container .custom-hover .j-downloadDocument .cc-m-download-link:focus,#hs-container .custom-hover .j-newsletterbox input[type='submit']:focus,.cc-pagemode-overlay #hs-container .custom-hover input[type="submit"].submitUser:focus,#hs-container .custom-hover .j-rss br+a[target="_blank"]:focus,#hs-container .custom-hover input#mc-embedded-subscribe.button:hover,#hs-container .custom-hover a.j-calltoaction-link.j-calltoaction-link-style-1:hover,#hs-container .custom-hover a.j-calltoaction-link.j-calltoaction-link-style-2:hover,#hs-container .custom-hover a.j-calltoaction-link.j-calltoaction-link-style-3:hover,
#hs-container .hs-button.custom-hover:hover,#hs-container .brand-bg .hs-button.custom-hover:hover,
#hs-container .brand-bg .tagcloud.custom-hover a:hover {
   background:#fff!important;
   color:#000!important;
}

/* custom navigation color - hover and active */
#hs-container .brand-bg .custom-color.hs-menu nav ul li.cc-nav-parent>a:link,#hs-container .brand-bg .custom-color.hs-menu nav  ul li.cc-nav-parent>a:visited,#hs-container .brand-bg .custom-color.hs-menu nav ul li.cc-nav-current>a:link,#hs-container .brand-bg .custom-color.hs-menu nav ul li.cc-nav-current>a:visited,
#hs-container .brand-bg .custom-color.hs-menu nav ul li a:link:hover,#hs-container .brand-bg .custom-color.hs-menu nav ul li a:link:active,.hs-menu nav ul li a:link:focus,#hs-container .brand-bg .custom-color.hs-menu nav ul li a:visited:hover,#hs-container .brand-bg .custom-color.hs-menu nav ul li a:visited:active,#hs-container .brand-bg .custom-color.hs-menu nav ul li a:visited:focus {
    background:#c0d34b;/* add your own color */
}

/* custom sub-navigation color - hover and active */
#hs-container .brand-bg .custom-color.hs-menu nav ul ul li.cc-nav-parent>a:link,#hs-container .brand-bg .custom-color.hs-menu nav ul ul li.cc-nav-parent>a:visited,#hs-container .brand-bg .custom-color.hs-menu nav ul ul li.cc-nav-current>a:link,#hs-container .brand-bg .custom-color.hs-menu nav ul ul li.cc-nav-current>a:visited,#hs-container .brand-bg .custom-color.hs-menu nav ul ul li a:link:hover,#hs-container .brand-bg .custom-color.hs-menu nav ul ul li a:link:active,#hs-container .brand-bg .custom-color.hs-menu nav ul ul li a:link:focus,#hs-container .brand-bg .custom-color.hs-menu nav ul ul li a:visited:hover,#hs-container .brand-bg .custom-color.hs-menu nav ul ul li a:visited:active,#hs-container .brand-bg .custom-color.hs-menu nav ul ul li a:visited:focus{
   background: #c0d34b;/* add your own color */
}

/* custom mobile menu color - hover and active */
.cc-page .brand-bg .custom-slicknav-color .slicknav_nav a:hover {
   color:#c0d34b!important;/* add your own color */
}

/* custom bg for image caption - centered only */
#hs-container .brand-bg .custom-caption div.caption.cc-m-image-align-3,#hs-container .brand-bg .custom-caption .cc-imagewrapper.cc-m-image-align-3 figcaption {
    background:#c0d34b!important;/* add your own color */
}

/* custom tag widget */
.brand-bg .custom-color.tagcloud a,.brand-bg .custom-color.tagcloud2 a:hover {
    background:#c0d34b;/* add your own color */
}

/* custom social icon */
.custom-color a.social {
    background-color:#c0d34b;/* add your own color */
}

/* mid-round shape for social icons */
.mid-round-icon a.social {
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
     border-radius: 5px; 
}

/* round shape for social icons */
.round-icon a.social {
    -webkit-border-radius: 500px; 
    -moz-border-radius: 500px; 
     border-radius: 500px; 
}

/* custom shopping cart */
.custom-basket-color .j-cart-icon {
    color: #000;
    background-color: rgba(252, 252, 252, 0.85);
}

/* custom link */
#hs-container .custom-link a:link,#hs-container .custom-link a:visited{
    color:#c0d34b!important;/* add your own color */
}

/* custom bg */
#hs-container .custom-bg{
    background:#c0d34b;/* add your own color */
}

/* custom color */
#hs-container .custom-color,#hs-container .custom-color td,#hs-container .custom-color table,#hs-container .custom-color p,#hs-container .custom-color h1,#hs-container .custom-color h2,#hs-container .custom-color h3,#hs-container .custom-color h4,#hs-container .custom-color span{
    color:#c0d34b!important;/* add your own color */
}

If you set up the brand color of your website blue or any other, all elements such as input buttons, active and hover menu, horizontal line etc will have the same color. Now, we want to customize a specific element making it different from the main primary color. Let's see the element by element in details:

If  default color is blue, the horizontal line will have the blue background. You can add the following helper classes to make it different in content and footer section:

• color-hr
  
• white-hr
  
• grey-hr
  
• dark-hr
  
• custom-hr
  

<div class="hs-footer custom-hr">
...

<div class="hs-footer custom-form">
...

Use custom-btn to make it different from default color

<div class="hs-content custom-btn">
...

<div class="hs-content custom-hover">
...

<div class="hs-content custom-j-btn">
...

For dropdown navigation, you can change the color of hover or active state

<div class="custom-color hs-menu">
...

The same for sub-navigation and mobile menu:

<div class="custom-color hs-menu">
...

<div class="custom-slicknav-color m-wrapper">
...

<div class=" hs-content custom-caption">
...

You need to use a custom color directly in Widget/HTML by adding a helper class custom-color

<div class="custom-color tagcloud cc-clearover">
...

<div class="custom-color social cc-clearover">
...

With helper classes mid-round-icon and round-icon, you can customize the shape of icons:

Change the default dark style for the white one:

<div class="sc-wrapper no-icon custom-color">
...

At the end, custom color link which can be different in content and footer sections

<div class="hs-footer custom-link">
...

I also added the outline white and dark color for input buttons and different styles for Social icons. Please check the details in page Updates