Matrix Cølors
Here's the full list of colors and palettes used in Matrix themes. The 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
#FEEA4E;
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 Colors
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
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>
Blog posts with tutorials
Sat
27
Jun
2015
Matrix themes - Working with colors
Do you need Matrix themes colors to match your brand? This post will help you to change all colors of your website without technical overhead
*** Updated 14/11/2019
Do you have any further questions?
Please ask here!
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE
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 )
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?
Bruno (Wednesday, 23 May 2018 00:03)
Hi there, sounds stupid but I can not find the safe button on css
please help.
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/