Custom image in preset CSS theme question

LadyPintada · 08-03-2011, 03:03 AM

I've been away from CSS and HTML for a while and now I'm having some issues. This theme from Tumblr is supposed to have a set up where you can easily custom insert an image over the "about" section just over where it says "home". I'm having a hard time figuring out how to do this and blahhhh it is frustrating me. Can you just point me to where I need to insert the dang image source.

http://ladypintada.tumblr.com/

Side note, do you know how I could bring the content and the about section a little closer together, closing the middle gap.

I hope this makes sense. Thank you.

Code:

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

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


<!--PODEM MODIFICAR O QUE QUISEREM NO THEME, SÓ PEÇO PARA NÃO TIRAREM OS CRÉDITOS, NUNCA, JAMAIS! OBRIGADA! HAHA-->

<!-- FONTE PERSONALIZADA -->
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>

<head>

<title>{TITLE}</title>


<!-- DEFAULT VARIABLES -->

<link rel="shortcut icon" href="{Favicon}">

<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}


<!-- APPEARANCE -->

<meta name="image:Background" content="url(http://www.piccolecreazioni.com/velvetfactory/images/you/pattern/21/VF_q02.jpg)"/>
<meta name="color:Navigation" content="#000000"/>
<meta name="color:Navigation2" content="#E4DDA9"/>
<meta name="image:NavigationBG" content="url(http://www.pixyup.com/uploads/112327214e1b6ab91f377.jpg)"/>
<meta name="color:Sidebar" content="#ffffff"/>
<meta name="color:Box" content="#ffffff"/>
<meta name="color:Title" content="#B3B1B1"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:Link" content="#FF004D"/>
<meta name="color:Link2" content="#000000"/>
<meta name="font:Body" content="georgia"/>
<meta name="if:Enable Image Opacity" content="1"/>
<meta name="image:300pxPortrait" content=""/>

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

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

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

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

<meta name="text:Link 5 Name" content=""/>
<meta name="text:Link 5 URL" content=""/>

<style type="text/css">

body {
background-image:{image:Background};
background-position:{text:Background Image Position};
{block:IfBackgroundImageNotRepeat}background-repeat:no-repeat;{/block:IfBackgroundImageNotRepeat}
{block:IfBackgroundImageFixed}background-attachment: fixed;{/block:IfBackgroundImageFixed}
color:{color:Text};
font-size:13px;
line-height:18px;
font-family:{font:body};
}


a, a:visited, a:active {
color:{color:Link};
text-decoration: none;
}

a:hover {
color:{color:Link2};
text-decoration:none;
}

p {
margin: 2px 2px 2px 2px;
line-height:16px;
padding: 0;
}

ol.notes {
padding: 0px;
margin: 25px 0px;
list-style-type: none;
border-bottom: dotted 1px {color:text};
}

ol.notes li.note {
border-top: dotted 1px {color:text};
padding: 10px;
}

ol.notes li.note img.avatar {
margin-right: 10px;
width: 20px;
height: 20px;
}

blockquote{padding:0px; padding-left:5px; margin:5px; border-left:1px dotted {color:text};}
blockquote img{display:block;}
blockquote p{padding:0px; margin:0px;}
blockquote blockquote{position:relative; left:-5px; margin-top:0px; margin-right:0px; padding-right:0px;}
a img{border:none;}





#content{
position:absolute;
top:25px;
width:520px;
right:180px;
padding:10px;
margin:auto;
}





#sidebar{
top:85px;
width:300px;
position:fixed;
left:47px;
overflow:hidden;
padding:0px;
background-color: {color:Sidebar};
}




#post{
padding:10px;
margin-bottom:10px;
background-color: {color:Box};
}




h1 {
font-size:24px;
font-weight:normal;
font:{font:title};
color:{color:Title};
text-transform:none;
line-height:20px;
letter-spacing:-2px;
}


.h2 {
font-size:11px;
font:{font:text};
color:{color:text};
background-color: transparent;
text-align: right;
text-transform:uppercase;
padding:1px;
font-weight:normal;
}


