Custom CSS for Menu/Recipe Design

Squarespace For Food Bloggers | Custom CSS for Recipes

This is the post that many of you have been waiting for! Squarespace is definitely a winner when it comes to easy website or blog set up with the least amount of headaches. Wordpress the big-hitter in the world of sites and design, is especially more popular for food bloggers for a few reasons. One of those is design of recipes. This option works best for those who are going to be focusing on digital, as they work great for mobile devices, but don't necessarily print well. We will get to that another day.

A way to design your menus in css for your squarespace blog. Even for blogs that want something simple, these little css edits help define the area for the recipe instead of it being part of a bigger text block. Since many don't print recipes anymore this is your best bet.

  1. Start choosing one of the Custom CSS Codes from below.
  2. Open up the custom CSS dialog via Design > Custom CSS
  3. Enter CSS provided. Edit to your liking.


Examples of edits:

Grab the hex code from your color in the style guide editor and use that. Change the size of the font, the border colors etc.



Now that you have five different design options for your custom css menu blocks, make sure you check out the post below to find out more about HOW to use a custom Menu Block, or CONTACT ME to help you design your own for your shop!