Adding color to Tumblr Sidebar? |
Adding color to Tumblr Sidebar? |
kellista |
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 |
kellista |
Apr 6 2012, 09:46 PM
Post
#2
|
Group: Members Posts: 4 Joined: 6-April 12 Member No.: 16,864 |
Thank you so much! I just assumed that wasn't right because it said left.
|
Lo-Fi Version | Time is now: 25th April 2024 - 07:05 AM |