tuanphan

Which code did you add to Custom CSS + What is site url? We can check problem easier

Change red background or change white text?

Use this code under div.header-nav-item [href="/menu"] { content: ''; background: url(https://static1.squarespace.com/static/626849f9d4b34577d12db0c6/t/65df612362122e038032071c/1709138498825/burger-menu.pnghttps://static1.squarespace.com/static/65df3b2b0c9ed76ee88da410/t/65df50c9d74e483842ee2b9f/1709134025253/burger-menu.png) no-repeat !important; background-size: cover !important; height: 100% !important; color: transparent !important; background-position: center center !important; }

You need to add !important to some code div.header-nav-item [href="/menu"] { content: ''; background: url(https://static1.squarespace.com/static/626849f9d4b34577d12db0c6/t/65df612362122e038032071c/1709138498825/burger-menu.pnghttps://static1.squarespace.com/static/65df3b2b0c9ed76ee88da410/t/65df50c9d74e483842ee2b9f/1709134025253/burger-menu.png) no-repeat !important; background-size: cover !important; height: 100% !important; color: transparent !important; background-position: center center !important; }

Hi, This code won't work with Fluid Engine, you will need to adjust the code, or replicate the layout with Classic Editor Seciton. You can share link to page where you have problem + what should it look like, we can check easier

Use this new CSS code div.lightbox-inner input.button { background-color: #e4070b !important; }

Use this CSS code body#collection-659613958b47182e64b137e0 { .blog-excerpt a { color: red; } .blog-excerpt a:hover { color: #6789d3 !important; }}

Can you share link to page where you use form, I can check code to hide all elements except form block in Print mode

I see you figured it out with this CSS code? section[data-section-id="6604b90178f39158360e93c7"] .section-background { position: fixed; top: 0; height: 100vh; }

Use this code to Website > Website Tools . Custom CSS [data-to="97"]:after { content: "%"; } [data-to="40"]:after { content: "ans"; }

(1) You added Filter Plugin and you need to add Load More button? Or (2) you still haven't added any plugins, and you need to add Load more button under Gallery Images on /gallery page? If (2), you can add a button block under, next add one more section under, I will use code to hide this section, and when users click on button >> show this section. What do you think? (Each case will have a different code so I don't have code to share now, need to check code)

First, edit image caption, from this KOMODO to this KOMODO <a href="https://google.com">View project</a> Next, use this code to Website > Website Tools > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> jQuery(document).ready(function($){ var texts = document.getElementsByClassName('gallery-caption-content'); $('.gallery-lightbox-list .gallery-lightbox-item').each(function(idx, ele){ var text = texts[idx] var id = $(ele).attr('data-slide-url') if (text) { $(ele).append('<p id="' + id + '" class="light-caption sqsrte-small">' + text.innerHTML + '</p>'); if ($(ele).attr('data-active')) { $(`#${id}`).css('visibility', 'visible') } } }) $('.gallery-masonry-lightbox-link').click(function() { var id = $(this).attr('href').split('=')[1] $('.light-caption').css('visibility', 'hidden') $(`#${id}`).css('visibility', 'visible') }) $('.gallery-lightbox').click(function() { $('.light-caption').css('visibility', 'hidden') var id = location.search.split('=')[1] $(`#${id}`).css('visibility', 'visible') }) }) </script> <style> figcaption.gallery-caption.gallery-caption-grid-masonry { display: none; } .light-caption { visibility: hidden; position: fixed; font-size: 14px; bottom: 20px; left: 50%; transform: translateX(-50%); margin: 0; } .gallery-lightbox-item[data-active='true'] .light-caption { visibility: visible; } .gallery-lightbox-controls { display: flex !important; } .light-caption a { background-color: #000; color: #fff; padding: 10px 20px; display: inline-block; } </style>

You can use this code to Website > Website Tools > Code Injection > Footer <script> $(document).ready(function(){ $('div#block-575006c881592bbf4866').appendTo('div#block-2288792c08127cb88fac .accordion-item__description'); }); </script>

You can add this code to Home Page Header Code Injection (Do not add to Custom CSS) Replace example image url with your image url (line 3) <div class="splash-wrapper" id="loader-container"> <!-- Lottie animation player --> <img src="https://content.invisioncic.com/p289038/monthly_2023_11/LogoTANIQtransparent.thumb.png.0c1808606ac76767e354e33194011587.png"/> </div> <style> div#loader-container img { max-width:500px; } /* Loader animation styles */ .splash-wrapper { display: none; /* Initially hidden */ position: fixed; z-index: 9999; background-color: white; height: 100vh; width: 100vw; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; animation-name: slideOut; animation-fill-mode: forwards; animation-duration: 0.65s; animation-delay: 5s; } @keyframes slideOut { from { margin-left: 0vw; } to { margin-left: -100vw; } } @media screen and (max-width:767px) { div#loader-container { background-size: cover; } div#loader-container img { max-width: 300px; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function () { setTimeout(function(){ $('.splash-wrapper img').fadeIn(500); }, 3000); }); </script>

To achieve this we will need to adjust height of header and all elements inside header. If you share site url, we can check easier

You can use default Text Block, we can give you code to reduce space between heading/text Because adding fading effect to Code Block will be more complex

You can use this code to Website > Website Tools > Custom CSS body#collection-5bca34dee5e5f0cd07ce8da8 .gallery-block:hover { cursor: pointer; }

The page doesn't work now. Can you check it again?

You can also try this guide I wrote recently https://summaryblock.com/left-menu-middle-logo-right-menu/

Do you have/know an example of your desired effect? We can imagine and test code easier

You need to set z-index [data-section-id="6616afa9f3ea0b7bba607952"] { position: fixed; top: 160px; z-index: 123456789 !important; }

Now you want to reduce this space? You can use this code to Website > Website Tools > Custom CSS /* Space under text */ .fe-6616ad5d281a48227f8ba778 { grid-template-rows: repeat(45,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important; }

@nicki-patsios I don't see these images on the link you shared. Can you check it again?

You can use this CSS code body.collection-65b1bdf0c3b6960fefb8fc64 header#header, body.collection-65b1bdf0c3b6960fefb8fc64 footer.sections { display: none !important; }

You can use this CSS code under @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1711831694026_15313 video { object-fit: cover !important; } .fe-block-yui_3_17_2_1_1711831694026_15313 {grid-column-start: 2 !important;grid-column-end: 10 !important;} }