Increasing Header Width in the Rally Squarespace Template

How to Increase Header Width in the Rally Squarespace Template

I've been intrigued with the debate over using WordPress vs. Squarespace for blogs and decided to look into it myself. I've built and maintained blogs in WordPress in the past, so I decided to play around with a blog site in Squarespace. There are a few more limitations in Squarespace, and I'm still learning my way around, but so far it's easy and fun. My blog site, Simple Tips, is built on the Rally theme and I've made a few tweaks to the Rally template using Custom CSS.  One small change with a big impact is to increase the header width, so that my logo and navigation move further out to the sides of the site. You can see the difference here:

 Default Spacing of Rally Header

Default Spacing of Rally Header

 Rally Header after Custom CSS

Rally Header after Custom CSS

How to Increase Header Width in the Rally template

It really is just a simple line of code, added to Design > Custom CSS. Feel free to play around with the padding until you get the look you want. The default Rally theme has both left and right inner header padding set to 180px, but I like the look much better reduced to 80px on each side.

/* Increase width of Rally header */
.Header-inner {
    padding-left: 80px;
    padding-right: 80px;
}

I'd love to hear if this tip helped you out!

Styling Bedford Blog Posts in Squarespace

styling bedford blog posts in squarespace

My site uses the Bedford Squarespace template which is a great fit for my style and content. But there are a few features that don't work for me. Chief among these is the banner image on individual blog posts. For Bedford, and a few other themes, when you view a blog post at its direct URL, its post thumbnail image displays as a banner.

Because I use text on my thumbnail images, it ends up looking like the website equivalent of a dumpster fire:

what-not-to-do-bedford-blog.png

So, two options. First would be to hide the blog title. Easy enough, but I like having searchable text as my title. The second option that I settled on adds a line of code in Design > Custom CSS that hides the banner image.

/* don't show thumbnail as banner image behind blog post title (hard to read) */
.collection-type-blog .banner-thumbnail-wrapper {display: none !important;} .collection-type-blog .entry-title {display: block !important;}

And now my blog posts look like this:

better-bedford-image-blog-squarepace.png

Big improvement.

Hope this tip helps you!

Styling PayPal Buttons in Squarespace

Styling PayPal Buttons in Squarespace

I recently added a Membership option for my clients, to allow me to stay on retainer for small updates to their Squarespace websites. I wanted to set a recurring payment, but unfortunately Squarespace doesn't offer a built-in option. Their suggestion is to use MoonClerk which looks like a lovely solution, except that their lowest price point is $15/month. Which seems much too high for my small volume.

I decided to use my PayPal account and create a custom Subscription button. That's pretty easy to do, following PayPal's guide to Create an Automatic Billing Button. But the drawback is that the button on your site looks like this...