The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> I need help with this tumblr theme
tumblrhtmlissues
post Apr 9 2011, 01:09 PM
Post #1





Group: Members
Posts: 1
Joined: 9-April 11
Member No.: 14,305



So I'm using this new theme on my tumblr. My background isn't a plain color. It's a gif. So when I click on posts to read, the background is a moving picture. Well, I'm trying to put a white background behind the post. So I want there to be a white rectangle behind the text. Could someone please tell me where and how to add a white text background?

The code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<meta name="text:Link 1" content="" />
<meta name="text:Link 1 url" content="" />

<meta name="text:Link 2" content="" />
<meta name="text:Link 2 url" content="" />

<meta name="text:Link 3" content="" />
<meta name="text:Link 3 url" content="" />

<meta name="text:Link 4" content="" />
<meta name="text:Link 4 url" content="" />

<meta name="text:picurl" content="" />

<title>{block:SearchPage}Search results for "{SearchQuery}" - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>

<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<link rel="shortcut icon" href="{Favicon}" />
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/vohahkw/Opulcrnfo/leaguegothic.css" />

<style type="text/css">

html, body {
margin: 0;
padding: 0;
height: auto!important;
height: 100%;
min-height: 100%;
overflow-x: hidden;
}

html {
background: {color:Background} url(http://i55.tinypic.com/jra3jn.gif);
background-repeat:repeat;
background-attachment:fixed;

}

* {
font-family: "Lucida Sans Unicode", Helvetica, sans-serif;
}

html {
font-size: 8pt;
}

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

a:hover {
color: #000;
}

.clear {
float: none;
clear: both;
}

.title {
font: 25pt "league gothic", sans-serif;
color: #030303;
}

/* main thumbnails wrapper */

#fs_wrapper {
padding: 0 50px 0 35px;
margin: 70px auto 0 auto;
position: relative;
z-index:990;
}

/* pagination and main title wrapper */

#sec2 {
margin: 0 auto;
padding: 0 50px;
position: relative;
z-index: 990;
}

/* all posts */

.fspost {
float: left;
height: 140px;
width: 230px;
border: 1px solid #000;
margin-left: 15px;
margin-bottom: 15px;
position: relative;
opacity: .8;
overflow: hidden;
background: #FFFFFF;
}

.fspost:hover {
opacity: 1;
}

.permalink, .fullsize {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 998;
}

/* post desc */

.fspost .desc {
display: block;
font-size: 6pt;
letter-spacing: 1px;
text-transform: uppercase;
position: absolute;
left: 0;
bottom: 0;
z-index: 999;
width: 400px;
background: #FFFFFF;
color: #FFFFFF;
visibility: hidden;
cursor: pointer;
}

.fspost:hover .desc {
visibility: visible;
}

.fspost .desc:hover {
background: #000000;
}

.fspost .desc .in {
display: block;
padding: 3px 5px;
position: relative;
}

.fspost .desc .title {
font-size: 1.2em;
}

.fspost .in {
text-align: left;
padding: 10px;
}

/* photo posts */

.fsphoto img {
position: absolute;
left: 0;
top: 0;
width: 300px;
}

.photo-hires {
display: inline-block;
padding: 2px 5px;
background: #DDD;
height: 18px;
margin-bottom: 10px;
}

/* text posts */

.fstext .title:hover {
color: #000;
background color: #FFFFFF;
}

/* quote posts */

.fsquote .quote {
display: block;
font: 15pt "league gothic", sans-serif;
color: #333;
margin-bottom: 15px;
<meta name="color:BackgroundColor" content="#FFFFFF">;
}

.fsquote .source {
font-size: 10pt;
color: #CCC;
font-style: italic;
<meta name="color:BackgroundColor" content="#FFFFFF">;

}

/* answer posts */

.ask_asker {
background: #DDD;
height: 25px;
margin-bottom: 10px;
line-height: 25px;
}

.ask_asker img {
display: inline-block;
float: left;
line-height: 25px;
margin: 5px;
}

.ask_question {
font-weight: bold;
margin-bottom: 15px;
}

/* main title */

#info {
padding-top: 10px;
border-top: 1px solid #DDD;
}

#info div {
text-align: right;
}

.infopic {
border: 1px solid #000;
float: right;
height: 73px;
margin-top: 4px;
margin-left: 10px;
}

#blogmaintitle, #blogmaintitle a {
color: #000;
font-family: "League Gothic";
text-transform: uppercase;
font-size: 50pt;
line-height: 60px;
}

#blogsubtitle {
font-family: "League Gothic";
text-transform: uppercase;
color: #030303;
font-size: 16pt;
}


/* pagination */

#pgntn {
height: 75px;
}

#next, #prev {
font: 20pt "league gothic";
}

#next {
float: right;
}

#prev {
text-align: left;
}

