Create Sticky Pagination Links with Vertical Text on the Sides of Your Squarespace Blog

In this blog post, we'll show you how to create sticky pagination links with vertical text on the right and left sides of your blog. This design is perfect for those who want to add a unique and modern touch to their website's navigation.

Here’s how the code was generated, using chatGPT.

/* Variables */
:root {
    --pagination-width: 50px;
    --link-color: #245959;
    --hover-background-color: rgba(0, 0, 0, 0.1);
}

/* Pagination links */
.collection-type-blog .pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    float: none;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    writing-mode: vertical-rl;
    position: fixed;
}

/* Next and older posts links */
.collection-type-blog .pagination a.next-item, .collection-type-blog .pagination a.older-posts {
    right: 0 !important;
    left: auto !important;
    text-align: center;
    width: var(--pagination-width);
}

/* First child link */
.collection-type-blog .pagination a:first-child {
    left: 0;
    text-align: center;
    width: var(--pagination-width);
}

/* Link colors */
body a, body a:link, body a:visited {
    color: var(--link-color);
}

/* Link hover effect */
.collection-type-blog .pagination a:hover {
    background-color: var(--hover-background-color);
    cursor: pointer;
}

With this CSS code, you can create sticky pagination links with vertical text on the right and left sides of your blog. This unique design adds a modern touch to your website's navigation and enhances the user experience. Simply add the provided CSS code to your website's stylesheet, and you're good to go!

Cómo generar CSS personalizado para Squarespace con ChatGPT

I received a question from one of our customers today about how to make image caption titles appear on hover. I thought this would be a good case study for using ChatGPT to generate CSS on a Squarespace site. Let's dig in.

First, we need to inspect the element. I will isolate the image, and it seems that each of these divs applies to a different image. I will click "Edit as HTML," copy the entire HTML, and paste it here. Now, in my prompt, I will ask ChatGPT to write CSS to make the caption title appear on hover.

To make the caption title appear on hover, we can use CSS. Here's an example of how to achieve this. Let's test it and see if it works. It seems that the image slide title is currently below the image. How can we make it overlay the image? This code might help us achieve that. Let's copy the code and give it a try.

I will paste this in my custom CSS. As you can see, the image title now appears on hover. Let's save that. We might want to change the color of the text and adjust the spacing. To change the font color and size, we can use the following customizations. I will copy that piece and paste it within what we already have here, then hit save.

Now the color is white, and the font size is 20. If we want to make it 30, we can adjust the code accordingly. However, let's bring it back to 20, as that seems good enough.

So, there you have it. This is how you can generate custom CSS for your Squarespace site using ChatGPT. It's quite simple. First, copy your HTML and give a specific command. If the initial command isn't specific enough, go back and provide more clarity. If you have any questions about this process, feel free to leave them in the comments, and I'll be happy to answer them. Peace.

Here’s another example…

You can find the code here.