The Blogger navbar provides some useful functions, but sometimes overwhelms the page. This is an alternative to removing the navbar. Using opacity, the navbar will be come less visible and the background will shine through.
For a layout template this is the style:
#Navbar1 iframe{
opacity:0.5;
filter:alpha(Opacity=50)
}
For a classic template:
#navbar-iframe {
opacity:0.5;
filter:alpha(Opacity=50)
}
#navbar-iframe could probably be used for both, but for layout templates, I use the wrapper ID rather than the iframe ID.
The numbers
The range for opacity: is 0.0 to 1.0, so use decimal values in that range.
Filter:alpha uses 0 to 100, so use a whole number.
Template mods
Template modifications require a Full Template Download first.
Dashboard > Layout > Edit Html > Download Full Template and you will have a backup on your computer.
Changes are made right on that page, in the template editor.
For the classic, copy the Html out to a text editor and save the file with a .txt or .html extension.
Placement
The style can be placed almost anyplace in the stylesheet, but just above or below 'body' might be a good place. Make sure you are not interfering with the other styles.
You could also add it in a separate stylesheet, just make sure it is inside <head> but outside the main stylesheet and clear of other code. For a layout template, the main stylesheet starts with:
<b:skin><![CDATA[/*
and ends with:
]]> </b:skin>
Classic template stylesheets open with:
<style type="text/css">
and close with:
</style>
Here's what it looks like as a seperate stylesheet:
<style>
#Navbar1 iframe{
opacity:0.5;
filter:alpha(Opacity=50)
}
</style>
This post uses entities ( , <, etc.) to make the code readable, so you can't copy/paste.
No comments:
Post a Comment