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

ghostplugins

Circle Member
  • Posts

    521
  • Joined

  • Last visited

  • Days Won

    22

Posts posted by ghostplugins

  1. Hey @nowicluk! This is definitely possible. 

    Try bolding the * and then targeting only that character with bold-targeted CSS.

    Something like this should help as it will only target the character that's bold – this being the *. Be sure to update h1 if that is not the header size you are using in your example.

    Targeting the text block's block-id before the CSS will also help in case you bold other headers throughout the site and don't want those affected.

    // GIF Text //
    
    h1 strong {
      background: url(GIF-URL-HERE.gif) !important;
      background-size: cover !important;
      background-position: center !important;
      -webkit-background-clip: text !important;
      color: transparent !important;
      }

    Hope this helps! 👻

  2. @aurevoir_blu Menu overlay is going to be mobile menu's background color. You're going to want to look for "Section Background". Screenshot attached.

    I did do a quick inspect and it looks like Squarespace now applies the "active" behavior to all of the pages in the folder since you're active within th e folder's content. I'll share this with my team in case there is room for adding additional notes or code to the free plugin.

    In the meantime, you can use this additional CSS if you want to target the folder color specifically so it doesn't apply the site styles "Section Background" color universally.

    // Folder Menu Color //
    
    .header .header-nav .header-nav-item--folder .header-nav-folder-content {
      background-color: #82ca9c !important;
    }

     

    Screen Shot 2021-03-08 at 5.38.26 PM.png

  3. @aurevoir_blu We weren't able to view your website since it's set to private, but be happy to jump in!

    We tested the exact code above and didn't experience any issues, so please check your color palette settings. The color background set for the header's color palette will also apply itself to the folder's color. So if the background is set to white and the folder links are set to white, you won't see anything.

    Below is a screenshot of what we are seeing in our test. The code above wouldn't affect the folder's color in anyway, so again, please check color palette settings. Sound be an easy adjustment! 👍

    Screen Shot 2021-03-08 at 4.33.18 PM.png

  4. @lvarnau Please double check your header code injection to make sure the code was copy/pasted over correctly without any errors or characters missing. This usually only happens if something isn't copied over all the way.

    Below is how it should look in your code injection. The text you are seeing should be grey'd out and is only used to help identify the code and keep things labeled in code injection. Shouldn't be showing at the top of the page.

    If you're still having trouble, reach out to our friendly help team. We're always happy to help! 😃

    Screen Shot 2021-03-04 at 4.01.24 PM.png

  5. Hey @aurevoir_blu! These boxes in Hidray are markdown blocks with some additional code in both the block itself and CSS. We'd be happy to share how we did it! 👍

    Step 1: Add a markdown block and paste in the code below. Replace the ICON-URL-HERE with the URL of your own icon. We recommend hosting the file in CSS > Manage Files. This will generate a direct URL you can copy/paste in. Then add in your title text (it's set to h3, but you can change to h1 or h2) and then your body text below.

    <center>
    <img src="ICON-URL-HERE.png" style="width: 60px">
    
    <h3>Title Text Here.</h3>
    
    Description text here.</center>

    Step 2: Add the following code in CSS. You can adjust the background, margin, padding, and color values to your liking. There is additional code that targets font color and turns a link inside the markdown block into a button. You can adjust the padding, margin top, background color, font size, and color values to your liking in these targets as well.

    // Markdown Block Style //
    
    .sqs-block-markdown .sqs-block-content {
      background: #0554ff;
      color: #FFFFFF !important;
      margin: 10px;
      padding: 20px 25px !important;
    }
    
    // Markdown Block Font Color //
    
    .sqs-block-markdown .sqs-block-content h1, .sqs-block-markdown .sqs-block-content h2, .sqs-block-markdown .sqs-block-content h3 {
      color: #FFFFFF !important;
    }
    
    // Markdown Block Button Style //
    
    .sqs-block-markdown .sqs-block-content a {
        display: inline-block;
        padding: 10px 40px !important;
        margin-top: 10px !important;
        background-color: #000000;
        font-size: 16px;
        text-transform: none;
        color: #FFFFFF !important;
    }
    
    .sqs-block-markdown .sqs-block-content:hover a {
        background-color: #000000;
        color: #FFFFFF;
    }

    Hopefully, this guides you in the right direction! 😃 👻

  6. Hi @Claire_auck 👋!

    You can set the height for all summary items to be the same with this CSS. Adjust to your liking.

    .sqs-block-summary-v2 .summary-item {
      height: 200px;
    }

    And to target just one page, add the code the page's advanced > header code injection. Add the code between <style>(paste code here)</style>.

    Here is an example of that.

    <style>.sqs-block-summary-v2 .summary-item {
      min-height: 200px;
      border-top: 5px solid black;
      background-color: #ffffff;
      border-radius: 10px 10px;
      }</style>

    Hope this helps! 👻

  7. Thanks, @paul2009! Not sure why it won't let you see it @DiViNCi, but I'll report here. 😄

    You can’t really change the Survey Options, but I was able to mess around with some css and found a great work around using the Radio option. I’ll outline the steps below.

    1. Add a radio field to the form.

    2015267860_ScreenShot2019-01-03at8_18_49AM.png.fa3984a4a21985b4ce45b000b199fe56.png.230f94f14b3cb5ab6bc3a725914b8cc5.png

    2. Add the info and what options you’d like to use.

    837212435_ScreenShot2019-01-03at8_18_55AM.png.314c2ebcf0b591e65f7d706f40f7e50a.png.1048f09d523d73554be128afcbc6fc8a.png

    3. Save the page and then add this code to the custom css editor box. This will place the radio buttons next to each other, just like the survey.

    .form-wrapper .field-list .field .option {width: 20%;float: left;text-align: left;margin-bottom: 30px;}

    4. The result:

    965427676_ScreenShot2019-01-03at8_18_16AM.png.6e1989de7756fb500b58d9d8bbcf5cd1.png.36daa77623ed1d6be70afb3100af290b.png

    I hope this helps! 😄

    Cody
    moovlabs.com | ghostplugins.com

×
×
  • Create New...