Drag, Drop, Insert and Row

If you're moving content around in Squarespace 6, you may get a little confused/frustrated. We've probably all been there, and here's one tip that will probably help you.

I will go into greater detail on the Content Editor soon, because there's actually some important milestones (AHA-MOMENTS) to learn before arriving at this one.

But here you go— here's the short video:

Using a Squarespace Menu Block for FAQ's

I've used the V6 Menu Block quite frequently when building restaurant sites, and found it fairly easy to style (using custom CSS) and quite easy for the end-user to manage the restaurant menu's content.

See Squarespace Support's documentation on USING THE MENU BLOCK.

It occured to me today that an inline menu system would be beneficial for FAQ's— a way for a visitor to quickly navigate to particular content without leaving the page (or getting lost). This is certainly typical to what I've used out in the world.

Offsite design-pattern examples: [1 2 3]

So, it's quite simple to add a (restaurant) menu block, and just add your Categories, Questions and Answers.

Using the built-in formatting options is quite simple. It's all documented within the block component as well.

With a little code-inspection and some quick custom CSS, you can make the menu appear the way you want it to. In this example, I've only changed the navigation text into "buttons":

/* FAQ */

.menu-selector {
  text-align: left !important;
}

#navbuttontop {
  background-image: none !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  -webkit-border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  text-transform: uppercase;
  color: #fff;
  background-color: #000 !important;
  padding: 6px 20px;
  color: #fff !important;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 6px;
}

(screenshot)

Applying a little custom styling to taste. (YES, A RESTAURANT MENU PUN)

Adding Author Photos to Blogs in Squarespace

It's been possible for a while to add "author photos" to posts, but it's a little confusing exactly HOW to do this. In-fact, Squarespace has a helpful page that gets you started in the right direction: journal.squarespace.com/style-by-author ... but they only get you part of the way there. This is because there are so many different ways to configure a blog/journal; EVERY site is different. 

If you're a code detective, you can get to the bottom of this mystery, but it's not easy without a little sweaty sleuthing. :) 

On a recent client project, I had to re-discover how to do this all over again, as it was about 5 months since I had done it last, so it was a little foggy to me. (see Fruition Partners' blog that I built several months back)

I decided to record a screencast to walk you through this, because it's so much easier to just show you.

Special thanks to Wistia and Courseload.

Top 4 Tips for copying and pasting content in a CMS like Squarespace

It's not an issue that's limited to only Content Management Systems. It actually seems to happen all the time anymore— this being the problem of copying content from one source, and pasting it somewhere else. Depending on many variables (operating system, the application you're using and apparently how the wind blows), copying from a particular source will sometimes carry all of the original formatting into the clipboard, and when pasting, all of that formatting will follow. 

In the dark ages when I was working on a PC, I don't remeber it happening as much as I see it happening on the Mac, but I do remember using Windows Notepad (app) all the time to clear formatting.

I work with clients all the time who seem to have issues with this, and many of them aren't aware of it.

In-fact, if you search the Squarespace forums for "<div id="_mcePaste">", you'll see that you're not alone with your pasting problems.

Squarespace Tip

If you paste anything in Squarespace's WYSIWYG edit window, and as you're typing a "New Paragraph"— if your cursor only drops-down to the next line, the same way that pressing COMMAND + RETURN will do (adding a line break, or a "<br />"), then chances are you're adding NEW DIVS ON EACH LINE. This happens when you've pasted content with a DIV, and you're actually typing within that same format, carrying it forward throughout the whole document.

This sounds trivial, but cleaning-up an entire page of messed-up content in Squarespace's HTML editor, or any HTML editor for that matter, is not a fun task. Especially when you have to remove line after line of divs, replacing them with <p> Paragraph tags instead. This is a nightmare.

I'm going to attack this from the Mac perspective, mainly because I'M A DESIGNER. We're supposed to all have Macs. (here come the comments...)

Here are FOUR tips to help you with your pasting issues:

1. Mop-up That Mess

Manually clean-up the messed-up content. OH— I just covered this, but that's one that certainly works.

2. Go Pro

Use an HTML Editor. When copying from any source, and you paste-into an HTML editor (also Squarespace's editor— in RAW HTML mode), all that will paste will be ASCII text. In-fact, it will probably be one big lump of text with all breaks and styling completely removed. Have no fear! You can either manually add Paragraph and Heading tags within the code, or switch to the editor's WYSIWYG mode, and blast through re-formatting this lump of lifeless text into what you intended it to be. 

3. Become a Clipboard Karatist

On Mac OS X, I've learned to use the "Paste and Match Style" method, which means the clipboard contents will always take-on the style of what's in-place when pasted. This works well in Squarespace (and apps like Gmail! It's imperative, especially if you build emails from 23 various links and references— MUCH LIKE THIS VERY POST!). I've learned to use the "Four-Finger-Salute" every time I paste. Yes, it takes FOUR KEYS to do this: Command + Option + Shift + V —which won't bring you into the realm of the Content Ninja, but after you learn this method you'll most-certainly become a Clipboard Karatist. (BTW: this doesn't work in Google Docs, and it angers me so.)

More information on the Paste and Match "Crane-Style" technique: http://thaweesak.com/2009/06/15/setting-paste-and-match-style-as-default/

"Get Plain Text" app (from Alice Development)

4. An App for That

Recently, I went searching for an app solution to this Clipboard headache, and I found one! There's an app in the Mac App Store called "Get Plain Text" (from Alice Development) that strips formatting/styles from clipboard text. And yes— it works! I have to admit, I found within a few days that my ability to take screenshots on my Mac stopped altogether from installing this app. I (quite publicly) complained to the developer, and as it turns-out, what I was doing was literally clearing my clipboard immediately when taking a screenshot, by selecting the "Automatically Clear Formatting" option. So there it is— a public endorsement and apology in the same post.

Grab "Get Plain Text" from the App Store.

Quick Tip: Login, Log-on, Sign-in, Sign-on —Which is right?

In my last post, I mentioned a few Member Login tips, and when typing the word Login, I cringe a little. This is because in all my years of web content management (aka being a Webmaster) every organization used a different term.

Here's a content management tip that I've used for years.

When you don't know something, you ask a friend, right? But what about comparing web content terms? You ask Google. It's really true you want to find-out what "the world" thinks, and since Google knows everything, they have to be the best source.

Enter GOOGLEFIGHT.COM

At googlefight.com, you can compare the popularity of anything by waging a battle: MAC -vs- PC, Leno -vs- Conan even web content terms like Login -vs- Logon.

When in-doubt, pick a fight!