Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

colin.irwin

Circle Member
  • Posts

    3,517
  • Joined

  • Last visited

  • Days Won

    92

Community Answers

  1. colin.irwin's post in Disabling Lightbox in Summary Box but keeping links when present was marked as the answer   
    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; }
  2. colin.irwin's post in Responsive mode buttons problem was marked as the answer   
    You'll need to set a breakpoint at whatever stage the layout breaks (looks like roughly 1400px wide)
    At that breakpoint you should target the collection id to restrict the rule to one page and then for the columns that are 4 wide to span 100% of the available width. 
    @media only screen and (max-width:1400px) { #collection-5cda8559cb2c42000142030b section#le-conseil-1 .sqs-col-4 { width: 100% !important; } }  
  3. colin.irwin's post in Changing Mobile font size on a single page was marked as the answer   
    If you're using Squarespace 7.0 (NOT 7.1):
    Use Chrome browser and use it to install the following Chrome extension - https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde Visit the page you want to modify the text on and click the extension's icon  An overlay will appear showing all of the permanent collection and block ids on the page Click the top left, collection overlay item and it will copy to your clipboard  Now take a copy of your existing font color code and prefix it with the collection id. Paste the copy *after* the code you already have. That sets up the css so that it tweaks the color for everything and then applies the second color tweak only to relevant collection.  Without seeing your code it's difficult to give a specific code example but it's probably something like 
    @media only screen and (max-width: 640px) { #something .something { color: red; } } You would modify it with the collection ID as follows
    @media only screen and (max-width: 640px) { #collection-535e7627e4b0140e264640b8 #something .something { color: blue; } } NB - Above I use a collection ID from a page on  my site - you need the one from your page. 
  4. colin.irwin's post in How to decrease space between Site Navigation and drop down menu was marked as the answer   
    Try the following in your custom css
    @media only screen and (min-width: 641px) { body:not(.force-mobile-nav) .nav-wrapper .folder .subnav { top: 20px !important; } }  
  5. colin.irwin's post in How to disable calendar pop up links was marked as the answer   
    This version will also hide the arrow so the text doesn't look like a link. 
    .flyoutitem a { pointer-events: none !important; .flyoutitem-link-arrow { display: none; } }
  6. colin.irwin's post in FOSTER Template - 100% Image Block Height was marked as the answer   
    If you change your images to Image Cards you can get a layout like you want, I think. 
    https://support.squarespace.com/hc/en-us/articles/205814528-Image-Blocks#toc-image-block-layouts
  7. colin.irwin's post in Reduce gap between top navigation bar/site header and content below - Bedford template was marked as the answer   
    Amended code below. This should work. 
    body:not(.homepage) #page { padding-top: 0px !important; }  
  8. colin.irwin's post in Re-direting click through logo on LANGE templates was marked as the answer   
    The problem was that my code was trying to change site title rather than site logo link
    It should now be working
    The code is
    <script> window.Squarespace.onInitialize(Y, function(){ var homelink = document.querySelector('.logo-image a'); if (homelink) { homelink.setAttribute('href', '/projects') } }); </script> Note that you should not include the full url in your links. Instead use the part from the first '/' character. So /projects
     
     
  9. colin.irwin's post in Possible to round the canvas corners in Om? was marked as the answer   
    Add this to your custom css area, after any other code that may already be there
    #canvas { border-radius: 20px; } Then play with the radius value
  10. colin.irwin's post in Text Outline/Drop Shadow in Navigation in Aviator was marked as the answer   
    This puts a grey 'glow' behind your navigation links. Put it in your custom css. 
    nav#main-navigation { text-shadow: 0px 0px 3px #aaa; } The parameters (in order) are
    Horizontal shadow offset - currently set to 0px so it sits behind the image) Vertical  shadow offset - currently set to 0px so it sits behind the image) Blur radius - set to 3px so that it casts an omnidirectional shadow. Reduce this value to make the shadow sharper.  Color - currently set to a mid gray
  11. colin.irwin's post in Product price placement was marked as the answer   
    Try this in your custom css
    #productDetails { display: flex; flex-direction: column; .product-title { order: 1; } .product-excerpt { order: 2; } .product-price { order: 3; } .product-variants { order: 4; } .product-quantity-input { order: 5; } .sqs-add-to-cart-button-wrapper { order: 6; } .product-sharing { order:7; } }  
  12. colin.irwin's post in Main Nav/ Banner Isuue was marked as the answer   
    Each page has a collection ID that you can see if you inspect the code. 
    THe code below will do both the homepage and the page you mentioned. 
    .homepage, #collection-5d9ef4a5ee902a468db30b52 { .Header-inner.Header-inner--bottom {     margin-top: -20px; } } Please hit like if this solves your problem
  13. colin.irwin's post in Add Line Below Gallery on Flatiron was marked as the answer   
    Try
    .sqs-gallery-container.sqs-gallery-block-slideshow {     border-bottom: 1px solid #000;     padding-bottom: 10px; } Then tweak the line thickness, style and colour as well as the padding. 
     
    Options for visible border line styles are:
    dotted dashed solid double groove - 3D grooved border ridge - 3D ridged border inset - 3D inset border outset -  3D outset border If this resolves your problem, please hit like and also vote it up.
  14. colin.irwin's post in attempting to set unique background image for one page, CSS not working with SquareSpace was marked as the answer   
    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"); }
  15. colin.irwin's post in How do i make a video header play on mobile? was marked as the answer   
    Videos will not autoplay on Android / iOS. The restriction is implemented at the operating system level to protect device owners from having their download allowance consumed by content they may not be interested in.
    A poster image can be defined for videos that will be used as a preloading screen and also as a static fallback image on Android and iOS.
    There are ways around this, using scripting, but I'd recommend using the static image fallback.
  16. colin.irwin's post in How do I discover a block ID? was marked as the answer   
    If you use the Google Chrome browser there is a useful extension called the Squarespace Collection/Block Identifier.
    Enable the identifier while viewing a Squarespace web page and the collection ID and permanent block IDs are revealed.
    https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde
  17. colin.irwin's post in How do I change the size of the social media icons? was marked as the answer   
    Add
    .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:before, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:before, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:link:before, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:link:before, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:visited:before, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:visited:before { /* The icon size */ font-size: 40px; } .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:link, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:link, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:visited, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:visited { /* Space around icons */ width: 40px; height: 40px; }
    To your Custom CSS Editor
  18. colin.irwin's post in How do I change the size of the social media icons? was marked as the answer   
    Add
    .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:before, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:before, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:link:before, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:link:before, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:visited:before, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:visited:before { /* The icon size */ font-size: 40px; } .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:link, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:link, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:visited, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:visited { /* Space around icons */ width: 40px; height: 40px; }
    To your Custom CSS Editor
  19. colin.irwin's post in How do I change styling for only one button? was marked as the answer   
    I stripped down the code you gave as an example and added unique IDs to the containing div and the a link so that they can be easily targeted for styling.
    In a Markdown block insert the following:
    <div class="sqs-block-button-container--center" id="cta-button-container"> <a href="/new-client-signup" class="sqs-block-button-element--large sqs-block-button-element" id="cta-button">I'm New! Sign Me Up! </a> </div>
    Then, in Custom CSS insert the following:
    #cta-button-container { text-align: center !important; } #cta-button { text-align: center !important; background-color: #d95430; border-radius: 300px; -webkit-box-shadow: 0 3px 0 0 #b13f21; -moz-box-shadow: 0 3px 0 0 #b13f21; box-shadow: 0 3px 0 0 #b13f21; position: relative; -webkit-transition: .1s background-color linear; -moz-transition: .1s background-color linear; -o-transition: .1s background-color linear; transition: .1s background-color linear; padding: 25px 46px; color: #fff; border-color: #d34b27; font-size: 20px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; font-style: normal; width: 220px; } #cta-button:hover { background-color: #fff; border-radius: 300px; -webkit-box-shadow: 0 5px 0 0 #b13f21; -moz-box-shadow: 0 5px 0 0 #b13f21; box-shadow: 0 5px 0 0 #b13f21; position: relative; -webkit-transition: .1s background-color linear; -moz-transition: .1s background-color linear; -o-transition: .1s background-color linear; transition: .1s background-color linear; color: #d95430; }
  20. colin.irwin's post in How do I change styling for only one button? was marked as the answer   
    I stripped down the code you gave as an example and added unique IDs to the containing div and the a link so that they can be easily targeted for styling.
    In a Markdown block insert the following:
    <div class="sqs-block-button-container--center" id="cta-button-container"> <a href="/new-client-signup" class="sqs-block-button-element--large sqs-block-button-element" id="cta-button">I'm New! Sign Me Up! </a> </div>
    Then, in Custom CSS insert the following:
    #cta-button-container { text-align: center !important; } #cta-button { text-align: center !important; background-color: #d95430; border-radius: 300px; -webkit-box-shadow: 0 3px 0 0 #b13f21; -moz-box-shadow: 0 3px 0 0 #b13f21; box-shadow: 0 3px 0 0 #b13f21; position: relative; -webkit-transition: .1s background-color linear; -moz-transition: .1s background-color linear; -o-transition: .1s background-color linear; transition: .1s background-color linear; padding: 25px 46px; color: #fff; border-color: #d34b27; font-size: 20px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; font-style: normal; width: 220px; } #cta-button:hover { background-color: #fff; border-radius: 300px; -webkit-box-shadow: 0 5px 0 0 #b13f21; -moz-box-shadow: 0 5px 0 0 #b13f21; box-shadow: 0 5px 0 0 #b13f21; position: relative; -webkit-transition: .1s background-color linear; -moz-transition: .1s background-color linear; -o-transition: .1s background-color linear; transition: .1s background-color linear; color: #d95430; }
  21. colin.irwin's post in How do I create hide/show text on a page, like you see with FAQs? was marked as the answer   
    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/
×
×
  • Create New...