Widening in Minima- Week 1

In case you haven't noticed, Minima is just a little bit on the skinny side. It must have been the fad back in 06. We've came a long way, baby!

So here's the code Minima uses. From your Edit HTML page, search for (ctrl+f)  "#outer-wrapper".

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

You'll need to changed the widths, so here's what will be changed:

#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 740px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 250px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Let's give a breakdown on what each of these codes mean:

   #outer wrapper:  It is the main area that holds both your posting area and sidebar area. It does not include the background area.
   #main wrapper: That is the area where your posts appear.
   #sidebar wrapper: your sidebar! of course! :)

And that's it! Experiment with different sizes!
Having problems? Email us at writethegeeks@hotmail.com!

installing a custom image background.

So today, we're going to learn how to do exactly that. This code to CSS, once learned, can be applied just about anywhere, and you'll have endless fun. Whether it be post title hovers, accordion backgrounds, post footers... you name it, you can add a background there, and it will look awesome.

providing it's a good background. 

So. To install a background, we need to use this thing called DIRECT LINK for a photo. see here....

 I use Photobucket to upload photos. I love how fast it loads. I'd recommend that or Imgur. Whatever you do, don't use Flickr- it's not very dependable for direct links. :) 

So. On Photobucket, as illustrated above, when you hover over the photo, that little box pops up. I highlighted the text area for the Direct Link. There's lots of codes there, use the Direct Link. I'm trying to grind that in here. DIRECT LINK. 

Okay. This photo's direct link is this: http://i1236.photobucket.com/albums/ff459/iluvcameras/images17.jpg. 

You'll be using that as your background for this tutorial. Part of it, anyways. 

   This is what code you'll be using. You can search (ctrl+f)  "body." Here's what the codes looks like right before you edit it, in basic Minima. 

/* Use this with templates/template-twocol.html */

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

You'll change it... slightly. You'll add a slight code. Compare!

/* Use this with templates/template-twocol.html */

body {
background:$bgcolor url(
http://i1236.photobucket.com/albums/ff459/iluvcameras/images17.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

As you've noticed, we added the tag for a background image. It's a CSS element. (wanna read more?)
This is the tag:

background:url('your-DIRECT-LINK-here');

Just ignore the $bgcolor part, the image will override the color settings.
This is what it will look like, after you install it.

It's simple. However, just a few stipulations.

This code, it's similar what Template Designer does for you. If you upload a 200x200px sized image, it will repeat it for you. It will either look awesome or awful. IF you have an image that is the normal size for a background, and you don't want it moving, or repeating itself, then you're going to have to add a few other codes. Don't worry, it's not hard.

background-repeat:no-repeat;
background-position:center;

That's just an example. Background-Position can be bottom, top, left, right, top center, bottom center, top right, bottom right, or whatever combination you can come up with. If you do want your background to repeat, just delete that Background-Repeat code. This is what it will look like after adding the above code.

You see? It doesn't repeat itself, and it's smack dab in the center.

Another thing you can do to customize your background - change it from fixed to scroll, or vice versa. If your background is fixed, it will stay in the same place while the rest of your page moves when you scroll down. Otherwise, the default is for both parts to scroll down. Just add this line of code:

background-position:fixed;

or switch out the last word for scroll.

So, step by step.

For an Image Background:

1. Upload your background to an image server- say photobucket.com or imgur.com
2. Find the CSS code background: $bgcolor; under "body". 
3. Copy/Paste the DIRECT LINK into this code, before the semicolon: url('YOUR-DIRECT-LINK-HERE')
4. Click preview. If it suits your fancy, click Save. 
5. Enjoy your new background. :)

If you think this all looks like too many lines of code, here's a hint: you can combine all the background settings into one line.

background: $bgcolor url(directlink.jpg) repeat scroll top center;

Make sense? As always, it never will make full sense until you dive right into it and make sense of it yourself... figuring it out. Keep at it.
Questions? Email us at writethegeeks@hotmail.com.

how to install minima

Hello, world, and welcome to Geek Chic! Over the next few weeks, we'll be teaching you to give your blog a head-to-toe makeover. We want to pull away from Template Designer and get you familiar with that "Edit HTML" button. The easiest way to do this is by using the Minima template - it's the original Blogger design, and the HTML is much simpler than in any of the newer templates, making it even simpler to customize.

The one scary thing about Minima is that you can't use Template Designer for most of it. It won't let you upload background images, add or subtract new columns, or change the widths with a slider. But no worries! You'll learn how to do all this and more the old-fashioned way, straight into your blog template. Who's excited? We are!

If you want to redesign your blog, you might want to start by making a test blog. You can mess up the design on a test blog as much as you want, and it won't matter, because nobody will read it! Let's get started.

First off, if you want to install Minima, you'll get a little frustrated with the new Blogger layout. It's just not as designer-friendly as the old version. To fix this, just click the little gear in the top right corner of your dashboard, and click the link to go back to the old interface.

Now, somewhere near the top right of your dashboard, you should see a link to Create a Blog. Click on it! You can name your blog "test blog" and pick any random URL that you'd like. It doesn't matter.

(click on any image to view larger)

 
It'll ask you to choose a template - but no Minima here! Just select Simple for now.

Why yes, we do want to customize how our blog looks!
That link takes us back to Template Designer, but what we really want to do is click Back to Blogger and start editing that HTML code.

On the Edit HTML page, scroll down to the bottom and find the Old Templates section. Click "Select Layout Template."

(in case you were wondering, the classic template is Minima without the option to add and edit widgets. scary!)

Select the first template, Minima, and click Save.

And you're done! You can mess around in Template Designer a little, but you'll find there isn't really much to do.

Stay tuned for tutorials on how to start customizing your new Minima template!