Wednesday, March 28, 2012

letter spacing- a favorite CSS element of mine...

Hi y'all! Yep, We're actually posting here. :)
   Tonight, I'm covering letter spacing. It's a very unique way to style text.

First of all, you'll write it like this: 

letter-spacing:1px;
Of course, you can edit the 1px part any way you would like! Letter Spacing can be positive or negative- meaning you can say that letter spacing can be 3px or -3px. Be careful using negative- a little goes a long way. Also, too much letter spacing makes a blog hard to read. But it makes an interesting effect when applied to post title hovers, links, and over-all text.

Here are some examples:
letter-spacing: 4px;

letter-spacing: -2px;

You can insert this under any code in your template that specifies text style (example: place it under h3 to give your post-titles letter spacing).

Here's a few sites that used this effect!
Jamie Delaine Blog- her over-all text has letter spacing- more than usual, but just enough.
Discover Life Designs - I used a negative letter spacing on my accordion hover.

This is such a simple element, but it's so much fun. I truly enjoy this one! :) 

Friday, March 2, 2012

three annoying things about minima + how to fix them

---
The Minima template is pretty simple and, as we've said before, perfect for designing, but it has a few minor flaws that you might want to get rid of before you start.

1. header borders.
We know - those pesky double lines around your header can get a little annoying. Here's how to get rid of them.

Search for the code #header-wrapper again. You'll find three sections of code in the same vicinity:
#header-wrapper {
    width:1000px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
}

#header-inner {
    background-position: center;
    margin-left: auto;
    margin-right: auto;
}

#header {
    margin: 5px;
    border: 1px solid $bordercolor;
    text-align: center;
    color:$pagetitlecolor;
}

See those lines in red? Delete them. Or, you can simply change the number 1 to the number 0. Presto, the borders disappear!

2. uppercase.
One of the other things that bothers people about Minima is all the uppercase letters - do you see them? They're in the header, the dates, the sidebar titles... everywhere. It's perfectly fine to leave your blog this way if you like it, but if you don't, here's how to get rid of it. Search for
text-transform:uppercase;
in your template. We found it 8 times in our Minima template. Now, wherever you want to get rid of the uppercase letters? Delete that line. Piece of cake!

3. post title hover.
An easy way to tell if a fellow blogger has Minima installed is by hovering over the area around their post titles. If the color changes even when your mouse is not directly over the text, chances are it's due to a funny little quirk in the Minima template. Don't like it? Here's how to fix it. Search for
.post h3 a {
in your template. Look at the code underneath it:
.post h3 a, .post h3 a:visited, .post h3 strong {
    display:block;
    text-decoration:none;
    color:$titlecolor;
    font-weight:normal;

Delete the line in red. See? It's so quick and easy, we wonder why nobody else seems to do it. Well, now you know!