30 January 2013

New Look, Part 1

After tweaking the appearance of open studio a few times in the past, I would always feel the need to keep changing it, never being fully satisfied with the overall look. Recently, I spent some time planning out what I really wanted, looking at other blogs and websites for inspiration, and Googling (lots of Googling!) how to actually implement most of what I wanted to achieve.  Now that it’s completed, I’m very happy with how it all came together.  I’m not promising that I won’t change it in the future, but it’s been a few days and I haven’t been thinking of ways to scrap it and start over like I have in the past.


Categories:
The part of the layout that has bugged me the most was the tabs on the sidebar for the various categories.  Originally, I tried to have the style mimic the header, using the same font with a shadow and reflection, but it seemed to dominate too much of the screen.  



Next I converted the same images to grayscale, hoping that would make it less in-your-face.  



Still not liking it, I decided to stick to my minimal roots and choose a new font (“Labtop” which I downloaded for free from here) on a simple gray background.  So far I have no complaints.



Social Media Icons:
For a while, I have wanted to add icons providing you direct access to follow open studio on an RSS feed and on Pinterest, but I could never figure out how to do it.  After Googling some tutorials with no success, it dawned on me that I could just use the same code I use for the Design Love and Colbert’s Corner pages.  My biggest problem had been getting the clickable images to sit next to one another, which is exactly what I do for the recap images on the DL and CC pages (which I am now fully caught up on, for those of you wondering!)



Here’s how I made my RSS, Email, and Pinterest icons:
Step 1: Upload the images you will be using for your icons to a public photo sharing site. Since my blog is on Blogger, I use Picasa, but I know that Flickr and Photobucket work too.
Step 2: In your Blogger Layout sidebar, click on “Add a Gadget” and select HTML/JavaScript.



Step 3: Copy the code below and paste it into the Content section (leave Title blank).
Since I know nothing about coding except what I find online, forgive me if this is inefficient or “ugly.”  It gets the job done, which for me is all I really need.

(Sorry, I can’t remember where I found this code, it was a long time ago)

<table> <tbody>
<tr>
<td><a href="YOUR LINK HERE" title="YOUR TITLE HERE"><img border="0" height="40" src="YOUR IMAGE URL HERE" width="40" /> </a></td>
<td><a href="mailto:YOUR EMAIL ADDRESS HERE" title="YOUR TITLE HERE"><img border="0" height="40" src="YOUR IMAGE URL" width="40" /> </a></td>
</tr>
</tbody></table>

Step 4: Copy your link (either to your RSS feed, Pinterest, Facebook page, whatever it is that you’re linking to) and paste it where it says YOUR LINK HERE, but make sure you keep the quotation marks.  Only replace the text in caps!
Step 5: If you want there to be a title when you hover over the icon, type it in YOUR TITLE HERE.  If you don’t want it to do this, you can delete title="YOUR TITLE HERE", but leave the > bracket!
Step 6: Back in Picasa, right click on your photo and select “Copy Image URL”.  Paste this in the code where it says YOUR IMAGE URL HERE, again making sure to leave the quotation marks.
Step 7: Repeat steps 4-6 for each icon.
Step 8: Email is slightly different because you’re not adding an actual link.  Simply replace YOUR EMAIL ADDRESS HERE with, yep, you guessed it, your email address.
So that line should look like:
<a href="mailto:openstudiodesigns@gmail.com" title="email">

You can play around with how big the icons appear by changing the numbers for height and width.



There are more layout improvements that I want to talk about, but this is a long post already, so I’ll continue discussing this another time.

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...
Pin It button on image hover