/// 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. 

 

 

/// Breaking the boundaries of Mood Board mosaics

 

I think all designers have a touch of Creative ADD. All of my favorite designers are constantly changing and pushing their brands + the creative processes to be better, cooler, or more unique.

I have this ADD too, and recently I’ve been itching to bust out of the standard mood board mosaic design. It’s just EVERYWHERE, and frankly, I’m bored.  And here’s a little secret: boredom = creativity’s best friend. Being bored makes me want to shake it up! Create something new and funky! Get weird and wild! Design-wise, that is. :)

So here’s where I ended up on a the new make-up of my mood boards.

Courageous Feats Mood Board 00

 

 

Totally deconstructed. More white space, more breathing room. More color blocks, but all integrated into the collage vs. being stacked together. Still a brand-focused lifestyle image at the center grounding the collage as well as the brand. And little, layered type elements.

 

Jill Lee Life Coach Mood Board 00 Jane O. Coaching Mood Board 00

 

I think mood board collages + color are my love language. ❤️

So what do you think? Love it? Hate it? Wanna live in it (I do!!). I’d love to hear your thoughts on the new mood board so feel free to holla at me!

/// How To DIY Your Brand

 

diy design your brand e-course

Does this sound familiar?

  • You’re ready to launch your kickass, creative biz but you feel overwhelmed by the wide world of branding.
  • You took one look at that pro designer’s price list and felt like you’d never be able to have a badass brand.
  • You’ve got this idea, but you don’t have the design background to bring it to life.
  • You feel like you’re creative, but just a need a little guidance to get where you want to go.

I know so many creative ladies who are starting a business but feel so held back by their branding and logo design. They get so excited about launching their business, only to feel discouraged when they can’t afford to hire a pro designer or achieve that customized style they’re looking for. If you’re out there bringing your unique expertise, you deserve to look the part.

 

IT’S MY MISSION TO MAKE BRANDING LESS INTIMIDATING AND MORE ACCESSIBLE.

 

After designing brands for tons of small businesses and boss ladies, I’ve created a course that gives you the chance to create your own logo & brand identity using my ACTUAL design process, from start to finish. With the knowledge of a legit branding design expert at a price you can afford, you can start killing it with your business by creating your own DIY logo and brand identity.

For this course, I’ll walk you through the 5 steps to create your own DIY logo and brand identity. By the end of the course,  you’ll have created your very own custom brand. 

diy design your brand e-course

WHAT YOU GET:

  • Content-rich lessons with in-depth worksheets over the course of 4 weeks
  • Templates to help you create a mood board, color palette, logo, submark and final Brand Style Board
  • 1 year of unlimited access to the lessons, templates and bonus files
  • Over 200 design elements to help you build your custom logo
  • And a private Facebook group to share work, get feedback and make connections

 

IF YOU WANT TO START KILLING IT IN YOUR BUSINESS BY CREATING YOUR OWN DIY LOGO AND BRAND IDENTITY, I’VE GOTCHER BACK.

 

diy design your brand e-course - enroll now-11