Tag Archives: css

/// How to customize your “read more” link on squarespace

I’ve got another little snippet of code for all you Squarespace lovers today! This one is for that boring old “Read More” link that appears on a Summary Block. Especially if you are using Squarespace’s Summary Block to showcase your blog posts, the “Read More” link is often a good spot to get your audience to engaged (ie: so that they read more!) with your featured posts.

So how do you take it from boring black text to something that matches your brand? I’ve gotcher back.

 

 

How to customize your read more blog link on squarespace blog

 

There are a few little code changes you can make to jazz up the plain “Read More” to match your branding colors. Here are the steps:

  1. In the main Squarespace menu, click DESIGN. Then CUSTOM CSS.
  2. Copy and paste the following code:

<style>

/*** READ MORE LINK – TEXT ***/

.entry-more-link a:not(.sqs-block-button-element) {

color: #E9AEC4 !important;

}

.entry-more-link a:not(.sqs-block-button-element):hover {

color: #444444 !important;

}

</style>

 

The pink highlighted text is where you can change your colors. Do not edit the grey text. (You can also add this code to an individual page if you don’t want it to affect all “Read More” links on your site).

IMPORTANT ! !

Each template has a different method to define their “Read More” links. Please select the method for your template below, and then replace the red CSS code (.entry-more-link) with your template’s method. (If you’re template isn’t listed below, please try the links below, – many work for more than one template. If none of these work, feel free to email me with your specific template at hello@junemango.com).

Adirondack: .link

Five: .inline-read-more

Fulton: .summary-read-more-link

Horizon: .summary-read-more-link

Peak: .read-more

Mohave: .summary-read-more-link

Marquee: .entry-more-link

And that’s it!! Easy peasy. 

 

If you’d like to do even more customization, I have a full #squarespacehack in the June Mango shop that allows you to add a background color (to make it more like a button), add a border, and make it wider. PLUS! You can use the code GRAM to get 50% off. 

similar-squarespace-hacks-10

sqaurespace-hacks-code-snippets-for-squarespace-image-filters-08-08sqaurespace-hacks-code-snippets-for-squarespace-faq-01sqaurespace-hacks-code-snippets-for-squarespace-custom-pin-it-button-02sqaurespace-hacks-code-snippets-for-squarespace-image-filters-03

 

 

 

 

 

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

/// Web Designer vs. Web Developer: Which Should You Choose?

 

One of the questions I get asked most often is “What is the difference between a web designer and a web developer?”. There are some very clear-cut differences, which I’ll get into below, but truthfully, they can often overlap. I think this is why it can be confusing. But what are the main differences and which should you choose? Read on…

Web Designer vs Web developer-02


WEB DESIGNER

Web designers create and direct all visual aspects of a website including graphics, photos, layout, fonts, color palettes, and interactivity, which can include color changes, mouse rollovers, moving images, etc.

This person usually has the following responsibilities:

  • Researching and designing concepts that are easy to use (user-friendly), beautiful, and engage the audience
  • Designing page layouts and interactions (i.e.: button turns pink when you click it)
  • Working closely with web developers during the process of building the website online 
  • Having an understanding of different audiences and interests with the ability to translate that into an interactive web space
  • Working collaboratively with content creators and copywriters to visually represent their work
  • Bringing a brand to life dynamically through layout, font selection, color palette and interactivity 
  • Overseeing a project’s entire creative process

When looking to hire a web designer, make sure they also have the following skills:

  • Knowledge and interest in current trends in design, both digital and print
  • Ability to to understand the client’s perspectives or problems and come up with ideas that are clear and TKTK
  • Significant comprehension of how HTML, CSS, browsers, and devices all work together 
  • Ability to simplify solutions to problems and solve them through design 
  • A style that jives with your own
  • A strong portfolio of projects that are similar to yours

WEB DEVELOPER

(There are two main types of web developers, front-end or back-end. PRO TIP: If you’re looking to build a website, that’s front-end.)

A web developer is someone who uses HTML, CSS and JavaScript to create a website that a user interacts with directly through their web browser. Basically, they build the ‘front-end’ of the website (vs. the ‘back-end’ of a website which is like what you interact with when you login to a website, like WordPress).

This person usually has the following responsibilities:

  • Translating wireframes or design mock-ups to actual code that will produce visual elements
  • Bridging the gap between graphic design and technical implementation
  • Develop web pages for commercial and content management systems, or CMS platform (like WordPress)
  • Understanding of web development user experience best practices (i.e.: the logo should be at the top of every web page)
  • Having experience with and a deep understanding of web technologies including JavaScript/jQuery, CSS, PHP and HTML5 
  • Developing and implementing responsive websites (i.e.: does it look flawless on your tablet or phone AND your desktop computer?)

When looking to hire a web developer, make sure they also have the following skills:

  • Excellent problem solving skills (PRO TIP: Any good web dev. will tell you the job is about 98% problem solving!)
  • Experience working directly with graphic designers and website design mock-ups
  • If not hiring with a designer, developer should have excellent design and layout skills 

So now you know the difference but your still not sure which you should hire to build your website? This doesn’t necessarily have a clear cut answer because it depends on you and what you’re looking for. The truth is, you usually need both, but you should start the process by talking to a web designer. They often have web developers that they work with directly, and make the process that much easier for you. This way, you get a beautifully designed website that’s user friendly AND meets all the web standards. You could also hire just a web designer if you need help with customizing a theme for WordPress or SquareSpace.

Personally, I use a great group of web developers to help me build my custom WordPress sites, like my podcast site. Otherwise, I typically know enough HTML and CSS to customize a pre-programmed website or theme, like my website. It simply depends on the project.

Hopefully this (long) list of differences will help you choose who’s right for your web project. And if you’re still confused or have more questions, just holla at me! I’m always happy to chat. :)