The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Adding color to Tumblr Sidebar?
kellista
post Apr 6 2012, 07:52 PM
Post #1





Group: Members
Posts: 4
Joined: 6-April 12
Member No.: 16,864



Hi! I have very little knowledge of HTML but I would like to learn as much as I can. So I have a tumblr (mybilliecanbeatupyours.tumblr.com) I already have a sidebar with my description , but it doesn't have like a white block behind it. The text ends up being very difficult to read. So was wondering how do I add a white background to the description box. Sorry if this makes no sense I don't know how to describe it clearly

Code:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--

theme by fiebre



-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta name="image:Background" content="http://i.imgur.com/2RkEO.jpg">
<meta name="color:Background" content="#fff" />
<meta name="color:Text" content="#101010" />
<meta name="color:Title" content="#000" />
<meta name="color:Title Hover" content="#000" />
<meta name="color:Navigation" content="#000" />
<meta name="color:Navigation Hover" content="#fff" />


<meta name="color:navigation background" content="#fff" />
<meta name="color:main title background" content="#fff" />
<meta name="color:post titles background" content="#fff" />

<meta name="if:Faded Images" content="0" />
<meta name="if:Bigger Images When Hover" content="0" />
<meta name="if:Endless Scrolling" content="0" />
<meta name="if:Show Archive Link" content="1"/>
<meta name="if:Show Ask Link" content="1" />
<meta name="if:Show Random Link" content="1"/>
<meta name="if:Everything Big" content="0" />
<meta name="if:Disable Photo Captions" content="0" />
<meta name="if:Show Icon" content="1" />

<meta name="if:Show Custom Link1" content="1"/>
<meta name="if:Show Custom Link2" content="1"/>
<meta name="if:Show Custom Link3" content="1"/>

<meta name="text:Custom Link1" content="" />
<meta name="text:Custom Link1 Title" content="Link1" />
<meta name="text:Custom Link2" content="" />
<meta name="text:Custom Link2 Title" content="Link2" />
<meta name="text:Custom Link3" content="" />
<meta name="text:Custom Link3 Title" content="Link3" />


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
<title>{Title}{block:PostTitle}: {PostTitle}{/block:PostTitle}</title>
{CustomCSS}
<title>{title}{block:PostTitle}: {PostTitle}{/block:PostTitle}</title>
<style type="text/css">body, a, {cursor:pointer}</style></a>
<style type="text/css">
a:hover{cursor:pointer}

body{
background-image: url("{image:Background}");

margin:0px;
padding:0px;
margin-top:0px;
margin-bottom:5px;
font:9px century gothic;
letter-spacing:1px;
color:{color:text};


}
{block:Iffadedimages}
img{
-webkit-transition: opacity 0.7s linear;
opacity: 0.85;
}
img:hover {
-webkit-transition: opacity 0.7s linear;
opacity: 1;
}
{/block:Iffadedimages}
{block:IfBiggerImagesWhenHover}
img:hover {-webkit-transform: scale(1.01); -webkit-transition-duration: 0.6s;}
{/block:IfBiggerImagesWhenHover}

a {color: #000; text-decoration: none; }

a:hover {;-webkit-transition-duration: 0.4s;}

a:active,a:focus {outline: 0;}

#contentcolumn{
{Block:IfNotEverythingBig}width:500px;{/Block:IfNotEverythingBig}
{Block:IfEverythingBig}width:800px;{/Block:IfEverythingBig}
margin-left:100px;
margin-top:10px;
opacity:1;
overflow:shown;

text-align:justify;
position:absolute;

}

#permalink{
text-align:center;
margin-left:-70px;
margin-right:0px;
margin-top:10px;
font:10px 'century gothic';
float:left;
opacity:0;
-webkit-transition-duration: 0.6s;
text-transform:uppercase;

}

#rainbow:hover #permalink {display: block; opacity:0.8;}

#tit {
letter-spacing:1px;
text-transform:uppercase;
font: 18px 'century gothic';
font-style:;
text-transform:;
line-height:18px;
background-color:{color:post titles background};


}
#cont {
line-height:11px;
margin-top:-10px;
}
#audi {
background-color : #000;
height : 27px;
margin-bottom : -10px;
{Block:IfNotEverythingBig}width:500px;{/Block:IfNotEverythingBig}
{Block:IfEverythingBig}width:800px;{/Block:IfEverythingBig}
}

#rainbow {
background:{color:background};
margin-bottom:20px;
margin-top:20px;
line-height:11px;
font-family: 'Century Gothic',futura,'URW Gothic L',Verdana,sans-serif;
font-size:11px;
}


.camel {
text-align:center;
font:22px century gothic;
letter-spacing:2px;
font-style:italic;
text-transform:uppercase;
background-color:{color:main title background};
line-height:22px;
width:220px;


}

.camel a {
color: {color:title}
}
.camel a:hover{
color: {color:title hover}
}
.apple {
text-align:center;
position:fixed;
font: 11px century gothic;
letter-spacing:1px;
line-height:11px;
text-transform:uppercase;
font-style:;
width:220px;
background-color:{color:navigation background};
padding:1px;


}


.apple a {
color: {color:navigation};}
.apple a:hover {
color: {color:navigation hover};
}



