Archived Updates

The parallax widget ( fixed image) is not displayed correctly on Ipad ( Safari browser ). You can fix it by  adding the following line code to CSS:

@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
#cc-inner .is-parallax {
  background-attachment: scroll!important;
  background-size: auto!important;
  }
 }
}

Note: By adding the above code, the fixed position of parallax will be deactivated on IOs devices.

This bug fix has been also added to the section Updates of the Source files

In admin mode the product variant form of Store Item module  doesn't work correctly as  the color of input text is white and not visible unless  you click on it. To fix it, add the following style to CSS > section [4] WIDGETS AND CUSTOM ELEMENTS:

#cc-inner #hs-container div.cc-m-all.cc-m-product .cc-m-product-variants.cc-m-product-has-variants td.editable:not(.editing) label .cc-m-input-wrapper input,#cc-inner #hs-container div.cc-m-all.cc-m-product .cc-m-product-variants.cc-m-product-has-variants td.editable:not(.editing) label .cc-m-input-wrapper span {
    color: inherit!important;
}

This version can be found in section 'Updates> Source files> Js updates'

Includes the option of full width gallery or slideshow

Update your CSS with variables options for styling lists. More details can be found here

/*** list styles ***/
ul.m-quote,.has-quote-list .j-text ul,
ul.m-play,.has-play-list .j-text ul,
ul.m-check,
.has-check-list .j-text ul,
.has-check-list-2 .j-text ul,
.has-check-list-3 .j-text ul,
.has-check-list-4 .j-text ul,
.has-check-list-5 .j-text ul {
   list-style:none;
   padding-left:2em;
   overflow:visible;
}

ul.m-check,
ul.m-timeline,
ul.m-timeline2,
ul.m-check li,.has-check-list .j-text ul,.has-timeline-list .j-text ul,
.has-check-list-2 .j-text ul,.has-check-list-3 .j-text ul,.has-check-list-4 .j-text ul,.has-check-list-5 .j-text ul   {
   padding:5px!important;
   margin:0!important;
   right:0!important;
}

ul.m-check{
   overflow:visible!important;
}

ul.m-check li:before,.has-check-list .j-text ul li:before {
    content: "\f00c";
    font-family: FontAwesome;
    font-size:inherit;
    left: 0;
    margin: 0 5px 0 -20px;
}

.has-check-list-2 .j-text ul li:before {
    content: "\f058";
    font-family: FontAwesome;
    font-size:inherit;
    left: 0;
    margin: 0 5px 0 -20px;
}

.has-check-list-3 .j-text ul li:before {
    content: "\f14a";
    font-family: FontAwesome;
    font-size:inherit;
    left: 0;
    margin: 0 5px 0 -20px;
}
.has-check-list-4 .j-text ul li:before {
    content: "\f046";
    font-family: FontAwesome;
    font-size:inherit;
    left: 0;
    margin: 0 5px 0 -20px;
}
.has-check-list-5 .j-text ul li:before {
    content: "\f111";
    font-family: FontAwesome;
    font-size:inherit;
    left: 0;
    margin: 0 5px 0 -20px;
}

.has-ordered-list .j-text ol {
   list-style: none;
   counter-reset: item;
   padding:0;
}

.has-ordered-list .j-text li {
   counter-increment: item;
   margin-bottom: 5px;
}

.has-ordered-list .j-text li:before {
   margin: 2px 10px 2px 0;
   content: counter(item);
   border-radius: 500px;
   border-color:inherit;
   border:1px solid;
   padding:5px;
   min-width:1.5em;
   text-align: center;
   display:inline-block;
 }

ul.m-quote:before {
    content: "\f10d";
    font-family: FontAwesome;
    padding-left: 0;
    font-size: 300%;
    position: absolute;
    left: 0;
}

ul.m-quote2,.has-quote-list .j-text ul {
   list-style:none;
   padding-left: 0.5em;
   border-left: 4px solid;
}


ul.m-timeline li,.has-timeline-list .j-text ul {
    padding-left: 1em;
    list-style:none;
}

ul.m-timeline2 li {
    list-style:none;
    right:0!important;
    text-align:center;
    padding-right: 0!important;
}

ul.m-timeline+p,.has-timeline-list .j-text ul+p{
    padding: 1em;
    position: relative;
    color: inherit;
    border-left: 1px solid;
}

ul.m-timeline:before,.has-timeline-list .j-text ul:before {
    content: "\f111";
    font-family: FontAwesome;
    padding-left: 0;
    position: absolute;
    left: 0;
}

#hs-container ul.m-timeline2 {
    float:left;
    margin: 0px 10px 50px 0px!important;
    background:#000;
    padding: 3px 7px!important;
    color:#fff;
    
}

ul.m-timeline2+p{
    padding: 5px 0 50px 50px;
    margin: 0px;
    margin-top:-10px;
    margin-left: 5px;
    border-left:1px solid;
}

ul.m-links,.has-links-list .j-text ul {
   padding: 0!important;
   margin:0!important;
   right:0!important;
   list-style:none;
}

ul.m-links li,.has-links-list .j-text ul li {
    padding:0.3em 0;
    margin:0;
    right:0;
}

ul.m-links li a,a.m-links, .has-m-links a:link,.has-m-links a:visited {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    border-bottom: 0px solid rgba(198,201,208, 0.45);
  box-shadow: inset 0 -2px 0 rgba(198,201,208, 0.45);
  padding: 0px 0 2px 0;
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

ul.m-links li a:hover,a.m-links:hover,.has-m-links a:hover {
  box-shadow: inset 0 -10px 0 rgba(198,201,208, 0.45);

}

ul.m-links.has-white-bg li {
    border-bottom: 1px solid rgba(0,0,0,0.15);
}

/*** styled links ***/
#cc-inner .links ul,#cc-inner .has-links-list .j-text ul {
    margin: 0;
    padding: 0;
    list-style:none;
    text-decoration: none !important;
}

#cc-inner .links li,.has-links-list .j-text li{
    list-style:none;
    text-decoration: none !important;
    padding: 9px 0!important;
    border-bottom: 1px solid rgba(85,85,85, 0.15);   
}

#cc-inner .links li a,.has-links-list .j-text li a {
    color: inherit;
    opacity:0.6;
    text-decoration: none;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

#cc-inner .links li a:hover,.has-links-list .j-text li a:hover {
    opacity:1;
    color:inherit
}

#cc-inner .add-padding{
    padding:0.8em!important;
}

.wow:first-child,.has-animation .j-hgrid{
   visibility: hidden;
}

The Google maps stop working if you 're not activating the Cookie Banner.

You can activate the Cookie banner in admin > Setting> Privacy & Security

The Instagram plugin doesn't always display correctly the feed.

When you updated your website with the latest js file matrix 1.8, you might experience having the conflict between the helper classes and Alt text or online store title. For example, if your store item has a text with word 'red',  'big' etc, it will be applied as a background color for the whole parent module. To avoid  this error, I updated the helper classes changing all background color classes  from red to bg-red , yellow to bg-yellow etc.

I also changed the classes big and super-big for has-large-text and has-super-large-text

You can fix it on your own by changing manually the helper classes or simply navigate in Matrix themes menu> Updates> Source files and copy the latest styles of Helper classes to your CSS

Bug fix for fixed image in mobile devices ( Safari ).

You need to add a line highlighted with green color.

.is-parallax{
        will-change: auto;
        background-attachment: fixed!important;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-size: cover!important;
}
@media screen and (max-width: 768px) {
    .is-parallax{
        background-size: auto!important;
        background-attachment:scroll!important;
    }
}

You might this error when editing a text in "TEXT" module and apply the big size for the font.

To fix it, just add the line-height value to the span at any position of CSS

.j-text span,#cc-inner figcaption {
   line-height:100%;
}

Once you update your computer to MacOs Big Sur, you will notice that some elements on your website won't work anymore. The error occurs only in Chrome browser and it's due to YTPlayer plugin which needs to be updated.

All you have to do is to remove the file "matrix-1.6.3.js" and upload the new one that includes the bug fix.

More details about js files in Matrix Themes can be found in this section

Just in case you wanted to add an icon to your button, here are 2 examples ;)

<div class="hs-button rel">
   <div class="fa fa-paper-plane add-right-5"></div>  
       Button with icon
    <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>

<div class="hs-button rel ghost-dark">
   <div class="fa fa-gift add-right-5"></div>  
       Button with icon
    <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>

/*** latest Jimdo cookies styles ***/
.cc-individual-cookie-settings-texts button#cookie-settings-all {
    position:absolute!important;
    right:5px;
    top:5px;
    background:none;
    font-size:14px;
    cursor: pointer;
}

