-
Posts
143 -
Joined
-
Last visited
Reputation Activity
-
DevonHarris got a reaction from McFlystrodamus in Move "reading time" under blog title
Hi guys, is there a way to add this to the metadata when the blog is viewed in a summary block? Like this:
-
DevonHarris got a reaction from sorca_marian in Gap between announcement bar and header
@sorca_marian idk what happened but it's working now, thank you so much!!
-
DevonHarris reacted to Architekt909 in How do I change the bg color of the mobile hamburger menu (and the colors there in general)
I figured it out. It was a tad bit confusing. The top site header was displaying that it used 1 particular theme, which I assumed applied to the hamburger overlay menu once clicked. Turns out I was wrong. It was using a different theme. I was able to find out which theme by accident: I clicked the hamburger menu in mobile view to bring up what you see above, then clicked the paint brush icon in the top-right and it informed me that it was in fact using a different theme. Once I had the correct theme, it was easy: To change the BG color it's under "Menu Overlay". From there you can see "background color", "link color", etc. Problem solved.
-
DevonHarris got a reaction from kayleigh in How to Add a Subhead to a List Block
For anyone looking for a simple fix to this:
Within the "title" section of the List Contents window, Add your main heading, then the subheading. BOLD the subheading and then go to Design>Custom CSS. Enter the following:
Section ID{ .list-section-title p strong{ display: block; font-size: 1.6rem !important; font-family: 'GothamBook' !important; color: hotpink !important; } } The display: block attribute forces the bolded text to flow to a new line. ".list-section-title p" identifies the list section title, and the "strong" specifies only the BOLDED text. The Section ID ensures that this only happens within that specific section. Then simply match your site subheading text to the font attributes listed in the code above.
To adjust mobile font sizes, wrap the code in a media query for phones and tablets, like this:
Section ID{ @media screen and (max-width: 641px){ display: block; color: hotpink; }} and Section ID{ @media screen and (max-width: 780px){ display: block; color: hotpink; }}
-
DevonHarris got a reaction from tuanphan in Typewriter & delete effect? TypeIt or something similar
Hey @tuanphan I fixed the issue- it just needed a color change in the style settings. Thank you!!!
-
DevonHarris reacted to tuanphan in [Share] Accordion Block: Useful code
First, edit this accordion title
to this
ALLERGIES <span><em>We are a nut free facility</em>. At TLA, we recognize that each student is individual and unique. Some of our students have allergies and/or certain health and developmental needs that require personalized care and attention.</span> Next, add this code to Last Line in Code Injection > Footer
<script> $(document).ready(function(){ $("span.accordion-item__title").each(function(){ $(this).html($(this).text()); }); }); </script> <style> span.accordion-item__title span { display: block; font-size: 20px; margin-top: 20px !important; } span.accordion-item__title span em { font-style: normal; font-weight: bold; color: red; } </style>
-
DevonHarris reacted to tuanphan in [Share] Accordion Block: Useful code
Add to Design > Custom CSS
@media screen and (max-width:767px) { .fe-block-yui_3_17_2_1_1660051489419_107975 { grid-column-start: 2; } .fe-block-yui_3_17_2_1_1660051489419_107975 * { text-align: left !important; } }
-
DevonHarris got a reaction from tuanphan in [Share] Accordion Block: Useful code
@creedon I'll be damned hahahha, who knew the solution was so simple! I'm glad they got intuitive on this! Thanks again for all your help!!
-
DevonHarris got a reaction from creedon in [Share] Accordion Block: Useful code
@creedon I'll be damned hahahha, who knew the solution was so simple! I'm glad they got intuitive on this! Thanks again for all your help!!
-
DevonHarris got a reaction from creedon in Plus signs remain on accordian when open
ahhh! I was removing the wrong selector, THANK YOU SO MUCH!!!
-
DevonHarris got a reaction from Summit227 in [Share] Accordion Block: Useful code
@creedon this is amazing!! Thank you so much!
-
DevonHarris got a reaction from creedon in [Share] Accordion Block: Useful code
@creedon this is amazing!! Thank you so much!
-
DevonHarris got a reaction from tuanphan in Flexbox Vertical Accordion | Codepen
Thanks @tuanphan but I just solved it by editing the degree direction of the text within the code 🙂. Square Stylist has a gorgeous sideways accordion plugin too if anyone is looking for an easy solution. Not sure how she did it, but it looks cool!
https://www.squarestylist.com/shop/vertical-tabs
-
DevonHarris reacted to tuanphan 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
-
DevonHarris got a reaction from Rebecca_Grace_Designs in Mobile Navigation Half Width
worked great, THANK YOU SO MUCH!!! Can you please post a link to the blog when you write it? 🙂
-
DevonHarris reacted to creedon in Moving 'add to cart' button
@DevonHarris
For the product grid title.
.collection-type-products .grid-title For detail.
.collection-type-products .ProductItem-details h1.ProductItem-details-title
-
DevonHarris got a reaction from creedon in Image Block Not Showing on Site?
@creedon you're right. I added a text block with the bottom two 'words' linked, and then styled the links in css by targeting the block they belonged to. Thanks again!!
-
DevonHarris got a reaction from AlyssaB in Multiple Profiles In a Single Membership
Hi! I’m creating a website for a kids gym, and need to be able to set up one single member account where parents can access & buy classes (aka “workshops”) for one or more of their children -
and additionally I would need to store certain info about each child profile within the member account, such as food allergies, home address etc.
ideally, when the parent sees a course they would like to sign their child up for, they can click on the course, and a drop down list will appear with all of the profiles in their account, which they can select. For example, I as a parent would create one member account for my family. Once logged in, I add a unique profile for each of my kids, with customized information. Then, when I want to sign up for spring soccer, the ‘product’ page will hav a dropped which shows all of my kids names, and I just select the one that I want to sign up, and add to my cart. Additionally, given that I would have already input important information about my kids, I won’t need to fill out any extra forms. Does this make sense? I’m hoping this is possible!!
-
DevonHarris got a reaction from Beyondspace in Icon/Image on Low Stock or Sold Out Images
Hi!
is there a way to automatically have a “low stock” image (uploaded by me) display on top of the images of products/services that are low in stock. Similarly with Out of Stock? Little image would ideally display on regular shop or events page and on the item details page. Also- since quantities are not updated until the customer checks out- is there some CSS where I can make in bold, italic red font below the item description (or just style the last line of the item description) to say “please note that inventory is not updated until checkout” or something like that?
-
DevonHarris got a reaction from paul2009 in Form Required When Selling Workshop, Multiple Slots Sold
@paul2009 this is truly amazing- thank you so so much for your help and support on this!! I will definitely report the issue to Squarespace because I know a ton of users who would be really upset if they thought they had a spot booked, only to find out at the end of filling out the lengthy form that the class is sold out. Thank you so so much!!