luismi Hi
You can copy this JA ACM module type from the JA Boxing template into the GK Appetit template. However, keep in mind that some style customization will be necessary to match the look in GK Appetit, as the design was originally created specifically for JA Boxing.
Here’s how you can do it:
1/ Download and extract the attached zip file. Copy the two extracted files to this folder: root/templates/gk_appetit/acm/gallery/tmpl/
2/ Add the following custom CSS to style the gallery:
.acm-gallery .gallery-statics {
padding: 4rem; }
@media (max-width: 991.98px) {
.acm-gallery .gallery-statics {
padding: 2rem; } }
.acm-gallery .gallery-statics .gallery-number {
color: var(--color-primary);
margin-top: 0;
margin-bottom: 2rem; }
@media (max-width: 991.98px) {
.acm-gallery .gallery-statics .gallery-number {
margin-bottom: 1rem; } }
.acm-gallery .isotope-layout {
overflow: hidden;
margin-bottom: -2rem; }
.acm-gallery .isotope-layout .custom.bg-image {
padding: 0;
position: static; }
.acm-gallery .isotope-layout .isotope:after {
content: '';
display: block;
clear: both; }
.acm-gallery .isotope-layout .grid-xs-1 {
width: 100%; }
.acm-gallery .isotope-layout .grid-xs-1.item-2 {
width: 100%; }
.acm-gallery .isotope-layout .grid-xs-2 {
width: 50%; }
.acm-gallery .isotope-layout .grid-xs-2.item-2 {
width: 100%; }
.acm-gallery .isotope-layout .grid-xs-3 {
width: 33.3%; }
.acm-gallery .isotope-layout .grid-xs-3.item-2 {
width: 66.6%; }
.acm-gallery .isotope-layout .grid-xs-4 {
width: 25%; }
.acm-gallery .isotope-layout .grid-xs-4.item-2 {
width: 50%; }
.acm-gallery .isotope-layout .grid-xs-5 {
width: 20%; }
.acm-gallery .isotope-layout .grid-xs-5.item-2 {
width: 40%; }
.acm-gallery .isotope-layout .grid-xs-6 {
width: 16.6%; }
.acm-gallery .isotope-layout .grid-xs-6.item-2 {
width: 33.2%; }
.acm-gallery .isotope-layout .grid-xs-7 {
width: 14.28%; }
.acm-gallery .isotope-layout .grid-xs-7.item-2 {
width: 28.56%; }
.acm-gallery .isotope-layout .grid-xs-8 {
width: 12.5%; }
.acm-gallery .isotope-layout .grid-xs-8.item-2 {
width: 25%; }
.acm-gallery .isotope-layout .grid-xs-9 {
width: 11.1%; }
.acm-gallery .isotope-layout .grid-xs-9.item-2 {
width: 22.2%; }
.acm-gallery .isotope-layout .grid-xs-10 {
width: 10%; }
.acm-gallery .isotope-layout .grid-xs-10.item-2 {
width: 20%; }
@media (min-width: 576px) {
.acm-gallery .isotope-layout .grid-sm-1 {
width: 100%; }
.acm-gallery .isotope-layout .grid-sm-1.item-2 {
width: 100%; }
.acm-gallery .isotope-layout .grid-sm-2 {
width: 50%; }
.acm-gallery .isotope-layout .grid-sm-2.item-2 {
width: 100%; }
.acm-gallery .isotope-layout .grid-sm-3 {
width: 33.3%; }
.acm-gallery .isotope-layout .grid-sm-3.item-2 {
width: 66.6%; }
.acm-gallery .isotope-layout .grid-sm-4 {
width: 25%; }
.acm-gallery .isotope-layout .grid-sm-4.item-2 {
width: 50%; }
.acm-gallery .isotope-layout .grid-sm-5 {
width: 20%; }
.acm-gallery .isotope-layout .grid-sm-5.item-2 {
width: 40%; }
.acm-gallery .isotope-layout .grid-sm-6 {
width: 16.6%; }
.acm-gallery .isotope-layout .grid-sm-6.item-2 {
width: 33.2%; }
.acm-gallery .isotope-layout .grid-sm-7 {
width: 14.28%; }
.acm-gallery .isotope-layout .grid-sm-7.item-2 {
width: 28.56%; }
.acm-gallery .isotope-layout .grid-sm-8 {
width: 12.5%; }
.acm-gallery .isotope-layout .grid-sm-8.item-2 {
width: 25%; }
.acm-gallery .isotope-layout .grid-sm-9 {
width: 11.1%; }
.acm-gallery .isotope-layout .grid-sm-9.item-2 {
width: 22.2%; }
.acm-gallery .isotope-layout .grid-sm-10 {
width: 10%; }
.acm-gallery .isotope-layout .grid-sm-10.item-2 {
width: 20%; } }
@media (min-width: 1200px) {
.acm-gallery .isotope-layout .grid-md-1 {
width: 100%; }
.acm-gallery .isotope-layout .grid-md-1.item-2 {
width: 100%; }
.acm-gallery .isotope-layout .grid-md-2 {
width: 50%; }
.acm-gallery .isotope-layout .grid-md-2.item-2 {
width: 100%; }
.acm-gallery .isotope-layout .grid-md-3 {
width: 33.3%; }
.acm-gallery .isotope-layout .grid-md-3.item-2 {
width: 66.6%; }
.acm-gallery .isotope-layout .grid-md-4 {
width: 25%; }
.acm-gallery .isotope-layout .grid-md-4.item-2 {
width: 50%; }
.acm-gallery .isotope-layout .grid-md-5 {
width: 20%; }
.acm-gallery .isotope-layout .grid-md-5.item-2 {
width: 40%; }
.acm-gallery .isotope-layout .grid-md-6 {
width: 16.6%; }
.acm-gallery .isotope-layout .grid-md-6.item-2 {
width: 33.2%; }
.acm-gallery .isotope-layout .grid-md-7 {
width: 14.28%; }
.acm-gallery .isotope-layout .grid-md-7.item-2 {
width: 28.56%; }
.acm-gallery .isotope-layout .grid-md-8 {
width: 12.5%; }
.acm-gallery .isotope-layout .grid-md-8.item-2 {
width: 25%; }
.acm-gallery .isotope-layout .grid-md-9 {
width: 11.1%; }
.acm-gallery .isotope-layout .grid-md-9.item-2 {
width: 22.2%; }
.acm-gallery .isotope-layout .grid-md-10 {
width: 10%; }
.acm-gallery .isotope-layout .grid-md-10.item-2 {
width: 20%; } }
.acm-gallery .isotope-layout .item {
background: transparent;
float: left;
margin: -0.3px; }
.acm-gallery .isotope-layout .item a {
display: block;
overflow: hidden; }
@media (min-width: 768px) and (max-width: 991.98px) {
.acm-gallery .isotope-layout .item.item-2 {
margin-left: -1px; } }
.acm-gallery .isotope-layout .item img {
border-radius: 0;
margin: 0;
width: 100%;
-webkit-transition: 500ms all;
-o-transition: 500ms all;
transition: 500ms all; }
.acm-gallery .isotope-layout .item .expand {
color: #fff;
position: absolute;
bottom: 0.5rem;
left: 0.5rem;
opacity: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: 400ms all;
-o-transition: 400ms all;
transition: 400ms all;
line-height: 1; }
.acm-gallery .isotope-layout .item .item-image {
border-radius: 0;
cursor: pointer;
position: relative;
margin: 0; }
.acm-gallery .isotope-layout .item .item-image:hover img {
-ms-transform: scale(1.05);
transform: scale(1.05);
-webkit-transform: scale(1.05); }
.acm-gallery .isotope-layout .item .item-image:hover .expand {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
You may need to add additional style customizations to achieve a closer match to the JA Boxing template’s look and feel.
Regards