The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Customizing Permalink pages (tumblr), customizing permalink pages using html and css
sola
post Oct 25 2011, 05:31 PM
Post #1





Group: Members
Posts: 5
Joined: 25-October 11
Member No.: 15,715
I was hoping someone with experience using HTML and CSS could help me solve this issue. Tumblr experience is NOT needed, but may help. This has been bugging me for a week now, I just want to finish my custom theme sad.gif Anyway, when i click a post on my tumblr page, it sends me to a permalink page, which is fine but, the image on that page is the same size as it is on the index page. I would like it to be its original size (I've seen this done before, probably not difficult). I've scaled images on the index page to a width and height of 250 pixels. Tumblr supports a max width of 500 pixels, I would like images on my permalink page to be 500 pixels wide, as well as centered (This is default for a permalink page).
Thank you in advance for your ideas and suggestions, I will test them all and reply promptly.

Here is an example of a normal permalink page:example permalink page
Here is my permalink page:My permalink page

Finally here is my validated 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 style="color:#fff;" />
{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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sola
post Oct 25 2011, 06:10 PM
Post #2





Group: Members
Posts: 5
Joined: 25-October 11
Member No.: 15,715
Did anyone even read this? ): I really need help, this is frustrating

This post has been edited by sola: Oct 25 2011, 06:10 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 25 2011, 06:58 PM
Post #3


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

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Yes, 21 people so far. You can see that in the View column right here: http://forums.htmlhelp.com/index.php?showforum=10 . smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Oct 25 2011, 08:17 PM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Unfortunately, most of us don't know a thing about Tumblr.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sola
post Oct 25 2011, 08:38 PM
Post #5





Group: Members
Posts: 5
Joined: 25-October 11
Member No.: 15,715
QUOTE(Darin McGrew @ Oct 25 2011, 06:17 PM) *

Unfortunately, most of us don't know a thing about Tumblr.


well, if you have any questions about how some of the mechanics work i can explain, but ill leave the coding up to you guys wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sola
post Oct 25 2011, 08:53 PM
Post #6





Group: Members
Posts: 5
Joined: 25-October 11
Member No.: 15,715
):

This post has been edited by sola: Oct 25 2011, 09:40 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 23rd April 2024 - 08:28 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC