Thursday, August 07, 2008

Breathing room.....

Ahhhhhhhhhhhhhhhhhhhh....................

At long last, I've finally wrestled my blog out into the wider format I've always wanted for it. 

It always bugged me, that narrow column with all the blank space on both sides... especially when you tend to write in depth like I do (not your typical newsflash/soundbyte blogger). It took some doin, let me tell you! I grappled with it half the night.... mostly just trying to get the post titles and those little time/date stamps centered... it looked really wrong with those pushed all the way over on the left. 

So now my pics are a bit lost in all the space... they're mostly 400 pixels wide in what's now a 640 pixel space. 

And if you look at any of the older pages, they're not centered either.... I have to take care of that on a post-by-post basis. So I just did the front page. But from here on out they'll all be centered, and I'll be able to start posting them BIGGER!!!

Anyway, this is just a heads up... oh, and I'll be making a new blog banner soon to fit as well. I've been wanting to do THAT for some time now too, since not only do the colors no longer match my new black format, but I know a lot more about using the Lumix now too... that one was from when it was brand new. 

***

I've had some requests to explain how I accomplished this. Well, like I said, there was a lot of wrestling.... I had to keep trying, met with failures, partial successes, and things in between until finally it all added up. As a result I couldn't give a clear, straightforward tutorial of how to do this, but here are the major steps. 

My inspiration came from seeing Rich Johnson's blog.


He has the wider format like I want. So I took a gander at his source. To do that, control click anywhere on the background of a page (not on a link or picture) and select "view source". This shows you the HTML document that creates his blog. I looked at it and compared it to mine. What I noticed is that in the Header section his width was set to 660 pixels, while mine was set to 400. I made that change in my Template (first viewing my own page source and saving a copy of it, in case I screwed up so bad I needed to go back). It did increase the width of the main column, but the sidebar got pushed down under everything. To fix that I had to increase the overall width to 900 pixels... don't remember where I did that, and scanning through my template now I don't see it, but it's there somewhere. 

That was basically it, but then I had to figure out how to center the titles and date/time stamps. That was the tricky part. I finally figured out I needed to add a couple of "text-align:center;" tags into the header and body sections. If you look through my source you should be able to find them. If this is all gibberish to you, then I wouldn't recommend trying it! Definitely learn the basics of HTML code before attempting anything like this... a little googling will turn up endless sites where you can learn it. And when you're making changes in your blog template, make them one at a time so you always have the option to click the "clear edits" button... sometimes you can't remember what you've changed to change it back!!! 

8 comments:

rich johnson said...

looks great strider! I had to do the same on mine. It's not an easy task! Even if you know xhtml inside and out. Can't wait ot see the bigger pics!

FleaCircusDirector said...

The web is not A4!

Do you want to write an "off topic" article on how you do that? I'd love to know.

Shelley Noble said...

That early Lumix shot looks amazing as it is, Mike!

Nice site re-do.

grant said...

darkmatters: the widescreen edition.
8-)

i like your puppet head banner (is that what shelley was referring to as well?).

Darkstrider said...

Yeah, the photo itself looks good, though it lacks depth or drama. It's the graphic elements that don't match anymore - the colors. Plus of course it looks weird because now it's narrower than my blog!

Wow, I couldn't really say quite how I did it... there was so much 'trying this, trying that', and sometimes it would partially work, sometimes it did nothing, sometimes it was disastrous. Now I couldn't tell you for sure how I did it... though I can explain the major steps. In fact... come to think of it... I probably CAN reconstruct the process (leaving out the blunders along the way). Though I make no guarantees since the process was partially mysterious to me. I'll add it to the end of the post.

Darkstrider said...

Rich, it was seeing your blog that did it!

I looked at your source document and, while it's completely different from my template, I could see basically how you did it.

And I definitely DON'T know HTML, inside OR out! I just know enough to make simple changes (and then see of they work the way I hoped). Actually, my blog might be undecipherable gibberish on certain browsers!

Anonymous said...

With the free Blogger service, it works with templates (already prefabricated site design/layouts) so one is not actually designing site from scratch, but you can tweak the templates. I am no site designer or html expert (only know basic understanding to get by with simple html).

In the nerdy obsessive world of website design, there are fixed widths vs. fluid/elastic widths. Plethora of debate and brain frying. Strider has now gone over the the dark 'fluid width' side ;). Pros & Cons and nobody in agreement, however there have been studies that show, it is easier to read text online if it does exceed certain number of words per line, compared to, too many words per line (too long), and your eyes have do physically exert more effort to focus doing long back & forth eye motion. Also, with elastic widths, one cannot precisely control certain website design elements.

Myself, I do not usually keep browser at full monitor screen size, but instead, mostly keep browser window at reduced size. With some fluid/elastic site layouts, if you have browser at a small window size, then the evil horizontal scroll bar sometimes appears at bottom. They say, easier to handle one scroll bar on the right side (vertical), instead of dealing with two (side & bottom scroll bars).

Mysterious visitor & licensed professional 'Devil's Advocate'

Darkstrider said...

Heh... sorry if I made you bust out the bifocals LIO!!!

I just checked, and my blog (BOTH columns) is half as wide as the SMA forum.

Well, if it gives you trouble, you might need to put a finger on the monitor to keep your place. If you notice, I'm writing in brief paragraphs now to keep it pretty easy.