#pagenumber {
line-height: 30px;
text-align: center;
color: #DDD;
}


/* credit */

#credit {
position: fixed;
top: 15px;
left: 15px;
color: #DDD;
background: #FFF;
padding: 5px;
z-index: 999;
}

#credit a {
color: #AAA;
}

#credit a:hover {
color: #000;
}

/* begin permalink page specific css */

#pl_wrapper {
margin-left: 50px;
width: 500px;
}

.infopic_pl {
float: left;
margin-right: 10px;
margin-left: 0;
}

.pl_info {
padding-top: 0;
border-top: none !important;
margin: 45px 0;
}

.pl_info div {
text-align: left !important;
}

#notez {
margin-top: 45px;
padding-top: 10px;
border-top: 1px solid #DDD;
}

.more_notes_link {
text-align: left;
}



{CustomCSS}

</style>

<script type="text/javascript">

function resizedivs() {

$ = function(id) { return document.getElementById(id); }

fschildren = $("fs_wrapper").childNodes;
postc = 0;
thedivs = new Array();

for(i = 0; i < fschildren.length; i++) {
if(fschildren[i].tagName == "DIV") {
thedivs[postc] = fschildren[i];
postc++;
}
}

newwidth = 0;
for(i = 0; i < thedivs.length; i++) {
if(newwidth <= document.body.clientWidth) {
newwidth = newwidth + (thedivs[i].clientWidth)+15;
}

if(newwidth >= document.body.clientWidth-90) { // 100 for padding minus 15 extra
newwidth = newwidth - (thedivs[i].clientWidth)+15;
break;
}
}

$("fs_wrapper").style.width = newwidth+"px";
$("fs_wrapper").style.position = "relative";
$("fs_wrapper").style.left = "7px";

$("sec2").style.width = newwidth-35+"px";
$("sec2").style.position = "relative";
$("sec2").style.left = "-5px";

}

window.onresize = function() {
resizedivs();

}

window.onload = function() {
resizedivs();
}

</script>

</head><body>

{block:IndexPage}
<div id="fs_wrapper">

{block:Posts}
{block:Text}
<div class="fspost fstext"><a href="{Permalink}" class="permalink"></a>
<div class="in">
{block:Title}<div class="title">{Title}</div>{/block:Title}
{Body}
</div>

<a href="{Permalink}" class="desc"><span class="in">
{TimeAgo} / {NoteCount} notes
</span></a>
</div>
{/block:Text}

{block:Photo}
<div class="fspost fsphoto"><a href="{Permalink}" class="permalink"></a>
<img src="{PhotoURL-400}" alt="{PhotoAlt}" />

<a href="{Permalink}" class="desc"><span class="in">
{TimeAgo} / {NoteCount} notes
</span></a>
</div>
{/block:Photo}

{block:Photoset}
<div class="fspost fstext"><a href="{Permalink}" class="permalink"></a>
<div class="in">
<div class="title">photo set </div>
{block:Caption}{Caption}{/block:Caption}
</div>

<a href="{Permalink}" class="desc"><span class="in">
{TimeAgo} / {NoteCount} notes
</span></a>
</div>
{/block:Photoset}

{block:Quote}
<div class="fspost fsquote"><a href="{Permalink}" class="permalink"></a>
<div class="in">
<div class="quote">{Quote}</div>
<div class="source">{Source}</div>
</div>

<a href="{Permalink}" class="desc"><span class="in">
{TimeAgo} / {NoteCount} notes
</span></a>
</div>
{/block:Quote}

{block:Link}
<div class="fspost fstext"><a href="{Permalink}" class="permalink"></a>
<div class="in">
<a href="{URL}" class="title">{Name} </a>
{block:Description}{Description}{/block:Description}
</div>

<a href="{Permalink}" class="desc"><span class="in">
{TimeAgo} / {NoteCount} notes
</span></a>
</div>
{/block:Link}

{block:Chat}
<div class="fspost fstext"><a href="{Permalink}" class="permalink"></a>
<div class="in">
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div class="chat_lines">{block:Lines}<p class="chat_{Alt}"><strong>{block:Label}{Label}{/block:Label}</strong> {Line}</p>{/block:Lines}</div>
</div>

<a href="{Permalink}" class="desc"><span class="in">
{TimeAgo} / {NoteCount} notes
</span></a>
</div>
{/block:Chat}

{block:Audio}
<div class="fspost fstext"><a href="{Permalink}" class="permalink"></a>
<div class="in">
<div class="title">audio post </div>
{block:Caption}{Caption}{/block:Caption}
</div>

<a href="{Permalink}" class="desc"><span class="in">
{TimeAgo} / {NoteCount} notes
</span></a>
</div>
{/block:Audio}

{block:Video}
<div class="fspost fstext"><a href="{Permalink}" class="permalink"></a>
{Video-400}

