Jump to content

MMEbyKiandraTrickett

Circle Member
 View Profile  See their activity

  • Posts

    73

  • Joined

  • Last visited

 Content Type 

Posts posted by MMEbyKiandraTrickett

    Adding opt-in marketing to Squarespace form

    in Pages & Content

    Posted

    Flow:

    Someone completes form on website, owner checks application and either accepts or denies, individual goes through to workflow to receive automated email to create an account and book a market stall once account created.

    Issue:

    Adding marketing opt-in to squarespace form? Why isn't this possible? Is there a way to add code to do so?

    I've been able to look at tagging accounts with 'accepted' 'declined' and hopefully will be able to set up automation from that, but they still need to have the opt in to receive marketing comms.

    Best formatting for Squarespace's new grid format

    in Pages & Content

    Posted

    Squarespace's new grid layout seems good in context.. but I've done a couple of websites with it so far and get extremely frustrated by the best grid layout. Nothing seems to work where things can align correctly? It would be so much better if they removed the grid functionality and allowed free formatting/designing?

    Does anyone else have the same issues and how did you fix?

    Example: That is the shape of the box I want the text contained in.. but where I am hovering the text box - that would be centre of the box, but it isn't within that grid .. it's just stupid!

    Screenshot 2023-07-08 at 5.54.07 pm.png

    Desktop Hamburger Custom Image Loads Mega Menu

    in Customize with code

    Posted

    I have purchased code for a Mega Menu for a site I'm doing. 

    I have built out the Mega Menu Code, but I want the Desktop & Mobile Hamburger Icon (image) to be that attached. (A corner circle). On hover over of the image, I want it to move. 

    The code I had added for the image won't change the size, it just loads it tiny, and I can't seem to get it flush up on the far top right. 

    PW: HM23

     

    Mega Menu.png

    Best member platform to be able to accept members

    in Customize with code

    Posted

    On 5/9/2023 at 11:34 AM, sayreambrosio said:

    Maybe have an application form that is visible on the site and the members area that isn't visible to the general public. Once the application is approved they could send out a link to "sign up" for the platform which would let them create their account in the members area.

    Thanks! I had that as one of the flows - wasn't the most ideal as I wanted it to be less manual work for the owner, was hoping a simple "approve" button would work, but it may need to be the temporary solution is squarespace arent introducing this feature any time soon.

    Changing mobile banner height and padding

    in Customize with code

    Posted

    The top bits will be cleaned up. Had to change all colours manually because they had a separate site live at the time of me re-building. 

    //Hopmepage main banner//

    #home-welcome h1 {color: #051F3B;}

     

    //Hopmepage services banner//

    #testimonials {background: #D4D4D4;}

    #testimonials h1 {color: #051F3B;}

    #testimonials h2 {color: #051F3B;}

    #testimonials h3 {color: #051F3B;}

    #testimonials p {color: #051F3B;}

    #testimonials p a {color:#051F3B;}

     

    //Hopmepage cta banner//

    #cta {background: #051F3B;}

    #cta h1 {color: #ffffff;}

    #cta h2 {color: #ffffff;}

    #cta h3 {color: #ffffff;}

    #cta p {color: #ffffff;}

    #cta p a {color: #ffffff;}

     

    //Homepage services banner//

    #our-services p a {color: #ffffff;}

    #our-services h1 {color: #ffffff;}

    #our-services h2 {color: #ffffff;}

    #our-services h3 {color: #ffffff;}

    #our-services p {color: #ffffff;}

    #cta p a {color: #ffffff;}

     

    //About  quote banner//

    #about-quote {background: #051F3B;}

    #about-quote  h1 {color: #ffffff;}

    #about-quote  h2 {color: #ffffff;}

    #about-quote  h3 {color: #ffffff;}

    #about-quote p {color: #ffffff;}

    #about-quote  p a {color: #ffffff;}

     

    //About  banner//

    #about-cta {background: #051F3B;}

    #about-cta  h1 {color: #ffffff;}

    #about-cta  h2 {color: #ffffff;}

    #about-cta  h3 {color: #ffffff;}

    #about-cta p {color: #ffffff;}

    #about-cta  p a {color: #ffffff;}

     

    //about header//

    #about-header  h1 {color: #ffffff;}

    #about-header  h2 {color: #ffffff;}

    #about-header  h3 {color: #ffffff;}

    #about-header p {color: #ffffff;}

    #about-header  p a {color: #ffffff;}

     

    //about header//

    #care-about h1 {color: #051F3B;}

    #care-about  h2 {color: #051F3B;}

    #care-about  h3 {color: #051F3B;}

    #care-about p {color: #051F3B;}

    #care-about p a {color: #051F3B;}

     

    //REMOVE UNDERLINE//

    p a {border:none!important;}

     

    // Fade Out Line Buttom-Left To Right small //

     

    .sqs-block-button-element--small {

      position:relative;

      height: 60px;

      line-height: 60px;

      text-align: center;

      transition: 0.5s;

      padding: 0 20px;

      cursor: pointer;

      -webkit-transition:0.5s;

    }

     

    .sqs-block-button-element--small:hover {

      background-color: transparent;

      border-color: transparent;

      color: #ffffff;

    }

     .sqs-block-button-element--small:hover:before{

        transition-delay: .2s;

    }

     

    .sqs-block-button-element--small::before{

      width: 0%;

      height:100%;

      z-index: 3;

      content:'';

      position: absolute;

      bottom:-1px;

      left:0;

      box-sizing: border-box;

      transition: .2s;

     

    }

     

    .sqs-block-button-element--small:hover::before {

      width: 100% !important;

      transition: .7s;

    }

     

    .sqs-block-button-element--small::before {

      border-bottom: 2px solid #F1F1F1;

    }

     

    // Fade Out Line Buttom-Left To Right medium //

     

    .sqs-block-button-element--medium {

      position:relative;

      height: 60px;

      line-height: 60px;

      text-align: center;

      transition: 0.5s;

      padding: 0 20px;

      cursor: pointer;

      -webkit-transition:0.5s;

    }

     

    .sqs-block-button-element--medium:hover {

      background-color: transparent;

      border-color: transparent;

      color: #051F3B;

    }

     .sqs-block-button-element--small:hover:before{

        transition-delay: .2s;

    }

     

    .sqs-block-button-element--medium::before{

      width: 0%;

      height:100%;

      z-index: 3;

      content:'';

      position: absolute;

      bottom:-1px;

      left:0;

      box-sizing: border-box;

      transition: .2s;

     

    }

     

    .sqs-block-button-element--medium:hover::before {

      width: 100% !important;

      transition: .7s;

    }

     

    .sqs-block-button-element--medium::before {

      border-bottom: 2px solid #051F3B;

    }

     

     

    //white mobile logo//

     

    .Mobile-bar-branding-logo { content: url("https://static1.squarespace.com/static/5a7ae678fe54efbf7728184f/t/60a4d59aa22ee22cf2302b1c/1621415322381/Nominis-white.png") !important;

    max-height:60px;

    min-height: 60px;

    width:auto !important;

    }

     

    //Custom Burger Icon//

     

    .burger-inner {

      display: none;

    }

     

    .Mobile-bar-menu {stroke:transparent; background-image: url('https://static1.squarespace.com/static/5a7ae678fe54efbf7728184f/t/60a4d74cc16750680824acf4/1621415756966/Nominis-burger-icon.png');   background-size: contain;   background-repeat: no-repeat;   background-position: left;   background-color: transparent !important;   height: 15px; }  .burger-inner {   display: none; }

     

    //Medium button size//

     .sqs-block-button .sqs-block-button-element--medium {

         padding: 15px 25px;

    }

     

    //hover over image//

     

    a img.thumb-image {

       display: inline-block;

       vertical-align: middle;

       -webkit-transform: translateZ(0);

               transform: translateZ(0);

       box-shadow: 0 0 1px rgba(0, 0, 0, 0);

       -webkit-backface-visibility: hidden;

               backface-visibility: hidden;

           -moz-osx-font-smoothing: grayscale;

       -webkit-transition-duration: 0.3s;

               transition-duration: 0.3s;

       -webkit-transition-property: transform;

               transition-property: transform;

     }

     a img.thumb-image:hover,

     a img.thumb-image:active {

       -webkit-transform: scale(1.1);

               transform: scale(1.1);

     }

     

    //Accordion text//

     

    .markdown-block p {

    margin-left:1.5em;

     

    }

     

    .markdown-block .ui-closed:before {

      font-family:monospace;

      content:"+ ";

      color: #ffffff

     

    }

     

    .markdown-block .ui-open:before {

      font-family:monospace;

      content:"- ";

      color: #ffffff

     

    }

     

    .markdown-block h3 {   

    border-bottom: solid 1px #ffffff;   

    padding: 10px 3px; }

     

    /* Homepage nav color */

    body.homepage a.Header-nav-item {

        color: #061E39 !important;

    }

    Changing mobile banner height and padding

    in Customize with code

    Posted

    On 6/24/2021 at 1:11 PM, tuanphan said:

    This code for SS 7.1. Your site is 7.0

    Try this code 

    
