Jump to content

DevonHarris

Member
  • Posts

    143
  • Joined

  • Last visited

Posts posted by DevonHarris

  1. Hello!

    I found some amazing, simple code from @inside_the_square but hoping to expand upon it.  The code listed in this video / blog post allows for only one thing to be typed.  However I wish to "delete, retype a different word" and so on, with infinite playback.  I found this code on the forum previously but was hoping to simply alter the code listed here (below).  Thank you to anyone who can assist!!!  (thie first code block below within <div> tags is in my on-page code block.  The second section beginning with ".typit" is within my Design>Custom CSS

    <div style="text-align:left">
      <h2>
        <span class= "typeit"> STANDOUT WEBSITES </span><br>
      THAT COMMAND YOUR CLIENTS</h2>
    </div>
    .typeit {
      overflow: hidden; 
      border-right: 2px solid #50bdb8; /* change this color in the keyframe too */
    
      white-space: nowrap; 
      margin: 0 auto; 
      animation: 
        typeit 3.5s steps(40, end),
        right-border .5s step-end infinite;
    }
    
    @keyframes typeit {  
    from { width: 0 }
    to { width: 100% }
    }
    
    @keyframes right-border {
    from, to { border-color: transparent }
    50% { border-color: #50bdb8; /* change this in the CSS above too */ }
    }

     

  2. For anyone looking for a solution to this- I simply bolded the targeted word in the actual image title.  In this example, we wanted to make the text red.  Within the code, I also adjusted the font-weight to un-do the bolded part.  On the real website, the text will be black but will have a background image, all via CSS.

    The CSS code used (Design>Custom CSS) was as follows, targeting the specific block, and then the text:

    Quote

    #block-yui_3_17_2_1_1665072485008_13882{
      h3 strong {
        font-weight: 500 !important;
        color: red !important;
      }
    }

    image.thumb.png.bb40909c04d363b0b783c995c67af366.png

  3. Hi!  Hoping someone might be able to assist!  I have a website which uses html in section headings because there are certain words ("spans") that have a background image.  I would love to also incorporate this in one of my Image Card blocks but can't figure it out 😕. I'm choosing not to use Fluid Engine for this section because I want to incorporate the Collide image load animation.  

    I have the html and CSS to work, just not sure how to make it work in this particular image.  Thanks so much!

    image.thumb.png.5de95d56834c949cff08308c20b0d658.png

  4. @Wolfsilon thank you so much!  The ea to which I’m referring is in the instance of the word “beach” where the letters are always ext to each other.  Also I’m curious, if I’m using the exact same font, which was downloaded with glyphs, how would I identify the glyphs portion of that same font within the css?  Thanks for any insight you can provide!! 

  5. On 11/2/2021 at 6:02 PM, Wolfsilon said:

    This was fun to code and I hope that this helps you. You'll need a business plan or higher to use the Javascript.

    Start by inserting the code into your Custom CSS: Home > Design > Custom CSS

    .megan-R {
      font-family: "YOU_FONT_HERE";
      color: dodgerblue; /* for display purposes to see it's working */
    }

    Insert the following script into your footer code injection: Home > Settings > Advanced > Code Injection/Footer:

    <script>
    const meganR = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
    
    for (const heading of meganR) {
      heading.innerHTML = heading.innerHTML
        .replace(/R/g, '<span class="megan-R">R</span>');
    }
    </script>

    Save and you should see your pages update to your new font and in the color blue, though, you can change this to whatever you like.

    Best,

    Dan

    Hey!!  I was wondering how to add additional letters or letter combinations (for example “ea”) as well as body font to this script?  Thank you so much!!! 
     

    trying to use Idealist font by Nicky Laatz https://nickylaatz.com/shop/199-idealist-serif

    which has a lot of combo alternates.  Any suggestions?  Thank you!!!

  6. On 9/21/2022 at 5:58 AM, tuanphan said:

    First, edit this accordion title

    to this

    ALLERGIES <span><em>We are a nut free facility</em>.  At TLA, we recognize that each student is individual and unique.  Some of our students have allergies and/or certain health and developmental needs that require personalized care and attention.</span>

    Next, add this code to Last Line in Code Injection > Footer

    <script>
    $(document).ready(function(){
      $("span.accordion-item__title").each(function(){
        $(this).html($(this).text());
      });
    });
    </script>
    <style>
      span.accordion-item__title span {
        display: block;
        font-size: 20px;
        margin-top: 20px !important;
    }
      span.accordion-item__title span em {
        font-style: normal;
        font-weight: bold;
        color: red;
    }
    </style>

    image.thumb.png.e022ddbaff2b3aac58a224e71ae511e6.png

    you are a GENIUS, THANK YOU SO MUCH!  Please post/send a link to your donation page!!!

  7. @tuanphan sorry no bold part of the subheading text, in the section named "Allergies" they want to bold "We are a nut free facility" ...Also you can see that there is only one space between sentences in the subheading but it should be two.  This website is for a school so they want everything to be grammatically perfect lol.  Anything you can do to help would be amazing, thank you!

  8. Hey @tuanphan is there a way to bold part of the subheading within the css code you provided on this thread? 

    1.  The client wants the first sentence bolded.

    2.  I notice that sentence breaks (two space bars) are not reflected online, only within CSS.  Is there a way to fix this?  Here's the code I have, thank you!!

     

    li:nth-child(2) span.accordion-item__title:after {
     margin-top: 5%;
        content:"We are a nut free facility. &nbsp;  At TLA, we recognize that each student is individual and unique.  Some of our students have allergies and/or certain health and developmental needs that require personalized care and attention.";
        display: block;
        font-size: 18px;
      }

  9. hey @bangank36 and @creedon I'm hvaing trouble removing one section of the footer on the home page.  Hoping you could take a look at it for me?  www.tlastmarks.com  password is: 20222023  

    Also if anyone can figure out this weird footer situation that's happening in portrait ipad mode?  You'll have to view it (navy blue section and section above it) while reducing your browser size...  I've combed through my CSS and can't find the culprit 😞

  10. On 8/13/2022 at 10:48 PM, tuanphan said:

    It looks like you use Summary Block - Wall Layout

    Just changed it to Grid Layout, then add this to Design > Custom CSS

    @media screen and (max-width:767px) {
    div#block-yui_3_17_2_1_1660330628278_11970 .summary-item {
        width: 20% !important;
    }
    }

     

    hi!  unfortunately I changed it to grid layout and it still doesn't work 😕. Not sure what's going on...would love if you could help with this as I am also encountering the issue in another summary block section 🙂

  11. On 12/19/2019 at 1:23 AM, tuanphan said:

    Add to Home > Design > Custom CSS

    @media screen and (max-width:640px) {
    .sqs-block-summary-v2 .summary-item.positioned {
        width: 33% !important;
        position: static;
    }
    .sqs-block-summary-v2 .summary-item-list {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }
    }

    hey @tuanphan is there a way to force 5 per row mobile?  I tried adjusting your code with no luck 😕. www.tlastmarks.com/nursery password: Devon   there is a summary block in the footer which I'd like to appear more consolidated on one line mobile, rather than stacked.  I can't figure it out.  What do you think?

     

  12. 9 hours ago, tuanphan said:

    What is access password?

    Access PW is Devon.  Just FYI for anyone interested in achieving this 'look' but don't need it to be functional, I used Carl Johnson's image banner hack from YouTube.  However it would be great to be able to apply a smooth-scroll to the List Carousel layout, with each item being clickable

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