The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> transparency?
luker
post Aug 8 2011, 11:09 AM
Post #1





Group: Members
Posts: 2
Joined: 8-August 11
Member No.: 15,121
Here's my blog. I want to make the sidebar and main body NOT transparent. In other words, just a white overlay. I'm at a loss where to go in the code to do that though. Help?

And the code:
CODE
<!theme by revolutionn">
<!--    

-->

<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="color:background" content="#000000"/>
<meta name="color:text" content="#868686"/>
<meta name="color:link" content="#000000"/>
<meta name="color:hover" content="#999999"/>
<meta name="text:title font size" content="24px"/>
<meta name="text:title line height" content="23px"/>
<meta name="font:title" content="arial"/>
<meta name="font:text" content="arial"/>
<meta name="image:Background" content=""/>
<meta name="image:Sidebar" content=""/>
<meta name="if:center" contact="1"/>
<meta name="if:show photo" content="1"/>
<meta name="if:show blog title" content="1"/>
<meta name="if:Faded Images" content="1" />

{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<title>{block:SearchPage}Search results for "{SearchQuery}" - {/block:SearchPage}{block:PostSummary}
{PostSummary} - {/block:PostSummary}{Title}</title>
<style type="text/css">

{block:IfFadedImages}
img{
-webkit-transition: opacity 0.7s linear;
opacity: 50;
}
img:hover{
-webkit-transition: opacity 0.2s linear;
opacity: .60;
}
{/block:IfFadedImages}


body {
margin:0px;
background-color: {color:000000};
background-image:url({image:Background});
background-attachment: fixed;
background-repeat: repeat;}
body, div, p, textarea, submit, input{
font-family: {font:text};
font-size: 11px;
line-height:12px;
color:{color:000000};
}
p {
margin:0px;
margin-top:5px;
}

a:link, a:active, a:visited{
color: {color:Link};
text-decoration: none;
-webkit-transition: color 0.5s ease-out;
-moz-transition: color 0.5s ease-out;
transition: color 0.5s ease-out;
}
a:hover {
color:{color:Hover};
text-decoration: none;
}
div#cage{
margin:auto;
position:right;
width:650px;
overflow:hidden;
color: {color:000000};
_margin-left:10%;
}
div#center{
margin:auto;
position:right;
width:650px;
background-color:;
overflow:auto;
overflow-y:hidden;
}
div#content{
float:right;
width:400px;
padding:5px;
padding-top:5px;
margin-right: 10px;
background: {color:000000};
}
div#entry{
background-color:;
margin-top:0px;
padding-top:0px;
padding-bottom:1px;
}
div#sidebar{
position:fixed !important;
width:180px;
height:100%;
background-color: {color:000000};
margin: 0px 0px 0px 20px;
border-right:0px solid #ddd;
padding-top:70px;
padding-left:12px;
}
#postnotes{
text-align: justify;}
#postnotes blockquote{
border: 0px;}
.title{
font-family: {font:title};
font-size: {text:title font size};
line-height: {text:title line height};
color: {color:text};
letter-spacing:-1px;
font-weight:normal;
padding:0px 1px 0px 1px;
}
.title2{
font-family: Arial, Helvetica;
font-size: {text:title font size};
line-height: {text:title line height};
color: {color:Title};
letter-spacing: {text:title letter spacing};
font-weight: {text:title font weight};
padding:1px 1px 0px 1px;
}
blockquote{
padding:0px 0px 2px 2px;
margin:0px 0px 2px 1px;
border-left: 1px solid {color:Text};
}
blockquote p, ul{
margin:0px;
padding:0px;
}
a img{border: 0px;}
ul, ol, li{list-style:none; margin:0px; padding:0px;}
.user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label,
.user_7 .label, .user_8 .label, .user_9 .label {color:{color:Title};}
.notes img{width:10px; position:relative; top:3px;}
.permalink{
display: block;
text-transform: none;
font-size: 9px;
text-align: right;
}
small{font-size: 9px;}
{CustomCSS}
</style>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" title="" href="{RSS}" />
<meta name="viewport" content="width=820" />
</head>
<body>
<div id="cage">

