Only background for post to be transparent, but why are the text and images transparent as well?
newbie
Location: Malaysia
Posted: Wed, 2008-07-23 06:10
Hi guys, Need some help.
Is it possible to have the background for a POST to be transparent(black) while maintaining full color for text and pictures?
Below is the code from blogger. I've never done CSS before...it was from googling and trial and error. Can any gurus here help ?
All help greatly appreciated.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima Black
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#000" value="#333333">
<Variable name="textcolor" description="Text Color"
type="color" default="#ccc" value="#ffffff">
<Variable name="linkcolor" description="Link Color"
type="color" default="#9ad" value="#99aadd">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#ccc" value="#999999">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#777" value="#ffffcc">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#ad9" value="#ffffff">
<Variable name="bordercolor" description="Border Color"
type="color" default="#333" value="#ffffff">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#777" value="#ffffff">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#999" value="#ffffff">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#a7a" value="#00FF80">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 100% Arial, sans-serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 78% Arial, sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal bold 200% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal bold 200% Arial, sans-serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal normal 78% Arial, sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% Arial, sans-serif">
*/
/* Use this with templates/template-twocol.html */
body {
background:$bgcolor;
background-image:url(http://www.ashanet.org/atlanta/marathon/resources/misc/team_asha_wallpaper1.jpg);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background: #000000;
opacity: 0.5;
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-left: auto;
margin-right: auto;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 1024px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
background: #000000;
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.85;
width: 700px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
background: #000000;
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.85;
width: 324px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:bold;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}
.post p {
margin:0 0 .75em;
line-height:1.6em;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
.comment-link {
margin-left:.6em;
}
.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px solid $bordercolor;
margin:0 0 1.5em;
padding:15px;
}
.main .Blog {
margin:1.5em 0 1.5em;
padding:8px 8px 8px;
border:1px dashed $bordercolor;
border-bottom:1px dashed $bordercolor;
border-width:1px 1px 1px;
border-bottom:1px line $bordercolor;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $bordercolor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='MY LAZY WEB BLOG ~^奮©™AnDreW™©®¥å^~ (Header)' type='Header'/>
</b:section>
</div>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Metalfreak Updates' type='HTML'/>
<b:widget id='HTML5' locked='false' title='CRAP CORNER' type='HTML'/>
<b:widget id='HTML6' locked='false' title='Event Countdown!!' type='HTML'/>
<b:widget id='LinkList2' locked='false' title='Running Club that I'm in' type='LinkList'/>
<b:widget id='LinkList1' locked='false' title='Friends :D' type='LinkList'/>
<b:widget id='HTML1' locked='false' title='CounteR' type='HTML'/>
<b:widget id='Image1' locked='false' title='Damn..gotta tidy up my computer table' type='Image'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='HTML4' locked='false' title='Andrew's Playlist' type='HTML'/>
</b:section>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
</html>
Leader
Posts: 847
Joined: 2008-02-04
Location: Netherlands
1. Templates suck to edit.
Posted: Wed, 2008-07-23 09:10
1. Templates suck to edit. I wish you much luck!
2. You are setting IE into quirks mode with that silly <?xml thingie at the top. That's for real XML documents-- and XHTML sent as text/html is NOT a real XML document, so it can go (and keep IE behaving better).
3. your question:
Yes, it is possible to have your posts have the semi-transparent background with full-opacity text, however not with your current code. The problem with opacity (and this seems to make it almost useless to me, did nobody at W3c think of readable text on wishy-washy backgrounds???) is that it's inherited (although I've noticed Opera can set a fully opaque background colour on a child element). So, everyone stays at the same opacity (or, you can get them more transparent, but not less).
There are two solutions that I can think of (and some crusty may have some more):
If you just want a colour difference or an image to look washed out, you might be able to get away with removing the opacity thing and just having an image that looks washed out (make it so in PS or GIMP). I've used this for a form with a washed-out background... easier than playing with opacity.
If this is NOT a solution because of stuff moving around on the page or growing boxes, then you can keep opacity on whatever needs it, but then all the boxes with text canNOT be children of the box with opacity. You'll need two seperate boxes, siblings of each other but not parent-child, and the opaque (with the text) boxes will have to be positioned over the opacity-box-- either with absolute positioning, negative margins, or some such thing. This can be tricky to do with a clean, well-written page. I'm not sure anyone short of a crusty guru, or the original writers of the template, can change it easily.
Here's an example of using opacity in the second solution I mentioned: http://stommepoes.nl/Scooterverzekeren/wiezijnwij2.html Widen and shrink your browser window, see envelope.
Pulling that box up caused much CSS heartache as I needed the pulled-up box to stilll push down the content which comes underneath, even on text-enlarge.
4. I can't really read your css... I see something with opacity set, but can't tell what a POST is. Sorry.
I'm no expert, but I can fake one on teh Interwebz
newbie
Posts: 2
Joined: 2008-07-23
Location: Malaysia
Thanks man, I'll check it
Posted: Thu, 2008-07-24 01:28
Thanks man, I'll check it out later. Kinda busy in the office.
Appreciate it.