[haven] Transparency and Opacity
This tutorial explains how to make various sections of the Haven layout be transparent or semi-transparent with custom CSS. This code can be entered in the 'Custom stylesheet' field in the Custom CSS section of your Custom Options.
If you wish to make all areas of the layout completely transparent, place all of the code from the box below in your 'Custom stylesheet' field.
/* Makes header and footer transparent. */
.title, .navigation {
background-color: transparent !important;
}
/* Makes tabs above sidebar and content boxes transparent. */
.tabs, .sidebar_box th {
background-color: transparent !important;
}
/* Makes sidebar and content boxes transparent. */
.sidebar_box, .content {
background-color: transparent !important;
}
/* Makes calendar days with posts transparent. */
.day_with_posts {
background-color: transparent !important;
}
/* Makes comment headers transparent. */
.comment_bar_screened, .comment_bar_one, .comment_bar_two {
background-color: transparent !important;
}
/* Makes "Powered by" note transparent. */
#footer {
background-color: transparent !important;
}
You can remove sections of this code as necessary to make only some areas of your journal transparent. To remove a section, delete everything from the /* before the description of what that section does to the } before the next section begins. For example, to have everything except the header and footer be transparent, you would remove the following lines:
/* Makes header and footer transparent. */
.title, .navigation {
background-color: transparent !important;
}
If you wish to make all areas of the layout semi-transparent, place all of the code from the box below in your 'Custom stylesheet' field.
/* Makes header and footer opaque. */
.title_navigation {
filter:alpha(opacity=80);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -moz-opacity:0.8;
}
/* Makes tabs above sidebar and content boxes opaque. */
.tabs, .sidebar_box th {
filter:alpha(opacity=80);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -moz-opacity:0.8;
}
/* Makes sidebar and content boxes opaque. */
.sidebar_box, .content {
filter:alpha(opacity=80);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -moz-opacity:0.8;
}
/* Makes "Powered by" note opaque. */
#footer {
filter:alpha(opacity=80);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -moz-opacity:0.8;
}
The opacity level, set to 80 (or 0.8) in the above example, can be changed to any number under 100 (or 1.0). Lower numbers will make your journal more transparent. Using this filter will change the opacity of the entire table, including the text within it so you will need to choose an opacity level that still allows the text to be visible.
Setting the opacity to 100 (or 1.0) will make the background completely opaque. If you want your background to be a solid color, you do not need to use an opacity filter at all.
As with the transparency tutorial, you can remove sections of the code in order to apply the opacity filter to only some areas of your journal.
Once you have finished adding the code above, click "Save Changes" button at the bottom of the page to apply your customizations.
NOTE: Opacity filters are a resource intensive customization. Use of an opacity filter can cause older browsers, computers with lower resources, and computers where much of the system memory is already in use to freeze, crash, or otherwise behave unexpectedly. If you begin experiencing a problem with your journal loading slowly (or not at all), your browser freezing, or your operating system freezing, please try removing the opacity filter from your theme layer and reloading your journal page to see if the problem persists before submitting a Support request.
Contributed by alsatia. Adjusted for all account types by camomiletea.