<div id="center">

<div id="sidebar">
{block:ifcenter}<center>{/block:ifcenter}

{block:ifshowblogtitle}<span class=title><a title="" href="/">

{Title}

</a></span><br>{/block:ifshowblogtitle}

{block:ifshowphoto}<br><a title="" href="/"><img src="{image:sidebar}" width=180px></a>{/block:ifshowphoto}

<br>
{Description}
<br>
<br>
<center>{block:PreviousPage}
<a href="{PreviousPage}" title="previous page"><big><big><big>‹</big></big></big></a>
{/block:PreviousPage}
{block:JumpPagination length="3"}
{block:CurrentPage}
<span class="current_page"><big>{PageNumber}</big></span>
{/block:CurrentPage}
{block:JumpPage}
<a class="jump_page" href="{URL}"><big>{PageNumber}</big></a>
{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}
<a href="{NextPage}" title="next page"><big><big><big>›</big></big></big></a>
{/block:NextPage}
{/block:JumpPagination}
</div>{/block:Pagination}</center>

{block:HasPages}{block:Pages}• <a href="{URL}" class="page">{Label}</a>{/block:Pages}{/block:HasPages}{/block:HasPages}







</div>


<div id="content">

{block:Posts}
<div id="entry">
{block:Text}
{block:Title}<span class="title">{Title}</span>{/block:Title}
<span class="entrytext">{Body}</span>
<br/>


{/block:Text}

{block:Link}
<a href="{URL}" class="title">{Name}</a>
{block:Description}{Description}{/block:Description}
<br/>

{block:Link}

{block:Photo}<left>
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" width=400px>{LinkCloseTag}</left>


{/block:Photo}

{block:Quote}
<span class="title">{Quote}</span>
{Source}
<br/>
    
{/block:Quote}

{block:Chat}
{block:Title}<span class="title">{Title}</span>{/block:Title}
<ul class="chat">
{block:Lines}
<li class="user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}

{Line}
</li>
{/block:Lines}
</ul>
<br/>

{/block:Chat}


{block:Audio}
<centeR><div style="width:400px; height:20px;"><div style="float:left">{AudioPlayerwhite}</div><div style="margin-top:8px; float:right;"><small>
{FormattedPlayCount} plays {block:ExternalAudio} // <a href="{ExternalAudioURL}">Download?</a>{/block:ExternalAudio}</small></div></div></centeR><BR>
{block:Caption}{Caption}{/block:Caption}
<br/>

{/block:Audio}

{block:Video} <div id='postbody'>
<center>
{Video-400}<BR>
<br/>

{block:Video}
<center>{block:IndexPage}<div class="perma"><a href="{permalink}">{NoteCountWithLabel} - posted {TimeAgo} - <a href="{ReblogURL}" target="_blank">reblog post</a></a> </div>{/block:IndexPage}</center>

{block:PostNotes}
<center>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount} // {block:PermalinkPage}{block:Date}{Month}{DayOfMonth}{DayOfMonthSuffix} {Year} // {24Hour}:{Minutes}{/block:Date}{/block:PermalinkPage} <br>
{block:RebloggedFrom}reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a> {/block:RebloggedFrom}</span></center><br><div id="postnotes">{PostNotes}</div><br>{/block:PostNotes}

</div>

{/block:Posts}

<center> theme by <a href="http://revolutionn.tumblr.com">revolutionn</a></center>

</div></div>
</div>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
joyful
post Aug 8 2011, 01:08 PM
Post #2


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147
Hey!

You could try changing the "content" and "sidebar" CSS in the head of your page:
CODE

div#content{
float:right;
width:400px;
padding:5px;
padding-top:5px;
margin-right: 10px;
background-color: #FFF;
}
div#sidebar{
position:fixed !important;
width:180px;
height:100%;
background-color: #FFF;
margin: 0px 0px 0px 20px;
border-right:0px solid #ddd;
padding-top:70px;
padding-left:12px;
}

You have to add "background-color: #FFF;" to both to get a white background.

I have not tested the CSS, however it should work.

Hope this is helpful! biggrin.gif

--
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 28th April 2024 - 02:50 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC