-
Posts
65,311 -
Joined
-
Last visited
-
Days Won
521
Reputation Activity
-
tuanphan got a reaction from Begona in Hide or change text in front of tags and categories that says “tagged:” “posted in:” but NOT the tag or category itself
Add this to Website > Website Tools > Custom CSS to rename text
/* Posted in */ li.eventitem-meta-item.eventitem-meta-cats.event-meta-item { visibility: hidden; font-size: 0 !important; } li.eventitem-meta-item.eventitem-meta-cats.event-meta-item a { visibility: visible; font-size: 16px !important; } li.eventitem-meta-item.eventitem-meta-cats.event-meta-item:before { content: "enter new posted in text:"; visibility: visible; font-size: 16px !important; } /* Tagged */ li.eventitem-meta-item.eventitem-meta-tags.event-meta-item { visibility: hidden; font-size: 0 !important; margin-top: 15px; } li.eventitem-meta-item.eventitem-meta-tags.event-meta-item a { visibility: visible; font-size: 16px !important; } li.eventitem-meta-item.eventitem-meta-tags.event-meta-item:before { content: "enter new tagged text:"; visibility: visible; font-size: 16px !important; }
-
tuanphan got a reaction from ec25 in Change Social Link Icons in Footer
Add to Design > Custom CSS. Replace with a new Etsy image url
/* Etsy */ footer.sections [href*="etsy"] { background-image: url(https://content.invisioncic.com/p289038/monthly_2023_06/EtsyLogo.png.b75698158300bba5d12e6fbda3649ab3.png) !important; background-position: center center; background-size: contain; background-repeat: no-repeat; } footer.sections [href*="etsy"] svg { display: none; }
-
tuanphan got a reaction from Beyondspace in Form Submission, Unique Subject
Thank you! This code worked on my site.
Do you have code if users enable Form Block Lightbox button?
-
tuanphan reacted to Beyondspace in Form Submission, Unique Subject
I followed @Ian_A approach with the new localized form block update in mind, the below script can work with multiple forms on the page and use the localized date format string as the unique value for the subject. The subject form field will be hidden after the form has been loaded
nit: remember to set the label and placeholder of field to Subject
cc: @stefansegers and @creedon for further discussion
Put this into website's Footer injection
<script> /* * @beyondspace: Unique submission subject * Squarespace Forum: 14-June-2023 */ window.addEventListener("load", (event) => { const formBlocks = document.querySelectorAll('.sqs-block-form'); const triggerInputChange = (inputElement, value) => { const nativeInputValueSetter = Object.getOwnPropertyDescriptor( window.HTMLInputElement.prototype, "value" ).set; nativeInputValueSetter.call(inputElement, value); const inputEvent = new Event("input", { bubbles: true }); inputElement.dispatchEvent(inputEvent); } formBlocks.forEach((block) => { const timestamp = new Date().toLocaleString(Static.SQUARESPACE_CONTEXT.website.language); const subjectInput = block.querySelector(`[placeholder="Subject"]`); if (subjectInput) { const subjectField = subjectInput.closest(`.form-item`); subjectField.hidden = true; triggerInputChange(subjectInput, timestamp) } }) }); </script>
The emails will be sent as
-
tuanphan got a reaction from Goood_Studio in Navigation hover in Squarespace 7.1
/* Nav item hover color - underline */ .header-nav-item a:hover { color: violet; } Reference (nav hover color code for all templates 7.0 & 7.1): https://beaverhero.com/squarespace-navigation-links/
-
tuanphan got a reaction from Ellelle in Image Magnifier Glass / Image Zoom
You can use Image Zoom Plugin (affiliate link) or this link (non-affiliate link) to achieve this.
Or you can message me with your site url, I can help you achieve this.
-
tuanphan reacted to SarahHope in Footer Content Full Width
@tuanphan oh yay! thank you so much that worked!
-
tuanphan reacted to mbockmaster in How Can I Add a Page Section Above the Header Navigation
I removed everything and tried again and it worked! Thanks so much!
-
tuanphan reacted to wonderpiece in Video Carousel in 7.1?
as always tuanphan saving the day. that little plus sign hidden in the gallery "upload media" area is sneaky. i absolutely missed it & would only have found it from your loom video. huge thanks!
-
tuanphan got a reaction from SarahFrancesBrandCo in Editing Sold Out Label
You can use this code to Website > Website Tools > Custom CSS
div.summary-v2-block .product-mark.sold-out { padding: 10px !important; }
-
tuanphan got a reaction from wonderpiece in Video Carousel in 7.1?
Hi,
Carousel like this video?
https://www.loom.com/share/1445342a85374da6878efa61cc8aa255
-
tuanphan got a reaction from MartinMurray in Preventing Navigation Items from Stacking
Try this
.header-layout-nav-center .header-nav-list { flex-wrap: nowrap; }
-
tuanphan got a reaction from LukeView in Adding carousel image block
Make this image to carousel? Text will be same for all images
Or you need to use different text for each image on left?
-
tuanphan got a reaction from nenad in [Share] Accordion Block: Useful code
Squarespace released an Accordion Block a few weeks ago.
Here are some useful code when you use the accordion block (Add to Design > Custom CSS)
#1. Change Dividers Color
/* accordion divider color */ .accordion-divider { color: #ff00ff !important; } #2. Change Arrows Color
/* accordion arrows color */ .accordion-block .arrow { border-color: #ffff00 !important; } #3. Add icons before Accordion Titles
/* Accordion icons before titles */ li.accordion-item .accordion-item__title:before { content: ""; width: 20px; height: 20px; display: inline-block; background-repeat: no-repeat; background-size: contain; background-position: bottom center; } li.accordion-item:nth-child(1) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2021/11/02/15/30/tealights-6763542__340.jpg); } li.accordion-item:nth-child(2) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2019/10/23/06/30/hamburg-4570577__340.jpg); } li.accordion-item:nth-child(3) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2021/02/17/08/02/woman-6023442__340.jpg); } #4. Different Color for Accordion Titles
/* accordion title colors */ li.accordion-item:nth-child(1) .accordion-item__title { color: red; } li.accordion-item:nth-child(2) .accordion-item__title { color: blue; } li.accordion-item:nth-child(3) .accordion-item__title { color: violet; } #5. Change a specific word color in Accordion Content
First make it bold then use this CSS
/* accordion content specific word color */ .accordion-item__description strong { font-weight: normal; color: red; } #6. Accordion Title Background Color
/* accordion title background */ .sqs-block-accordion .accordion-item__title-wrapper { background-color: #32a4e6; } #7. Accordion Content Background
/* accordion content background */ .sqs-block-accordion .accordion-item__dropdown--open { background-color: #262853; color: white; } #8. Add Unordered List in Accordion Content
First, add some text then Underline them
Next, use this CSS
/* Accordion Content - Add Unordered list */ span[style*="text-decoration"]:before { content: ""; display: inline-block; width: 3px; height: 3px; background-color: black; vertical-align: middle; margin-right: 3px; } span[style*="text-decoration"] { text-decoration: none !important; } #9. Accordion Titles – Add Line Break
If you use a Business Plan or higher, you can use another approach in this comment
/* Accordion SubTitle */ li:nth-child(1) span.accordion-item__title:after { content: "Accordion Subtitle 01"; display: block; font-size: 15px; } li:nth-child(2) span.accordion-item__title:after { content: "Accordion Subtitle 02"; display: block; font-size: 15px; } li:nth-child(3) span.accordion-item__title:after { content: "Accordion Subtitle 03"; display: block; font-size: 15px; } Result
#10. Accordion Title-Content Text Size on Mobile only
/* accordion title - content text size on mobile */ @media screen and (max-width:767px) { /* accordion title */ span.accordion-item__title { font-size: 12px !important; } /* accordion content */ .accordion-item__description * { font-size: 10px !important; } } #11. Simple Style 01
Add a Code Block under Accordion >> Use this code
<style> /* accordion title color */ .accordion-item__title-wrapper { background-color: #1a252f; color: white; padding-left: 20px !important; padding-right: 20px !important; } .accordion-item__click-target { padding-top: 15px !important; padding-bottom: 15px !important; } /* make first item round corner */ li.accordion-item:first-child .accordion-item__title-wrapper { border-top-left-radius: 10px; border-top-right-radius: 10px; } /* make last item round corner */ li.accordion-item:last-child:not[data-is-open="true"] .accordion-item__title-wrapper { border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } /* remove divider between accordion items */ .accordion-divider { display: none; } /* accordion content padding */ .accordion-item__description { max-width: unset !important; padding: 20px !important; } /* arrows color */ .plus>div { color: white !important; } </style>
Coming soon.
#12. Accordion Content Link Style
/* Links underline */ div.accordion-item__description p a { border-bottom: 1px solid black; } /* Links font style */ div.accordion-item__description p a { color: red !important; font-size: 30px; font-family: monospace; letter-spacing: 2px; } #13. Add a button inside Accordion Content
First, you need to add a text link. Next, add this CSS to turn link to button
/* turn accordion link to button */ div.accordion-item__description p a { background-color: black; color: white !important; padding-left: 10px; padding-right: 10px; padding-top: 15px; padding-bottom: 15px; border-color: red; border-width: 1px; border-style: solid; } #14. Add an Image inside Accordion Content
Use this CSS to add image to top or bottom of accordion content
/* Add an image into Accordion Content */ /* replace demo image with your image url */ /* nth-child(1) is first accordion item, nth-child(2) is second item... */ /* :before is image on top, :after if image on bottom */ li:nth-child(1) .accordion-item__description:before { content: ""; display: block; width: 100%; /* image width, you can also use px */ height: 150px; /* image height */ background-image: url(https://cdn.pixabay.com/photo/2021/09/15/15/48/seals-6627197__340.jpg); background-repeat: no-repeat; background-size: cover; margin-bottom: 20px; /* space between image-text */ } #14.2. Add Image to Accordion Content (Use JS code)
Suppose you want to add this image
https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg First, you edit Accordion >> Put your cursor at position where you want to add image >> Then enter text: image01
Next, add this code to Website Tools (under Not Linked) > Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('div.accordion-item__description p:contains("image 01")').closest('p').addClass('image-01'); $('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01'); }); </script> <style> .image-01 { font-size: 0; } </style> Result
If adding 3 images, doing this
and use this code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ // image 01 $('div.accordion-item__description p:contains("image01")').closest('p').addClass('image-01'); $('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01'); // image 02 $('div.accordion-item__description p:contains("image02")').closest('p').addClass('image-02'); $('<img src="https://cdn.pixabay.com/photo/2023/11/07/10/06/girl-8371776_1280.png"/>').appendTo('.image-02'); // image 03 $('div.accordion-item__description p:contains("image03")').closest('p').addClass('image-03'); $('<img src="https://cdn.pixabay.com/photo/2023/10/02/14/51/flowers-8289320_1280.png"/>').appendTo('.image-03'); }); </script> <style> [class*="image-0"] { font-size: 0; } </style> #14.3. Add Image to Accordion Content
You can also use this approach
Enter Image Url
highlight the text url > Add same image url (enable Open in New Window)
then use this code to Code Injection or Page Header Code Injection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('div.accordion-item__description p a:contains(".jpg")').each(function() { var $t = $(this); $(this).contents().filter(function(){ return this.nodeType != 1; }).remove(); $t.attr({ src: $t.attr('href') }) .removeAttr('href target'); $(this).replaceWith(function(){ return this.outerHTML.replace("<a", "<img").replace("</a", "</img") }); }); }); </script> <style> div.accordion-item__description img { width: 100%; margin-top: 10px; } </style>
#15. Change Plus/Minus (+/-) to custom icon
Replace demo image urls with your icon urls
/* Plus */ :not([data-is-open="true"]) .plus { background-image: url(https://cdn.pixabay.com/photo/2021/02/06/09/03/man-5987447__340.jpg) !important; background-size: contain; background-repeat: no-repeat; } :not([data-is-open="true"]) .plus div { display: none; } /* Minus */ [data-is-open="true"] .plus { background-image: url(https://cdn.pixabay.com/photo/2021/12/12/22/17/red-squirrel-6867105__480.jpg) !important; background-size: contain; background-repeat: no-repeat; } [data-is-open="true"] .plus div { display: none; } #16. Change style of a word on Accordion Title
See this comment
Wrote by @tuanphan
-
tuanphan got a reaction from Begona in How to add post blog item code injection in events pages only
If this, I don't know a way to achieve this. You try creating new thread, maybe someone can see and help
-
tuanphan reacted to McFlystrodamus in Adding reading time above blog title and include in summary block
I didn't even realize. Another quick and successful code, thanks again hero!
-
tuanphan got a reaction from Aerion in Pre-loading GIF images on page opening?
Yes. But you can use this shorter code
/* this code will apply all items */ a.grid-item .grid-image-inner-wrapper { background-size: cover; background-repeat: no-repeat; background-position: center center; } a.grid-item:hover img { opacity: 0; } /* you can edit below code */ a.grid-item[href="/films/director-reel-2024"] .grid-image-inner-wrapper { background-image: url(https://static1.squarespace.com/static/64382eed1c35456fd1ce5b34/t/65b926225b27dc7fe8b06d07/1706632744209/Director_Reel_01.gif); } a.grid-item[href="/films/director-reel-2024"]:hover img { opacity: 0; }
-
tuanphan got a reaction from sayreambrosio in View gallery block in 2 columns on mobile
You can use this code to Website > Website Tools > Custom CSS then save & reload the page
@media screen and (max-width:767px) { [data-section-id="65e9490abe62d95cb37c9634"] .gallery-grid-wrapper { grid-template-columns: repeat(2,1fr) !important; } }
-
tuanphan got a reaction from askdkym in Navigation width
You can use this CSS code
nav.header-nav-list { flex-wrap: nowrap; } .header-title-nav-wrapper { margin: 0 !important; } .header-display-desktop { justify-content: center !important; flex-direction: column; }
-
tuanphan got a reaction from Erick in I can't remove the bottom buttons from my page.
You can use this code to Website > Website Tools > Custom CSS
/* remove portfolio pagination */ .item-pagination[data-collection-type^="portfolio"] { display: none; }
-
tuanphan got a reaction from DanDan87 in For mobile…How to autoplay videos one by one as you scroll like YouTube does
Hi,
Video Block or Video Background? If Video Background, there is a plugin with these features.
-
tuanphan got a reaction from rhondahymason in drop-down menu: align text to left
Use this new code
.header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content { text-align:left; left: 0; min-width:200px; margin-left: 0; padding-left: 0 !important; }
-
tuanphan got a reaction from LukeView in Adding carousel image block
Your site is private, we can't access it, you can access this guide to know how to share url
-
tuanphan got a reaction from E-W in Change logo when I scroll down
Try this new code
/* Change logo on scroll */ .shrink .header-title-logo img { visibility: hidden; transition: all 0.3s; } .shrink .header-title-logo a { background-image: url(https://cdn.pixabay.com/photo/2020/02/01/20/05/hummingbird-hawkmoths-4811285__340.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; transition: all 0.3s; }
-
tuanphan got a reaction from E-W in Change logo when I scroll down
Add to Design > Custom CSS
/* Change logo on scroll */ .shrink .header-title-logo img { visibility: hidden; } .shrink .header-title-logo a { background-image: url(https://cdn.pixabay.com/photo/2020/02/01/20/05/hummingbird-hawkmoths-4811285__340.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; }