The Grid Extension Links to a Skin Demo We Can't Use :(

[deeprootsmarketing]

Hey there! I was really intrigued by the bundled extension, The Grid. When looking at the demo page, I was particularly intrigued by Example 4. The Slider 3D skin is very nice. However, after doing some digging, I realized that even though it’s being shown as a demo of what is possible with the extension/plugin, it’s not available to us unless we pay the $27 to Envato to buy the plugin ourselves. I do understand plugin authors will have certain levels of functionality you can bundle with the theme. My issue revolves around the fact that the extension page shows it as an example we could potentially use if we were so interested – no purchase necessary. It seems to me that example should be dropped to avoid confusion.

Thanks!

[christian]

Hey Philip,

We understand your concern that not all demos can be imported or available. However, it is not possible for us to request to drop the example because it is not Themeco’s property and the example or demo is being used for marketing their The Grid standalone plugin.

Please also note that The Grid was meant to be used to display a grid listing in the theme and not a slider.

The example can be replicated to a certain degree using the following setup:

• Use a Masonry Grid Type

• Use a Horizontal Grid Layout

• Use a skin that does not have content below the image

• Add this code in the Grid’s CSS

.tg-item {
    top: 50% !important;
    transform: translateY(-50%);
}

I’ve tested that setup in my test site.

If you need 1 to 1 replication however, certain custom code is required to achieve that which is outside the scope of our support to develop. You need to purchase the code or feature from The Grid by buying a standalone license.

Thank you for understanding.

[deeprootsmarketing]

Christian, thank you so much for that thorough response! Unfortunately, I may not have been clear enough in my initial post. I made a video to show you what I’m talking about. Thanks!

[christian]

I’m sorry I missed that. I will forward this to our leadership team for review.

Thanks.

[deeprootsmarketing]

Thanks, Christian!

[christian]

You’re welcome.

[rubin]

Hey Philip,

Thanks for pointing this out. You are right that it is not included as we do not provide you with the demo content but you can recreate it by simply adding following custom css to the grid:

.slider-3d .tg-grid-slider {
	overflow: visible !important;
}
.slider-3d.tg-grid-loaded .tg-active-item {
    z-index: 3;
    
}
.slider-3d.tg-grid-loaded .tg-item-inner {
    -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out, -moz-transform 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out, -ms-transform 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out, -o-transform 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.slider-3d.tg-grid-loaded .tg-item-inner {
    opacity: 0.6;
}
.slider-3d.tg-grid-loaded .tg-active-item .tg-item-inner {
    opacity: 1;
    -webkit-transform: scale3d(1.15,1.15,1.15);
    -moz-transform: scale3d(1.15,1.15,1.15);
    -ms-transform: scale3d(1.15,1.15,1.15);
    -o-transform: scale3d(1.15,1.15,1.15);
	transform: scale3d(1.15,1.15,1.15);
    -webkit-box-shadow: 0 0 100px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 0 100px rgba(0,0,0,0.25);
    box-shadow: 0 0 100px rgba(0,0,0,0.25);
}
@media only screen and (max-width: 480px) {
.slider-3d .tg-grid-area-top1 *,
.slider-3d .tg-grid-area-top2 *,
.slider-3d .tg-grid-area-bottom1 * {
    display: none;
}
.slider-3d.tg-grid-loaded .tg-item-inner {
    opacity: 1;
}
.slider-3d.tg-grid-loaded .tg-active-item .tg-item-inner {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
	transform: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
}

I hope this helps you.

[deeprootsmarketing]

Thanks so much for that code, @rubin! I’ll enjoy putting that to use!

Still think it would be beneficial to remove that example from the demo.theme.co site!

Thanks again.

[ruenel]

You’re welcome!
We’re glad our staff were able to help you out.