.cc-individual-cookie-settings-texts button#cookie-settings-all::after {
  content: ' X ';
  font-weight:bold;
}

.cc-individual-cookie-settings {
    border: none!important;
    box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.08);
    
}
.cc-individual-cookie-settings .links a,button.toggle,.cc-individual-cookie-settings button,.cc-individual-cookie-settings h2,.cc-individual-cookie-settings p {
   font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;
   outline:none;
}
.cc-individual-cookie-settings .btn.btn-primary {
    border:none!important;
}

.cc-individual-cookie-settings button.toggle span.fill {
    background-color: #666!important;
}

.cc-individual-cookie-settings.ui-dialog .cc-individual-cookie-settings-actions .btn-primary {
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    background-color: #222!important;
}

/*** end latest Jimdo cookies styles ***/

This bug is relative to all Matrix themes with fixed position of the header.

All you have to do is to remove the previous js file "Matrix" from your website  and update the new version "Matrix-1.6.3.js" ( Design> Custom Templates> Files)

• In some cases, once you update the js file, you will need to adjust the CSS in below line:

.fixed,.fixed-mobile {
    z-index:203001!important;
}

In some Matrix themes you can't scroll the mobile navigation  to the bottom of the page to see all menu items (especially in multilingual themes or when you have many pages).

To fix it, you need to add the following style to your CSS ( Design> Custom Templates> CSS ):

.m-wrapper {
    overflow-y:auto;
}

Added additional styles for hero title. The classes is--flex is-new-caption will display  the caption text perfectly center aligned. The latest updates are available in Enterprise package.

<!-- hero caption -->
<div class="bg-caption g-font is--flex is-new-caption cc-box animated fadeInUp">
    <div class="inner">
        <div class="col-6 color-white">
            <h1 class="weight-600 big__ super-big__">
                Stand out with a professional Jimdo website
            </h1>
            <!-- ************* mid-rounded button ************* -->
            <a class="hs-button small-btn" href="https://www.zodiac-framerwork.com" target="">Read more</a>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your hero title
</div>

This feature is not included in Matrix themes and if you like it, you can add it manually by adding the additional styles to CSS

.z-shape {
    position:absolute;
    left:0;
    opacity: 0.8;
    height: 50em;
    width: 149em;
    top: -45em;
    right: -80em;
    background: #108af9;
    border-radius: 90px;
    transform: rotate(-20deg);
}
.z-shape-2 {
    position:absolute;
    height: 70em;
    width: 122em;
    top: -30em;
    right: -70em;
    background: #FFDD6E;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity: 0.1;
}

.z-shape-3 {
    position:absolute;
    left:0;
    opacity: 0.8;
    height: 80em;
    width: 109em;
    top: -65em;
    right: -80em;
    background: #00828c;
    border-radius: 500px;
    transform: rotate(-30deg);
}

.z-shape-4 {
    position:absolute;
    height: 30em;
    width: 30em;
    top: -3em;
    right: -3em;
    background: #FFDD6E;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    opacity: 0.1;
}

.z-shape-5 {
    position: absolute;
    left: 10em;
    opacity: 0.8;
    height: 90em;
    width: 149em;
    bottom: -95em;
    right: -80em;
    background: #108af9;
    border-radius: 90px;
    transform: rotate(-20deg);
}

In Widget/HTML the markup looks like this:

<div class="z-shape bg-grey">
</div>

• Note 1:  you can customize the background color with the helper class available in Matrix themes or add the  additional inline style:

<div class="z-shape" style="background:#0787c8;height:60em;">
</div>

Note 2: in some cases ( depends on the place you add it), the custom shape requires the parent div with relative position and  hidden overflow:

<div class="rel h-overflow">
    <div class="z-shape">
    </div>
</div>

If you're using fullwidth tile widget  with very long text, it might be hidden and invisible at the top and bottom of the page. To fix it, change the value of h-100 class from height:100vh; to the height:auto!important;

.h-100 {
   min-height:100vh;  
   height:auto!important;
}

For more details, please check the following blog post:

https://www.matrix-themes.com/2019/08/22/new-social-icons/

/*** new social icons ***/
.new-social,.new-social.is--flex {
    padding:0;
}

.new-social.is--flex.center-align {
    justify-content:center;
}

