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
 
 Reply to this topicStart new topic
Replies
pandy
post Apr 6 2012, 08:04 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Well, problem is that what you show us is only partly HTML. The rest is Tumblr's template language, understood by few. Do you know yourself what part of the template creates the sidebar? Nothing jump out to me.

BTW if you want to learn HTML it might be a good idea not to use places like Tumblr.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
kellista   Adding color to Tumblr Sidebar?   Apr 6 2012, 07:52 PM
pandy   Well, problem is that what you show us is only par...   Apr 6 2012, 08:04 PM
kellista   I'm reading through it and trying to find the ...   Apr 6 2012, 08:12 PM
pandy   There is no special HTML tag for a sidebar. It cou...   Apr 6 2012, 09:05 PM
pandy   OK, if you go to your page and view source (it...   Apr 6 2012, 09:15 PM
kellista   Thank you so much! I just assumed that wasn...   Apr 6 2012, 09:46 PM

« Next Oldest · Web Site Functionality · 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: Switch to: Standard · Switch to: Linear+ · Outline

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

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