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.

10 comments:

Ang said...

Thanks for the info on the shadows and borders! Way helpful!

I'm just playing around with this template today and figured out what Tabs are - they're when you have addition pages. It's an option under "Posting". You can have up to 10 tabs.
I don't think I've ever seen a blog with them, but I guess they're for doing additional "About Me" pages or something like that.

Marilyn said...

For The Crowleys.
Hi,
Thanks for the comment.
Just saw it today.
I'll have to change my settings so I'll know when someone leaves a comment.
Glad my notes were helpful to somebody besides me.
This is a test blog so I can play with the new templates and not mess up my main blog.
~Marilyn
Brief Insights

Ed Hamilton said...

Thank you for the help in getting rid of the white borders and shadows on the images in the Watermark Template. I liked everything about its default configuration except that. It made the pictures look like they were out of the 1950's (which I remember, by the way). I looked at other templates which didn't have the border and shadow, but I didn't like the light text on dark background for the posts and was ready to just put up with the borders.

Thanks again,
Ed H
harvestmousepoems.blogspot.com and
myoldohiohome.blogspot.com

Marilyn said...

Hello Ed,
Yes, that border was kind of a glitch to overcome for that template.
Otherwise, I like it.
I liked your tan and green versions of the Watermark template. It is fun to see what others do with these new templates.
Thanks for commenting.
~M

k said...

ridiculously helpful! I have only basic knowledge of html and never would have figured this out on my own. I was ready to scrap the whole Watermark template just cause of those white borders.
thanks,
k

DPN said...

Thanks, it works for me ;)

VENNIMALAI said...

Thanks for the use full Information..
STC Technologies

Anonymous said...

I looked at other templates which didn't have the border and shadow, but I didn't like the light text on dark background for the posts and was ready to just put up with the borders.
STC Technologies

briana lagos said...

Thank you sooooo much! :]

The border was bothering me and I just wanted to get it off my blog.

Unknown said...

OMG Thank you I have been trying to figue that out!!! any chance you know how to add additional tabs to this template(i will be removing my "pages" tab to make dorp down menus but none of them work?
if my page url isnt showing up it is UniqueDesignsAndFinds(dotcom )
Thanks Meg