Jump to content

JayVanDyke

Circle Member
  • Posts

    418
  • Joined

  • Last visited

Community Answers

  1. JayVanDyke's post in Sidebar navigation shows up right in stead of left. was marked as the answer   
    change this 
    .header--menu-open .header-menu { opacity: 1; visibility: visible; width: 50%; margin-left: 50%; box-shadow: 5px 5px 15px #000; } to this 
    .header--menu-open .header-menu { opacity: 1; visibility: visible; width: 50%; margin-right: 50%; //this needs to be right for it to sit on the right side. box-shadow: 5px 5px 15px #000; }  

  2. JayVanDyke's post in Can't apply CSS for Drop Shadows to a single page, it's only showing up if added to the full website CSS edits, how do I get it to work on the single page? was marked as the answer   
    You can add it to the page header code injection just for that page but it needs html tags like this
    <style> .image-block {filter: drop-shadow(5px 5px 8px #d3d3d3);} </style> Also you could use the Squarespace ID finder chrome extension and find out the page collection id, usually starts with a "#collection" and add that before your .image-block part in your regular css panel.
    https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
  3. JayVanDyke's post in Hoover effect on sponsor logos was marked as the answer   
    If you want it for all the images in that section you could do it like this. This way you don't target individual images.
     
    section[data-section-id="652cdfe47161a10cf9d95eb2"] .sqs-block-image { img { filter: grayscale(100%); transition: all .3s; } &:hover { img { opacity: .75 !important; } } }  
  4. JayVanDyke's post in SVG for background image using CSS was marked as the answer   
    I think it's how you have it encoded. You have things like < and > and the example in that other post uses %3C and %3E. 
    Someone left a link in that post about proper encoding. You might save it as an svg file and upload it here. https://base64.guru/converter/encode/image/svg
  5. JayVanDyke's post in Banner Slideshow - Can I make the CARD color transparent? was marked as the answer   
    @X5pilot You can adjust the colors for all these things in your site styles under the color palette. Figure out which color scheme you're using for this section, looks like maybe "lightest 1". Then find the List Section: Banner Slideshow. Under "Card" you can change the opacity to 0 with that slider on the bottom.


  6. JayVanDyke's post in Colorizing Code Snippets with Prism was marked as the answer   
    I think I see it! It may be blocked by being http and not https. Try changing it to that?


  7. JayVanDyke's post in Can I change the link associated with my header button in my navigation just on a certain page? was marked as the answer   
    @AlyssaIvonne this should get you started

     
     
  8. JayVanDyke's post in Embed block font color with CSS was marked as the answer   
    you can try this
    #kajabi-form { .kajabi-form__title { color: #5d5d5d !important; //change me if you need } .kajabi-form__subtitle p { color: #5d5d5d !important; //change me if you need } }  
  9. JayVanDyke's post in Collection ID's & Custom CSS When Transferring a Template was marked as the answer   
    @CharlotteWilderness you probably need to make your CSS more generic if its at all possible. For things like this I usually use classes from the color schemes, sometimes attribute selectors looking for specific section heights or widths or even nth-child type selectors. It might be worth purchasing someone else's template just to see how that all works!
  10. JayVanDyke's post in Removing underline from menu (hover and active) was marked as the answer   
    That hover animation comes from the Site Styles > Animations > Flex. I honestly had no idea that animation added an underline to the nav links. You can also just change your site animation to something else and it will go away. If you set it to "none" or "fade" or something then your original code might work.
     
    This gets rid of the hover if you keep your current settings.
    .tweak-global-animations-animation-type-flex .header-nav-item:not(.header-nav-item--folder) a::after, .tweak-global-animations-animation-type-flex .header-nav-folder-item a::after { display: none !important; } Can you add your code back to the site? It doesn't look like it's there anymore.
  11. JayVanDyke's post in Change Top Margin of Shopping Cart & 404 page - 7.0 was marked as the answer   
    See if this works
    #not-found .pageWrapper { padding-top: 100px !important; //adjust as needed } #cart .pageWrapper { padding-top: 100px !important; //adjust as needed }  
  12. JayVanDyke's post in Custom font on Summary Block not showing on Mobile View was marked as the answer   
    @abigailallen I think I'm looking at the same spot on your site. You might need to get a more specific selector.
    Try this
    .sqs-block-summary-v2 { .summary-title .summary-title-link, .summary-heading .summary-collection-title { font-family: 'proxima-sera' !important; font-weight: 300 !important; font-size: 18px !important; color: #ccccc !important; text-transform: none !important; font-style: none !important; } } @media only screen and (max-width: 640px) { .user-items-list-simple { //change these for side padding on mobile padding-left: 4vw !important; padding-right: 4vw !important; } }
  13. JayVanDyke's post in Change Navigation Font - Code was marked as the answer   
    you probably have to target the navigation links specifically. 
     
    Try this
    h1, h2, h3, .header-nav-item a { font-family: 'pixChicago' !important; }  
  14. JayVanDyke's post in Overriding shop item image crop was marked as the answer   
    @DesignPearl try this in your custom CSS
    .ProductItem-gallery-slides-item img { object-fit: contain !important; }  
  15. JayVanDyke's post in background color for drop down folder was marked as the answer   
    It looks like you have some custom css in there affecting the color. See if you can find it from screenshot below. if not you can try adding this to the end of your css file
    .header-nav .header-nav-item--folder .header-nav-folder-content a:hover { color: white !important; //change me for the color }
  16. JayVanDyke's post in How might I remove the # of lessons on the Course Overview page? was marked as the answer   
    maybe this would do it?
    .course-list__list-chapter-item-chapter-meta span:first-child { display: none !important; }
  17. JayVanDyke's post in Play gallery block on hover/mouse rollover 7.1 was marked as the answer   
    You might need to rethink your design but this plugin could work. Uses a list section and then autoplays videos hosted on Vimeo or YouTube I believe. https://squarerefresh.com/plugins/autoplay-video-hover. Aside from that maybe your rollover image could be a gif?
  18. JayVanDyke's post in Disable Mix Blend Mode when Hamburger Menu opens in Header was marked as the answer   
    @KevinWalton so you shouldnt need the javascript to do anything here.
    This css should work. You already have this
    header { mix-blend-mode: difference; } but change it to what @tuanphanwas saying above.
    body:not(.header--menu-open) header { mix-blend-mode: difference; }  
  19. JayVanDyke's post in Need Help with Pagination Title was marked as the answer   
    @mindofalexander 
     
    Your pagination title question
    1. add a code block anywhere on the portfolio item page
    2. copy one of these snippets into it and adjust the title as needed. If both links on that page need to be changed then you'll need both of these code snippets below.
    <style> /*for right side pagination link*/ .item-pagination-link--next .item-pagination-title { font-size: 0 !important; &:after { content: 'new title name here'; font-size: 20px; /*from your code*/ font-family: var(--portfolio-item-pagination-font-font-family); font-style: var(--portfolio-item-pagination-font-font-style); font-weight: var(--portfolio-item-pagination-font-font-weight); letter-spacing: var(--portfolio-item-pagination-font-letter-spacing); text-transform: var(--portfolio-item-pagination-font-text-transform); } } </style>  
    <style> /*for left side pagination link*/ .item-pagination-link--prev .item-pagination-title { font-size: 0 !important; &:after { content: 'new title name here'; font-size: 20px; /*from your code*/ font-family: var(--portfolio-item-pagination-font-font-family); font-style: var(--portfolio-item-pagination-font-font-style); font-weight: var(--portfolio-item-pagination-font-font-weight); letter-spacing: var(--portfolio-item-pagination-font-letter-spacing); text-transform: var(--portfolio-item-pagination-font-text-transform); } } </style>  
     
    Your alignment question:
    You have custom CSS added to your page that is this..
    If you want the links to not push over to the right or left you will need to remove this. The reason those links are pushing over to the side is because your code doesn't allow the words to wrap so instead they keep stretching to the side past where your page content ends. You can play with font sizes to achieve the same goal but that might be kind of a pain.
     
    Adding links in places they don't exist question:
     
    The short answer is this isn't something that is super simple to do and I don't know of an existing plugin that will achieve this. You will need to either learn to write or hire someone who can write you a script to add this to the pages that need it.
     
  20. JayVanDyke's post in how to remove padding of video box when resizing browser was marked as the answer   
    Ahh yea....sorry it was trying to load your editor instead of the page. I should have realized but not enough coffee today maybe 🙃
    Try this
    section[data-section-id="651597d004d0441072b29cc5"] .sqs-block-video { .sqs-block-content, .intrinsic, .embed-block-wrapper, .sqs-native-video { position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important; padding: 0 !important; } .video-player { padding: 0 !important; video { object-fit: cover !important; } } }  
  21. JayVanDyke's post in Change nav text color in Dynamic Theme was marked as the answer   
    either remove !important from the second rule or add it to the first one. The important is overriding your hover state.
  22. JayVanDyke's post in Custom Divider Under Header was marked as the answer   
    It looks like you have 2 things happening. There's an error in your split header code you may want to reach out to them about. Also it's saying that the rope graphic is not found. you may want to reupload it and get a fresh link.



  23. JayVanDyke's post in Moving 'additional info' blocks between item description and option on product page was marked as the answer   
    Try this and see if it works. If it doesn't leave it in place and let me know. It doesn't look like you have jquery installed so this adds that as well. If you do then you can ignore the first line. Add this to your code injection footer area.
    edit: SS doesn't offer this particular thing so you need to make it in the additional info area like you did and then move it with some code
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script> <script> $(document).ready(function() { var accordion = $(".ProductItem-additional .sqs-block-accordion"); var excerpt = $(".ProductItem-details-excerpt"); excerpt.append(accordion); }); </script>  
  24. JayVanDyke's post in Centre gallery reel vertical on mobile was marked as the answer   
    This might do it for you. The tricky part here will be making sure to add in the non gallery pages if you add anymore. I'm fairly certain I targeted the correct ones but if it doesn't work let me know and leave the code in place.

     
    @media only screen and (max-width:640px){ body:not(#collection-5ec1771c5bddb16cf6d2328c):not(#collection-5ec176a35ff2e369e5d3be95) { #sections .page-section:first-child { padding-top: 0px !important; box-sizing: border-box; min-height: 100vh; } } }  
×
×
  • 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.