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

Reputation Activity

  1. Like
    colin.irwin got a reaction from SportPsy-newbie in Image hover effect only on linked images?   
    Can you post a URL?
  2. 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; } } }  
  3. Like
    colin.irwin got a reaction from tystforest in Script Disabled   
    Try turning off Ajax Loading in Site Styles. 
  4. Like
    colin.irwin got a reaction from Begona in Scale code blocks for mobile   
    Personally, I wouldn't use inline styles in a code block for precisely the reason that you have highlighted - it's difficult to make them responsive. 
    However, you may be able to get things looking better with your inline styles if you use vw units rather than em. vw is relative to the viewport width. 
    A better approach is to learn how to target a specific block for styling. 
    This Chrome extension shows you block names that you can use in custom css.  https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde
    Enabling the extension in your Chrome address bar will overlay the collection ID and block ids on a page. 
    To style a text block containing the example you gave earlier you would create a normal text block and insert 4 centered lines of text. 
    #the-block-id { p { font-size: 2vw; // the first para } p + p { font-size: 2.5vw; // para followed by a para, so 2nd para } p + p + p { font-size: 3vw; // para followed by a para followed by a para, so 3nd para } p + p + p + p { font-size: 3.5vw; // para followed by a para followed by a para followed by a para, so 4th para } } Note that the vw values I have used may not be ideal but you can tweak them. Also, the way I have targeted the paras isn't the most elegant, but it should work and give you an idea. 
    I would use the above to get the sizing correct for wide screens and then create breakpoints to tweak the size at smaller screen widths. 
    #the-block-id { p { font-size: 2vw; // the first para @media only screen and (max-width: 640px) { font-size: 3vw; //increase text size for screens up to 640px } } p + p { font-size: 2.5vw; // para followed by a para, so 2nd para } p + p + p { font-size: 3vw; // para followed by a para followed by a para, so 3nd para } p + p + p + p { font-size: 3.5vw; // para followed by a para followed by a para followed by a para, so 4th para } } The above shows an additional  breakpoint for the first para on screens under 640px in width. 
  5. Like
    colin.irwin got a reaction from Sergio 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. 
  6. Like
    colin.irwin got a reaction from LukeBarbara in adding linkedin insight tag to my website   
    You should insert the code into the Footer injection point

    Go to Settings > Advanced > Code Injection and insert in FOOTER area

    Please note that Code Injection is not supported on personal plans. You will need a Business or Commerce Squarespace subscription
  7. Like
    colin.irwin got a reaction from bchung99 in How do I hide the music player and put it to auto play?   
    Here are a few reasons, in addition to my browsing at work scenario, that autoplay non-stoppable music can be undesirable:
    Users on smartphones are forced to stream audio that wastes their bandwidth. Users may be already listening to audio on their device, or be multitasking by browsing on their device while watching TV. Autoplay music is an unwanted distraction in that case. If a user journey spans many pages that have autoplay music and/or they revisit the same page multiple times they end up hearing the same starting section of music again and again. Annoying. Doesn’t the fact that you ‘do not find that people will click on the player’ prove that it’s not important to people in the context of your site? After hunting around the screen for a (not present) mute/volume button they are just as likely to hit the back button as they are to turn their speakers down. You need to clear the rights with copyright owners and music publishers before putting commercially available music on your site. For a website to engage with its users it should allow them to feel like they can choose their own path without intrusion or distraction. Forcing users to break from their chain of thought in order to seek a mute button will break their concentration. After all of those caveats, here’s how to hide the player. Add the following CSS to the header injection point:
    <style media="screen"> .sqs-audio-embed { visibility: hidden; } </style>
    There should be a way of autoplaying by triggering the same function that is attached to the player’s onclick state, but it’s beyond my understanding of the script to work out which function(s) would need calling and in which order.
  8. Like
    colin.irwin got a reaction from AlexM23 in How do I delete imported images?   
    You can’t.  It makes the feature useless for anything other than brand new sites. 
  9. Like
    colin.irwin got a reaction from thel7space in How do I delete imported images?   
    You can’t.  It makes the feature useless for anything other than brand new sites. 
  10. Like
    colin.irwin got a reaction from janandsusan in What advice would you give to someone just starting out on personal branding?   
    Don't claim to be an expert if you're not. 
  11. Like
    colin.irwin got a reaction from CB1 in Decreasing Section Padding Squarespace 7.1   
    Can you provide a link to your site?
  12. Like
    colin.irwin got a reaction from Margi in Sharing Template Preview   
    I generally spin up a new free trial and build the new site there. 
    There's a tool available that will let you copy content across to the new trial so that you don't have to rebuild tons of content. The same tool allows you to copy the approved new version over to the existing site to replace the current version. 
    Here's a link to the tool. https://www.squarewebsites.org/squarespacewebsites-tools-extension-pro
    NB. The tool does the content copying from one site to the other. The Site Styles settings can be exported from the trial site and imported into the old site. Similarly custom css and header and footer code injections need to be manually copied from one site to the other. 
     
  13. 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; }  
  14. Like
    colin.irwin got a reaction from Salesdroid in Breadcrumb at the start of every blog post.   
    The code below is part of a larger function that manages breadcrumbs for multiple sections of a client's site - blog collections, index pages and regular pages. 
    This is just for the news section, which is a blog. 
    First the JavaScript (this requires jQuery to be installed).  Also, it's for a 7.0 site with Ajax loading enabled. For 7.1 sites or 7.0 sites with Ajax disabled you would swap out the window.Squarespace.onInitialize(Y, function() for $(document).ready(function(){
    window.Squarespace.onInitialize(Y, function(){ processBreadcrumbs(); }); function processBreadcrumbs() { var thisPath = window.location.pathname; var thisPage; var breadcrumbLink; if (thisPath.includes('/news')) { $('.BlogItem-title').addClass('pad-site'); thisPage = $('.BlogItem-title').text(); $('.Main--blog-item .Main-content').prepend('<div id="breadcrumbNewsArticle"><div><a href="/">Home</a> &#187; <a href="/news-and-insights">News</a> &#187; <span class="truncate">'+thisPage+'</span></div></div>'); } }  
    Now some Custom CSS. The first class, .pad-site, is just to format the blog post title to make it consistent with the rest of the site. 

    The second class,  .truncate, tidies up long post titles so that the breadcrumb doesn't look too long. It stops the text at 320px wide and inserts an ellipsis to indicate it has been truncated.  It looks like this:

    The third CSS rule that begins with [id^="breadcrumb"] contains the styling for the breadcrumb links. 
    The Custom CSS
    .pad-site { padding-top: 34px; font-size: 28px; } .truncate { display: inline-block; width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } [id^="breadcrumb"] { font-size: 16px; font-weight: 400; font-style: normal; font-size: 16px; letter-spacing: .1em; a { color: @black; border-bottom: 1px dotted @black; &:hover { opacity:0.8; } } }  
    Finally, a caveat. I haven't tested this code on 7.1 sites. It's probable that it won't work by simply pasting it into your site and would need some editing to make it function correctly. 
  15. Like
    colin.irwin got a reaction from introverb in Script Disabled   
    Try turning off Ajax Loading in Site Styles. 
  16. Love
    colin.irwin got a reaction from ColeH_design in Disable Lightbox on Summary/Gallery   
    Add this to your custom css area after any other code that may be there
    #block-yui_3_17_2_1_1571913993663_5072 .summary-item a { pointer-events: none; } The code kills the pointer event on the summary items in that specific block. 
    You can easily get the block ids using this Chrome extension - https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde
  17. Like
    colin.irwin got a reaction from TDavy in How do I change styling for only one button?   
    The code above won't really help you. I will amend it slightly so that you can style it.
  18. Love
    colin.irwin got a reaction from KarlKarlson in Headline Animation w/ Custom CSS   
    The console is showing a lot of errors. 

     
    Without seeing the code it's not possible to give a definite fix but problems often cascade and fixing the first may resolve the rest. 

    The thing I think you should first troubleshoot is the Uncaught Syntax error: Unexpected token.  It could be that you have not properly copied the original code into your site and something has been truncated. 

    You should also check that you have a line of code to call in jQuery *before* your custom script. 

    Fixing those 2 items may well resolve everything, though that's me being optimistic rather than confident. 
  19. Like
    colin.irwin got a reaction from MaryPhilip_ in What advice would you give to someone just starting out on personal branding?   
    Don't claim to be an expert if you're not. 
  20. Like
    colin.irwin got a reaction from tuanphan in Make image slowly fade in once you enter home page only   
    Try inserting this in your Custom CSS area and experiment with the increasing / decreasing the 1.5s animation value until you get the effect you want.
    .homepage #block-yui_3_17_2_1_1611067680935_4040 { animation: fade-me-in 1.5s; } @keyframes fade-me-in { 0% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;} }  
     
  21. Like
    colin.irwin reacted to SolveigTraeet in Make image slowly fade in once you enter home page only   
    @colin.irwin Thank you, that worked great!
  22. Like
    colin.irwin got a reaction from SolveigTraeet in Make image slowly fade in once you enter home page only   
    Try inserting this in your Custom CSS area and experiment with the increasing / decreasing the 1.5s animation value until you get the effect you want.
    .homepage #block-yui_3_17_2_1_1611067680935_4040 { animation: fade-me-in 1.5s; } @keyframes fade-me-in { 0% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;} }  
     
  23. Like
    colin.irwin got a reaction from myrandomviews in What advice would you give to someone just starting out on personal branding?   
    Don't claim to be an expert if you're not. 
  24. Like
    colin.irwin got a reaction from adamler in adding linkedin insight tag to my website   
    You should insert the code into the Footer injection point

    Go to Settings > Advanced > Code Injection and insert in FOOTER area

    Please note that Code Injection is not supported on personal plans. You will need a Business or Commerce Squarespace subscription
  25. 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/
×
×
  • Create New...