.new-social a {
    width:auto;
    min-width:20px;
    padding: 8px;
    margin:1px;
    text-align:center;
}

.small-social a {
    font-size:15px;
    min-width:15px;
}

.large-social a {
    font-size:30px;
    min-width:30px;
}

.has-brand-bg a {
 background: var(--bg-primary)!important;
}

.has-brand-link a {
  color: var(--bg-primary)!important;
}

.has-brand-border a {
  border:  2px solid var(--bg-primary)!important;
}

.hs-social a {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.hs-social a:hover {
   -webkit-transform: scale(1.05,1.05);
    -moz-transform:  scale(1.05,1.05);
  -ms-transform:  scale(1.05,1.05);
    -o-transform:  scale(1.05,1.05);
   transform:  scale(1.05,1.05);
   opacity:0.9;
}

.is-circle-border a {
    border:2px solid;
}

.is-circle-border-white a {
    border:2px solid #fff;
}

.is-circle-solid a {
    background:#000;
}

.is-circle-solid-white a {
    background:#fff;
}

.is-rounded a {
    border-radius:500px;
    
}

.is-mid-rounded a {
    border-radius:5px;
}

This feature is automatically added to Ultimate Plus widgets so if you're using enterprise or advanced package, you just add the latest updates ( Enterprise package> Ultimate Plus widgets> Updates )

If you're using professional package, you can add this feature with the following code in CSS:

#hs-container img[alt*="fullwidth"],#hs-container .j-imageSubtitle img[alt*="fullwidth"] {
   width: 100vw!important;
   max-width: 100vw!important;
   position: relative;
   left: 50%;
   right: 50%;
   display: block!important;
   margin-left: -50vw;
   margin-right: -50vw;
}

/* remove the top/bottom gap between 2 images */
img[alt*="pull-top"] {
  margin-top:-15px;
}
img[alt*="pull-btm"] {
  margin-bottom:-15px;
}

More information about the notification Bar can be found in this post:

https://www.matrix-themes.com/2019/07/21/adding-a-notification-bar-jimdo-creator/

Add the below snippet to display submenu in slick navigation

/* make submenu always visible */
li.jmd-nav__list-item-0.j-nav-has-children.cc-nav-parent.j-nav-parent.jmd-nav__item--parent.slicknav_collapsed.slicknav_parent ul.cc-nav-level-1.j-nav-level-1.slicknav_hidden { 
    display:block!important;
}
/* hide the plus icon of parent items */
#cc-inner .jmd-nav__list-item-0.j-nav-has-children.cc-nav-parent.j-nav-parent.jmd-nav__item--parent.slicknav_parent.slicknav_collapsed .slicknav_arrow {
  display:none;
}

If you're using SEO tools for your website, you might have a problem with H1 tag inside HTML.

To fix the problem, you can just replace H1 tag for span as shown in above screenshot.

For having the same style as before, just add .cd-panel-header span to existing style in your CSS:

.cd-panel-header h1,.cd-panel-header span {
  font-family: "Brandon Text",Asap,Verdana,Arial,sans-serif!important;
  font-size:18px;
  color: #fff;
  text-align:left;
  font-weight:400;
  padding:10px 20px;
}

Remove unnecessary styles of Matrix Themes menu

Jimdo now enable free HTTPS encryption for all website. This technology makes sure the connection between your browser and website is secure, and protects your visitors’ information when they use your site. 

Since the HTTPS encryption is activated in your website, the links to Matrix themes documentation won't be visible anymore. To fix it,  you will need to add 's' to all documentation links you will find in HTML ( designs>custom template>html ). Please check the following example:

Here's the list of all links:

More information about Jimdo HTTPS encryption can be found here:

http://www.jimdo.com/2016/12/13/stay-secure-with-https-on-your-website/ ( english )

https://de.jimdo.com/2016/12/12/sichere-verbindung-mit-https-bester-schutz-f%C3%BCr-alle-jimdo-seiten/ ( deutsch )

To use the search widget on your website, you need to create an account and generate the code from the website: https://swiftype.com/

You will need to make a small change in order to add directly to HTML

<form action="#">
<input type="text" class="st-default-search-input" />
<script type="text/javascript">
//<![CDATA[
                        (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
                        (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
                        e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
                        })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');

                        _st('install','5f3QVT9Mzs-DmyUSd-xp','2.0.0');
                        //]]>
                        </script>
</form>