-
Posts
65,189 -
Joined
-
Last visited
-
Days Won
520
Reputation Activity
-
tuanphan reacted to Martian in Padding on Grid-overlay sections
Well, if anyone is interested, this is the code I got from ChatGPT which worked out pretty good and I'm happy enough with the results unless someone has a better idea:
/* Apply styles for desktop screens */
@media screen and (min-width: 1440px) {
.collection-type-portfolio-grid-overlay .portfolio-grid-overlay {
padding-left: 0px !important; /* Adjust as needed */
padding-right: 0px !important; /* Adjust as needed */
}
}
-
tuanphan reacted to EmilyLewis in Need help making text overlay on blog post images on hover
Fab, yeah it's working. Thanks for checking!
-
-
tuanphan reacted to CassAggett in Outline for image frame
@Martian Give this code a go - paste in the Custom CSS panel:
#block-64bd83023798211dc839a7d4 .fluid-image-container.sqs-image-content { border: 1px solid lightblue; box-sizing: border-box; } You can change where it says lightblue to another colour name or hex code.
Hopefully this will work as is to target just that image in the screenshot but if not let me know
-
tuanphan reacted to Ziggy in Change Color of Portfolio Grid Captions
Needs to be added sometimes, but always best to try not too when possible. Glad it's working for you!
-
tuanphan reacted to Ruinir in Shrink Space Between Summary Block (List) Items
Thank you this worked!
-
tuanphan got a reaction from wolfpassion20 in How to make sure the header navigation link jumps to the top of a section on the same page
Hi,
Can you share link to your site? We can check easier
-
tuanphan got a reaction from Aurora in How to get navigation bar on one line
Use this code to Website Tools (under Not Linked) > Custom CSS
nav.header-nav-list { flex-wrap: nowrap !important; }
-
tuanphan got a reaction from GPUNK in Hovering Captions on Images in Gallery w/ Masonry Grid
#1. Change code to this
body.homepage { figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; height: 10% !important; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: rgba(0,0,0,1); /* overlay color */ content: ""; display: block; position: absolute; height: 10%; /* overlay height */ left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after { opacity: 0.75; } .gallery-masonry-item * { color: white; } /* remove gap */ figcaption { padding: 0 !important; } } #2. Whole text bold or which text?
-
tuanphan reacted to GastonDuflos in Product Page Mobile BUTTONS
Thanks @tuanphan I've found a solution:
// Product Variant Button (Full Width and Stacked) - Ghost // .ProductItem-details .variant-radiobtn-wrapper label { text-align: center; margin: 5px 0px; display: block !important; width: 100% !important; } /* Product variants widht button on mobile */ @media screen and (max-width:767px) { .product-variants { width: 100% !important; } } /* Add to cart button on mobile */ @media screen and (max-width:767px) { .ProductItem-details-checkout .sqs-add-to-cart-button-wrapper, .ProductItem-details-checkout .sqs-add-to-cart-button-wrapper div { width: 100% !important; } }
-
tuanphan reacted to VeronicaDS in Setting the font on title of an item in section list doesnt seem to work for all font families?
Thank you @tuanphan that was it!
-
tuanphan reacted to DillonBradley in WhatsApp on squarespace sites
Thank you @tuanphan! You're a legend on this forum
-
tuanphan reacted to creedon in My shopping cart page gives a 404
This looks like it might be an SS issue. But before you contact customer service...
What happens if you set 404 page back to the System Default? Design > Not Found / 404 Page.
-
tuanphan reacted to sebastiaen in pictures too big in portrait aspect ratio
update: found out I can do a grid layout with just one raw. Solves the problem.
-
tuanphan reacted to jadejohnsonillo in Changing border color on a button?
It worked perfectly, thanks!
-
tuanphan got a reaction from CraigN in Dynamic Logo (Light/Dark)
You can use this code to Design > Custom CSS (or Website > Website Tools > Custom CSS)
/* Blog new logo */ body[class*="type-blog"] header#header img { content: url(https://cdn.pixabay.com/photo/2023/05/13/14/35/white-flower-7990645_1280.jpg); }
-
tuanphan reacted to JoanGarroway in Does anybody know how to create a dropdown menu that covers the whole website
okay ~~
i think creating the dropdown menu involves a combo of html, css, and a dash of javascript
you'll need a basic html structure for your dropdown menu
<nav class="dropdown-menu"> <button class="dropdown-btn">Menu</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </nav> now, let's style that menu using css
this is where you'll make it look nice and cover the whole website
body { font-family: Arial, sans-serif; } .dropdown-menu { position: fixed; /* This will make it cover the whole website */ top: 0; left: 0; width: 100%; background-color: #333; /* Customize the background color */ } .dropdown-btn { background-color: #333; color: white; border: none; padding: 15px 20px; cursor: pointer; } .dropdown-content { display: none; /* Hide the dropdown content by default */ position: absolute; background-color: #f9f9f9; width: 100%; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ddd; } and let's add some java to make the dropdown interactive
const dropdownBtn = document.querySelector('.dropdown-btn'); const dropdownContent = document.querySelector('.dropdown-content'); dropdownBtn.addEventListener('click', function() { if (dropdownContent.style.display === 'block') { dropdownContent.style.display = 'none'; } else { dropdownContent.style.display = 'block'; } }); javascript code makes the dropdown menu appear and disappear when you click the menu button
-
tuanphan got a reaction from kmdailey88 in Disabling Portfolio Project Pages in Squarespace Version 7.1
To disable draft project page, follow this
First, add this code to Design > Custom CSS
/* Hide Draft Portfolio */ div.portfolio-grid-basic .grid-item[href*="draft"] { display: none; } Next, Edit Project >> Add this into URL: draft
Assuming project has url is /artists/dawn-waters-bake change it to /artists/dawn-waters-bake-draft
Above code will hide all projects whose urls contain text “draft” in portfolio page -
tuanphan got a reaction from Lesum in Rounding corners for a grid portfolio page
Add to Design > Custom CSS
body.collection-649227fc70d8b7335c60dd98 .gallery-grid-item>div img { border-radius: 30px !important; }
-
tuanphan got a reaction from gantons in Vertical line between navigation titles
Because your last item is Koble Creates, you are using CSS code to remove it
To remove an item from Header, no need to use code, just drag it from Main Navigation to Not Linked
In case you still want to keep code, use this code to remove /
div.header-nav-item:nth-child(3) a:after { display: none; }
-
tuanphan got a reaction from DreamrW in Change login button name
You can use white-space: nowrap;
.user-accounts-text-link { visibility: hidden; } .user-accounts-text-link:before { visibility: visible; content: "New text"; position: absolute; white-space: nowrap; }
-
tuanphan got a reaction from EddiOS42 in Rounding corners for a grid portfolio page
ID of page: body#collection-651773418cb7780c567aedd0
-
tuanphan got a reaction from Ruinir in Shrink Space Between Summary Block (List) Items
You can add this code to Website Tools (under Not Linked) > Custom CSS
/* Summary List Space */ .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item { margin-bottom: 0px !important; padding-bottom: 5px !important; }
-
tuanphan got a reaction from SandNotOil in Changing the background of a grid blog - Only behind the text
Add to Design > Custom CSS
article.blog-basic-grid--container.entry.blog-item.is-loaded { background-color: white; text-align: center; }
-
tuanphan got a reaction from arielestulin in Arrows for drop down menu ( Header )
I also have this list