h3 {
margin-top:10px;
margin-bottom:10px;
font-size:28px;
font-weight:normal;
font:{font:title};
color:{color:Title};
text-transform:none;
line-height:20px;
letter-spacing:-2px;
}

h4 {
font-size:30px;
font:{font:title};
color:{color:Title};
text-transform:none;
line-height:20px;
letter-spacing:-2px;
font-weight:normal;
}

.name {
font-size:28px;
font:{font:title};
text-transform:lowercase;
line-height:25px;
letter-spacing:-2px;
font-weight:normal;
}

#credit{
padding-top:5px;
text-align:center;
width:500px;
}


.album-art {
float: left;
width: 100px;
height: 100px;
overflow: hidden;
}

.about {
font-size:15px;
font:;
color:#FFFFFF;
background-color: #transparent
text-align: center;
text-transform:uppercase;
padding:1px;
margin-bottom:-15px;
letter-spacing:10px;

}


.introduction_title { 
float: left;
left: 40px
color: #303347;
font-family: 'Dancing Script';
text-transform: none;
font-size: 70px;
letter-spacing: 2px;        
}

.introduction_subtitle { 
color: #303347;
font-family: 'Dancing Script';
text-transform: none;
font-size: 13px;
letter-spacing: 2px;        
}


div.navigation a{
background: {image:NavigationBG}; color: {color:Navigation}; display:block; width: 320px; height: 20px; text-align: center; padding-top:0px; margin-left:0px; margin-top:0px; position:relative; text-align: center; text-transform: uppercase; z-index:1; font-weight: regular; display: inline-block; border-bottom: #transparent 1px dotted;
}
div.navigation a:hover{
background: #transparent; color: {color:Navigation2}; letter-spacing:6px; text-transform: uppercase; border-bottom: #transparent 3px solid;
}


div.botright{
-moz-border-radius:10px; border-radius:10px;
z-index:9;
font-size:9px;
display:block;
position: fixed;
left:-14px;
bottom:0px;
padding:6px;
padding-left:20px;
background-image:url(http://static.tumblr.com/j4dtzbm/Amxlg5cp4/transparentg.png);
background-color: transparent;}





img, a img {
border: 0px !important;
}

.pimg {
{block:IfEnableImageOpacity}
opacity: 0.8; filter:alpha(opacity=85);
{/block:IfEnableImageOpacity}
-webkit-transition-duration: 0.8s;
max-width: 500px;
}

.pimg:hover {
{block:IfEnableImageOpacity}
opacity:1; filter:alpha(opacity=99);
{/block:IfEnableImageOpacity}
}



{CustomCSS}



</style>



</head>
<body>



<center>

</script></div><br><br><center>
<div class="text">{text:your url here}</div>
</div></div><p></center>

</center>

<div id="sidebar">
<br>
{block:If300pxPortraitImage}<a href="/"><img src={image:300pxPortrait} width=300"></a><br><p>{/block:If300pxPortraitImage}
<br>
<div class="navigation">
<a href="/">Home</a>
<a href="/archive">Archive</a>
<a href="/ask">Ask</a>
{block:IfLink1Name}<a href="{text:link 1 url}">{text:link 1 name}</A>{/block:IfLink1Name}
{block:IfLink2Name}<a href="{text:link 2 url}">{text:link 2 name}</A>{/block:IfLink2Name}
{block:IfLink3Name}<a href="{text:link 3 url}">{text:link 3 name}</A>{/block:IfLink3Name}
{block:IfLink4Name}<a href="{text:link 4 url}">{text:link 4 name}</A>{/block:IfLink4Name}
{block:IfLink5Name}<a href="{text:link 5 url}">{text:link 5 name}</A>{/block:IfLink5Name}
</div><p>
<br>
<div class="about"></div><br><center><em>
{block:Description}{Description}{/block:Description}
</center></em>
<br>
<br>
<em>
<small>
Theme by: <u><a href="http://heloteixeira.tumblr.com"><font color="2c2c2c">Heloísa Teixeira</font></u></a>
<br>
Base by: <u><a href="http://jahrenesis.tumblr.com"><font color="2c2c2c">Jahrenesis</font></u></a>
</em>
</small>
</div>




<div id="content">


{block:Posts}



<div id="post">

{block:Text}
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
{Body}
{/block:Text}

{block:Photo}
{LinkOpenTag}<img class="pimg" src="{PhotoURL-500}" alt="{PhotoAlt}" width="500px"/>{LinkCloseTag}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photo}

