Photoshop to Squarespace in 30 Minutes

PsToolBox_by_Artdesigner.lv

Oldie but Goodie

While researching the History of Squarespace, I Found this old school tutorial by Tyler Thompson featured in the online Squarespace Manual a few years back. I wasn’t able to locate it on the current SS website, but after shooting off a quick request to SS, they were kind enough to unearth it. I’m featuring it here because it is still very relevant.

Mr. Thompson discusses a few of the concepts that are not intuitive to the otherwise exceptional user interface that squarespace is known for. (eg. negative margins and padding, CSS that is only accessible through the advanced tab in the Style module) It took me over a year to realize there were editable elements not included in the Fonts, Color, & Style editor! Err, yeah, I’m a slow learner icon wink Photoshop to Squarespace in 30 Minutes  photo

The code mentioned in the tutorial is featured below the video. You can also see the finished version of the Squarespace website at http://dantrachtenberg.com/.

Direct Video Links





Code Used in the Video


.verticalNavigationBar .section .module a { display: block; }
/* makes sidebar link border full width of sidebar */

#sidebar2 { color: #fff; margin-top: -175px; }
/* makes tweet column font white and pulls it up to the top of the window */

#twitter_div a { color: #363636; }
/* makes twitter links dark gray */

#twitter_update_list li { border-bottom: 1px solid #a0d8e4; padding-bottom: 15px; margin-bottom: 15px; }
/* adds light white line to the bottom of each tweet and spaces out each tweet */

.journal-entry-float-date { float:left; display:block; background:#000 url(/storage/date-pokies.gif) repeat-x bottom left; border-top: 3px solid #77C7D8; width:53px; height:65px; text-align:center; color:#fff8dd; font-size:16px; margin:0 0 0 0; }
/* adds repeating pattern to pulled date for journals, changes background color and adds border */


References:
Creating a Custom Template (Squarespace help docs)



If you would like to receive other tips and tutorials,  follow Squarespace Plugins via RSS or sign-up for the SSP Monthly Newsletter which will include all the tutorials for the month as well as the latest Squarespace happenings around the net. (Your info will not be shared or sold to anyone)

Squarespace user since 2009. Traveling throughout North America with my first husband and three kids. You can follow our journey at FoggyPhils. (http://www.foggyphils.com)

Got something to say? Go for it!

 
Loading...
Join over 100 folks and get our free monthly SSP Newsletter.
No-Spam Guarantee. Ever.