Jump to content

creedon

Circle Member
 View Profile  See their activity

  • Posts

    9,501

  • Joined

  • Last visited

  • Days Won

    79

 Content Type 

Status Replies posted by creedon

  1. Fincher

    Hello, I am having trouble and hope you can help. I am working on "tulsabenefits.org" I would like to have a public landing page, with some content available to all. Then click "login" button, enter a generic password for all and see an overview page and 5 other pages. Ideally, you only enter a password once and do not have to create an account. Do you know if this is possible? 

    1. creedon

      creedon

      Please ask your question in the public forum.

      I am not a Squarespace employee. I'm a forum member like yourself.

      However, I am a Squarespace consultant.

      If you wish to engage my services please contact me.

      Please see How to post a forum question.

    2. (See 1 other reply to this status update)

  2. Lesh

    Lesh    creedon

    Hi,

    I solved the issue with the black border by using the declaration {outline: none !important} 

    Sorry to bother you a moment ago.

    1. creedon

      creedon

      👍

  3. Vinson

    Hi Tom - Love your posts and knowledge. You Rock!

    For some reason, all of the code I've been trying to use from my sleuthing online and in these forums to change the color of the nav arrows in 7.0 Gallery Blocks (Grid View) I use to display all of my visual artist clients' artwork do not seem to work. Might you be able to help? 

    Here's just one of dozens and dozens of pages I've created for many clients over the years where I'd LOVE to get the proper code to change the nav arrows (right & left) to be able to stick out over the light background of the light-box when the images are clicked on:

    https://www.leerunning.com/cure-glass

    Help! I'm a Circle Member and for the life of me cannot figure this out.

    Many thanks!

    Vinson Valega
    https://www.vinsonvalega.com


     

    1. creedon

      creedon

      Add the following to Design > Custom CSS. 

      .yui3-lightbox2 .sqs-lightbox-next,
.yui3-lightbox2 .sqs-lightbox-previous

  {
  
    color : red;
    
    }

      This is for v7.0 using the Montauk template family.

      Let us know how it goes.

    2. (See 3 other replies to this status update)

  4. Cyperpunk-girl-333

    Hi Creedon, I'm hoping you can help me with my codepen 

     

    .neoncontainer .flex
    {
      position: relative;
      width: 260px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 40px 30px;
      transition: 0.5s;
    }

    .neoncontainer .box::before
    {
      content:' ';
      position: absolute;
      top: 0;
      left: 50px;
      width: 50%;
      height: 100%;
      text-decoration: none;
      background: #fff;
      border-radius: 8px;
      transform: skewX(15deg);
      transition: 0.5s;
    }

    .neoncontainer .box::after
    {
      content:'';
      position: absolute;
      top: 0;
      left: 50;
      width: 50%;
      height: 100%;
      background: #fff;
      border-radius: 8px;
      transform: skewX(15deg);
      transition: 0.5s;
      filter: blur(30px);
    }

    .neoncontainer .box:hover:before,
    .neoncontainer .box:hover:after
    {
      transform: skewX(0deg);
      left: 20px;
      width: calc(100% - 90px);
      
    }

    .neoncontainer .box:nth-child(1):before,
    .neoncontainer .box:nth-child(1):after
    {
      background: linear-gradient(315deg, #ffbc00, #ff0058)
    }

    .neoncontainer .box:nth-child(2):before,
    .container .box:nth-child(2):after
    {
      background: linear-gradient(315deg, #03a9f4, #ff0058)
    }

    .neoncontainer .box:nth-child(3):before,
    .neoncontainer .box:nth-child(3):after
    {
      background: linear-gradient(315deg, #4dff03, #00d0ff)
    }

    .neoncontainer .box span
    {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 5;
      pointer-events: none;
    }

    .neoncontainer .box span::before
    {
      content:'';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      opacity: 0;
      transition: 0.1s;  
      animation: animate 2s ease-in-out infinite;
      box-shadow: 0 5px 15px rgba(0,0,0,0.08)
    }

    .neoncontainer .box:hover span::before
    {
      top: -50px;
      left: 50px;
      width: 100px;
      height: 100px;
      opacity: 1;
    }

    .neoncontainer .box span::after
    {
      content:'';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      opacity: 0;
      transition: 0.5s;
      animation: animate 2s ease-in-out infinite;
      box-shadow: 0 5px 15px rgba(0,0,0,0.08);
      animation-delay: -1s;
    }

    .neoncontainer .box:hover span:after
    {
      bottom: -50px;
      right: 50px;
      width: 100px;
      height: 100px;
      opacity: 1;
    }

    @keyframes animate
    {
      0%, 100%
      {
        transform: translateY(10px);
      }
      
      50%
      {
        transform: translate(-10px);
      }
    }

    .neoncontainer .box .content
    {
      position: relative;
      left: 0;
      padding: 20px 40px;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      z-index: 1;
      transform: 0.5s;
      color: #fff;
    }

    .neoncontainer .box:hover .content
    {
      left: -25px;
      padding: 60px 40px;
    }

    .neoncontainer .box .content h2
    {
      font-size: 2em;
      color: #fff;
      margin-bottom: 10px;
    }

    .neoncontainer .box .content p
    {
      font-size: 1.1em;
      margin-bottom: 10px;
      line-height: 1.4em;
    }

    .neoncontainer .box .content a
    {
      display: inline-block;
      font-size: 1.1em;
      color: #111;
      background: #fff;
      padding: 10px;
      border-radius: 4px;
      text-decoration: none;
      font-weight: 700;
      margin-top: 5px;
    }

    .neoncontainer .box .content a:hover
    {
      background: #ffcf4d;
      border: 1px solid rgba(255, 0, 88, 0.4);
      box-shadow: 0 1px 15px rgba(1, 1, 1, 0.2);
    }

    I've added it to my product pages and I've change the colour #hex codes. 

    In mobile and desktop view the boxes and crammed on top of each other and overlapping. 

    is there a way I can add some space between each box so they display better on desktop and mobile?

    Maybe it would be better if they stacked on mobile but displayed in a row on desktop? 

    Do you know how to achieve this.  

    This is the link to the URL I've been playing with today with your help. 

    https://www.spacept.com.au/sqaurespace-websites/p/32g3zcipummrllgffz4114v6b5ptcr-lgpam-bbp8n

     

    https://codepen.io/kodplay/pen/oNBreRJ 

    this is the original code pen

    I removed the code for the container it was in, I also removed the buttons

     

     

     

    1. creedon

      creedon

      Please post your issue in a public thread so more eyes can get on it.

    2. (See 5 other replies to this status update)

  5. Cyperpunk-girl-333

    Hi Creedon, I'm hoping you can help me with my codepen 

     

    .neoncontainer .flex
    {
      position: relative;
      width: 260px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 40px 30px;
      transition: 0.5s;
    }

    .neoncontainer .box::before
    {
      content:' ';
      position: absolute;
      top: 0;
      left: 50px;
      width: 50%;
      height: 100%;
      text-decoration: none;
      background: #fff;
      border-radius: 8px;
      transform: skewX(15deg);
      transition: 0.5s;
    }

    .neoncontainer .box::after
    {
      content:'';
      position: absolute;
      top: 0;
      left: 50;
      width: 50%;
      height: 100%;
      background: #fff;
      border-radius: 8px;
      transform: skewX(15deg);
      transition: 0.5s;
      filter: blur(30px);
    }

    .neoncontainer .box:hover:before,
    .neoncontainer .box:hover:after
    {
      transform: skewX(0deg);
      left: 20px;
      width: calc(100% - 90px);
      
    }

    .neoncontainer .box:nth-child(1):before,
    .neoncontainer .box:nth-child(1):after
    {
      background: linear-gradient(315deg, #ffbc00, #ff0058)
    }

    .neoncontainer .box:nth-child(2):before,
    .container .box:nth-child(2):after
    {
      background: linear-gradient(315deg, #03a9f4, #ff0058)
    }

    .neoncontainer .box:nth-child(3):before,
    .neoncontainer .box:nth-child(3):after
    {
      background: linear-gradient(315deg, #4dff03, #00d0ff)
    }

    .neoncontainer .box span
    {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 5;
      pointer-events: none;
    }

    .neoncontainer .box span::before
    {
      content:'';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      opacity: 0;
      transition: 0.1s;  
      animation: animate 2s ease-in-out infinite;
      box-shadow: 0 5px 15px rgba(0,0,0,0.08)
    }

    .neoncontainer .box:hover span::before
    {
      top: -50px;
      left: 50px;
      width: 100px;
      height: 100px;
      opacity: 1;
    }

    .neoncontainer .box span::after
    {
      content:'';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      opacity: 0;
      transition: 0.5s;
      animation: animate 2s ease-in-out infinite;
      box-shadow: 0 5px 15px rgba(0,0,0,0.08);
      animation-delay: -1s;
    }

    .neoncontainer .box:hover span:after
    {
      bottom: -50px;
      right: 50px;
      width: 100px;
      height: 100px;
      opacity: 1;
    }

    @keyframes animate
    {
      0%, 100%
      {
        transform: translateY(10px);
      }
      
      50%
      {
        transform: translate(-10px);
      }
    }

    .neoncontainer .box .content
    {
      position: relative;
      left: 0;
      padding: 20px 40px;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      z-index: 1;
      transform: 0.5s;
      color: #fff;
    }

    .neoncontainer .box:hover .content
    {
      left: -25px;
      padding: 60px 40px;
    }

    .neoncontainer .box .content h2
    {
      font-size: 2em;
      color: #fff;
      margin-bottom: 10px;
    }

    .neoncontainer .box .content p
    {
      font-size: 1.1em;
      margin-bottom: 10px;
      line-height: 1.4em;
    }

    .neoncontainer .box .content a
    {
      display: inline-block;
      font-size: 1.1em;
      color: #111;
      background: #fff;
      padding: 10px;
      border-radius: 4px;
      text-decoration: none;
      font-weight: 700;
      margin-top: 5px;
    }

    .neoncontainer .box .content a:hover
    {
      background: #ffcf4d;
      border: 1px solid rgba(255, 0, 88, 0.4);
      box-shadow: 0 1px 15px rgba(1, 1, 1, 0.2);
    }

    I've added it to my product pages and I've change the colour #hex codes. 

    In mobile and desktop view the boxes and crammed on top of each other and overlapping. 

    is there a way I can add some space between each box so they display better on desktop and mobile?

    Maybe it would be better if they stacked on mobile but displayed in a row on desktop? 

    Do you know how to achieve this.  

    This is the link to the URL I've been playing with today with your help. 

    https://www.spacept.com.au/sqaurespace-websites/p/32g3zcipummrllgffz4114v6b5ptcr-lgpam-bbp8n

     

    https://codepen.io/kodplay/pen/oNBreRJ 

    this is the original code pen

    I removed the code for the container it was in, I also removed the buttons

     

     

     

    1. creedon

      creedon

      I suggest posting in a public thread. I have found that codepen does not equal SS ready code. Unless of course the pen says that it is.

      When not SS ready that usually mean lots of work to massage the code, if it is even possible. I don't touch those unless someone is paying my consulting fee.

    2. (See 5 other replies to this status update)

  6. sstinus

    Hi Creedon, Paul says to me to have a look at your post after my question 

     

    Did you think the solution you propose is possible for my case please ?

    Thank you very much for help 🙂

    Sébastien

    1. creedon

      creedon

      For the category title spacing add the following to Design > Custom CSS. 

      .nested-category-breadcrumb {

  margin-bottom : calc( 37px / 2 );
  
  }

      I"m not seeing the spacing issue you are seeing for the category list.

      104626092_ScreenShot2022-01-18at12_14_20PM.png.55deb490421a96aae2fa9a49a68404c3.png

    2. (See 5 other replies to this status update)

  7. sstinus

    Hi Creedon, Paul says to me to have a look at your post after my question 

     

    Did you think the solution you propose is possible for my case please ?

    Thank you very much for help 🙂

    Sébastien

    1. creedon

      creedon

      In the code you need to find the following and fill in your categories and descriptions.

        

              categoryDescriptionMap : {
        
          /*
          
            the format of each line is a category and a description for the
            category
            
            for each category copy value from Store Settings >
            Categories > [category name] > Edit Category > NAME field for the
            store page. you only need exactly what can be selected from the
            field. if you want to add a description to the Store page ( i.e.
            grid/listing ) leave the category empty, i.e. ''
            
            if the description has single quotes in it then put a backslash
            before the single quotes. example: it's becomes it\'s
            
            following is an example line. copy the example line below and paste
            after the example line. remove '// ' at beginning of pasted line.
            repeat for as many categories as you want to add a description. this
            has been done once initially
            
            */
            
          // '[enter category here between single quotes]' : '[enter category description here between single quotes]',
          
          '[enter category here between single quotes]' : '[enter category description here between single quotes]',
          
          }

       

    2. (See 5 other replies to this status update)

  8. sstinus

    Hi Creedon, Paul says to me to have a look at your post after my question 

     

    Did you think the solution you propose is possible for my case please ?

    Thank you very much for help 🙂

    Sébastien

    1. creedon

      creedon

      I think it could work. The code was designed for v7.1 sites. I suggest giving it a try.

    2. (See 5 other replies to this status update)

  9. FullCircleDesigns

    Creedon made some CSS code that I didn't understand into a thing of beauty. THANK YOU for your brain power!

    1. creedon

      creedon

      👍

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources