Thursday, August 05, 2010

Picture Window Sunrise

I've been hungry for orange lately.
Decided to fiddle with Blogger Templates again and see what I could come up with in the color orange that's "naturey."

Used my same Picture Window Template with the serene Mountain scene.
Changed the background image (Nature category) and used the suggested text colors.
Had to change the Post Border color and Post Background color to transparent (Advanced Section).



It was a little tricky getting the header text to be readable yet blend in.
I came up with a gradient for text on transparent png image.



Added one of my bird pics (70% opacity) on my transparent bg name avatar.
Not sure how I like it.

Here's the screenshot result of my template now:

Thursday, July 08, 2010

Back To Picture Window Template

Back to Picture Window Template. LOL
I got on the minimalistic idea with that gray Awesome Template (previous post), but found I like the transparency of the Picture Window Template rather than the boxy look of the Awesome Template.

I found a nice serene soft mountain background under the nature category.



I did have to set the posting area to semi-transparent so the background would show thru that area. I also got rid of the borders. The right column is semi-transparent by default.

Then I fiddled with a header title, which turned out to be a selection with a soft drop shadow in Paint Shop Pro 9. Got rid of the splashy purple flower avatar by profile area and added my name in a fancy font but soft dark gray.

I'll sit with that for awhile.

Tuesday, July 06, 2010

Awesome Templates

I'm going to try out the Awesome Templates next.


It looks like it uses different bordering effects for each section.
I really like this plain grey one with the soft shadowing around the section edges.

Screenshot:


I wonder what it looks like in IE8. Will test. (It was a tad different, but okay.)

I'm using the same Header, which is just a transparent text png file.

Turned out that I didn't find much I could do with the template that I liked. Maybe I'm tired of the boxy columns/elements look because I had that on my old template. About the only background I liked with this gray theme was a gray bokeh under the abstract backgrounds section.



I could have tried making a gray texture tile as background, but decided I just didn't want to fiddle with it anymore.

Tuesday, June 29, 2010

Watermark Template

Trying out the Watermark Template.
Surprise.
It adds a white border and drop shadow to images.
Which looks kind of nice, BUT I don't think I'd want that on ALL my images.



(Did a screenshot of border so I'll still show it when I change the template.)

So I'm sitting here struggling with how to turn the darn thing off.
Looked in the html code, not readily apparent to me there.
Tried an inline img style, that didn't work either.
Hmmm.

Turn Off Border/Drop Shadow on Images
Figured it out.
The "border" is white colored padding with box-shadow coding.
The following inline image styling worked to shut off the "border":
<img style="background: none; -moz-box-shadow: none" alt="" src="http://etc" />

Testing Shadow Off:


NOTES:
I found the coding under the Widgets section of the Template (look for .post-body img).
I did not change the padding, just turned off the color and shadow coding. Would need to test text flow around image to see if padding needed adjustment too.
The drop-shadow does not work correctly in IE8. It's a "shadow" on ALL sides, not two sides.

Reference Links:
w3.org box-shadow
css-tricks
mozilla box-shadow

Testing Shadow On via inline coding:


Inline Code Used:
<img style="background: #fff; -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5); -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5); -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5); box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);" alt="" src="http://etc" />

Shadow Off via changes to template:

All I did was to make that part of the code a comment (highlighted in yellow).
That way I still had the code there if I wanted to turn it back on.

Further notes on the Watermark Template:

I changed the colors to purple.
Fiddled with other colors.
Tried Courier font at 18px bold.
Created transparent text header.

Background Images
I like the birds on the background.
I haven't figured out how the background texture works yet. It looks like a repeated grainy textured overlay (or semi-transparent?)*.png image maybe. Then the birds *.png is some kind of overlay displayed once top right.



What the heck is the "Tabs" section of the template for? I don't notice anything when I fiddle with that section.



I think this might be the new static stand-along pages feature?
See Blogger Help post.
I haven't used that yet, but I think it looks like Tabs at the top of your blog.

Pink Themes

Continuing with the pink theme.
A few different backgrounds.
Same semi-transparent white header image I created.



Thursday, June 24, 2010

Picture Window Paper Texture Header

I made my own header image and like that better than using the one from the template.
I tested three different kinds and decided I like the semi-transparent white version the best.

Here are examples of what the three versions look like when applied to this template:



NOTE: Font is TraftonScript.

Wednesday, June 23, 2010

Picture Window Paper Texture

I like the Picture Window Template because of that semi-transparent sidebar.


I selected the single column right sidebar layout.
This would give me a wider post area for bigger photo postings if so desired.

I selected a texture and color.


Made the posting background, header background and text the color pink.
If I find a color I like when I'm fiddling around, I do a screenshot of it so I don't lose the color.



I like the Watermark Template too, but that's more limited because the sidebar is totally transparent and you can't read the text very well if you use a different background. I'll post an example of that too eventually.