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

creedon

Circle Member
  • Posts

    3,623
  • Joined

  • Last visited

  • Days Won

    38

Community Answers

  1. creedon's post in Continue Shopping Button was marked as the answer   
    @Kblessdbutters contacted me via messages and I think we've solved the problem.
  2. creedon's post in Custom font for product price was marked as the answer   
    Add the following to Design > Custom CSS.
    .ProductList .product-price, .ProductItem-details .product-price   {      font-family: MODERATBOLD;      } Let us know how it goes.
  3. creedon's post in Add a separator line in drop down menu was marked as the answer   
    Second shot!
    /* desktop */ .header-nav-folder-item:nth-of-type(12) { border-bottom: 1px solid; padding-bottom: 1em; } .header-nav-folder-item:nth-of-type(13) { padding-top: 1em; } /* mobile */ .header-menu-nav-item:nth-of-type(13) a { display: inline-block; border-bottom: 1px solid; padding-bottom: 1em; } .header-menu-nav-item:nth-of-type(14) a { padding-top: 1em; } This CSS is very specific to your current menu layout. If you change the order of the menu items then you need to update the CSS. If you add another Folder Page and it has as many or more items then it too would pick up this CSS. In that case another way to target the menu you want to style would be needed. Something like .header-nav-item header-nav-item--folder:nth-of-type(n);
    Let us know how it goes.
  4. creedon's post in Squarespace 7.1 Parallax - omit specific section was marked as the answer   
    Give this a go and let us know.
    <script>   $( '.has-background:not( [ data-section-id="5f971514248b194b3492db26" ] )' ).attr ( 'data-scrollax-parent', 'true' );      $( '.has-background:not( [ data-section-id="5f971514248b194b3492db26" ] ) .section-background' ).attr ( 'data-scrollax', 'properties: { translateY: "30%" }' );      $.Scrollax ( );      </script>  
  5. creedon's post in Change image block card in mobile view was marked as the answer   
    Remove or comment out the following CSS at the top of your Custom CSS.
    @media only screen and (max-width: 640px) {     .sqs-block-image {         width:20%;         margin: 0 auto     } } Let us know how it goes.
  6. creedon's post in Aligning the nav folder title with the top option in the drop-down was marked as the answer   
    Replace (save a copy somewhere) or comment out your previous CSS and add the following.
    .header-nav .header-nav-item--folder .header-nav-folder-content {   padding-top: 0;   top: 0;      } .header-nav .header-nav-item--folder:hover .header-nav-folder-title {   visibility: hidden;      } .header-nav .header-nav-item--folder:hover .header-nav-folder-item a:first-child {   padding-top: 0.05em;      } I don't think you'll need to use !important.
    Let us know how it goes.
  7. creedon's post in Hover Animation Help was marked as the answer   
    Remove or comment out your previous CSS and add the following.
    .no-touch .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item .portfolio-text { -webkit-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; } .portfolio-grid-overlay .grid-item .portfolio-title { -webkit-transform: translateY( 30px ); -ms-transform: translateY( 30px ); transform: translateY( 30px ); -webkit-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; } .portfolio-grid-overlay .grid-item:hover .portfolio-title { -webkit-transform: translateY( 0 ); -ms-transform: translateY( 0 ); transform: translateY( 0 ); } Let us know how it goes.
  8. creedon's post in How to get links to open a new tab ONLY on one page was marked as the answer   
    Add the following to Settings > Advanced > Code Injection > HEADER.
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Page Settings > Advanced > PAGE HEADER CODE INJECTION for the page.
    <script>   $( ( ) => {    $( '.blog-more-link' ).attr ( 'target', '_blank' );     } );      </script> Let us know how it goes.
  9. creedon's post in Removing the like and share links on blog post in Squarespace Bedford template 7.0 was marked as the answer   
    Add a code block to each blog post where you want to hide the links.
    Add the following.
    <style>   .entry-actions {        display: none;          }      </style> Let us know how it goes.
  10. creedon's post in Zoom in hover effect was marked as the answer   
    Add the following to Design > Custom CSS.
    .page-section[data-section-id="5f29d4f9942d474f5e29a1d1"] .blog-image-wrapper .image { -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } .page-section[data-section-id="5f29d4f9942d474f5e29a1d1"] .blog-image-wrapper .image:hover { -webkit-transform: scale( 1.2 ); -ms-transform: scale( 1.2 ); transform: scale( 1.2 ); } The above is for a v7.1 site and the data-section-id is specific to this site.
    You can change the transition duration scale value to suit.
    Let us know how it goes.
  11. creedon's post in Custom Font was marked as the answer   
    Sorry I missed that one first time around.
    Pease see my previous post. I've updated the CSS.
    Replace the CSS I gave you before with the new version.
  12. creedon's post in Custom Font was marked as the answer   
    Add the following to your Custom CSS.
    .nav-mobile-site-title-link, .site-title, #block-947ead312c75cb1485b1 h1, /* hello there i'm shana */ #block-yui_3_17_2_1_1560781086822_6605 .image-title-wrapper .image-title.sqs-dynamic-text p /* color shapes you */ { font-family: COLOMBIA; } Let us know how it goes.
  13. creedon's post in Changing image width for image block: card on one page was marked as the answer   
    Add the following to Design > Custom CSS.
    #collection-5f11cfd34cf3723b9f368981 .sqs-block-image .design-layout-card:not(.sqs-narrow-width) { -ms-justify-content: unset; justify-content: unset; } #collection-5f11cfd34cf3723b9f368981 .sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child { min-width: 150px; width: 20%; } #collection-5f11cfd34cf3723b9f368981 .sqs-block-image .design-layout-card:not(.sqs-narrow-width).image-position-left .image-card-wrapper { margin-left: 5%; } Let us know how it goes.
  14. creedon's post in Need CSS Code for Standarized Button Size was marked as the answer   
    Add the following to Design > Custom CSS.
    #page-section-5f5c5409d7536c1e1ef49034 .sqs-block-button-element { display: block; } Let us know how it goes.
  15. creedon's post in Change font size in Text Box was marked as the answer   
    I suggest using a regular text block as you've done in other places on the page.
    Then discover what the id for that particular text block is and hang your CSS on that.
    An example follows.
    The above id will not work on anyones site but mine, the one I used to test this on.
    The upside is that you get all the regular styling of the other text blocks of your site/page.
    If you need help discovering the id of the text block let us know. Please do set up the text block exactly as you want it to appear without the border before asking. We will need a detailed description of where the text block is on the page. Then once we get the id we can give you specific CSS.
  16. creedon's post in Add CSS animated background from codepen to squarespace site was marked as the answer   
    I'll do the critical steps in case anyone else is following along. You may have already done some of these steps.
    Put the following in a code block at the top of the page. You can put it anywhere within the page but I like to put things like this at the top.
    <!-- Inspired by: https://codepen.io/natewiley/pen/Ciwyn --> <div id="particle-container"> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> </div> Add the following in Page Settings > Advanced > Page Header Code Injection.
    <style> .particle { border-radius: 50%; left: 0; position: fixed; /* relative to browser window */ top: 0; }      /* The following was compiled from dynamic SCSS. This means it is now static in that the page loads, the animation starts, goes for a bit, and then repeats. It is always the same each time the page loads. */      @keyframes particle-animation-1 {     100% {       transform: translate3d(73vw, 90vh, 72px);     }   }   .particle:nth-child(1) {     animation: particle-animation-1 60s infinite;     opacity: 0.72;     height: 6px;     width: 6px;     animation-delay: -0.2s;     transform: translate3d(64vw, 77vh, 93px);     background: #6826d9;   }   @keyframes particle-animation-2 {     100% {       transform: translate3d(15vw, 67vh, 8px);     }   }   .particle:nth-child(2) {     animation: particle-animation-2 60s infinite;     opacity: 0.03;     height: 8px;     width: 8px;     animation-delay: -0.4s;     transform: translate3d(32vw, 14vh, 71px);     background: #80d926;   }   @keyframes particle-animation-3 {     100% {       transform: translate3d(26vw, 74vh, 71px);     }   }   .particle:nth-child(3) {     animation: particle-animation-3 60s infinite;     opacity: 0.65;     height: 6px;     width: 6px;     animation-delay: -0.6s;     transform: translate3d(3vw, 40vh, 1px);     background: #c726d9;   }   @keyframes particle-animation-4 {     100% {       transform: translate3d(65vw, 15vh, 22px);     }   }   .particle:nth-child(4) {     animation: particle-animation-4 60s infinite;     opacity: 0.75;     height: 10px;     width: 10px;     animation-delay: -0.8s;     transform: translate3d(47vw, 67vh, 3px);     background: #d9265c;   }   @keyframes particle-animation-5 {     100% {       transform: translate3d(11vw, 54vh, 35px);     }   }   .particle:nth-child(5) {     animation: particle-animation-5 60s infinite;     opacity: 0.13;     height: 9px;     width: 9px;     animation-delay: -1s;     transform: translate3d(25vw, 2vh, 96px);     background: #d9a026;   }   @keyframes particle-animation-6 {     100% {       transform: translate3d(65vw, 18vh, 51px);     }   }   .particle:nth-child(6) {     animation: particle-animation-6 60s infinite;     opacity: 0.91;     height: 8px;     width: 8px;     animation-delay: -1.2s;     transform: translate3d(72vw, 88vh, 44px);     background: #d92688;   }   @keyframes particle-animation-7 {     100% {       transform: translate3d(86vw, 50vh, 98px);     }   }   .particle:nth-child(7) {     animation: particle-animation-7 60s infinite;     opacity: 0.08;     height: 8px;     width: 8px;     animation-delay: -1.4s;     transform: translate3d(13vw, 39vh, 84px);     background: #2680d9;   }   @keyframes particle-animation-8 {     100% {       transform: translate3d(75vw, 67vh, 5px);     }   }   .particle:nth-child(8) {     animation: particle-animation-8 60s infinite;     opacity: 0.28;     height: 8px;     width: 8px;     animation-delay: -1.6s;     transform: translate3d(70vw, 46vh, 16px);     background: #d926ca;   }   @keyframes particle-animation-9 {     100% {       transform: translate3d(81vw, 18vh, 36px);     }   }   .particle:nth-child(9) {     animation: particle-animation-9 60s infinite;     opacity: 0.58;     height: 8px;     width: 8px;     animation-delay: -1.8s;     transform: translate3d(82vw, 33vh, 24px);     background: #d92688;   }   @keyframes particle-animation-10 {     100% {       transform: translate3d(87vw, 61vh, 91px);     }   }   .particle:nth-child(10) {     animation: particle-animation-10 60s infinite;     opacity: 0.85;     height: 9px;     width: 9px;     animation-delay: -2s;     transform: translate3d(42vw, 61vh, 1px);     background: #d9a926;   }   @keyframes particle-animation-11 {     100% {       transform: translate3d(17vw, 73vh, 66px);     }   }   .particle:nth-child(11) {     animation: particle-animation-11 60s infinite;     opacity: 0.31;     height: 8px;     width: 8px;     animation-delay: -2.2s;     transform: translate3d(48vw, 66vh, 8px);     background: #8ed926;   }   @keyframes particle-animation-12 {     100% {       transform: translate3d(75vw, 74vh, 94px);     }   }   .particle:nth-child(12) {     animation: particle-animation-12 60s infinite;     opacity: 0.42;     height: 7px;     width: 7px;     animation-delay: -2.4s;     transform: translate3d(5vw, 24vh, 15px);     background: #d92662;   }   @keyframes particle-animation-13 {     100% {       transform: translate3d(58vw, 10vh, 90px);     }   }   .particle:nth-child(13) {     animation: particle-animation-13 60s infinite;     opacity: 0.7;     height: 7px;     width: 7px;     animation-delay: -2.6s;     transform: translate3d(4vw, 37vh, 95px);     background: #d92659;   }   @keyframes particle-animation-14 {     100% {       transform: translate3d(9vw, 58vh, 27px);     }   }   .particle:nth-child(14) {     animation: particle-animation-14 60s infinite;     opacity: 0.2;     height: 7px;     width: 7px;     animation-delay: -2.8s;     transform: translate3d(88vw, 7vh, 99px);     background: #8b26d9;   }   @keyframes particle-animation-15 {     100% {       transform: translate3d(48vw, 43vh, 85px);     }   }   .particle:nth-child(15) {     animation: particle-animation-15 60s infinite;     opacity: 0.31;     height: 10px;     width: 10px;     animation-delay: -3s;     transform: translate3d(38vw, 88vh, 48px);     background: #266bd9;   }   @keyframes particle-animation-16 {     100% {       transform: translate3d(44vw, 38vh, 77px);     }   }   .particle:nth-child(16) {     animation: particle-animation-16 60s infinite;     opacity: 0.25;     height: 9px;     width: 9px;     animation-delay: -3.2s;     transform: translate3d(54vw, 21vh, 16px);     background: #b826d9;   }   @keyframes particle-animation-17 {     100% {       transform: translate3d(50vw, 21vh, 42px);     }   }   .particle:nth-child(17) {     animation: particle-animation-17 60s infinite;     opacity: 0.13;     height: 7px;     width: 7px;     animation-delay: -3.4s;     transform: translate3d(49vw, 71vh, 68px);     background: #2677d9;   }   @keyframes particle-animation-18 {     100% {       transform: translate3d(39vw, 38vh, 46px);     }   }   .particle:nth-child(18) {     animation: particle-animation-18 60s infinite;     opacity: 0.54;     height: 8px;     width: 8px;     animation-delay: -3.6s;     transform: translate3d(1vw, 78vh, 67px);     background: #268bd9;   }   @keyframes particle-animation-19 {     100% {       transform: translate3d(47vw, 3vh, 83px);     }   }   .particle:nth-child(19) {     animation: particle-animation-19 60s infinite;     opacity: 0.24;     height: 10px;     width: 10px;     animation-delay: -3.8s;     transform: translate3d(29vw, 27vh, 58px);     background: #2685d9;   }   @keyframes particle-animation-20 {     100% {       transform: translate3d(71vw, 58vh, 50px);     }   }   .particle:nth-child(20) {     animation: particle-animation-20 60s infinite;     opacity: 0.49;     height: 8px;     width: 8px;     animation-delay: -4s;     transform: translate3d(89vw, 62vh, 58px);     background: #d9266b;   }   @keyframes particle-animation-21 {     100% {       transform: translate3d(1vw, 13vh, 34px);     }   }   .particle:nth-child(21) {     animation: particle-animation-21 60s infinite;     opacity: 0.16;     height: 6px;     width: 6px;     animation-delay: -4.2s;     transform: translate3d(16vw, 63vh, 92px);     background: #c7d926;   }   @keyframes particle-animation-22 {     100% {       transform: translate3d(62vw, 83vh, 8px);     }   }   .particle:nth-child(22) {     animation: particle-animation-22 60s infinite;     opacity: 0.46;     height: 7px;     width: 7px;     animation-delay: -4.4s;     transform: translate3d(43vw, 3vh, 36px);     background: #26d96e;   }   @keyframes particle-animation-23 {     100% {       transform: translate3d(8vw, 11vh, 17px);     }   }   .particle:nth-child(23) {     animation: particle-animation-23 60s infinite;     opacity: 0.1;     height: 6px;     width: 6px;     animation-delay: -4.6s;     transform: translate3d(12vw, 11vh, 54px);     background: #2cd926;   }   @keyframes particle-animation-24 {     100% {       transform: translate3d(42vw, 44vh, 70px);     }   }   .particle:nth-child(24) {     animation: particle-animation-24 60s infinite;     opacity: 0.47;     height: 8px;     width: 8px;     animation-delay: -4.8s;     transform: translate3d(46vw, 33vh, 57px);     background: #d97126;   }   @keyframes particle-animation-25 {     100% {       transform: translate3d(66vw, 52vh, 19px);     }   }   .particle:nth-child(25) {     animation: particle-animation-25 60s infinite;     opacity: 0.13;     height: 8px;     width: 8px;     animation-delay: -5s;     transform: translate3d(74vw, 59vh, 23px);     background: #26d9bb;   }   @keyframes particle-animation-26 {     100% {       transform: translate3d(35vw, 82vh, 67px);     }   }   .particle:nth-child(26) {     animation: particle-animation-26 60s infinite;     opacity: 0.45;     height: 10px;     width: 10px;     animation-delay: -5.2s;     transform: translate3d(49vw, 79vh, 12px);     background: #d98826;   }   @keyframes particle-animation-27 {     100% {       transform: translate3d(85vw, 39vh, 97px);     }   }   .particle:nth-child(27) {     animation: particle-animation-27 60s infinite;     opacity: 0.28;     height: 10px;     width: 10px;     animation-delay: -5.4s;     transform: translate3d(78vw, 72vh, 78px);     background: #8826d9;   }   @keyframes particle-animation-28 {     100% {       transform: translate3d(15vw, 28vh, 12px);     }   }   .particle:nth-child(28) {     animation: particle-animation-28 60s infinite;     opacity: 0.18;     height: 9px;     width: 9px;     animation-delay: -5.6s;     transform: translate3d(51vw, 47vh, 1px);     background: #c426d9;   }   @keyframes particle-animation-29 {     100% {       transform: translate3d(68vw, 5vh, 77px);     }   }   .particle:nth-child(29) {     animation: particle-animation-29 60s infinite;     opacity: 0.46;     height: 7px;     width: 7px;     animation-delay: -5.8s;     transform: translate3d(66vw, 12vh, 32px);     background: #26d95f;   }   @keyframes particle-animation-30 {     100% {       transform: translate3d(25vw, 89vh, 37px);     }   }   .particle:nth-child(30) {     animation: particle-animation-30 60s infinite;     opacity: 0.46;     height: 6px;     width: 6px;     animation-delay: -6s;     transform: translate3d(20vw, 37vh, 47px);     background: #262cd9;   }   </style> This is for a v7.0 site using the Skye family of templates.
    That should do it.
    This could be tweaked and is just a starting point. You could do things like add more or less particles. Perhaps based on screen size? The target area of the particles could be restricted from the whole window to a sub area. For example below the header area. That would take some Javascript I think to place the particle-container into the right location.
    I may follow up with a bit more detail of my process but these are the critical get it done steps.
    Let us know how it goes.
  17. creedon's post in How to Align Footer Middle Block to Left? was marked as the answer   
    Try the above. I suggest removing any previous CSS you created to try and achieve the effect you wanted. Make a copy in case you want to put it back. First you want to make sure the spacing is correct and then if you have coloring and such you want to use from your previous attempt put it in minus spacing stuff.
    Let us know how it goes.
×
×
  • Create New...