Jump to content

mathildenicoline

Circle Member
  • Posts

    33
  • Joined

  • Last visited

Posts posted by mathildenicoline

  1. 1 hour ago, TheSquareSpacer said:

    @mathildenicoline Use this code to make it better.

    Go to Design > Custom CSS > Paste the Code
    .header-layout-nav-center .header-nav {
        width: 54%;
        text-align: center;
        flex: 1 1 54%;
    }
    .header-layout-nav-center .header-title {
        width: 23%;
        flex: 1 1 23%;
    }
    .header-layout-nav-center .header-actions {
        width: 23%;
    }

    Thank you so much, this did the trick!

  2. 4 hours ago, mathildenicoline said:

    Ok! I fixed my own problem, I had to paste it to the footer and not header code injection 🙈

    But! I have a new problem of course. The text appears on top of the pictures, any way to either move the text down or the image up? Tried to add some margin to the code, but I dont know enough. 

    Any thoughts? @tuanphan

    (I added a transparent background to the text just for now)

     

    Skjermbilde 2021-04-20 kl. 15.43.08.png

    Now I am just talking to myself, found the solution from TuanPhan himself here: 

     

  3. On 4/19/2021 at 11:17 AM, mathildenicoline said:

    Hi @tuanphan

    I have the same issue, can you help me??

    Site https://radish-poodle-5ftl.squarespace.com/is-this-my-habitat

    Password: pandele

    Have this code from before, but it does not work?

    
    
    <style>
      .lightbox-caption {
        display: block;
        z-index: 9999;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: white;
        font-family: europa;
      }
    </style>
    <script>
      $(document).ready(function(){
        $('.gallery-lightbox-item-img').each(function(){
        var alt = $(this).find('img').attr('alt');
        $(this).append('<div class="lightbox-caption">' + alt + '</div>');
        });
    });
    </script>

     

    Ok! I fixed my own problem, I had to paste it to the footer and not header code injection 🙈

    But! I have a new problem of course. The text appears on top of the pictures, any way to either move the text down or the image up? Tried to add some margin to the code, but I dont know enough. 

    Any thoughts? @tuanphan

    (I added a transparent background to the text just for now)

     

     

  4. On 3/29/2021 at 2:45 AM, tuanphan said:

    Hi. This will require Business Plan + script code. Can you share link to your site?

    Hi @tuanphan

    I have the same issue, can you help me??

    Site https://radish-poodle-5ftl.squarespace.com/is-this-my-habitat

    Password: pandele

    Have this code from before, but it does not work?

    <style>
      .lightbox-caption {
        display: block;
        z-index: 9999;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: white;
        font-family: europa;
      }
    </style>
    <script>
      $(document).ready(function(){
        $('.gallery-lightbox-item-img').each(function(){
        var alt = $(this).find('img').attr('alt');
        $(this).append('<div class="lightbox-caption">' + alt + '</div>');
        });
    });
    </script>

     

  5. On 6/17/2020 at 7:38 PM, RyanDejaegher said:

    @Ben_Keeley 

    You can use this code. You can change the last value (0.5) between 0 - 1, to adjust how transparent the color is. BTW is this your company? If so super cool 🙂

    
    /* Add this code to Design -> Custom CSS */
    
    #header {
    background: rgba(0,0,0,0.5);
    }

     

    Is there any solution for making this a custom color, and not black?

  6. On 1/10/2021 at 2:57 AM, creedon said:

    Please folks. It would help if you posted your site URLs and the relevant section(s) of the error report. Without that info we have no chance of seeing what the problem might be.

    I have this problem as well! 

    My url is www.mathildenicolinebergersen.com 

    See screenshot for error-message. Not sure if it says the error is in line 3397, also not sure how to find this "line"?

     

    Skjermbilde 2021-02-16 kl. 16.08.48.png

  7. 23 hours ago, tuanphan said:

    Add to Design > Custom CSS

    
    
    .blog-basic-grid.collection-content-wrapper {
        padding-top: 10px;
    }

     

    Sorry, but this did nothing. Maybe because I have the other code??

    https://lizard-lily-axxj.squarespace.com/gallery/thekingsoaks - here is direct link to where I want the changes to be - password: heggholmenfyr

    This is the code that is already there to remove title and move metadata to beneath the content

    .blog-item-wrapper .blog-item-inner-wrapper {
        display: flex;
        flex-direction: column;
    }
    /* title */
    .blog-item-top-wrapper {
        order: 2;
    }
    /* image */
    .blog-item-content-wrapper {
        order: 1;
      padding-top: 10px;
    }
    
    article .entry-title {
        display: none;}

     

  8. Site URL: https://lizard-lily-axxj.squarespace.com/gallery

    Working with a page with a narrow design, I find there is just to much padding on 7.1. Know how to reduce this vertically and in sections, but can't find the option on blog posts.

    First: Too much padding between the menu and the photo. 

    Then too much padding both between categories and text (blog content) and categories and the footer / next blog post arrow.

    How to reduce this?

    Ps: I have a css removing the title and moving the metadata below the blog content.

    https://lizard-lily-axxj.squarespace.com/gallery (please open a blog post) - password: heggholmenfyr

    Skjermbilde 2021-02-02 kl. 12.47.30.png

    Skjermbilde 2021-02-02 kl. 12.47.36.png

  9. Site URL: https://orchid-piano-9tpj.squarespace.com/ragnaroken

    I have searched but not found the correct code. I want captions to appear on hover in the gallery - this I have found a code for.

    I also want captions to appear when the image is opened in lightbox - this I can't find a code that does the trick. I want this on all pages.

    This is the code I have for hover in galleries

    figure.gallery-strips-item {
        position: relative;
    }
    .gallery-caption {
        position: static;
    }
    /* title */
    .gallery-caption-content {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
        padding: 7%;
        transition: opacity ease 200ms !important;
        opacity: 0 !important;
    pointer-events: none;
    }
    .gallery-strips-item:hover .gallery-caption-content {
        opacity: 1 !important;
    }
    /* overlay */
    .gallery-strips-item-wrapper a:after {
        background: #000000; /* overlay color */
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        transition: opacity ease 200ms !important;
    }
    .gallery-strips-item:hover .gallery-strips-item-wrapper a:after {
        opacity: 0.75;
    }
    /* remove gap */
    figcaption {
        padding: 0 !important;
    }

     

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