Category Archives: Web Design

/// Changing the Color of Social Media Icons in SquareSpace

So you’ve created your brand-spankin’ new SquareSpace website and styled it perfectly to match your brand with font pairings, gorgeous colors and a lovely layout. BUT, you can’t get those pesky social media icons to match your pretty palette. Don’t worry! I’ve gotcher back.

Change-SquareSpace-Social-Media-Icon-Colors-June-Mango-05

 

There’s a tiny string of code that you can use to change the SquareSpace social media icons from black and blah to any color you want! Follow the steps below on your own site and voila, styled social icons!

Here are the deets:

  1. In the backend of your SquareSpace site, navigate to DESIGN.
  2. Click on CUSTOM CSS.
  3. Paste in this bit of code:
    1. .sqs-use--icon {
          fill: #F65959 !important;
      }
      .sqs-svg-icon--wrapper:hover {
        .sqs-use--icon {
          fill: #444 !important;
      }
      }
  4. The red HEX color is what you’ll need to change to match your own color palette. If your not sure what HEX your color is, check out this handy converter.
  5. That’s it! You’re set.

Don’t you feel like a SquareSpace genius?!

 

Note: This set of code works for the “Regular” style of icons. 

/// How to Use & Abuse Grids for Web Design

 

Every website is designed using a grid. This is so helpful when you are thinking about layout and placement of content. If you’re just starting out in web design, or are DIY-ing your site, this is basically the number one rule to keep in mind. JUST FOLLOW THE GRID.

But! You can also use the grid to your advantage to create unique layouts. A little design secret is that any good design is probably breaking a rule. Not ALL the rules, because otherwise, things get a little confusing. But breaking a rule here and there allows you to create something that catches your eye. And eye-catching design is noteworthy. And noteworthy sites are remembered. You see where I’m going with this, right?? :)

 

grid web design

 

So using the website above as an example, you can see that there is a grid as a guide, but the elements in the layout don’t all fit perfectly within the rules of the grid. Some elements are perfectly centered, like the mission statement at the top and the newsletter opt-in at the bottom.

Other elements use the grid, but in unexpected ways, like the “Next Step” graphic and text. While the white space that holds the text is along the line of the grid, the pattern that encompasses the white space + text is above the line of the grid. But you’ll also notice that the black pattern does follow the rules of the grid from left to right and fits nice and snug into the right-hand side of the site. The images on the left do the same thing. They break the grid vertically, but fit centered from left to right.

So you can see that this website breaks the rules a little, but each element still follows the grid in another way, which keeps it clean and cohesive, but also a little interesting and eye-catching.

If you want to take a look through the full website used in this example to see how I carried this organized rule-breaking throughout the rest of the site, head on over this-a-way! For even more web design craziness, check out this, this, and this site. 

 

 

/// 4 Ways to use SquareSpace cover pages

Have you heard of SquareSpace cover pages? These unique and versatile web pages are great way to add a bit of flair to your creative endeavors. Below are four unique ways to utilize these cover pages to make a powerful introduction.

4 ways to use squarespace cover pages-05

 

  1. Collecting email addresses.  Whether your website is under construction (or not yet begun!), you’re about to launch something new, or you just want to grow your email list, a SquareSpace cover page is the perfect solution.
  2. Promoting anything.  If you’re launching a new product, podcast, or course, cover pages allow you to present and promote before people move on into your regular website.
  3. Sell something.  Cover pages can be a free, high-converting landing page for a digital product or service. Send people to your sales page or create the opt-in directly on the cover page.
  4. Elevate your homepage.  Cover pages can be a great pause for people before entering your site. By using a cover page as your homepage, you can also be very specific about where you send people on your website.

These are just a few options but I’d love to hear more! Comment below or holla at me if you’ve used SquareSpace cover pages in a unique way!

 

/// How to remove the date from your SquareSpace blog posts

SquareSpace is so great for it’s Drag and Drop abilities, but once in a while, SquareSpace gets a little stubborn and won’t let you change the simplest things. One of those things is your blog post publish date.

How to remove date from squarespace blog

 

If you would like to remove the blog date and time from SquareSpace, there is an easy bit of CSS code you can use to make it work. The catch is that you have to do a bit of research first. I’ve listed the steps below, which are super simple, but they work best if you’re working within a Chrome browser.

How to remove the date from your SquareSpace blog posts:

  1. First, move your cursor over the date on your blog and right click.
  2. Click “Inspector”. This should bring up all the code from your SquareSpace site.
  3. Find the “Class” that contains the date. The “class” name should look something like this: <time class=”thisisthenameoftheclass“>March 31, 2016</time>
  4. Copy and paste the class name into your Custom CSS. To get here, go to DESIGN -> CUSTOM CSS and paste in the code below. (Make sure you change .insertclass to the name of your class from Step #3).
.insertclass {
display: none;
}

 

And that’s it! You should now have hidden all the dates from showing on your SquareSpace blog.

Have more SquareSpace questions? Holla at me!

Popular Posts