Matrix Cølors
Colors based on UI flat colors https://flatuicolors.com/
turquoise
#1abc9c;
emerald
#2ecc71;
peter-river
#3498db;
amethyst
#9b59b6;
wet-asphalt
#34495e;
green-sea
#16a085;
nephritis
#27ae60;
belize-hole
#2980b9;
wisteria
#8e44ad;
midnight-blue
#2c3e50;
sun-flower
#f1c40f;
carrot
#e67e22;
alizarin
#e74c3c;
clouds
#ecf0f1;
concrete
#95a5a6;
orange
#f39c12;
pumpkin
#d35400;
pomegranate
#c0392b;
silver
#bdc3c7;
asbestos
#7f8c8d;
Colors based on UI material colors http://materialuicolors.co/
red
#CF000F;
blue
#19B5FE;
green
#87D37C;
yellow
#CF000F;
pink
#D2527F;
purple
#674172;
amber
#FFC107;
lime
#CDDC39;
deep-purple
#673AB7;
brown
#795548;
teal
#009688;
cyan
#00BCD4;
bg-white
#ffffff;
bg-grey
#f0f0f0;
bg-dark
#000000;
Footer Cølors
style 1
color 2
color 3
style 2
color 2
color 3
style 3
color 2
color 3
Style 4
color 2
color 3
Style 5
color 2
color 3
Style 6
color 2
color 3
Style 7
color 2
color 3
Style 8
color 2
color 3
Style 9
color 2
color 3
Awesøme gradients
The helper class bg-gradient can be used to add gradient color effect to your images in slideshows and single fullscreen image. There are 5 options that you can use ( from bg-gradient to bg-gradient-5 ). Here's an example:
<!-- ************* Single image Carousel ************* -->
<div id="image-fullwidth">
<div class="item">
<div class="hs-overlay bg-gradient">
</div>
<img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/header.jpg" alt="" />
<div class="carousel-caption animated fadeInLeft">
<div class="inner">
<h1 class="color-white big weight-600 left-align">
It's time for custom design
</h1>
<br />
</div>
</div>
</div>
</div>
<div class="matrix-msg invisible">
Edit here your fullwidth image
</div>
The default 5 styles available in Matrix themes. You can change/add your own one in CSS:
bg-gradient
bg-gradient-2
bg-gradient-3
bg-gradient-4
bg-gradient-5
/* awesome gradients */
.bg-gradient {
background: -webkit-linear-gradient(to left, #1D2B64 , #F8CDDA); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #1D2B64 , #F8CDDA); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-gradient-2 {
background: -webkit-linear-gradient(to left, #ff4b1f , #1fddff); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #ff4b1f , #1fddff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-gradient-3 {
background: -webkit-linear-gradient(to left, #00bf8f , #001510); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #00bf8f , #001510); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-gradient-4 {
background: -webkit-linear-gradient(to left, #FF5F6D , #FFC371); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #FF5F6D , #FFC371); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-gradient-5 {
background: -webkit-linear-gradient(to left, #16A085 , #F4D03F); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #16A085 , #F4D03F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
Tips and suggestions
You can add other gradients to your widgets without adding further style in CSS, but adding the code directly to Widget/HTML. See an example:
<!-- example of gradients with inline style -->
<div class="hs-description color-white" style="paste here the gradient code">
<h3>
bg-gradient
</h3>
</div>
<!-- example of gradients with inline style -->
<div class="hs-description color-white" style="
background: -webkit-linear-gradient(to right, #0072ff, #00c6ff); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0072ff, #00c6ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
">
<h3>
bg-gradient
</h3>
</div>
Do you have any further questions?
Please ask here!
Jimdo online store
The best templates for online storeMultilingual Jimdo themes
Create your multilingual websiteStylish Jimdo Theme For Small Businesses
Corporate Jimdo WebsitesRestaurant, Food and Drinks
Jimdo layouts for restaurantsPortfolio and personal websites
Create your personal Jimdo websitePhotography Jimdo websites
Clean and Minimalist website designs
Write a comment
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
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 )