Jump to content

RichardR

Member
  • Posts

    131
  • Joined

  • Last visited

Posts posted by RichardR

  1. Hi everyone,

    I have 2 pages on the website with e-learning code embedded. Both have been working with no issues for some time, now they don't work on the mobile, just a blank space. Links to two pages below: 

    https://www.probation-institute.org/drug-treatment-training

    https://www.probation-institute.org/veterans

    To test, I removed all CSS and that didn't make a difference. 

    I'd be grateful for any advice please. 

    Richard

  2. Hi everyone, 

    I have added an announcement bar and I just can't figure out how to stop it overlapping the menu on the mobile. I'd be grateful for help with 3 things: 

    1. Making announcement bar disappear when clicking on menu. 
    2. Reduce text wrapping on mobile, so I can get announcement text all on one line. 
    3. Make bar height smaller, if text on one line. 

    Website: https://www.probation-institute.org

    Many thanks,

    Richard

    Menu.png

  3. 3 hours ago, tuanphan said:

    Ah got it. First, keep this Elf code in Code Injection

    image.thumb.png.2c284c8b9a94c65706f0880d5a7a6c21.png

    Next, add it to Last Line in Code Injection > Footer

    <script>
      $(document).ready(function(){
        setTimeout(function(){
    	 $('div[class*="FloatingButton__Container"]').appendTo('[data-nc-container="top-right"]');
    },3000); 
    });
    </script>
    <style>
      .eaSXfB {
        position: static !important;
        margin-left: 20px;
    }
      .Header-search {
        display: none;
    }
    </style>

    image.png.d391b8b865b85fbffe4ac6226b8ba134.png

    Thank you @tuanphan. This sometimes works on mobile, the search appears across the whole of the bottom of the screen then jumps to the top. 

    On desktop, similar in that it appears across the bottom but it then disappears altogether (see screenshots). Tried in multiple browsers. 

    I'm keen to make it look the same as the Squarespace search function too, small and discreet. 

    Full code injection  I used below (though I've taken the section in italics out for now)

    <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
    <div class="elfsight-app-3d11d10a-b7b7-4bc3-a662-b1825ec634bf"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script>
      jQuery(document).ready(function($) { 
       $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/how-to-join" class="Header-nav-item">JOIN HERE</a></div>').appendTo('nav.Header-nav.Header-nav--secondary');
        $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/donate" class="Header-nav-item">DONATE</a></div>').appendTo('.Mobile [data-nc-container="top-center"]');
     }); 
    </script>
    <style>
      nav.Header-nav.Header-nav--secondary a {
        white-space: nowrap;
    }
      .Mobile [data-nc-container="top-center"] {
        display: flex !important;
    }
      .Mobile [data-nc-container="top-center"] a {
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        font-weight: 500 !important;
        border: 0;
        background-color: #0a579f;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #fff;
        border-radius: 30px;
        padding: 9px 12px;
        margin: 0.618em 0.618em;
     
      }

    </style>

    <style>
      /* Hide join here orange button */
    @media screen and (min-width:641px) {
        div#block-yui_3_17_2_1_1590057489722_4915 {
        display: none;
    }
    }

    /* hide mobile donate button */
    nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary {
        display: none;
    }
    </style>

    <script>
      $(document).ready(function(){
        setTimeout(function(){
         $('div[class*="FloatingButton__Container"]').appendTo('[data-nc-container="top-right"]');
    },3000); 
    });
    </script>
    <style>
      .eaSXfB {
        position: static !important;
        margin-left: 20px;
    }
      .Header-search {
        display: none;
    }
    </style>

    IMG_2472.jpg

     

    Screenshot 2023-08-24 at 09.24.29.png

  4. Thank you @tuanphan, I've tried both suggestions and no luck I'm afraid. This is the full CSS if it helps. 

    Current code injection: 

    <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
    <div class="elfsight-app-3d11d10a-b7b7-4bc3-a662-b1825ec634bf"></div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script>
      jQuery(document).ready(function($) { 
       $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/how-to-join" class="Header-nav-item">JOIN HERE</a></div>').appendTo('nav.Header-nav.Header-nav--secondary');
        $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/donate" class="Header-nav-item">DONATE</a></div>').appendTo('.Mobile [data-nc-container="top-center"]');
     }); 
    </script>
    <style>
      nav.Header-nav.Header-nav--secondary a {
        white-space: nowrap;
    }
      .Mobile [data-nc-container="top-center"] {
        display: flex !important;
    }
      .Mobile [data-nc-container="top-center"] a {
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        font-weight: 500 !important;
        border: 0;
        background-color: #0a579f;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #fff;
        border-radius: 30px;
        padding: 9px 12px;
        margin: 0.618em 0.618em;
     
      }

    </style>

    <style>
      /* Hide join here orange button */
    @media screen and (min-width:641px) {
        div#block-yui_3_17_2_1_1590057489722_4915 {
        display: none;
    }
    }

    /* hide mobile donate button */
    nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary {
        display: none;
    }
    </style>

     

    Button CSS in Elfsight 

    .global-styles,

    [class^='FloatingButton__Container-sc'] {

                top: auto !important;

                bottom: 16px;

    }

  5. Sure, this is in the footer of the code injection: 

    <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>

    <div class="elfsight-app-3d11d10a-b7b7-4bc3-a662-b1825ec634bf"></div>

    This is the CSS directly attributed to the button in the Elfsight set up: 

    .global-styles,

    [class^='FloatingButton__Container-sc'] {

                top: auto !important;

                bottom: 16px;

    }

    Thank you 🙂

     

  6. Hi everyone, 

    As I've seen all over the forum, the search facility doesn't seem to accurate - as I'm experiencing too here: https://www.probation-institute.org

    I've been looking at Elfsight as an alternative, which seems to do the trick. I'd really welcome some help positioning and styling it properly and embedding in the header please. 

    At present it is positioned at the bottom right of the page, with CSS they provided, as you'll see on the screenshot. 

    Ideally, I'd like it exactly where the SS search is at the top right in the header and styled the same if possible. I don't want it to stand out too much and just blend into the header. 

    The other issue is making sure it looks ok on the mobile version, so again trying to replicate what is there on the current mobile version with just the icon please - see attached.

    Any ideas I'd be very grateful. 

    Thanks, Richard

     

    Screenshot 2023-08-16 at 08.56.16.png

    Screenshot 2023-08-16 at 08.57.26.png

  7. 2 hours ago, tuanphan said:

    Add this code under

    <style>
      /* Hide join here orange button */
    @media screen and (min-width:641px) {
        div#block-yui_3_17_2_1_1590057489722_4915 {
        display: none;
    }
    }
    
    /* hide mobile donate button */
    nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary {
        display: none;
    }
    </style>

     

    Just awesome as always. Thanks so much for all your time and support. 

  8. Thanks @tuanphan I've played around with styling a little, see below. I'd really welcome a little more help please.

    Mobile site: the donate button from the side menu needs hiding for mobile.

    Desktop: the 'Join Here' button in orange in the middle needs removing (desktop only). 

    Many thanks

     

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script>
      jQuery(document).ready(function($) { 
       $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/how-to-join" class="Header-nav-item">JOIN HERE</a></div>').appendTo('nav.Header-nav.Header-nav--secondary');
        $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/donate" class="Header-nav-item">DONATE</a></div>').appendTo('.Mobile [data-nc-container="top-center"]');
     }); 
    </script>
    <style>
      nav.Header-nav.Header-nav--secondary a {
        white-space: nowrap;
    }
      .Mobile [data-nc-container="top-center"] {
        display: flex !important;
    }
      .Mobile [data-nc-container="top-center"] a {
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        font-weight: 500 !important;
        border: 0;
        background-color: #0a579f;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #fff;
        border-radius: 30px;
        padding: 9px 12px;
        margin: 0.618em 0.618em;
      }

    </style>

  9. 1 hour ago, tuanphan said:

    Add to Settings > Developer Tools > Code Injection > Footer (DO NOT add to Custom CSS)

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script>
      jQuery(document).ready(function($) { 
       $('<div class="sqs-block-button button-block custom-button"><div class="sqs-block-button-container--center"><a href="https://google.com" target="_blank" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element">How to Join</a></div></div>').appendTo('[data-nc-container="top-center"]');
     }); 
    </script>
    <style>
      [data-nc-container="top-center"] {
        display: flex !important;
    }
    </style>

     

    Many thanks, I really appreciate it. I've added that as you can see below. 

    Few queries please: 

    - can the two buttons be the same size, colour, font etc on desktop?

    - reduce the size of the button on the mobile version in the header

    - remove the button in the menu on the mobile (orange donate)

    - be great to just have the donate button on the mobile header, not the 'how to join'

    - centre the menu on the desktop so the space either side is the same? (between the logo and the buttons)

    Or, would it be better to remove the orange donate button altogether and add 2 buttons using the script instead? But only have one appear on the mobile version? 

    Many thanks for all your help. 

    Screenshot 2023-07-14 at 12.20.51.png

    Screenshot 2023-07-14 at 12.21.50.png

  10. On 7/9/2023 at 10:16 AM, tuanphan said:

    #1. With desktop, if you want, we can turn last nav item to a button style.

    #2. With mobile, add a button here?

    image.png.434f98464d082f0ba60c411118655bb6.png

    Yes to both please. 

    I also wondered whether I can have two buttons in the secondary nav? A donate button and how to join button?

    Only the donate one in the header on the mobile though. 

  11. 2 hours ago, DPruitt said:
    /*Collection Padding*/
    #collection-64a1d528df04412c40a492b8
    
    {.Main-content
    {padding-top:0px !important;}
    
    
    /*Image Title*/
    .image-title p{color: #ef8c21 !important;
        font-size: 60px !important;
        font-weight: 600 !important;
        font-family: impact !important;}
    
    /*Image Subtitle*/
    .image-subtitle p
    {    color: #fff !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        font-family: quicksand !important;}
    
    
    /*Text Position*/
    .image-block-card-content-position-top .sqs-block-image .design-layout-card .image-card-wrapper {
        align-items: center  !important;}
    
    
    /*Card Background*/
    .sqs-block-image .design-layout-card .image-card-wrapper
    {background-color:#09579f !important;}
    
    
    
    /*Card Size*/
    .sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper {
        position: relative;
        width: calc(50% - 2.5%)  !important;}
    
    /*Image Size*/
    .sqs-block-image .design-layout-card:not(.sqs-narrow-width)>:first-child {
        width: calc(50% - 2.5%)  !important;}
    
    
    
    }

     

    This should get you pretty close...  One thing you need to do is crop your image before you upload it... maybe a 3:2 ratio or 4:3..

    Thank you so much!!! Really looks a lot better. I'll play around a little more but it's given me everything I need  

    it looks good on the mobile in portrait but a little odd in landscape. Would I need any specific code to rectify that?

    Also, would you advise making it full width like the banner? 

    Many thanks again. 

  12. I'd be grateful for any advice on the following please:

    • how to change font, font size, font weight without it affecting the rest of the site
    • make the image wider so I can have approx. 50% image and 50% text in the card on the desktop
    • make the image card full screen width on desktop
    • reduce the padding above the image card, just on this page, to bring it closer to the menu
    • centre the text vertically and reduce the white section

    Many thanks,

    Richard

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