-
Posts
63,866 -
Joined
-
Last visited
-
Days Won
511
Community Answers
-
tuanphan's post in Move blog pagination block from the bottom to an other place in a post page? was marked as the answer
If 7.1, use this code to Website > Website Tools > Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('section#itemPagination').insertBefore('.summary-v2-block'); }) </script>
-
tuanphan's post in Change the website logo on the homepage only was marked as the answer
To change logo on Homepage Only, use this code to Website > Website Tools > Custom CSS. Replace Pixbay with your new logo url
body.homepage header#header img { content: url(https://cdn.pixabay.com/photo/2023/06/13/11/45/landscape-8060760_1280.jpg); }
-
tuanphan's post in Gallery lightbox with added descriptions, images distorted was marked as the answer
Try this new code
/* adjust something */ .collection-type-gallery #slideshowWrapper .sqs-gallery-design-stacked-slide img { width: auto !important; left: 50% !important; transform: translateX(-50%) !important; } .collection-type-gallery #slideshowWrapper .image-description { text-align: center; width: 100%; padding: 10px 0px 0; background: #fff; display: block; position: relative; bottom: 0px; margin-top: 0px; margin-bottom: 25px; } .collection-type-gallery #slideshowWrapper .sqs-gallery-design-stacked-slide img { max-height: 90%; margin: 0 auto !important; margin-left: auto; margin-right: auto; top: 0 !important; } .collection-type-gallery #slideshowWrapper .sqs-gallery-design-stacked-slide .sqs-video-wrapper.video-fit { position: sticky; max-height: 100%; width: 800px !important; margin: auto; top: 50%; left: 50%; transform: translate(0%, 0%); right: auto !important; } .collection-type-gallery #slideshowWrapper .sqs-gallery-design-stacked-slide .sqs-video-wrapper.video-fit .intrinsic-inner { text-align: center; }
-
tuanphan's post in Strange text that shows up in the 2nd Blog body was marked as the answer
Hover on Resources Page in Not Linked > Click Gear icon > Advanced > And check if you have any text in right box
-
tuanphan's post in How to remove a banner image from a single page but keep navigation menu was marked as the answer
You can use this code to Website > Website Tools > Custom CSS
@media screen and (min-width:901px) { body#collection-59149472ebbd1abf19a09c5b { div#banner-wrapper { height: 200px; } div#banner-wrapper img { visibility: hidden; } header#header * { color: #000; } }}
-
tuanphan's post in How can I apply a colour to menu links of pages when they are being visited? was marked as the answer
I sent code here
-
tuanphan's post in Code needed for applying active colour to 'Shop' link when visiting multiple other pages. was marked as the answer
Hover on 3 pages: Shop Apparel, Shop Accessories, Shop Bespoke in Not Linked > Click Gear icon > Advanced > Paste this code to right box
<style> body.view-list header#header a[href="/shop"] { color: #f30 !important; } </style>
-
tuanphan's post in Google Scheduler Button CSS Customisation was marked as the answer
First add a Code Block with Google Scheduler Code
Next, add a Button Block with this URL. And make sure "Open in new tab" DISABLED
#google-scheduler
Next, use this code to Page Header Code Injection
<style> div.code-block { visibility: hidden; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).on('click', '.button-block a', function(event) { event.preventDefault(); $('.code-block button').click(); }); </script>
-
tuanphan's post in How do I get my header to scroll back? was marked as the answer
Don't remove these code.
Add this code under
body.homepage article section:first-child { padding-top: 0px !important; }
-
tuanphan's post in Remove 'Previous' / 'Next' Arrows from Lightbox on Gallery Block (Grid) was marked as the answer
You can use a CSS code like this to hide arrows
a.sqs-lightbox-previous, a.sqs-lightbox-next { display: none !important; }
-
tuanphan's post in Floating Cart was marked as the answer
You can use this to Website > Website Tools > Custom CSS
div#floatingCart { display: none !important; }
-
tuanphan's post in Lightbox popup - how to customise with CSS was marked as the answer
To change form lightbox background, use this CSS code
/* Form lightbox background color */ div.lightbox-content { background-color: #f1f !important; }
With text color/font, which text are you referring to?
-
tuanphan's post in Bandsintown on squarespace - past events/order was marked as the answer
Try this to Website Tools > Custom CSS
div#block-yui_3_17_2_1_1710810157055_27746 .sqs-tourdates-bandsintown-list-content>.sqs-tourdates { display: flex; flex-direction: column-reverse; }
-
tuanphan's post in Image appear on hover and follow cursor was marked as the answer
I wrote a guide here
-
tuanphan's post in Header CSS is preventing mobile menu from opening on Android was marked as the answer
You can consider exclude code on mobile only by changing the code to this
@media screen and (min-width:992px) { header#header { margin: 1vw; background: inherit!important; background-color: rgba(255, 255, 255, .3)!important; backdrop-filter: blur(8px)!important; border-radius: 45px } } I also change header to header#header, because "header" appear on both Site Header and Summary Block Header
-
tuanphan's post in Is it possible to have your main site navigation on a cover page? was marked as the answer
Add this code to Advanced tab
<li class="new-nav1"><a href="/projects">Projects</a></li> <li class="new-nav2"><a href="/about">Information</a></li> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('.new-nav1, .new-nav2').appendTo('ul'); }) </script> <style> li.new-nav2 a, li.new-nav1 a { color: #2d2d2d !important; } </style>
-
tuanphan's post in Styling of Page Description in Chinese gets messed up on mobile was marked as the answer
You can use this code to Website > Website Tools > Custom CSS to fix problem
@media screen and (max-width:767px) { .page-description p { white-space: initial !important; word-wrap: break-word; } }
-
tuanphan's post in Rogue thumbnail image showing before a video plays was marked as the answer
#1. Try this to Website > Website Tools > Custom CSS
div#block-yui_3_17_2_1_1710318531479_89426 .plyr__poster { background-image: none !important; } #2. I think we can use Code Block to add video. If you provide video file, I will try something
-
tuanphan's post in The font in Safari some thiner than chrome some bolder than chrome was marked as the answer
You can also duplicate the site, remove important info, then share duplicated site url, we can check problem easier
-
tuanphan's post in adding a drop shadow to blog grid images was marked as the answer
You can use this code to Website > Website Tools > Custom CSS
section.blog-image-wrapper { box-shadow: 3px 4px 5px black; }
-
tuanphan's post in Help customizing Product Variant BUtton was marked as the answer
Use this new code
<style> label.sqs-button-element--secondary { background: white!important; /* change the button background color */ border: 1px solid black!important; /* change the button border */ border-radius:0!important;/* change the button shape */ font-size: .5rem!important;/* change the button font size */ text-transform: uppercase;/* change the button character style */ color: black!important; } label.sqs-button-element--secondary:hover { background:gray!important; /* change the button background color */ color: white!important; /* change the font color */ } input[type="radio"]:checked+label { background: gray!important;/* change the button background color */ color: #fff !important;/* change the button font color */ border: 1px solid white!important; /* change the button border */ /* change the button shape */ } </style>
-
tuanphan's post in Header elements only showing on homepage - present but invisible on all other pages was marked as the answer
Use this code for mobile
div.header-menu .preFade { opacity: 1 !important; }
-
tuanphan's post in Mobile Nav Menu Custom Font Issue was marked as the answer
Remove this ID from your code
-
tuanphan's post in Adjust the position of the site header layout using CSS code. was marked as the answer
You can use this code to Website > Website Tools > Custom CSS
@media screen and (min-width:992px) { .header-nav { position: absolute; right: 0; text-align: right; } .header-actions.header-actions--right { position: absolute; left: 0; justify-content: flex-start !important; } header#header a.icon { margin-left: 0px !important; margin-right: 2.5vw !important; } }
-
tuanphan's post in Mobile burger navigation - Too much white space was marked as the answer
You can use this CSS code under
.header-menu-nav-folder-content { display: block !important; flex: unset !important; }