tuanphan

Don't remove any code in your current code Add this to bottom of CSS box [data-section-id="643f5319ec273167e61fe471"] .section-background { opacity: 0.5 !important; background-color: var(--siteBackgroundColor) !important; }

Hi, Yes this is possible with some CSS or script code. If you share site url, we can check & give code easier

Hi, Can you take a screenshot of "via.." message? And what is your site url?

Hi, What is site url? We can check easier

Add to Design > Custom CSS body[class*="type-blog"].view-item header#header.shrink div.header-nav-item>a { color: black !important; }

Try this new code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".blog-item-wrapper .blog-item-title h1.entry-title a").each(function(){ $(this).html($(this).text()); }); }); </script>

Hi, #1. You mean replace this chain icon to phone icon? #2. Do you have link to icon on FontAwesome website? We can use CSS pseudo, it will be easier. Use svg file is a bit more complex

Hi, You mean you want to make titles appear again?

Hi, Can you provide HTML code?

Hi, What is your site url? We can check easier

You can't do this. Custom Code won't run on Checkout Page

ah, I have a typo in the code, use this new code @media screen and (max-width:767px) { iframe[src*="embedly"] { width: 100% !important; height: 900px !important; } }

As the result I checked, they inserted a Code Block with text on top. You can edit that Code Block & adjust text

Hi, Can you share link to page where you added flip card?

Hi, If you share link to a product, we can check & give you code to add continue shopping button Or you try adding this code to Settings > Advanced > Code Injection > Footer first <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<a href="/shop" class="continue-shopping">Continue Shopping</a>').appendTo('.ProductItem-details .sqs-add-to-cart-button-wrapper'); }); </script> <style> a.continue-shopping { display: block; background-color: black; width: 200px; margin-top: 20px; color: white; font-family: brandon-grotesque; font-weight: 500; font-style: normal; text-transform: none; letter-spacing: .02em; -webkit-font-smoothing: antialiased; font-size: 1rem; line-height: normal; padding: .7em 1.169em; border-radius: 300px; text-align: center; } </style>

Hi, Can you share link to this page? We can help easier

If you share link to this page, we can give some simple code to achieve this

Hi, Can you share link to example site?

What is your site url?

Add this to Design > Custom CSS a.btn { font-size: 30px !important; }

What is your site url? We can check easier

