Jump to content

iamdavehart

Circle Member
  • Posts

    246
  • Joined

  • Last visited

Community Answers

  1. iamdavehart's post in How do I add LinkedIn conversion tag in a form? was marked as the answer   
    I don't know if it doesn't work because I don't actually use this on my site, I just read the instructions on linkedin to answer the question. I did test it at the time though and it was working. I suspect that the person who pointed out that the second "click" should be "track" was probably right, so I'd try that and see if it works.
    so the script inside the code block should be this
    <script> const btn = document.querySelector("form input[type=submit]"); if (btn && btn.addEventListener) { btn.addEventListener("click",function() { window.lintrk('track',{ conversion_id: xxxxxxx }); }); } </script> with the correct conversion_id subbed in
  2. iamdavehart's post in Buy Me a Coffee was marked as the answer   
    You've got plenty of options here, but I suppose each has their own caveat. 
    Official Buy Me A Coffee buttons and widgets
    this is actually done using a javascript script file, so the easiest squarespace way of doing this is to just add a code block to your section and paste in the code they provide in their main instructions. However, because this is a script tag and is therefore injecting javascript you might find that you need a business subscription to squarespace...
    this is also true of the more expansive widget. just chuck it in a code block.
    Use a squarespace button and some css
    It's really just a link, so as you point out in your text, it's very easy to add a button, insert your buy me a coffee url and off you go. It will be styled as per one of your template button styles, but to insert the image, we'll need ot put some CSS in.
    You could download the image you want, upload it as a standard file in your custom CSS section and reference it there, but as buymeacoffee.com use an SVG themselves, I've just inlined the SVG in the CSS for convenience here. This will add the bmac image to the left of the text for any button that references buymeacoffee.com
    a.sqs-block-button-element[href*='buymeacoffee.com']::before { content:''; width:30px; height:30px; margin-right:2px; background-position: 50% 50%; background-repeat:no-repeat; background-size: contain; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 884 1279' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M791.109 297.518L790.231 297.002L788.201 296.383C789.018 297.072 790.04 297.472 791.109 297.518Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M803.896 388.891L802.916 389.166L803.896 388.891Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M791.484 297.377C791.359 297.361 791.237 297.332 791.118 297.29C791.111 297.371 791.111 297.453 791.118 297.534C791.252 297.516 791.379 297.462 791.484 297.377Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M791.113 297.529H791.244V297.447L791.113 297.529Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M803.111 388.726L804.591 387.883L805.142 387.573L805.641 387.04C804.702 387.444 803.846 388.016 803.111 388.726Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M793.669 299.515L792.223 298.138L791.243 297.605C791.77 298.535 792.641 299.221 793.669 299.515Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M430.019 1186.18C428.864 1186.68 427.852 1187.46 427.076 1188.45L427.988 1187.87C428.608 1187.3 429.485 1186.63 430.019 1186.18Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M641.187 1144.63C641.187 1143.33 640.551 1143.57 640.705 1148.21C640.705 1147.84 640.86 1147.46 640.929 1147.1C641.015 1146.27 641.084 1145.46 641.187 1144.63Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M619.284 1186.18C618.129 1186.68 617.118 1187.46 616.342 1188.45L617.254 1187.87C617.873 1187.3 618.751 1186.63 619.284 1186.18Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M281.304 1196.06C280.427 1195.3 279.354 1194.8 278.207 1194.61C279.136 1195.06 280.065 1195.51 280.684 1195.85L281.304 1196.06Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M247.841 1164.01C247.704 1162.66 247.288 1161.35 246.619 1160.16C247.093 1161.39 247.489 1162.66 247.806 1163.94L247.841 1164.01Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath class='logo-coffee' d='M472.623 590.836C426.682 610.503 374.546 632.802 306.976 632.802C278.71 632.746 250.58 628.868 223.353 621.274L270.086 1101.08C271.74 1121.13 280.876 1139.83 295.679 1153.46C310.482 1167.09 329.87 1174.65 349.992 1174.65C349.992 1174.65 416.254 1178.09 438.365 1178.09C462.161 1178.09 533.516 1174.65 533.516 1174.65C553.636 1174.65 573.019 1167.08 587.819 1153.45C602.619 1139.82 611.752 1121.13 613.406 1101.08L663.459 570.876C641.091 563.237 618.516 558.161 593.068 558.161C549.054 558.144 513.591 573.303 472.623 590.836Z' fill='%23FFDD00'%3E%3C/path%3E%3Cpath d='M78.6885 386.132L79.4799 386.872L79.9962 387.182C79.5987 386.787 79.1603 386.435 78.6885 386.132Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath class='logo-outline' d='M879.567 341.849L872.53 306.352C866.215 274.503 851.882 244.409 819.19 232.898C808.711 229.215 796.821 227.633 788.786 220.01C780.751 212.388 778.376 200.55 776.518 189.572C773.076 169.423 769.842 149.257 766.314 129.143C763.269 111.85 760.86 92.4243 752.928 76.56C742.604 55.2584 721.182 42.8009 699.88 34.559C688.965 30.4844 677.826 27.0375 666.517 24.2352C613.297 10.1947 557.342 5.03277 502.591 2.09047C436.875 -1.53577 370.983 -0.443234 305.422 5.35968C256.625 9.79894 205.229 15.1674 158.858 32.0469C141.91 38.224 124.445 45.6399 111.558 58.7341C95.7448 74.8221 90.5829 99.7026 102.128 119.765C110.336 134.012 124.239 144.078 138.985 150.737C158.192 159.317 178.251 165.846 198.829 170.215C256.126 182.879 315.471 187.851 374.007 189.968C438.887 192.586 503.87 190.464 568.44 183.618C584.408 181.863 600.347 179.758 616.257 177.304C634.995 174.43 647.022 149.928 641.499 132.859C634.891 112.453 617.134 104.538 597.055 107.618C594.095 108.082 591.153 108.512 588.193 108.942L586.06 109.252C579.257 110.113 572.455 110.915 565.653 111.661C551.601 113.175 537.515 114.414 523.394 115.378C491.768 117.58 460.057 118.595 428.363 118.647C397.219 118.647 366.058 117.769 334.983 115.722C320.805 114.793 306.661 113.611 292.552 112.177C286.134 111.506 279.733 110.801 273.333 110.009L267.241 109.235L265.917 109.046L259.602 108.134C246.697 106.189 233.792 103.953 221.025 101.251C219.737 100.965 218.584 100.249 217.758 99.2193C216.932 98.1901 216.482 96.9099 216.482 95.5903C216.482 94.2706 216.932 92.9904 217.758 91.9612C218.584 90.9319 219.737 90.2152 221.025 89.9293H221.266C232.33 87.5721 243.479 85.5589 254.663 83.8038C258.392 83.2188 262.131 82.6453 265.882 82.0832H265.985C272.988 81.6186 280.026 80.3625 286.994 79.5366C347.624 73.2301 408.614 71.0801 469.538 73.1014C499.115 73.9618 528.676 75.6996 558.116 78.6935C564.448 79.3474 570.746 80.0357 577.043 80.8099C579.452 81.1025 581.878 81.4465 584.305 81.7391L589.191 82.4445C603.438 84.5667 617.61 87.1419 631.708 90.1703C652.597 94.7128 679.422 96.1925 688.713 119.077C691.673 126.338 693.015 134.408 694.649 142.03L696.732 151.752C696.786 151.926 696.826 152.105 696.852 152.285C701.773 175.227 706.7 198.169 711.632 221.111C711.994 222.806 712.002 224.557 711.657 226.255C711.312 227.954 710.621 229.562 709.626 230.982C708.632 232.401 707.355 233.6 705.877 234.504C704.398 235.408 702.75 235.997 701.033 236.236H700.895L697.884 236.649L694.908 237.044C685.478 238.272 676.038 239.419 666.586 240.486C647.968 242.608 629.322 244.443 610.648 245.992C573.539 249.077 536.356 251.102 499.098 252.066C480.114 252.57 461.135 252.806 442.162 252.771C366.643 252.712 291.189 248.322 216.173 239.625C208.051 238.662 199.93 237.629 191.808 236.58C198.106 237.389 187.231 235.96 185.029 235.651C179.867 234.928 174.705 234.177 169.543 233.397C152.216 230.798 134.993 227.598 117.7 224.793C96.7944 221.352 76.8005 223.073 57.8906 233.397C42.3685 241.891 29.8055 254.916 21.8776 270.735C13.7217 287.597 11.2956 305.956 7.64786 324.075C4.00009 342.193 -1.67805 361.688 0.472751 380.288C5.10128 420.431 33.165 453.054 73.5313 460.35C111.506 467.232 149.687 472.807 187.971 477.556C338.361 495.975 490.294 498.178 641.155 484.129C653.44 482.982 665.708 481.732 677.959 480.378C681.786 479.958 685.658 480.398 689.292 481.668C692.926 482.938 696.23 485.005 698.962 487.717C701.694 490.429 703.784 493.718 705.08 497.342C706.377 500.967 706.846 504.836 706.453 508.665L702.633 545.797C694.936 620.828 687.239 695.854 679.542 770.874C671.513 849.657 663.431 928.434 655.298 1007.2C653.004 1029.39 650.71 1051.57 648.416 1073.74C646.213 1095.58 645.904 1118.1 641.757 1139.68C635.218 1173.61 612.248 1194.45 578.73 1202.07C548.022 1209.06 516.652 1212.73 485.161 1213.01C450.249 1213.2 415.355 1211.65 380.443 1211.84C343.173 1212.05 297.525 1208.61 268.756 1180.87C243.479 1156.51 239.986 1118.36 236.545 1085.37C231.957 1041.7 227.409 998.039 222.9 954.381L197.607 711.615L181.244 554.538C180.968 551.94 180.693 549.376 180.435 546.76C178.473 528.023 165.207 509.681 144.301 510.627C126.407 511.418 106.069 526.629 108.168 546.76L120.298 663.214L145.385 904.104C152.532 972.528 159.661 1040.96 166.773 1109.41C168.15 1122.52 169.44 1135.67 170.885 1148.78C178.749 1220.43 233.465 1259.04 301.224 1269.91C340.799 1276.28 381.337 1277.59 421.497 1278.24C472.979 1279.07 524.977 1281.05 575.615 1271.72C650.653 1257.95 706.952 1207.85 714.987 1130.13C717.282 1107.69 719.576 1085.25 721.87 1062.8C729.498 988.559 737.115 914.313 744.72 840.061L769.601 597.451L781.009 486.263C781.577 480.749 783.905 475.565 787.649 471.478C791.392 467.391 796.352 464.617 801.794 463.567C823.25 459.386 843.761 452.245 859.023 435.916C883.318 409.918 888.153 376.021 879.567 341.849ZM72.4301 365.835C72.757 365.68 72.1548 368.484 71.8967 369.792C71.8451 367.813 71.9483 366.058 72.4301 365.835ZM74.5121 381.94C74.6842 381.819 75.2003 382.508 75.7337 383.334C74.925 382.576 74.4089 382.009 74.4949 381.94H74.5121ZM76.5597 384.641C77.2996 385.897 77.6953 386.689 76.5597 384.641V384.641ZM80.672 387.979H80.7752C80.7752 388.1 80.9645 388.22 81.0333 388.341C80.9192 388.208 80.7925 388.087 80.6548 387.979H80.672ZM800.796 382.989C793.088 390.319 781.473 393.726 769.996 395.43C641.292 414.529 510.713 424.199 380.597 419.932C287.476 416.749 195.336 406.407 103.144 393.382C94.1102 392.109 84.3197 390.457 78.1082 383.798C66.4078 371.237 72.1548 345.944 75.2003 330.768C77.9878 316.865 83.3218 298.334 99.8572 296.355C125.667 293.327 155.64 304.218 181.175 308.09C211.917 312.781 242.774 316.538 273.745 319.36C405.925 331.405 540.325 329.529 671.92 311.91C695.906 308.686 719.805 304.941 743.619 300.674C764.835 296.871 788.356 289.731 801.175 311.703C809.967 326.673 811.137 346.701 809.778 363.615C809.359 370.984 806.139 377.915 800.779 382.989H800.796Z' fill='%230D0C22'%3E%3C/path%3E%3C/svg%3E"); }  
    Use an Image Block
    download the buymeacoffee creator kit which has all their button images in. It's in the same place you generate the code for buy me a coffee buttons. Get the button image. Use an image block, upload the button, add the link and off you go. Compared to the official script based one, you won't get your custom message (in my case it's tea instead of coffee!) as that is dynamic and the image is not.

     
    All viable options.
    You can even just put the link in text, e.g. My own buymeacoffee link is https://buymeacoffee.com/iamdavehart 😉🍵
     
     
     
     
  3. iamdavehart's post in Custom marquee speed was marked as the answer   
    There's no official way, but just because it seems fun and interesting (ie more interesting than what I'm supposed to be doing...) here's one code way that I guess is a little hacky.
    The way that Squarespace do this is they write the properties that you specify in the designer into JSON within a script tag that has the class "Marquee-props". When the page is loaded up one of Squarespace's javascript files kicks in and reads those properties out and then applies them to the marquee. It does the marquee animation in code - as opposed to SVG animation, or CSS animation via properties - so it's not really possible to change these values once they've started. at least not easily. However, if you can get to the values before their scripts kick in, read in the properties, change them and then write them back out then it will pick up the new values once the initialisation script finally kicks in.
    So, you can stick a code block in (pro feature obviously) somewhere after the marquee in the flow of the page and add the following code:
    <script type="text/javascript"> // this will only find the first marquee on the page // (at the point that the script is executed) const el = document.querySelector(".Marquee-props") const props = JSON.parse(el.innerText) props.animationSpeed = 5.0 // this is the speed!!! el.innerText = JSON.stringify(props); </script> now save it and load your page and watch your marquee whizz by....
    I think you could file this under "non-production, educational purposes". squarespace could change their implementation at any time, but I've tried it and it does work. 
     
  4. iamdavehart's post in How can I set up a Gallery that displays images in their original aspect ratios? was marked as the answer   
    sure, you can do that. just put your column count to one and then override pretty much everything that squarespace do to lay it out. Because you're undoing all the things they do I'd probably only do this for specific sections by prefixing the rules with the section id as i mentioned in previous posts.
    Gallery Block
    div.sqs-block-gallery { height:auto !important; } .slide a.image-slide-anchor { background:black !important; padding-bottom:unset !important; height:auto !important; margin:0 !important; padding:0 !important; } .slide img.thumb-image { inset:0 !important; width:100% !important; height:auto !important; object-fit: contain !important; display:block !important; } Gallery Section
    /* add a background colour if you want (optional) */ .gallery-grid-item-wrapper { background:black; padding-bottom:unset !important; height:auto !important; } /* change to contain (default is cover) */ .gallery-grid-item-wrapper img { position:relative !important; height:initial !important; min-height:initial !important; object-fit: contain !important; }  
  5. iamdavehart's post in How to fill one word with a flashing GIF? was marked as the answer   
    Looking at your site and the gif involved there's a couple of issues here. 
    I don't think dropbox let you link directly to files any more and use them as a proxy web server. You'd be much better off loading the image up to squarespace and then using that image as @ghostplugins says. However, I think looking at the gif you're using, this won't get you what you want anyway. I think you mean for the asterisk itself to cycle through the colours. the code that you're trying to put in will fill the background. so you'll get a square gif flashing away but no asterisk (the asterisk gets made transparent by the css you've used).  🙂
    EDIT! I didn't see the background-clip in the CSS, so if you just do what @ghostplugins said (which is my first point about dropbox not hosting files) it would work. however, the css animations below would work too because your GIF is just block colours. my bad!
    However, support for text background-clip can be a bit patchy (background-clip - CSS: Cascading Style Sheets | MDN (mozilla.org)), so leaving this here as a css animation alternative.
    🙂
    to get this effect you've got a number of options (use javascript, create a flashing asterisk gif etc), but I think the best is to use a css animation. doesn't require premium. Just replace the css you've been using with something like this
    @keyframes flashy-asterisk { 0% { color:red; } 32% { color:red; } 33% { color: blue; } 66% { color: blue; } 67% { color: green; } 100% { color: green; } } h1 strong { animation: flashy-asterisk 2s linear infinite; } the colours have been laid out like this to get it flashing like the gif, but if you removed the extra repeated stops (32% and 66%) then it would ease between the colours. the animation commands cycles between them infinitely over 2s. It starts and 0% and goes to 100% and then starts again at 0% looks like this

    Here's the css animations reference if you want to try different effects
    CSS Animations (w3schools.com)
     
  6. iamdavehart's post in Reverse the order of blog posts (Oldest at the top) was marked as the answer   
    First thing to know is that a CSS solution (or a client-side JS solution for that matter) can only affect elements that have already been loaded up. that means that you can only reverse the order of the first n posts which squarespace. (n is set in the blog page settings and can go up to a max of 20).
    if you're ok with that, then it's actually pretty easy. just make sure that the blog container you're using is set to flex and then reverse the flex direction.
    so in your case - as you're using side-by-side - just add this to your css.
    .blog-side-by-side-wrapper { display:flex; flex-direction:column-reverse; } remember though, if your page is set to show n articles and you add n+1 articles to your blog then you won't get the oldest post. you'll get the oldest post of the first n newest posts.... your pagination would also be a bit weird.
    PS. the first computer we ever had in our house was a TRS-80!
     
    ADDENDUM: Pagination on item pages
    I looked at your post and you want to swap the pagination links as well. A little trickier, as the next and previous are aligned and padded in specific ways with arrow icons. But you can do it. 
    reverse the flex direction invert the padding flip the icons 100% horizontal prefix the css rules with this particular blog collection-id as you don't want to change other pagination in the site  
    body.collection-642f14ee1e413265ff0d44f2 section#itemPagination { flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--next { margin-left: 0; margin-right: auto; flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--prev { margin-right: 0; margin-left: auto; flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--next .item-pagination-icon { padding-left: 0px; padding-right: 25px; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--prev .item-pagination-icon { padding-right: 0px; padding-left: 25px; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--prev { margin-right: 0; margin-left: auto; flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link svg { transform: scaleX(-100%); }  
  7. iamdavehart's post in Blog Summary Page Width (Side by Side Blog) was marked as the answer   
    Hi.
    probably easier if you give the site url (and if necessary a password to access it).
    I think I know what you mean though. It's quite annoying but they use a different box sizing model for the blog page (side-by-side, grid etc) than they use for most other sections. what this really means is that the padding of the section is included when setting the maximum width in the blog sections where as in most other sections it is not, meaning you get an offset.
    you could fix this by changing the box-sizing model on the collection but that will probably have some adverse effects on the images, so I think the best way to do this is to change the max-width setting on your collection to expand to take into account the padding. this in itself has a couple of gotchas in that the max-width of your site is fixed in pixels but the padding is relative to the viewport size so you need to use a css calculation for this. the problem with that is that Squarespace's Custom CSS section doesn't really like calcs (because it's a LESS compiler not 'pure' css) so you have to do something a little odd to make sure it gets it right.
    what we're looking to do here is expand the max width of the collection wrapper to add on the "gutter" (the left and right padding). these two things are exposed as css variables so you should find that adding this will do what you want. (i've defaulted these variables to 1000px and 3vw, but they won't be used if your site has different settings). this also is set only to apply to blog-side-by-side but if you removed that ".blog-side-by-side" this would also fix the grid layout, or the portfolio layout for example which has the same problem.
    .page-section .collection-content-wrapper.blog-side-by-side { max-width:calc(~"var(--sqs-site-max-width,1000px) + calc(2 * var(--sqs-site-gutter,3vw))") } if that isn't what you mean then post the url and password and show us! you could of course, just use the code above remove all the calc stuff and fix the width yourself but you might find it changes as you resize the window...
     

    see here, the green is the padding and is included in the width calc (hitting the max-size of 1000px), note how the section lines up with the paragraph's text in the section above (even though that also has some padding - but the padding on that is ignored because it has a different box-sizing model as mentioned above)
    when you apply the calc, the padding is pushed beyond the size so that the content is what maxes out at 1000px (the actual wrapper ends up wider by the variable gutter size - 1077 at this viewport width)

     
  8. iamdavehart's post in Add blank section to blog post was marked as the answer   
    You can do this in a couple of ways. in both cases I assume you only want to do this on a blog, so you could either use post blog code injection (might be premium feature, can't remember) and add a style block with the css in, or you can find the collection id of your blog using the squarespaceid finder and modify the css selector for that. I'd recommend post blog code injection (click advanced on the settings of the blog you want to do this to)
    Simple CSS: (Fixed Height)
    Adding a css block that is coloured in a certain way and is of a fixed height is pretty easy. this has a fixed height of 500px;
    main article.sections section:nth-child(1) .section-border .section-background::before { content:''; background:lightblue; position:absolute; top:0; left:0; right:0; height:500px; display:block; } Complex / Obtuse(!) CSS: (Height that flexes with the title)
    the difficult part is if you want it to grow relative to your title block. in the picture for example you've got a 2-line title. a fixed width box isn't going to line up correctly. so for that option you have to try something more difficult. Essentially you have to find the element that has the blog header and do some css trickery to play with a box shadow.
    so, if you add this you should find that you get a light blue background that flexes with the size of the title/metadata holder
    main article.sections .blog-item-top-wrapper { background-color: lightblue; box-shadow: 0 0 0 100vmax lightblue; clip-path:inset(-100vh -100vw -100px -100vw); z-index:1; } to make this work in your style, you should change the "lightblue" in both places to the colour you want, and then change the third number "-100px" to whatever you want your padding to be (the space between the bottom of the title block and where the colour finishes. note that it is a negative number.
     
     
  9. iamdavehart's post in Custom Adobe Type font Megazoid not loading on mobile was marked as the answer   
    Hi @jvanhout. 
    Your typekit link isn't being inserted to your page (I've checked the source). the rest of the code is all fine (I've tested by inserting the typekit link manually to your site). it probably works locally for you because you've got that font installed on your local machine... 
    check the code that's inserting the link tag. that should be in your header injection (Advanced > Code Injection). like I said, I tried it on your site and it worked, so you've obviously not got the link tag injection working. Code injection is premium feature so perhaps its not supported for you? if that's the case, just add a code block into your footer and put the link tag in there. 
    <link rel="stylesheet" href="https://use.typekit.net/zow1ant.css">  
  10. iamdavehart's post in Locked Background Image CSS code no longer working with Fluid Engine was marked as the answer   
    it's not to do with fluid engine. it's to do with squarespace recently putting in fancy dividers between sections. (you are using these in this site, but even if you don't use them the element structure has changed). The section-background element is now inside a section-border element rather than being a direct child of the main section element.
    the bug here is quite subtle though, normally a fixed section like this would be done relative to the viewport and therefore a new parent element shouldn't cause a problem here. However, in their implementation of the fancy borders, they use a css transformation to bring the section border to the front and these are processed at a different point by the browser. this CSS transformation on the z-axis actually negates your fixed positioning.
    the solution may not be immediately trivial, as it will depend on whether you want to keep your section borders or not. Turning them off may make a difference, moving your css rules to the border container may make a difference but you will need further rules to sort out your z-indices.
    I'd try turning off the section dividers first...
  11. iamdavehart's post in Formatting captions in gallery section was marked as the answer   
    The caption / description in a 7.1 gallery section will accept some basic HTML tags, so you can just wrap the titles in italics tags
    <i>Spring Beauty</i>, 2022, Painted Aluminium, 51x48 inches
     
     
     
     
     
     
     
     
  12. iamdavehart's post in Typography question - letter with a macron ā was marked as the answer   
    ok, I looked up the fonts in your page source and they're slightly different, so if you add this code to that page it should work
    <style> @font-face{font-family:omnes-pro; src:url(https://use.typekit.net/af/0bc945/000000000000000077359c15/30/l?subset_id=1&fvd=n4&v=3) format("woff2"), url(https://use.typekit.net/af/0bc945/000000000000000077359c15/30/d?subset_id=1&fvd=n4&v=3) format("woff"), url(https://use.typekit.net/af/0bc945/000000000000000077359c15/30/a?subset_id=1&fvd=n4&v=3) format("opentype"); font-weight:400; font-style:normal; font-stretch:normal; font-display:auto; } </style>  

  13. iamdavehart's post in Styling formblocks was marked as the answer   
    for the background you've got a couple of options. simplest is to change the accent-color property, more complex way is to set appearance to none and style the checkboxes however you want
    /* simplest version */ .sqs-block-form .field-list fieldset.checkbox input[type="checkbox"] { accent-color: purple; } /* alternative version here but commented out. don't add both of these together, try the accent one first and if you want to go further try this */ /* .sqs-block-form .field-list fieldset.checkbox input[type="checkbox"] { appearance: none; width: 16px; height: 16px; background: red !important; border-radius: 2px; border: solid 1px white; } .sqs-block-form .field-list fieldset.checkbox input[type="checkbox"]:checked { background: blue !important; } */ for styling the legend titles but only for checkboxes use the rule:
    /* this is more specific than squarespaces normal rule for colour so you don't need !important, but for font-size there is a rule that's already been marked !important so you need it then */ .sqs-block-form .field-list fieldset.checkbox legend.title { color:blue; font-size: 2rem !important; }  
  14. iamdavehart's post in Issue with shopping basket/bag icon in nav bar was marked as the answer   
    you won't find "content:f290" because that is from font-awesome (an icon font). you've inserted a custom script to add a font-awesome icon. the script looks like this, and there will be a font-awesome link/script tag as well probably
    <script> $(".Cart-inner").append("<i class='fa fa-shopping-bag' aria-hidden='true'></i>"); </script> It will probably be in your site-wide code injection. The location of the script in your sites source is consistent with where squarespace puts site-wide injected footer code.
    Go to settings > advanced > code injection
  15. iamdavehart's post in Help, footer disappeared with custom code was marked as the answer   
    no need for fancy devtools, just add "/safe" to the url in your designer and it will stop custom code running. then you'll be able to delete the script block.
    so change the url in your browser to "http://whateveryoursitenameis.squarespace.com/config/safe" and press enter.
  16. iamdavehart's post in Adding a Dark & Light Logo Version (Version 7.0) was marked as the answer   
    hi. 
    you can add this to your custom css. When the header has an image specified the theme puts a class called Header--overlay on it. So if that's not there we can darken the image so much that it becomes black instead of white.
    header.Header.Header--bottom:not(.Header--overlay) img.Header-branding-logo { filter:brightness(0%) }  
  17. iamdavehart's post in Squarespace 7.1 - Menu items get cut off when scrolling inside nav on desktop was marked as the answer   
    I think if I understand you correctly the issue here is that the menu section begins below the "x" to shut it, so what we need to do is move the padding from outer container to the inner scrollable one and you should get the result you want. add this to your custom css and you should be alright
    .header-menu.header-menu--folder-list { padding-top: 0 !important; } .header-menu-nav-folder-content { padding-top: 167px !important; }  
  18. iamdavehart's post in CSS code to force sentence case was marked as the answer   
    CSS doesn't have a native sentence case as part of its text-transform property (it only has upper, lower and capitalize), but you can use the ::first-letter pseudo-selector to help you out. This won't be "true" sentence case insofar as it won't respect multiple sentences in a single block, but should be good enough for headings.
    so, if you type all your h2 and h4 headings as lowercase then you can style them as sentence case using the code that follows (don't need the style tags if you're putting it in your custom css):
    <style> h2,h4 { text-transform: lowercase; } h2::first-letter, h4::first-letter { text-transform: uppercase } </style> examples of all text-transform options:

  19. iamdavehart's post in Add text to lock screen 7.1 was marked as the answer   
    You'd need premium to do this I think as you have to inject code into the lock screen. the standard custom css doesn't get inserted to the lock screen.
    If you've got premium, go to Settings > Advanced > Code Injection
    Then you can add something like this into the Lock Screen box (the bottom one)
    <style> .lock-screen::after { display:block; background-color:red; color:white; font-weight:bold; font-size:1rem; padding:1rem; margin:1rem; position:absolute; right:0; bottom:0; content:'Here is my red text' } </style> this will add the block you want
    EDIT: Assumed you've already tried this, but should point out that there are multiple editing and layout options for the lock screen in Design > Lock Screen and if you can use that to get your desired message across (albeit not in red and in exactly that position) you might find that easier.
  20. iamdavehart's post in JavaScript calculate age was marked as the answer   
    you're not actually passing anything to your date function. date1 and date2 are the named arguments but you need to pass the function calcdate some real things, e.g. today and past variables.
    // document.getElementById("howold").innerHTML = calcDate(date1,date2); document.getElementById("howold").innerHTML = calcDate(today,past);  
  21. iamdavehart's post in Adding custom 'web font view counter' css to Squarespace site was marked as the answer   
    You shouldn't need to add anything: they track it themselves based on numbers of requests. it will only matter if you're using a pay as you go font, but if you are using one of those then you buy a certain number of page views (which may expire after a number of years depending on the individual font licence). MyFonts track the number of requests from your site and if you exceed the number (or your paid-for views expire) then your font will stop working and you'll need to go back and buy more.
    they should notify you, but apparently you can also check it here https://www.myfonts.com/my/orders/webfontusage.html
     
  22. iamdavehart's post in Never solved completely picture orientation problem. was marked as the answer   
    squarespace have an interesting way of laying out image thumbnails. It's to do with how they make the grids layout evenly and respect focus points on the image etc. for each grid item the image gets put in a zero height container which is then padded out by percentage to make sure that the image covers it. this percentage is really the ratio of the image. so in your (landscape) case that padding will be set to 66% (2/3). What you need to do is locate the pictures that you want and change that padding to 150% (3/2). 
    How you select those is an interesting problem. It seems like you've laid them out in a particular way to try to get the vertical ones together, in which case you can use an nth-child selector to choose all the grid items after 27 (9 rows of 3 that are landscape).
    e.g. this uses the section id from your website by the way. you could just add this to your custom css to see it work straight away
    section[data-section-id="60eabd925ebba154a80c1cfe"] .list-grid .grid-item:nth-child(1n + 28) .grid-image-wrapper { padding-bottom:150%; } however, this is probably not an ideal solution as you'd need to change the rule if you ever added any portrait pictures before etc. Unfortunately squarespace put the ratio of the image on the img element and it's very hard to then change the parent based on an attribute of the child using only css. squarespace does however add classnames when you tag products so one solution might be to add a tag "portrait" to your portrait orientation products, you could then alter your rule to target those tagged portrait like this
    section[data-section-id="60eabd925ebba154a80c1cfe"] .list-grid .grid-item.tag-portrait .grid-image-wrapper { padding-bottom:150%; } you'd still have to remember to tag them as portrait though. I think this is a pretty good outcome
    If you really wanted it to "just work", then you'd have to add some javascript (premium feature) to go through the grid and workout whether they were portrait or not and apply the padding style (or a classname that referenced the padding style).
    e.g. if you were to add this to a code block on the page this would set up a class called portrait-fix that sorted out the padding, then loop through all the images and check their dimensions, applying the fix if it found a portrait one. 
    <style> .portrait-fix { padding-bottom: 150% !important; } </style> <script> Array.from(document.querySelectorAll(".grid-item img")) .forEach(i => { const d=i.getAttribute("data-image-dimensions").split("x").map(d=>parseInt(d)); if (d[0]<d[1]) { i.parentElement.classList.add("portrait-fix"); } }); </script> you'd get a slightly odd look if you had one portrait one in a row with some landscape ones, but you haven't specified what you'd want to do there, so that might require a little more thought.
     
    I think the second option, of manually tagging them with their orientation is the best route personally.
    Hope it works! Guess I should have told you to hire me rather than just writing the answer out.... 🙂 
    Your pictures are lit, mate!
     
  23. iamdavehart's post in Never solved completely picture orientation problem. was marked as the answer   
    just adding here that if you went down the tagging route, Squarespace adds the tag into the main article element on the product page, so you could add another rule that would do the fix on the main product page
    article.tag-portrait .ProductItem-gallery-slides::before { padding-bottom:150%; } so add this rule and the rule from the second option to your custom css, then all you would need to do is tag the portrait orientation ones with "portrait" and it should fix it in both places.
  24. iamdavehart's post in How to have gallery on home page as main section and also have it cover the header section? was marked as the answer   
    Not sure what your other css is doing, but I think if you just need a carousel style slide show to be top then you just alter the top padding of the first section. see this other post I answered. (am assuming you're 7.1?)
     
     
  25. iamdavehart's post in Code for mobile - reduce text size was marked as the answer   
    put your desired css inside a media query that only kicks in up to 768px (iPad width - this is the size squarespace kick their mobile styles in).
    e.g. something like this. 
    @media screen and (max-width: 768px) { #introduction {.image-title p { font-size: 25px !important;} } } add this in addition to your existing rules of course.
     
×
×
  • 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.