The latest updates of Matrix Themes including the new features, bug fixes and much more.
You will also find some further customizations of custom widgets with the live examples.
01. Matrix variables
Updated the style editor for Matrix Themes and Page Builder. From now on you can apply the custom styles using the variables tags without reloading your page*.
02. Carousel
The custom carousel has been updated with latest version and now available with the additional styles:
- content carousel
- fullwidth carousel
- fullscreen carousel
- tile carousel
- fullwidth carousel
- quote carousel
- service carousel
- testimonial carousel
- logo carousel
- showcase carousel
- portfolio carousel
How to update
1. In admin Matrix Themes select the section 'Updates' and download the CSS file 'libraries.css'. including the latest version of the owl carousel. Then upload the file to your own website ( Menu> Design> Custom Template> Files ).
2. On the same page download the latest js file (matrix-1.9.6-min.js) and upload it to your own website.
The shortcodes
The content carousel can be found in the section 'shortcodes' of the matrix theme admin menu while all other versions - in section 'Add-ons'
03. hamburger menu styles
Updated the global styles of the hamburger menu. Now it has more classic design with 3 black lines.
If you want to update your own template with the latest styles, just replace the previous mobile menu styles in CSS ( see below code) and in HTML you'll need to remove the class 'hidden' from the second span 'middle'.
/* overlay menu */
.button_container {
position: fixed;
top: 10px;
right: 10px;
height: 26px;
width: 30px;
border:none!important;
border-radius:2px!important;
cursor: pointer;
z-index:1999999;
background-color: rgba(255,255,255,0.6);
-webkit-transition: opacity .25s ease;
transition: opacity .25s ease;
}
.button_container.active {
background-color: rgba(255,255,255,0.8);
height: 27px;
}
.button_container:hover,.button_container:focus {
opacity: .9;
}
.button_container.active .top {
-webkit-transform: translateY(9px) translateX(0) rotate(45deg);
transform: translateY(9px) translateX(0) rotate(45deg);
background: #000;
top: 4px;
width: 21px;
}
.button_container.active .middle {
opacity: 0;
background: #fff;
}
.button_container.active .bottom {
-webkit-transform: translateY(-9px) translateX(0) rotate(-45deg);
transform: translateY(-9px) translateX(0) rotate(-45deg);
background: #000;
top: 22px;
width: 21px;
}
.button_container span {
background: #000;
border: none;
height: 2px;
width: 20px;
position: absolute;
top: 5px;
left: 5px;
font-size:0;
-webkit-transition: all .35s ease;
transition: all .35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 12px;
}
.button_container span:nth-of-type(3) {
top: 19px;
}
.overlay {
position: fixed;
z-index:1999998;
background: #000;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .35s,visibility .35s,height .35s;
transition: opacity .35s,visibility .35s,height .35s;
overflow-x:none;
overflow-y:auto;
}
.overlay.open {
opacity: .98;
visibility: visible;
height: 100%;
}
04. Template update
The latest updated template is Horten, available in multi purpose ( dropdown and mega menu) and multilingual version.
05. Page builder updates
What's new:
- Fixed bug with the module 'columns' in footer. In previous version the footer elements disappeared after having adding the js code;
- Added the new version of the carousel;
- Updated the style editor with the live preview of the draggable tags;
Resources
Documentation
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| top-header-inner | |
| header | |
| header-inner | |
| navigation-inner | |
| navigation color | |
| dropdown background color | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
| background color | |
| navigation color |
| social icons | |
| top header border | |
| header border | |
| nav inner border |
| Template configurations | |
|
|
| Top header inner | |
| Header inner | |
| Navigation inner | |
| Navigation styles | |
| size-15 weight-400 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.
Write a comment
sas (Friday, 20 January 2023 10:49)
When I click Add-ons for other versions CAROUSEL
The carousel codes are not displayed on the page
Where's the problem
Matrix themes (Friday, 20 January 2023 10:58)
@sas probably you haven't updated the template with CSS and JS.