Where would i put this code?

tai chi · 10-24-2011, 01:19 AM

I am trying to separate the way my index page looks from the way my permalink page looks. I want the images on my permalink page to be their original size, center, with the notes below.

Mine looks like this (example permalink page): http://testingmyblogagain.tumblr.com/post/11641079709

It should look like this:http://ogisio.tumblr.com/post/11259962041

Someone gave this code below to fix it, but i dont know where to place it in my theme html code.

Code:

<div class="post pic">
    {block:IndexPage}
    <img src="{PhotoURL-250}" />
    {/block:IndexPage}
    
    {block:PermalinkPage}
    <img src="{PhotoURL-500}" />
    {/block:PermalinkPage}
</div> <!--EndFragment-->

Here is a link to the page i am referring to: http://testingmyblogagain.tumblr.com

Finally here is my full theme HTML code.

Code:

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<meta>
<title>{Title}</title>
<meta name="description" content="{MetaDescription}">
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<style type="text/css">
.titlesetting
{
color:#fff;
background-color:none;
text-align:center;
text-transform:capitalize;
text-decoration:blink;
}
    
#wrapper
{
height:1000px;
width:1000px;
margin-left:220px;
border:none;
}

body
{
color:#fff;
background-color:#000;
text-align:justify;
text-decoration:none;
text-transform:lowercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image:url();
}

img
{
border:none;
height:300px;
width:300px;
float:left;
margin:0px;
}
      
.postpic
{
text-align:center;
height:300px;
width:300px;
float:left;
margin:0px;
overflow:auto;
}
    
a
{
font-weight:bold;
text-decoration:none;
color:#2554C7;
background-color:{background-color:color}
}

.sidebar 
{
background-color:#000;
border:solid;
border-width:2px;
border-color:#fff;
color:#fff;
text-align:left;
overflow:inherit;
width:210px;
height:500px;
position:fixed;
top:70px;
left:7px;
}

.sidebar img
{
width:128px;
height:auto;
display:block;
position:fixed;
top:110px;
left:50px;
}

.perma
{
background-color:{color:center};
display:block;
width:500px;
line-height:18px;
float:right;
padding:5px;
margin-top:10px;
text-align:left;
}
.perma img
{
width:16px;
height:16px;
position:relative;
top:2.5px;
}
    
{CustomCSS}
</style>
</head>
<body>
{block:Description}{/block:Description}<a href="/"><h1 class="titlesetting">{Title}</h1></a>
<hr>
{block:Description}
<h5 class="sidebar"><img src="{PortraitURL-128}" />{Description}</h5>
{/block:Description}
<div id="wrapper">{block:Posts} {block:Text}
<div class="postpic">{block:Title}
<h5><a href="{Permalink}">{Title}</a></h5>
{/block:Title} {Body}</div>
{/block:Text} {block:Photo} <a href="{Permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"></a> {/block:Photo} {block:Photoset} {Photoset-500} 

{/block:Photoset} {block:Link}
<div class="postpic"><a href="{URL}" class="link">{Name}</a> {block:Description} {Description} {/block:Description}</div>
{/block:Link} {block:Video}
<div class="postpic">{Video-250} {block:Caption}<a href="{Permalink}">
{Caption}</a> {/block:Caption}</div>
{/block:Video}{block:Audio}
<div class="postpic">{AudioPlayerBlack}{PlayCountWithLabel} {block:Caption}<a href="{Permalink}">{Caption}</a> {/block:Caption}</div>
{/block:Audio}
{block:PostNotes}
        <div class="perma">
        {PostNotes}
    </div>
{/block:PostNotes}
{/block:Posts}
</div>




</body>
</html>

sunfighter · 10-24-2011, 05:29 PM

I want the images on my permalink page to be their original size, center, with the notes below.

try this:

#wrapper
{
width:500px;
margin-left: auto;
margin-right: auto;
border:none;
}

tai chi · 10-24-2011, 06:03 PM

for my permalink page? or do i change my wrapper id to those settings?

sunfighter · 10-24-2011, 08:55 PM

Quote:

Originally Posted by tai chi

for my permalink page? or do i change my wrapper id to those settings?

I did it on your permalink page css code. I left the under development box up, so it might look a little weird. And I'm not sure if this is what you wanted. Take a look and let me know.

Just comment out your css

Code:

#wrapper
{
height:1000px;
width:1000px;
margin-left:220px;
border:none;
}

and add mine

Code:

#wrapper
{
width:500px;
margin-left: auto;
margin-right: auto;
border:none;
}

If you don't like it, go back to the old way or mess around with what I gave you.

tai chi · 10-24-2011, 10:47 PM

ill try this now, thankyou

EDIT: i see what you did, it center my permalink- yes, but i wanted the index posts to stay in grid form, the permalink images centered, and the images on permalink pages to be their original size. I have an example of what i want above

sunfighter · 10-25-2011, 03:12 PM

Sorry, guess I don't know what you want.