Jump to content

colin.irwin

Circle Member
  • Posts

    3,605
  • Joined

  • Last visited

  • Days Won

    92

Reputation Activity

  1. Love
    colin.irwin got a reaction from artpimpress in Decreasing Section Padding Squarespace 7.1   
    There is a min-height of 33vh set on sections. You need to override that to get the sections smaller. 

    For all sections this would be:
    .page-section { min-height: 0 !important; } For a specific section you need to specify the data-section-id that can be found by inspecting the page code using your browser's developer tools.

    Somethig like this:
    .page-section[data-section-id="5d979fd8590a832f3c411579"] { min-height: 0 !important; }  
  2. Thanks
    colin.irwin got a reaction from failbetter in Decreasing Section Padding Squarespace 7.1   
    There is a min-height of 33vh set on sections. You need to override that to get the sections smaller. 

    For all sections this would be:
    .page-section { min-height: 0 !important; } For a specific section you need to specify the data-section-id that can be found by inspecting the page code using your browser's developer tools.

    Somethig like this:
    .page-section[data-section-id="5d979fd8590a832f3c411579"] { min-height: 0 !important; }  
  3. Like
    colin.irwin got a reaction from davekorns in How do I create hide/show text on a page, like you see with FAQs?   
    Here's a slightly more concise solution, using jQuery.
    The idea is to use a Markdown block to hold your questions and answers. It should be the only Markdown block on the page.
    The Markdown will look something like the following (The + at the start of each question is a cue for the user to know they can expand the entry).
    + This is a first question ----------------- This is the first line of an answer to the question above. This is a second line of the answer. * Bullet points * Can be used too + This is a second question ----------------- This is a one line answer to the question above.
    Questions should be styled as H2.
    Then put the following code into your page's injection point:
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h2').css('cursor','pointer'); $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle(); $(".markdown-block .sqs-block-content h2").click(function() {$(this).nextUntil("h2").slideToggle();}); }); </script>
    The first can be omitted if you already have a link to jQuery in your sitewide code injection point.
    The second script tells the mouse cursor to become a pointer when over the Markdown H2s - this is to tell the user it's clickable. Then, when an H2 is clicked it toggles the visibility of all content between the clicked H2 and the next H2 / the end of the markdown block.
    See it in action here - http://www.silvabokis.com/idea-testing/
  4. Like
    colin.irwin got a reaction from ejeancross in How do I create hide/show text on a page, like you see with FAQs?   
    It does. I liked your solution but thought that a Markdown block to contain the FAQs would be easier for a non-technical person to maintain.
    There's still some know-how required but the tools inside the Markdown editor make it relatively straightforward to maintain.
  5. Like
    colin.irwin got a reaction from ARTSPEAKNYC in How do I create hide/show text on a page, like you see with FAQs?   
    Here's a slightly more concise solution, using jQuery.
    The idea is to use a Markdown block to hold your questions and answers. It should be the only Markdown block on the page.
    The Markdown will look something like the following (The + at the start of each question is a cue for the user to know they can expand the entry).
    + This is a first question ----------------- This is the first line of an answer to the question above. This is a second line of the answer. * Bullet points * Can be used too + This is a second question ----------------- This is a one line answer to the question above.
    Questions should be styled as H2.
    Then put the following code into your page's injection point:
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h2').css('cursor','pointer'); $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle(); $(".markdown-block .sqs-block-content h2").click(function() {$(this).nextUntil("h2").slideToggle();}); }); </script>
    The first can be omitted if you already have a link to jQuery in your sitewide code injection point.
    The second script tells the mouse cursor to become a pointer when over the Markdown H2s - this is to tell the user it's clickable. Then, when an H2 is clicked it toggles the visibility of all content between the clicked H2 and the next H2 / the end of the markdown block.
    See it in action here - http://www.silvabokis.com/idea-testing/
  6. Thanks
    colin.irwin got a reaction from jaisequoia in Decreasing Section Padding Squarespace 7.1   
    There is a min-height of 33vh set on sections. You need to override that to get the sections smaller. 

    For all sections this would be:
    .page-section { min-height: 0 !important; } For a specific section you need to specify the data-section-id that can be found by inspecting the page code using your browser's developer tools.

    Somethig like this:
    .page-section[data-section-id="5d979fd8590a832f3c411579"] { min-height: 0 !important; }  
  7. Like
    colin.irwin got a reaction from zoester300 in Decreasing Section Padding Squarespace 7.1   
    There is a min-height of 33vh set on sections. You need to override that to get the sections smaller. 

    For all sections this would be:
    .page-section { min-height: 0 !important; } For a specific section you need to specify the data-section-id that can be found by inspecting the page code using your browser's developer tools.

    Somethig like this:
    .page-section[data-section-id="5d979fd8590a832f3c411579"] { min-height: 0 !important; }  
  8. Like
    colin.irwin got a reaction from bluebrindlemarketing in How do I create hide/show text on a page, like you see with FAQs?   
    @HHabel I have amended the instructions for you to use H3 as the open/close text
    Markdown is as follows:
    ### + This is a first question This is the first line of an answer to the question above. This is a second line of the answer. * Bullet points * Can be used too ### + This is a second question This is a one line answer to the question above.
    Script is as follows:
    <script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h3').css('cursor','pointer'); $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle(); $(".markdown-block .sqs-block-content h3").click(function() {$(this).nextUntil("h3").slideToggle();}); }); </script>
  9. Like
    colin.irwin got a reaction from bluebrindlemarketing in How do I create hide/show text on a page, like you see with FAQs?   
    It does. I liked your solution but thought that a Markdown block to contain the FAQs would be easier for a non-technical person to maintain.
    There's still some know-how required but the tools inside the Markdown editor make it relatively straightforward to maintain.
  10. Like
    colin.irwin got a reaction from FrankPrendergast in Decreasing Section Padding Squarespace 7.1   
    There is a min-height of 33vh set on sections. You need to override that to get the sections smaller. 

    For all sections this would be:
    .page-section { min-height: 0 !important; } For a specific section you need to specify the data-section-id that can be found by inspecting the page code using your browser's developer tools.

    Somethig like this:
    .page-section[data-section-id="5d979fd8590a832f3c411579"] { min-height: 0 !important; }  
  11. Like
    colin.irwin got a reaction from spitznagel in attempting to set unique background image for one page, CSS not working with SquareSpace   
    Something like this should work:
    body#collection-55a5af43e4b0aac39df22df0 { background-position: center top !important; background-image: url("//static1.squarespace.com/static/55a48db1e4b03b84d36b22fb/t/571e6768746fb924e954224b/1461610345514/Against%2BColorful%2Bgraffiti.jpg"); }
  12. Like
    colin.irwin got a reaction from lisa.popa in Hide Header and footer from one page   
    Find the collection id of the page in question. You do this by inspecting the source code and looking at the body tag. 

    Then insert the collection id into the following code (making sure you keep the # character in the code) and paste the edited code into your custom css area. 
    #collection-id-here { header, footer { display: none !important; } }  
  13. Like
    colin.irwin got a reaction from sarahsaturday in Disabling Lightbox in Summary Box but keeping links when present   
    As a test I created a gallery called test gallery. 
    Then I gave some of the items in the gallery links 

     
    I created a summary block on another page that uses the gallery as the source of its images. 
    Then I created a css rule to kill pointer events for any summary items whose link is from the original gallery (begins with /test-gallery).
    It works as expected. Items with no clickthrough url have a standard cursor and are not clickable but those with a clickthrough work properly. 

    Here is the code - insert it at the bottom of your custom css area after any other code that may already be there. You'll need to tweak href ^= "***" to reflect your gallery slug 
    .summary-item a[href^="/test-gallery"] { pointer-events: none; }
  14. Like
    colin.irwin got a reaction from BrookwoodDrew in Decreasing Section Padding Squarespace 7.1   
    There is a min-height of 33vh set on sections. You need to override that to get the sections smaller. 

    For all sections this would be:
    .page-section { min-height: 0 !important; } For a specific section you need to specify the data-section-id that can be found by inspecting the page code using your browser's developer tools.

    Somethig like this:
    .page-section[data-section-id="5d979fd8590a832f3c411579"] { min-height: 0 !important; }  
  15. Like
    colin.irwin got a reaction from SouthernSunEvents in Removing Auto Hyphen from mobile view   
    Try adding this to the custom css area, after any other code that may be there. Also remove your code.

     
    @media only screen and (max-width: 768px) { body { h1,h2,h3,p,li,a,em,i,strong { -webkit-hyphens: none !important; hyphens: none !important; } .page-desc p { -webkit-hyphens: none !important; hyphens: none !important; } } }  
  16. Like
    colin.irwin got a reaction from katie4 in Disabling Lightbox in Summary Box but keeping links when present   
    As a test I created a gallery called test gallery. 
    Then I gave some of the items in the gallery links 

     
    I created a summary block on another page that uses the gallery as the source of its images. 
    Then I created a css rule to kill pointer events for any summary items whose link is from the original gallery (begins with /test-gallery).
    It works as expected. Items with no clickthrough url have a standard cursor and are not clickable but those with a clickthrough work properly. 

    Here is the code - insert it at the bottom of your custom css area after any other code that may already be there. You'll need to tweak href ^= "***" to reflect your gallery slug 
    .summary-item a[href^="/test-gallery"] { pointer-events: none; }
  17. Like
    colin.irwin got a reaction from Royster1994 in Edit form placeholder text - CSS   
    Try this
    input.field-element::placeholder { color: red !important; }
  18. Like
    colin.irwin got a reaction from tuanphan in Edit form placeholder text - CSS   
    Try this
    input.field-element::placeholder { color: red !important; }
  19. Like
    colin.irwin got a reaction from SalmaMaged in Removing blank spaces between page sections on Index Pages   
    The default section padding is 96px at the top and bottom.
    Insert this into your custom css and then tweak the @sectionpadding pixel value until you get the layout you prefer. 
    @sectionpadding: 10px; .index-section .index-section-wrapper.page-content { padding-top: @sectionpadding; padding-bottom: @sectionpadding; }  
  20. Like
    colin.irwin got a reaction from Asiya in Removing blank spaces between page sections on Index Pages   
    It depends upon the template you are using.. Can you share the template name and also a url to the site?
  21. Like
    colin.irwin got a reaction from jaimee1570048593 in Removing Auto Hyphen from mobile view   
    Try adding this to the custom css area, after any other code that may be there. Also remove your code.

     
    @media only screen and (max-width: 768px) { body { h1,h2,h3,p,li,a,em,i,strong { -webkit-hyphens: none !important; hyphens: none !important; } .page-desc p { -webkit-hyphens: none !important; hyphens: none !important; } } }  
  22. Like
    colin.irwin got a reaction from DaImp in Harris template - turning navigation links into anchor links   
    Yeah - rather than just /#purpose you can use /home#purpose
    However, this has the disadvantage of reloading the page rather than just scooting down to the anchor point. 

    If you're happy with coding you could leave the desktop links as they currently are and modify the mobile ones to contain /home#whatever
  23. Like
    colin.irwin got a reaction from DaImp in Harris template - turning navigation links into anchor links   
    You put the actual pages in the Not Linked section and then add Links to them in the main navigation. 
     

  24. Like
    colin.irwin got a reaction from tuanphan in Harris template - turning navigation links into anchor links   
    You put the actual pages in the Not Linked section and then add Links to them in the main navigation. 
     

  25. Like
    colin.irwin got a reaction from Ciodensky in Executing my javascript code only on a specific page   
    Here's what you need to do. 
    First, wrap your code as follows
    <script> window.Squarespace.onInitialize(Y, function(){ // Your code here }); </script>  
    This will execute the code on each page load. 
    Next, you may need to modify the code so that it only runs for the specific page. You do this by testing the body tag for the presence of the specific collection id. 
×
×
  • 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.