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.

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.

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.

Travel Template

I like the Travel Template.

I chose the default, but there are four choices under the Travel Template and they are quite different.


Background Image on default:


What it looks like on my blog.

The only change I made was the font size and type to Georgia.

My previous layout was used, but can easily change that too:


The next image demonstrates how the colors of each element can be changed.
I don't understand the color layering.
The "green" color is actually a bright green, but displays muted.
So it seems to be a transparent color over something.
With the live preview, you can see instantly what it will look like.
If you were wanting a specific color, it might be a little difficult to get it, though.



Overall, I'm really impressed by how flexible these new templates are.
It is fun to fiddle around with them.
That is why I might be changing my template often for a while, until the novelty wears off maybe.

My First Template

My first template I made with Template Designer and the one I'm currently using on my main blog. I really like it.
It is the Picture Window Template with double column right sidebar layout.
I selected a different background in the Nature category.
Added my own header image.
Fiddled with the other element colors.

My Own Image Background goes with this template.

New Editor under Settings Basic Tab

Updated the Editor under Settings, Basic.
What is up with automatically inserting nbsp code all over the place in my posts?
Irritating.
I'll have to read up on the new editor.
I didn't know it was going to tweak my posts without notifying me first.
I might go back to the old editor until I'm more informed.

Info

My Own Image Background

This background goes with my first template.

I'm going to try other templates, so click above link for 1600x size.

Here's how I made the background.
New image size 1024x768.
Pick your foreground and background colors and generate some clouds.
I used MuRa Meister clouds plugin within Paint Shop Pro 9.
Duplicate the layer.
Apply Mehdi Fur2 plugin for the circles, (set it transparent).
(This is a FUN plugin to play with. Makes a lot more than circles.)

Then,
Soft Light Layer Blend on both layers to pump up the colors and contrast if needed.
Merge.
Apply Mehdi Flat Median Blur plugin to soften circles.
Resized the image to match the background I was already using (1800x1200).
That made the circles bigger and stretched them a little bit, cuz not same aspect ratio, but that actually looked better, cuz the circles weren't so perfect. (Could also push some around with the warp brush.)

Added a few leaf tubes in Paint Shop Pro 9.
Save and check filesize (250K limit).
This one isn't a problem, cuz it's pretty simple and is not a very high filesize even at higher quality jpg 10 compression.

Done.

IMAGE HOSTING NOTE:
Okay, here's another glitch I did not know about since I haven't been using Picasa.
Evidently, there is a dimension size limit on images if you use Picasa free hosting?


ANSWER
The url includes a folder directory indicating size.
ie /s800
I changed that to /s1600
and it worked to get a 1600x image.
That's as big as Picasa goes.

See also:
Blogger Forum

Photobucket free image hosting. Tested it. My homemade background is only 800x533, even though my original was 1800x1200.

ANSWER
Now Photobucket's free account says 1024x is the limit. I'm only getting 800x maximum width on my images when I view and save, and I don't know why.
The 800x looks okay on my 17 inch 1024x768 monitor.

PLUGIN NOTE:
Mehdi and MuRa plugins are FREE. Google it. Mehdi is still around. I'm not sure if MuRa is, though.

But there are other free plugins that can be found to make clouds if you need it.
I think Photoshop already has a cloud generator.

Also, plugins will work in free GIMP and free IrfanView image editors.
(IrfanView does NOT have a layers feature, though.)

Editing CSS in the Template Designer

It APPEARS easy (lol) to tweak the CSS code in the Template Designer.
I got the blockquote code from my old template and pasted it into the Advanced, Add CSS section.



That worked.

BUT
Tried that with Table coding and it messed up my sidebar.
(Must have Table code formatting in my double column sidebar.)
So I'm leaving Tables alone, for now.
I don't use them much.

In the Background section, under image, there are tons of free images to use.
I'm wondering if there are any restrictions on use?
For example, I might want to change the color of the image or maybe edit some other part of it.

Background image filesize limit is under 250K (see link below).
That can be pretty high compression (low quality) depending on the image used.
I tested one of the texture images (blue one 183KB).
Colorized and resaved.
Filetype jpg compression was about 40-45 in Paint Shop Pro 9.

I think it would be easy enough to substitute your own custom image if you made it the same dimensions and kept it under 250K?

I tried the instructions at the link below. That DID NOT work. Just ignored it.
So, I edited the html. That worked. I don't know if that's a good way to do it or not, though.

LINK:
Editing CSS in the Template Designer

On my old template it used to be really difficult to change the colors in the main posting area.
But with this new Template Designer, it is easy to change the colors.
I'm loving that.
I could change my template every week, just for fun.
I haven't had much trouble switching templates.
But, I would definitely play with that on a test blog FIRST, instead of risking a mess on my main blog.

AND that depends on how much customization you want to do. If you stick to what Blogger offers you, no problems. But is you want to use your own background images and use your own custom coding for things like tables, it's going to be much more difficult.

More Code Tests

This is my inline highlight code.

• Big gold round bullet code I used.

Blockquote looks like this in new template:

“A true friend is someone who thinks that you are a good egg even though he knows you are slightly cracked.”—Bernard Meltzer

Inline Code:
&#8220 = left double quote
&#8221 = right double quote
&mdash = long dash
font-size = 175% on quotes only.

Tables look like this in new template:

Table1 Code Test

H1C1	H1C2	H1C3
R1C1	R1C2	R1C3
R2C1	R2C2	R2C3
R3C1	R4C2	R4C3

Text Wrap Around Image Test

Should be no border with text wrapping around the image.
Check space between image and text as it wraps around image.
Extra blah blahs
Inline float right.
Should be no border with text wrapping around the image.
Check space between image and text as it wraps around image.

No float specified with this next one.

Blah Blah Blah