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
kellista
post Apr 6 2012, 08:12 PM
Post #2





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



I'm reading through it and trying to find the sidebar part right now.
Is it possible that it really isn't a sidebar and the creator just put in the description without a sidebar?

And thanks. I will definitely use a different site other than tumblr for learning, and just use tumblr for blogging

This post has been edited by kellista: Apr 6 2012, 08:15 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 6 2012, 09:05 PM
Post #3


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

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



There is no special HTML tag for a sidebar. It could be anything. It becomes a sidebar only because you place it to one side or the other. Yours is more in the middle of my screen, but that's another matter.

In the templating language and the CSS it would have been a good idea to give it a name that tells what it is - like sidebar. But they didn't.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 6 2012, 09:15 PM
Post #4


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

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



OK, if you go to your page and view source (it's on the View menu and is called what I said or something similar) you can see that the sidebar is a DIV with the id 'leftcol'. When you do this you see the real HTML, what's generated by Tumblr after parsing the template.
[/code]
In the template you have thi
CODE
s rule.

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


Try adding a white background to the mix, like this.

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


See if that works.
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: 28th March 2024 - 01:51 PM