{block:Photoset}
<center>{Photoset-500}</center>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photoset}

<em>
{block:Quote}
<h3>"{Quote}"</h3>
{block:Source}
-{Source}
{/block:Source}
{/block:Quote}
</em>

{block:Link}
<a href="{URL}" class="link" {Target}><h3>{Name}</h3></a>
{block:Description}
{Description}
{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
{block:Lines}
{block:Label}<b>{Label}</b>{/block:Label}
{Line}<br>
{/block:Lines}
{/block:Chat}


{block:Video}
<center>{Video-500}</center>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Video}


{block:Audio}<br/>
{block:AlbumArt}<div class="album-art"><img src="{AlbumArtURL}" height="90px"></div>{/block:AlbumArt}
{AudioPlayerWhite}
{block:Caption}
{Caption}
{/block:Caption}
{PlayCountWithLabel}<br><br>
{/block:Audio}<br>

<div class="h2">
{block:NoteCount}{NoteCountWithLabel}</a> ∞ <a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank">Reblog</a> ∞ {/block:NoteCount}
<a href="{Permalink}">
{TimeAgo}{/Block:NoteCount}</a>
</div>

{block:PermalinkPage}
<center>{Block:NoteCount}Posted on {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}{/Block:NoteCount}
<br>
{block:HasTags} Tagged as: {block:Tags}<a href="{TagURL}">{Tag}. </a>{/block:Tags}<br> {/block:HasTags}
{block:RebloggedFrom}
Reblogged from: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
Originally posted by: <a href="{ReblogRootURL}">{ReblogRootName}</a> {/block:RebloggedFrom}
</center>
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:PermalinkPage}

</div>
{/block:Posts}




<div id="post">
<div id="credit">
<font size="5">
<center>{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}">«</a>
{/block:PreviousPage}

{block:JumpPagination length="5"}
{block:CurrentPage}
{PageNumber}
{/block:CurrentPage}

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

{block:NextPage}
<a href="{NextPage}">»</a>
{/block:NextPage}
{/block:Pagination}</center>
</font></div></div>


<div class="botright">
<b>Theme By: </b><a href="http://heloteixeira.tumblr.com"><font color="ffffff">Heloísa Teixeira</font></a>
</div>

</div>
</div>
</div>
</body>
</html>

Sammy12 · 08-03-2011, 03:38 AM

link wasn't working, but hopefully this is your website.

---

so here's the css for the left panel (#sidebar) and right panel (#content).

for #sidebar change left: 47px; to a larger number (maybe 70px or so).
for #content change right: 180px; to a larger number (maybe 210px or so).

that will reduce the gap, however for the image, are you trying to make it like a background to your about section, on top, or some place else?

LadyPintada · 08-03-2011, 01:09 PM

ladypintada.tumblr.com/

Here try that link. Sorry about that.

Where the picture of the two girls sitting over the "home" link is where I'd like a picture. Roughly the same size. Sorry I can't get a better preview.

And thank you so much for the other part! That totally fixed the gap issue!

vikram1vicky · 08-03-2011, 01:43 PM

You can insert image under <div id="sidebar">

Code:

<div id="sidebar"><br>

<br>

<div class="navigation">
<a href="/">Home</a>

<a href="/archive">Archive</a>

<a href="/ask">Ask</a>

Also now, your sidebar is hidden behind the main contain