Edit page where you want to add this effect > Insert a Code Block > Paste this Codepen code to Code Block <div id="container"> <div class="slide anim-in"> <div class="image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/venice.jpg);"></div> <div class="overlay"></div> <div class="content"> <h1 class="title" data-title="Venice">Venice</h1> <div class="emblem" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/italian-emblem.svg);"></div> <ul class="city-info"> <li class="country">Country: Italy</li> <li class="founded">Founded: 697</li> <li class="population">Population: 260,060</li> </ul> </div> <div class="btn-close"></div> </div> <div class="slide anim-in"> <div class="image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/paris.jpg);"></div> <div class="overlay"></div> <div class="content"> <h1 class="title" data-title="Paris">Paris</h1> <div class="emblem" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/french-emblem.svg);"></div> <ul class="city-info"> <li class="country">Country: France</li> <li class="founded">Founded: ~250BC</li> <li class="population">Population: 2.2 Million</li> </ul> </div> <div class="btn-close"></div> </div> <div class="slide anim-in"> <div class="image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/salzburg.jpg);"></div> <div class="overlay"></div> <div class="content"> <h1 class="title" data-title="Salzburg">Salzburg</h1> <div class="emblem" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/austrian-emblem.svg);"></div> <ul class="city-info"> <li class="country">Country: Austria</li> <li class="founded">Founded: 1622</li> <li class="population">Population: 145,871</li> </ul> </div> <div class="btn-close"></div> </div> <div class="slide anim-in"> <div class="image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/prague.jpg);"></div> <div class="overlay"></div> <div class="content"> <h1 class="title" data-title="Prague">Prague</h1> <div class="emblem" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/czech-emblem.svg);"></div> <ul class="city-info"> <li class="country">Country: Czech Republic</li> <li class="founded">Founded: 870</li> <li class="population">Population: 1.2 Million</li> </ul> </div> <div class="btn-close"></div> </div> </div><a id="codepen-link" href="https://www.codepen.io/seanfree" target="_blank"></a> <style> #container { position: relative; display: flex; align-items: center; height: 100%; width: 100%; } .slide { position: relative; flex: 1; height: 100%; overflow: hidden; cursor: pointer; transition: all 1s; } .slide.last-viewed .btn-close:after { transition-delay: 0s; } .slide.last-viewed .btn-close:before { transition-delay: 0.1s; } .slide.last-viewed .content .city-info { transition-delay: 0s; } .slide.last-viewed .content .city-info li:nth-of-type(1) { transition-delay: 0.2s; } .slide.last-viewed .content .city-info li:nth-of-type(2) { transition-delay: 0.4s; } .slide.last-viewed .content .city-info li:nth-of-type(3) { transition-delay: 0.6s; } .slide.last-viewed .content .emblem { transition: all 0.5s; transition-delay: 0s; } .slide.last-viewed .image, .slide.active .image { top: 0; left: 0; height: 100%; width: 100%; } .slide.active { cursor: default; } .slide.active .overlay { width: 25%; background-size: 100% 100%; transition: all 1.25s; transition-delay: 1.75s; } .slide.active .content { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .slide.active .content .title { width: 25%; opacity: 1; transform: translateY(30px); transition: all 1s; transition-delay: 1.25s; } .slide.active .content .title:after { height: 100%; color: white; overflow: initial; } .slide.active .content .title:before { transform: scaleX(1); transition-delay: 2s; } .slide.active .content .city-info { opacity: 1; } .slide.active .content .city-info li { opacity: 1; transform: translateX(0); } .slide.active .content .emblem { opacity: 0.8; transform: translateY(100px); } .slide.active .btn-close { cursor: pointer; pointer-events: auto; } .slide.active .btn-close:before, .slide.active .btn-close:after { opacity: 1; } .slide.active .btn-close:after { transform: rotate(45deg) translateX(0px); } .slide.active .btn-close:before { transform: rotate(-45deg) translateX(0px); } .slide.anim-in { transition-delay: 0.5s; } .slide.anim-in .image { top: -20%; left: -140%; height: 140%; width: 140%; -webkit-animation: img-anim-in 1.2s forwards; animation: img-anim-in 1.2s forwards; } .slide.anim-out { flex: 0; cursor: default; transition-delay: 0.5s; } .slide.anim-out .image { top: 0; left: 0; height: 100%; width: 100%; -webkit-animation: img-anim-out 1.2s forwards; animation: img-anim-out 1.2s forwards; } .slide:nth-of-type(1).anim-in .image { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .slide:nth-of-type(1).anim-out .image { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .slide:nth-of-type(2).anim-in .image { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .slide:nth-of-type(2).anim-out .image { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .slide:nth-of-type(3).anim-in .image { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .slide:nth-of-type(3).anim-out .image { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .slide:nth-of-type(4).anim-in .image { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .slide:nth-of-type(4).anim-out .image { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .slide .image { position: absolute; background-size: cover; background-position: center center; pointer-events: none; transition: all 1s; } .slide .overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-image: linear-gradient(rgba(20, 20, 20, 0.7), rgba(20, 20, 20, 0)); background-position: 0 0; background-size: 100% 200%; opacity: 1; pointer-events: none; transition: all 0.5s; } .slide .content { position: absolute; top: 0; left: 0; height: 100%; width: 100%; pointer-events: none; } .slide .content .title { position: absolute; top: -10px; height: 65px; width: 100%; box-sizing: border-box; font-size: 3em; text-align: center; text-shadow: 0 2px 2px #2f2f2f; color: #3f3f3f; opacity: 0; pointer-events: none; transition: all 0.5s; } .slide .content .title:after { position: absolute; top: 0; height: 0; width: 100%; display: block; content: attr(data-title); overflow: hidden; color: #fff59d; transition: all 0.85s; } .slide .content .title:before { position: absolute; bottom: 15px; display: block; content: ""; height: 2px; width: 85%; background: white; box-shadow: 0 2px 6px #2f2f2f; transform-origin: left center; transform: scaleX(0); transition: transform 1.25s; } .slide .content .emblem { position: absolute; height: 200px; width: 25%; opacity: 0; transform: translateY(120px); transition: all 1s; transition-delay: 1.75s; background-position: center center; background-repeat: no-repeat; background-size: auto 100%; } .slide .content .city-info { position: absolute; bottom: 30px; right: 30px; padding: 30px 30px 30px 120px; font-size: 1.25em; color: white; text-shadow: 0 1px 4px #0f0f0f; background-image: linear-gradient(90deg, rgba(20, 20, 20, 0), rgba(20, 20, 20, 0.7)); opacity: 0; transition: all 1s; transition-delay: 2s; } .slide .content .city-info li { position: relative; margin-bottom: 5px; text-align: justify; opacity: 0; transform: translateX(-30px); transition: all 0.75s; } .slide .content .city-info li:nth-of-type(1) { transition-delay: 2.7s; } .slide .content .city-info li:nth-of-type(2) { transition-delay: 2.9s; } .slide .content .city-info li:nth-of-type(3) { transition-delay: 3.1s; } .slide .btn-close { position: absolute; z-index: 100; top: 20px; right: 20px; height: 24px; width: 24px; pointer-events: none; } .slide .btn-close:before, .slide .btn-close:after { position: absolute; top: 12px; display: block; content: ""; width: 100%; height: 4px; background-color: white; opacity: 0; cursor: pointer; transition: all 0.5s; } .slide .btn-close:after { transform: rotate(45deg) translateX(-12px); transition-delay: 3s; } .slide .btn-close:before { transform: rotate(-45deg) translateX(12px); transition-delay: 3.2s; } .slide:hover:not(.active):not(.anim-out) .image { transform: scale(1.1); } .slide:hover:not(.active):not(.anim-out) .overlay { opacity: 0.6; } .slide:hover:not(.active):not(.anim-out) .content .title { opacity: 1; transform: translateY(30px); } .slide:hover:not(.active):not(.anim-out) .content .title:after { height: 100%; } #codepen-link { position: absolute; right: 15px; bottom: 15px; height: 40px; width: 40px; z-index: 10; border-radius: 50%; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg"); background-position: center center; background-size: cover; opacity: 0.7; transition: all 0.25s; } #codepen-link:hover { opacity: 1; box-shadow: 0 2px 6px #0f0f0f; } @-webkit-keyframes img-anim-in { to { top: 0; left: 0; height: 100%; width: 100%; } } @keyframes img-anim-in { to { top: 0; left: 0; height: 100%; width: 100%; } } @-webkit-keyframes img-anim-out { to { left: -100%; } } @keyframes img-anim-out { to { left: -100%; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> (function(window, document, $, undefined) { var $slides, $btnArr; function onClick(e) { var $target = $(e.target); if ($target.hasClass('slide') && !$target.hasClass('active') && !$target.siblings().hasClass('active')) { $target.removeClass('anim-in last-viewed').addClass('active') $target.siblings().removeClass('anim-in last-viewed').addClass('anim-out'); } } function closeSlide(e) { var $slide = $(e.target).parent(); $slide.removeClass('active anim-in').addClass('last-viewed'); $slide.siblings().removeClass('anim-out').addClass('anim-in'); } $(function() { $slides = $('.slide'); $btnArr = $slides.find('.btn-close'); $slides.on('click', onClick); $btnArr.on('click', closeSlide); }); })(this, document, jQuery); </script>

Hi, Do this on Mobile only or both desktop _ mobile?

Hi, Can you share link to page where you use masonry? We can check easier

Can you share link to page where you added the code?