#leftcol {
{Block:IfEverythingBig}margin-left:920px;{Block:IfEverythingBig}
{Block:IfNotEverythingBig}margin-left:620px;{/Block:IfNotEverythingBig}
bottom:50px;
position:fixed;
width:220px;
}

.celu {
text-align:justify;
font: 10px century gothic;
line-height:10px;
width:220px;
}


.panda {
right:0px;
bottom:25px;
font:11px century gothic;
text-transform:uppercase;
line-height:11px;
position:fixed;
letter-spacing:1px;
text-align:center;
font-style:italic;
-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);
}
</style>

{block:IfEndlessScrolling}<script type="text/javascript" src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script>{/block:IfEndlessScrolling}
</head>
<body>

<div id="leftcol"> <div class="camel">{title}</div> <div class="celu"> {block:IfShowIcon}<img src="{PortraitURL-48}" align="left" border="0" width="48" style="margin: 0 7px 0 0;padding:2px;">{/block:IfShowIcon} {description}</div>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<div class="apple">{Block:IfShowAskLink}<a href="/ask">message</a>{/Block:IfShowAskLink} {Block:IfShowArchiveLink}<a href="/archive">archive</a>{/Block:IfShowArchiveLink} {Block:IfShowRandomLink}<a href="/random">random</a>{/Block:IfShowRandomLink}
{Block:IfShowCustomLink1} <a href="{text:Custom Link1}">{text:Custom Link1 Title}</a>{/Block:IfShowCustomLink1}{Block:IfShowCustomLink2} <a href="{text:Custom Link2}">{text:Custom Link2 Title}</a>{/Block:IfShowCustomLink2} {Block:IfShowCustomLink3} <a href="{text:Custom Link3}">{text:Custom Link3 Title}</a>{/Block:IfShowCustomLink3}</div>



</div>

<div id="contentcolumn">



{block:IfEndlessScrolling}<div class = "autopagerize_page_element">{/block:IfEndlessScrolling}
{block:Posts}
<div id="rainbow">
<div id="permalink">
<a href="{Permalink}">{24Hour}.{Minutes}{AmPm}<br>{MonthNumber}/{DayOfMonth}/{ShortYear}</a>
</div>

{block:Text}
<div id="tit">{block:Title}{Title}{/block:Title}</div>
<div id="cont"><p align=justify>{Body}</p></div>
<div id="captionfoto">
{block:RebloggedFrom} <small>reblogged from: {ReblogParentName}</small> {/block:RebloggedFrom}</div>
{/block:Text}

{block:Photo}
{LinkOpenTag}<meta name="{PhotoAlt}" content="{PhotoAlt}"/> {Block:IfNotEverythingBig}<img src="{PhotoURL-500}" alt="{PhotoAlt}" border="0" width="500" >{/Block:IfNotEverythingBig}{Block:IfEverythingBig}<img src="{PhotoURL-500}" alt="{PhotoAlt}" border="0" width="800" >{/Block:IfEverythingBig}{LinkCloseTag}
{Block:IfNotDisablePhotoCaptions}<div id="cont">{block:Caption} {Caption} {/block:Caption}</div>{/Block:IfNotDisablePhotoCaptions}
{/block:Photo}

{block:Photoset}
{Photoset-500}
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}

{block:Quote}
<big>"{Quote}"</big><br>
{block:Source}{Source}{/block:Source}
{/block:Quote}

{block:Link}
<div id="tit"><a href="{URL}">{Name}</a></div>
<div id="cont">{block:Description}{Description}{/block:Description}</div>
{/block:Link}

{block:Chat}
{block:Title}<b>{Title}</b>{/block:Title}
{block:Lines}{block:Label}<b>{Label}</b> {Line} <br>
{/block:Label}{/block:Lines}

{/block:Chat}

{block:Audio}
<div id="audi">{AudioPlayerBlack}</div><br>
<center>{block:Caption}{Caption}{/block:Caption}</center>
{/block:Audio}

{block:Answer}
<div id="tit">"{Question}"</div> - {Asker} <br>
{Answer}

{/block:answer}

{block:Video}
<div id="width">{Video-500}</vid>
{block:Caption}{Caption}{/block:Caption}

{/block:Video}

{block:PostNotes}
{PostNotes}
{/block:PostNotes}


</div>

{/block:posts}
{block:IfEndlessScrolling}</div>{/block:IfEndlessScrolling}
{block:IfNotEndlessScrolling}
<right>{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}">←</a>
{/block:PreviousPage}

{block:JumpPagination length="5"}
{block:CurrentPage}
<span class="current_page">{PageNumber}</span>
{/block:CurrentPage}

{block:JumpPage}
<a class="jump_page" href="{URL}">{PageNumber}</a>
{/block:JumpPage}
{/block:JumpPagination}

{block:NextPage}
<a href="{NextPage}">→</a>
{/block:NextPage}
{/block:Pagination}</right>
{/block:IfNotEndlessScrolling}
<br>
<br>

</body>
</html>


This post has been edited by kellista: Apr 6 2012, 07:53 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


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

 



- Lo-Fi Version Time is now: 21st October 2014 - 01:22 PM