@media screen and (max-width:640x) {
section#homewelcome img {
    visibility: hidden;
}
section#home-welcome {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/ss-team01-min.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
}

     

     

    Thanks! Do you know why I'd be receiving a syntax error? Hasn't worked but assume fixing that it will.

    Screen Shot 2021-06-28 at 2.10.02 pm.png

    Changing mobile banner height and padding

    in Customize with code

    Posted

    On 6/10/2021 at 12:47 PM, tuanphan said:

    Try adding to Design > Custom CSS 

    
/* Mobile-Home-2-Banner */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1623056687573_14231 {
    display: none;
}
div#page-6099042fb81eae0340083a3e .span-5 {
    position: relative;
    top: -80px;
}
}

     

    Thank you! This worked - I tried your code to replace banner image on mobile, replaced the code with my collection ID numbers but hasn't worked?

      

    @media screen and (max-width:767px) {
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background img {
    visibility: hidden;
}
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/ss-team01-min.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
}

    Changing mobile banner height and padding

    in Customize with code

    Posted

    Site URL: https://nominis.me/home-2

    Hey crew

    I'm working through the below site and wanting to increase the banner size on the homepage (main banner). You can see on mobile the text overlaps the imagery of the individuals. I would ideally want this text sitting in the grey space above, and increase the grey space. 

    Another option is that I can upload a secondary image for mobile so that there's more grey space above. 

    https://nominis.me/home-2

    Help a sister out!

    IMG_7605.thumb.PNG.a65d917d6ff6886ef0d2377e4abd3100.PNG

×
×
  • 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