Jump to content

The-Design-Order

Circle Member
  • Posts

    29
  • Joined

  • Last visited

Reputation Activity

  1. Like
    The-Design-Order reacted to moonfang in How can I hide or remove the icon in an accordion ?   
    if you have the accordion menu set to arrow, use this. otherwise you'll need to identify the class name and replace "arrow" with whatever the icon is. just open up design > custom css, add this code, and save. 
    /* Target the arrow div element and destroy it with the might of a thousand suns */
    .arrow {
      display: none !important;
    }

     
     
  2. Like
    The-Design-Order reacted to tuanphan in How can I display an open Accordion Block item by default?   
    Add to Design > Custom CSS
    /* Accordion Block - Expand all items */ .sqs-block-accordion .accordion-item__dropdown { display: block !important; }  
  3. Like
    The-Design-Order reacted to tuanphan in Bouncing scroll down indicator in Squarespace 7.1?   
    Hi, uploaded image to your site then replace this
    <div class="arrow"> <span></span> </div> with this
    <div class="arrow"> <img src="enter image url here"/> </div>  
  4. Thanks
    The-Design-Order reacted to Wolfsilon in Bouncing scroll down indicator in Squarespace 7.1?   
    Hello there,
    To add an animated arrow down element, we'll need to use a Code Block and Custom CSS.
    1) Create a Code Block and place the block directly underneath the "Get A Quote" button.
    2) In the Code Block menu, you'll see "<p> hello world! </p>" -- Remove the entire line and replace it with the following: 
    <div class="arrow"> <span></span> </div> 3) You can now save and close the page editor. Return to "Home" and navigate to Design > Custom CSS.
    4) To animate and place the element onto your website you can paste the following into the Custom CSS box:
     .arrow{     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%,-50%); } .arrow span{     display: block;     width: 30px;     height: 30px;     border-bottom: 3px solid #000;     border-right: 3px solid #000;     transform: rotate(45deg);     margin: -10px;     animation: animate 1.8s ease infinite; } @keyframes animate {     0%{         opacity: 0;         transform: rotate(45deg) translate(-20px,-20px);     }     50%{         opacity: 1;     }     100%{         opacity: 0;         transform: rotate(45deg) translate(20px,20px);     } } 5) You should start to see the arrow animate downward in the center of the page, directly under the "Get A Quote" button. 
    You can customize the "stroke" of the arrow by adjusting the dimensions of the Border-Bottom and Border-Right "px" properties.
    You can adjust the color of the arrow ("stroke") by inserting a hex/rgb/rgba color of your choice. Simply replace the "#000" with the color/format of your choice for both Border-Bottom and Border-Right.
    You can adjust the speed of the downwards animation by entering new timings and transitions. The CSS format of the animation shown above is listed below and I would encourage you to experiment with different properties for transition-duration and timing-function. 
     
    Let me know if you need any additional help. Hope this provided a solution for you! 
    Cheers,
    Dan
  5. Like
    The-Design-Order reacted to Beyondspace in [Share] Accordion Block: Useful code   
    Impressed! Thanks for the effort tuan
  6. Thanks
    The-Design-Order reacted to tuanphan in Scroll Arrow Indicator   
    Add to Code Block
    <div class="scroll-down"></div> <style> .scroll-down { position: absolute; left: 50%; bottom: 10px; display: block; text-align: center; font-size: 20px; z-index: 100; text-decoration: none; text-shadow: 0; width: 13px; height: 13px; border-bottom: 2px solid red; border-right: 2px solid red; z-index: 9; left: 50%; -webkit-transform: translate(-50%, 0%) rotate(45deg); -moz-transform: translate(-50%, 0%) rotate(45deg); transform: translate(-50%, 0%) rotate(45deg); -webkit-animation: fade_move_down 4s ease-in-out infinite; -moz-animation: fade_move_down 4s ease-in-out infinite; animation: fade_move_down 4s ease-in-out infinite; } /*animated scroll arrow animation*/ @-webkit-keyframes fade_move_down { 0% { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; } } @-moz-keyframes fade_move_down { 0% { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; } } @keyframes fade_move_down { 0% { transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { transform:translate(0,10px) rotate(45deg); opacity: 0; } } </style>  
  7. Thanks
    The-Design-Order 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
  8. Like
    The-Design-Order reacted to creedon in Site Search is broken in 7.1   
    Are you using a free service? Then I'd say no. If you are using a paid service then you should not have to put up with ads.
  9. Like
    The-Design-Order reacted to paul2009 in Site Search is broken in 7.1   
    UPDATE FEBRUARY 2024:
    Search reliability has been improved! Searches should now return accurate results. If you aren't seeing these improvements, please post examples, including screenshots.
     
    ORIGINAL POST (SEPT 2021):
    Sadly, this is a known issue (see screenshot below) - and has been since October 2019. It is a technically complex issue that will require some time to resolve and so, although I don't work for Squarespace, I don't expect to see it resolved any time soon.
    I will post back whenever there is news, but in the meantime I recommend that you:
    log a support ticket with Customer Care. Squarespace doesn’t use this forum to track bugs, limitations, or feature requests. If you'd like to raise the visibility of this issue, you are encouraged to contact Squarespace directly.  consider using an external search service or use sorting and filtering solutions to improve discoverability of products.  Some search solutions you can integrate into Squarespace include:
    Universal Filter. Squarespace specific filtering with search ($70 one-off payment). SearchIQ. Fast and intelligent search, from $19pm (without branding). Swiftype by Elasticsearch. Enterprise-class solution from $79pm. Programmable search engine. A Google service that you can get for free or a low price.
  10. Like
    The-Design-Order reacted to Beyondspace in How to add in spacing on mobile view   
    you can use my previous code to set visible for this section.
    Or try find this code in:
    - Home > Design > Custom Css
    - Home > Settings > Advanced > code injection (within <style> tag)
    - Home > Pages > choose setting on page > Advance
    - ... any code block?
  11. Like
    The-Design-Order got a reaction from MacUn in Custom font for blog title   
    Update! I figured this out. Incase anyone else is having difficulties. I am using Brine. I inspected the elements and it just looks like the naming is slightly different... 
    For the blog headings:
    h1.BlogItem-title {
        font-family: 'RoxboroughCF-Regular' !important;
    }
     
    For the list headings:
    .BlogList-item-title {
        font-family: 'RoxboroughCF-Regular'
    !important;
        font-size: 30px;
    }
     
     
  12. Thanks
    The-Design-Order reacted to christyprice in Different Banner Image on Mobile   
    If you are on 7.1, here are new instructions:
    How to Show a Different Banner Image on Mobile in Squarespace
  13. Like
    The-Design-Order got a reaction from creedon in Custom font for blog title   
    Update! I figured this out. Incase anyone else is having difficulties. I am using Brine. I inspected the elements and it just looks like the naming is slightly different... 
    For the blog headings:
    h1.BlogItem-title {
        font-family: 'RoxboroughCF-Regular' !important;
    }
     
    For the list headings:
    .BlogList-item-title {
        font-family: 'RoxboroughCF-Regular'
    !important;
        font-size: 30px;
    }
     
     
  14. Thanks
    The-Design-Order reacted to christyprice in Different Banner Image on Mobile   
    ETA: If you are on the newer Squarespace 7.1, this post has a walkthrough: How to Show a Different Banner Image on Mobile in Squarespace
     
    Hi @Joeyearthly,
    If you are using an index page, I have a different workaround that I like a bit better, since you can make whole area specific for mobile instead of just the banner image. I create two "sub-pages" at the top of the index page, one for desktop view (with the URL slug home-banner) and one for mobile view (with the URL slug home-banner-mobile). Then I add the following code to Custom CSS. (Note that if you want to edit the mobile from your desktop, you'll need to briefly comment out the code so you can see that page on desktop.)
    /* show home page block dependent on screen size */ @media only screen and (max-width: 780px) { #home-banner { display: none; } } @media only screen and (min-width: 781px) { #home-banner-mobile { display: none; } }  
  15. Thanks
    The-Design-Order reacted to tuanphan in Adjust poster text size on mobile   
    @The-Design-Order 
    @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1573602127450_9869 .image-title-wrapper * { font-size: 30px !important; } div#block-yui_3_17_2_1_1573602127450_9869 .image-title-wrapper .image-subtitle-wrapper * { font-size: 30px !important; } } Where poster 2 & 3?
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.