Jump to content

CraigN

Circle Member
  • Posts

    39
  • Joined

  • Last visited

Reputation Activity

  1. Like
    CraigN reacted to tuanphan in Dynamic Logo (Light/Dark)   
    You can use this code to Design > Custom CSS (or Website > Website Tools > Custom CSS)
    /* Blog new logo */ body[class*="type-blog"] header#header img { content: url(https://cdn.pixabay.com/photo/2023/05/13/14/35/white-flower-7990645_1280.jpg); }  
  2. Like
    CraigN got a reaction from TLCDesigns in Lock Screen Styles   
    Still this problem exists. I'm trying to style my lock screen before I take down my site to make some changes.
    This is really poor from Squarespace. No ability to change any styles apart from the password input. 
    I'm also not able to use the code injection workaround as I'm not on a premium plan. 
    Any timeframe from when we can expect a fix?
  3. Like
    CraigN reacted to tuanphan in Customizing button in header nav   
    Add to Home > design > Custom CSS
    .header-actions-action .btn { padding: 20px 30px; font-size: 15px; color: red !important; background: green !important; border-color: violet !important; }  
  4. Like
    CraigN reacted to tuanphan in Customizing button in header nav   
    Use this CSS to customize mobile button
    .header-menu-cta a { background-color: green !important; font-family: monospace !important; }  
  5. Like
    CraigN reacted to IXStudio in Changing header height   
    Hi
    Use this code in Design -> Custom CSS
    .tweak-fixed-header .header .header-announcement-bar-wrapper { padding-top: 0vw !important; padding-bottom: 0vw !important; } Please use the like button if it helps you!
    Best,
    Leopold
  6. Like
    CraigN got a reaction from Sarg in Lock Screen Styles   
    Still this problem exists. I'm trying to style my lock screen before I take down my site to make some changes.
    This is really poor from Squarespace. No ability to change any styles apart from the password input. 
    I'm also not able to use the code injection workaround as I'm not on a premium plan. 
    Any timeframe from when we can expect a fix?
  7. Like
    CraigN got a reaction from MarcWatson in How to smoothly animate page load transitions?   
    +1, I've noticed this myself. Especially when any custom code has been added to arrange things, there's a noticeable jump as everything loads into place.
    Would be great to make these page transitions smoother, even if it meant adding, 0.2/0.5s delay.
  8. Like
    CraigN reacted to tuanphan in Make button (read bio) in people / list section link to either a lightbox text or a dropdown text   
    Like this?

    Add a List Section > Paste this code into Page Header
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('li.list-item').each(function(i, e) { $(this).click(function() { $(this).toggleClass('tp-list-des-open'); }); }) }); </script> <style> .list-item-media:hover, h2.list-item-content__title:hover { cursor: pointer; } .list-item-content__description { height: 0; overflow: hidden; transition: all 0.1s ease; } .tp-list-des-open .list-item-content__description { height: 100%; transition: all 0.1s ease; } h2.list-item-content__title:after { content: "Read Bio"; display: block; font-size: 14px; font-style: italic; margin-top: 20px; } .tp-list-des-open h2.list-item-content__title:after {opacity:0;} </style>
  9. Like
    CraigN reacted to tuanphan in Dynamic Logo (Light/Dark)   
    Try adding to Design > Custom CSS
    body[class*="type-blog"], [class*="type-events"], [class*="type-products"] { header#header img { filter: invert(1); -webkit-filter: invert(1); } }  
  10. Like
    CraigN reacted to ryanscv in Dynamic Logo (Light/Dark)   
    Hello! Is there a way to have the heading logo change based on the dynamic background for the page? It seems silly that there is a dynamic header design option without the ability to implement at least a light and dark logo version.
    Thanks for the help!
  11. Like
    CraigN reacted to Beyondspace in Squarespace 7.1 - Is it possible to make mobile navigation overlay slide up and down instead of fade in and out?   
    Try
    [data-section-id="overlay-nav"] { height: 0px; visibility: unset; -webkit-transition: background .36s cubic-bezier(0.32, 0.08, 0.24, 1), height .56s cubic-bezier(0.52, 0.16, 0.24, 1), opacity .36s cubic-bezier(0.32, 0.08, 0.24, 1); transition: background .36s cubic-bezier(0.32, 0.08, 0.24, 1),height .56s cubic-bezier(0.52, 0.16, 0.24, 1), opacity .36s cubic-bezier(0.32, 0.08, 0.24, 1); } .header--menu-open [data-section-id="overlay-nav"] { height: 100%; } Let me know how it works on your site
    Support me by pressing 👍 if this useful for you
  12. Like
    CraigN got a reaction from djshiflet in How to smoothly animate page load transitions?   
    +1, I've noticed this myself. Especially when any custom code has been added to arrange things, there's a noticeable jump as everything loads into place.
    Would be great to make these page transitions smoother, even if it meant adding, 0.2/0.5s delay.
  13. Like
    CraigN reacted to jffryarlyn in Lock Screen Styles   
    I'm still running into the same issue!  Commenting to get more attention on this.
  14. Like
    CraigN reacted to KristineNeilStudio in Lock Screen Styles   
    Chiming in here to hopefully help this topic get some more traction. Being able to style the lock screen as a "coming soon" page in 7.1 is absolutely necessary and the fact that style options for things like font, photo overlay, etc. are missing from 7.1 on this has to be an oversight. Just make this work like it did in 7.0! Not sure why this wouldn't be possible?! It's imperative to be able to have a branded coming soon page!
  15. Like
    CraigN got a reaction from KristineNeilStudio in Lock Screen Styles   
    Still this problem exists. I'm trying to style my lock screen before I take down my site to make some changes.
    This is really poor from Squarespace. No ability to change any styles apart from the password input. 
    I'm also not able to use the code injection workaround as I'm not on a premium plan. 
    Any timeframe from when we can expect a fix?
  16. Thanks
    CraigN reacted to tuanphan in Infamous problem with aspect ratio of product page images in MOBILE   
    Add to Design > Custom CSS
    @media screen and (max-width:767px) { div#block-2518090d1655ad77c24f .image-inset { padding-bottom: 100% !important; } }  
  17. Like
    CraigN got a reaction from Candelaria in Infamous problem with aspect ratio of product page images in MOBILE   
    Hi @tuanphan, is there a version of this which will work with just an image block?

    I'm trying to change the aspect ratio of the top image on the mobile homepage of suzannehamiltonpodiatry.com.
    Desktop works as intended, but on mobile it scales down as landscape, I'd like to make this a portrait format to fill the mobile screen more.

    Thanks!
  18. Like
    CraigN reacted to rwp in How to slow down the fade transition in a 7.1 Gallery Slideshow   
    .gallery-fullscreen-slideshow-item-img{ transition: opacity 1600ms ease-in-out !important; -webkit-transition: opacity 1600ms ease-in-out !important; -ms-transition: opacity 1600ms ease-in-out !important; -moz-transition: opacity 1600ms ease-in-out !important; -o-transition: opacity 1600ms ease-in-out !important; } .gallery-fullscreen-slideshow[data-transition="fade"] .gallery-fullscreen-slideshow-item[data-active="true"] .gallery-fullscreen-slideshow-item-src{ transition: opacity 1400ms ease-in-out !important; -webkit-transition: opacity 1400ms ease-in-out !important; -ms-transition: opacity 1400ms ease-in-out !important; -moz-transition: opacity 1400ms ease-in-out !important; -o-transition: opacity 1400ms ease-in-out !important; } Currently getting some hiccups with Firefox.  This is on SquareSpaces side of things.  I already spent about 3 hours trying to get this to work, and I don't feel like digging though a million lines of code again.  (The standard transition doesn't work right in Firefox either, its just too fast to notice).
    Anyway, this works with every other browser that I tested. I added 1000ms to the default values, I am not sure if the 200ms differences matter much, but I left them. You can probably leave out the importants, and honestly, you don't need the webkits, but I guess if someone is on a very old browser its good to toss them in there.
    I will attempt to get this over to SS to see if they can fix the Firefox issue.  It fades sometimes, snaps the next, not sure whats up.
  19. Like
    CraigN reacted to tuanphan in How to force mobile menu to remain on desktop site - v. 7.1   
    Thank you. I just tweaked your code to work on my site, 7.1
    Here is code
    /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* Hide header button */ .header-actions { display: none; } /* show burger */ .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } }  
  20. Like
    CraigN reacted to Tiny_Coast in What are your favorite SEO copywriting tips?   
    1) Use headings to help google understand and prioritize your content and to help improve usability for website visitors. 

    2) Don't create spammy copy for the sake of SEO. Also, don't get so caught up in clever copy that you miss out on SEO. Strive to create content that considers SEO and brand voice. 

    3) Write as you naturally would. Yes, add headings and keywords, but do so in a way that it would happen organically. 
  21. Like
    CraigN reacted to tuanphan in Bio page using summary block - 7.0   
    Add to Last line in Code Injection Footer
    <script> var _0x2a7e=['append','ready','1RJrltI','3319ovhlOz','1KneMVr','854613oQgxUQ','1006471LEvZsj','4127469CFajRU','each','1068209VWSbJg','1oyihNW','<div\x20class=\x22lightbox-caption\x22>','.gallery-lightbox-list\x20.gallery-lightbox-item','img','find','207671zQUYko','995077PvzlQc','alt','</div>','287GdCQAi'];function _0x2dfe(_0x55be93,_0x3377c6){_0x55be93=_0x55be93-0x1eb;var _0x2a7eec=_0x2a7e[_0x55be93];return _0x2a7eec;}var _0x18b263=_0x2dfe;(function(_0x47cc5d,_0x525c24){var _0x2c6413=_0x2dfe;while(!![]){try{var _0x580ae7=parseInt(_0x2c6413(0x1f7))*parseInt(_0x2c6413(0x1fa))+-parseInt(_0x2c6413(0x1fb))*-parseInt(_0x2c6413(0x1eb))+-parseInt(_0x2c6413(0x1f0))+parseInt(_0x2c6413(0x1f1))+parseInt(_0x2c6413(0x1f9))*parseInt(_0x2c6413(0x1fe))+parseInt(_0x2c6413(0x1f4))*parseInt(_0x2c6413(0x1f8))+-parseInt(_0x2c6413(0x1fc));if(_0x580ae7===_0x525c24)break;else _0x47cc5d['push'](_0x47cc5d['shift']());}catch(_0x363f60){_0x47cc5d['push'](_0x47cc5d['shift']());}}}(_0x2a7e,0x84457),jQuery(document)[_0x18b263(0x1f6)](function(_0x491546){var _0xdc40ac=_0x18b263;_0x491546(_0xdc40ac(0x1ed))[_0xdc40ac(0x1fd)](function(){var _0x29e934=_0xdc40ac,_0x3770c7=_0x491546(this)[_0x29e934(0x1ef)](_0x29e934(0x1ee))['attr'](_0x29e934(0x1f2));console['log'](_0x3770c7),_0x491546(this)[_0x29e934(0x1f5)](_0x29e934(0x1ec)+_0x3770c7+_0x29e934(0x1f3));});})); </script>  
  22. Like
    CraigN reacted to Beyondspace in Bio page using summary block - 7.0   
    Here a working snippet with css and js 
    <style> .gallery-lightbox-item-src { overflow: visible; } .gallery-lightbox-item-src .lightbox-caption { bottom: 0; } .lightbox-caption { display: block; z-index: 9999; position: absolute; bottom: 0; width: 100%; text-align: center; background: #fffafa; padding: 10px; } <style> <script> $(document).ready(function(){ $('.gallery-lightbox-item-img').each(function(){ var alt = $(this).find('img').attr('alt'); $(this).append('<div class="lightbox-caption">' + alt + '</div>'); }); }); </script>
  23. Like
    CraigN got a reaction from Beyondspace in Bio page using summary block - 7.0   
    Yeah no problem @tuanphan,
    https://sphere-saxophone-dbsb.squarespace.com/world-development-people-not-projects
    Pass: mci21hs
    It'll be on a commerce plan most likely. We've already been using some custom plugins etc.
    Thanks!
  24. Like
    CraigN reacted to yo-mate-yo in Bio page using summary block - 7.0   
    Site URL: https://www.nativeland.org/circle-of-kin
    I am trying to create a mobile-friendly team bio page in which all photos are displayed in a grid without titles but not detailed bio text, and where users can select bio images to view all the individual bio text.
    Here's the page: https://www.nativeland.org/circle-of-kin
    I'm using Bryant and 7.0, with a Gallery Page that has been inserted on this page using a Summary Block.
    Currently, on a desktop browser you can click on the photo and on hover get the text overlaid on the photos. That's fine, though I'd prefer the text not be overlaid over the photo. On tablet or mobile, however, there is only a tiny dot in the bottom right corner you can select to reveal the hover text, and it's so small most users won't ever find it and rather see a huge photo gallery.
    Also, when you are on the bio page if you select the title you go into the gallery page, which I don't want.
    Ideally, selecting the image and the title would go to the same place: a lightbox-type environment in which the photo appears larger and centered but not full-screen (as is currently the case), and where the text automatically appears below no matter what, with or without hover.
    Any suggestions would be much appreciated. Thanks!
  25. Like
    CraigN reacted to Billy1996 in Error with code slowing slideshow transition speed   
    Site URL: https://giraffe-fife-xnsh.squarespace.com/
    Hi there,
    I had initially applied this code to slow the slideshow transition speed. It was working fine but recently no longer works:
    .gallery-fullscreen-slideshow-item-img{
        transition: opacity 1600ms ease-in-out !important;
        -webkit-transition: opacity 1600ms ease-in-out !important;
        -ms-transition: opacity 1600ms ease-in-out !important;
        -moz-transition: opacity 1600ms ease-in-out !important;
        -o-transition: opacity 1600ms ease-in-out !important;
    }
    //.gallery-fullscreen-slideshow[data-transition="fade"] 
    .gallery-fullscreen-slideshow-item[data-active="true"] .gallery-fullscreen-slideshow-item-src{
        transition: opacity 1400ms ease-in-out !important;
        -webkit-transition: opacity 1400ms ease-in-out !important;
        -ms-transition: opacity 1400ms ease-in-out !important;
        -moz-transition: opacity 1400ms ease-in-out !important;
        -o-transition: opacity 1400ms ease-in-out !important;

    Could anyone please advise on what the error might be?
    Thanks
×
×
  • 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.