<a href="{Permalink}" class="desc"><span class="in">
{TimeAgo} / {NoteCount} notes
</span></a>
</div>
{/block:Video}

{block:Answer}
<div class="fspost fstext"><a href="{Permalink}" class="permalink"></a>
<div class="in">
<div class="ask_asker">
<img src="{AskerPortraitURL-16}" alt="" /> {Asker} asked
</div>
<div class="ask_question">{Question}</div>
<div class="ask_answer">{Answer}</div>
</div>

<a href="{Permalink}" class="desc"><span class="in">
{TimeAgo} / {NoteCount} notes
</span></a>
</div>
{/block:Answer}
{/block:Posts}

</div><!-- /#fs_wrapper -->

<div class="clear"></div>

{/block:IndexPage}

<div id="sec2">

{block:Pagination}
<div id="pgntn">
{block:PreviousPage}<a href="{PreviousPage}" class="prev" id="prev">previous page</a>{/block:PreviousPage}
{block:NextPage}<a href="{NextPage}" class="next" id="next">next page</a>{/block:NextPage}
<div id="pagenumber">page {CurrentPage} of {TotalPages}</div>
</div>
<div class="clear"></div>
{/block:Pagination}


<div id="info_wrap"><div id="info"{block:PermalinkPage} class="pl_info"{/block:PermalinkPage}>
<a href="{text:picurl}"><img src="{PortraitURL-96}" class="infopic{block:PermalinkPage} infopic_pl{/block:PermalinkPage}" alt="{Name}" /></a>
<div id="blogmaintitle">{block:PermalinkPage}<a href="http://{Name}.tumblr.com/">{/block:PermalinkPage}{Title}{block:PermalinkPage}</a>{/block:PermalinkPage}</div>
<div id="blogsubtitle">{Description}</div>
<div id="blogdesc"><br />

{block:IfLink1url}<a href="{text:Link 1 url}">{text:Link 1}</a>{/block:IfLink1url}
{block:IfLink2url}/ <a href="{text:Link 2 url}">{text:Link 2}</a>{/block:IfLink2url}
{block:IfLink3url}/ <a href="{text:Link 3 url}">{text:Link 3}</a>{/block:IfLink3url}
{block:IfLink4url}/ <a href="{text:Link 4 url}">{text:Link 4}</a>{/block:IfLink4url}
{block:AskEnabled}/ <a href="/ask">{AskLabel}</a>{/block:AskEnabled}
{block:SubmissionsEnabled}/ <a href="/submit">{SubmitLabel}</a>{/block:SubmissionsEnabled}

{block:PermalinkPage}{block:PermalinkPagination}/ posts:
{block:NextPost}<a href="{NextPost}"> newer</a> {/block:NextPost}
{block:PreviousPost}<a href="{PreviousPost}">older </a>{/block:PreviousPost}
{/block:PermalinkPagination}{/block:PermalinkPage}
<br /><br />

{block:TagPage}showing only posts tagged "{Tag}"{/block:TagPage}

</div>
</div></div>
<div class="clear"></div>


</div><!-- /sec2 -->


{block:PermalinkPage}
<div id="pl_wrapper">
{block:Posts}
{block:Text}
{block:Title}<div class="title">{Title}</div>{/block:Title}
{Body}
{/block:Text}

{block:Photo}
{LinkOpenTag}
<img src="{PhotoURL-500}" alt="{PhotoAlt}" />
{LinkCloseTag}<br />
<a class="photo-hires" href="{PhotoURL-HighRes}">hi-res version</a><br />
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}

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

{block:Quote}
<div class="quote">{Quote}</div>
<div class="source">{Source}</div>
{/block:Quote}

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

{block:Chat}
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div class="chat_lines">{block:Lines}<p class="chat_{Alt}"><strong>{block:Label}{Label}{/block:Label}</strong> {Line}</p>{/block:Lines}</div>
{/block:Chat}

{block:Audio}
{AudioPlayerWhite}
{block:Caption}{Caption}{/block:Caption}
{/block:Audio}

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

{block:Answer}
<div class="ask_asker">
<img src="{AskerPortraitURL-16}" alt="" /> {Asker} asked
</div>
<div class="ask_question">{Question}</div>
<div class="ask_answer">{Answer}</div>
{/block:Answer}

{block:HasTags}
{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}<br /><br />
{/block:HasTags}

<br /><br />
{block:Date}<i>Posted {DayOfMonth}{DayOfMonthSuffix} {Month}, {Year}</i>{/block:Date}

{/block:Posts}

{block:PostNotes}
<div id="notez">{PostNotes}</div>
{/block:PostNotes}
</div>

<div class="clear"></div>
{/block:PermalinkPage}


<div id="credit">xxx theme <a href="http://roboweed.tumblr.com/">roboweed</a></div>

</body></html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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: 14th September 2014 - 09:01 PM