Squareko

provide the right url

Add this code into custom css: button { background-color: #FF0000; /* Button's solid background color */ background-image: radial-gradient(circle, rgba(255, 0, 0, 0.8) 40%, rgba(255, 0, 0, 0) 100%); border: none; /* Optional: remove border */ padding: 10px 20px; color: white; font-size: 16px; cursor: pointer; transition: background 0.3s ease; } button:hover { background-color: #FF0000; /* Maintain solid background on hover */ background-image: radial-gradient(circle, rgba(255, 0, 0, 1) 40%, rgba(255, 0, 0, 0) 100%); } Here, you need to change the button by replacing the actual button class or id.

Page url does not work .

Add this code to code injection > footer <script> document.addEventListener('DOMContentLoaded', function () { // Find the header container var header = document.querySelector('.header-display-desktop'); if (header) { // Create a new span for the phone number var phoneNumber = document.createElement('span'); phoneNumber.textContent = 'Call us: (123) 456-7890'; // Replace with your actual phone number phoneNumber.classList.add('phone-number-style'); // Add a class for styling // Append the phone number to the header header.appendChild(phoneNumber); } }); </script>

Have you solved it?

Add this cod into @media screen and (max-width: 767px) { .header .header-actions-action--cta { display: block; outline: 2px solid #FF0000; /* Change outline color */ } .header .header-actions-action--cta:hover { outline-color: #00FF00; /* Change to a different color on hover */ } }

To change the font add this code into custom css and replace the font name as you want. nav.blog-list-pagination .next-label { font-family: 'YourFontName', sans-serif; /* Replace 'YourFontName' with the font you want */ font-size: 16px; /* You can adjust the font size */ font-weight: bold; /* Optional, adjust if you want a different weight */ }

first of all you can copy the code and paste it online code formatter. Then format the code and then copy and paste the into code block

Add this code into document.addEventListener("DOMContentLoaded", () => { // Select the header container const headerDesktop = document.querySelector(".header-display-desktop"); if (headerDesktop) { // Create a container for phone and email details const contactContainer = document.createElement("div"); contactContainer.className = "contact-container"; // Create the phone element const phone = document.createElement("div"); phone.className = "contact-item phone"; phone.innerHTML = ` <span class="icon-phone">📞</span> <span class="contact-text">+1 (123) 456-7890</span> `; // Create the email element const email = document.createElement("div"); email.className = "contact-item email"; email.innerHTML = ` <span class="icon-email">📧</span> <span class="contact-text">info@example.com</span> `; // Append phone and email to the contact container contactContainer.appendChild(phone); contactContainer.appendChild(email); // Append the contact container to the header headerDesktop.appendChild(contactContainer); // Add CSS for styling const style = document.createElement("style"); style.textContent = ` .header-display-desktop { display: flex; align-items: center; justify-content: space-between; } .contact-container { display: flex; align-items: center; gap: 20px; margin-left: auto; } .contact-item { display: flex; align-items: center; gap: 5px; color: #fff; font-size: 1rem; } .icon-phone, .icon-email { font-size: 1.2rem; } .contact-text { font-family: Arial, sans-serif; font-size: 0.9rem; } `; document.head.appendChild(style); } });

add this code into .header .header-announcement-bar-wrapper{ padding: 0px !important; // you can customize the padding as you want }

Add this code into pages > web tools > code injection > footer: document.addEventListener("DOMContentLoaded", () => { // Select the target container const headerDesktop = document.querySelector(".header-display-desktop"); if (headerDesktop) { // Create the button element const donateButton = document.createElement("button"); donateButton.className = "donate-button"; donateButton.textContent = "Donate"; // Append the button to the header-display-desktop headerDesktop.appendChild(donateButton); // Style the button const style = document.createElement("style"); style.textContent = ` .donate-button { background-color: #ff4500; /* Bright orange */ color: white; font-size: 1rem; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; margin-left: auto; } .donate-button:hover { background-color: #e63900; /* Darker orange on hover */ } .header-display-desktop { display: flex; align-items: center; } `; document.head.appendChild(style); } });

Add this code into .blog-item-wrapper .blog-meta-item--tags { display:none !important; }

Add this code into pages > web tools > code injection > footer: <script> document.addEventListener('DOMContentLoaded', function () { // Find the header container var header = document.querySelector('.header-display-desktop'); if (header) { // Create a new span for the phone number var phoneNumber = document.createElement('span'); phoneNumber.textContent = 'Call us: (123) 456-7890'; // Replace with your actual phone number phoneNumber.classList.add('phone-number-style'); // Add a class for styling // Append the phone number to the header header.appendChild(phoneNumber); } }); </script>

Add a List Section with it’s design set to “Simple List”. In the List Section settings: Set Max Columns to 1 In the Style area, enable the Card setting Turn on “Show Image”, “Show Title”, “Show Body”, “Show Button” Paste in the CSS to your custom CSS area and replace any of the variables as you’d like! Add this code into custom css: section[data-section-id="123"] .user-items-list-simple{ li.list-item { @base-top: 25px; @num-elements: 5; @sticky-start: 100px; @sticky-start-mobile: 50px; --desktop-height: 400px; --mobile-height: 600px; --mobile-image-height: 200px; --max-width: 800px; --border-radius: 20px; display: grid; grid-template-columns: 1fr 1fr; position: sticky; overflow: hidden; top: 200px; box-shadow: 2px 2px 8px hsla(0, 0%, 0%, 0.12); border-radius: var(--border-radius); padding:0px !important; height: var(--desktop-height); max-width: var(--max-width); margin:auto; .list-item-content{ grid-row: 1; overflow: auto; } .list-item-media{ margin-bottom:0px !important; } .list-item-media-inner{ padding: 0px !important; height: 100% !important; } .list-item-content{ padding: 17px; display: flex; flex-direction: column; } @media(max-width: 767px){ // Uncomment the two settings below to disable this effect on mobile // position: relative; // top:0 !important; grid-template-columns: 1fr; height: var(--mobile-height); .list-item-content{ grid-row: 2; } .list-item-media-inner{ min-height: var(--mobile-image-height); } } // Generate Offsets .generate-offsets(@i) when (@i > 0) { &:nth-child(@{i}) { top: (@base-top * @i) + @sticky-start; } @media(max-width:767px){ &:nth-child(@{i}) { top: (@base-top * @i) + @sticky-start-mobile; } } .generate-offsets(@i - 1); } .generate-offsets(@num-elements); } &[data-alignment-vertical="bottom"] .list-item-content{ justify-content: end; } &[data-alignment-vertical="top"] .list-item-content{ justify-content: start; } &[data-alignment-vertical="middle"] .list-item-content{ justify-content: center; } }

Just simply add this code into .header-title-nav-wrapper { width: 90%; flex-grow: 1; flex-shrink: 0; } .header-layout-nav-center .header-nav { flex: 1 1 auto; /* Allows the nav to take up available space */ width: auto; /* Removes the need for fixed 100% width */ }