The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> Resize on Permalinks, Tumblr Doubt
3diego
post Mar 22 2011, 09:09 PM
Post #1


Newbie
*

Group: Members
Posts: 16
Joined: 22-March 11
Member No.: 14,182



Hey guys, i start up with a tumblr accound for my portifolio!
so, i opened up the html, n start to study n modify a theme that i like, improving, making my way!

my first time with html, n with a bit of logical thinking i got something!

but my trouble is! pretty simple for you guys smile.gif
i have this main page, and i dont know how, customize my permalinks.
take a look on my page : 3diego's Tumblr

i want that the videos and photos there are bigger!
i dont know how to put a {PhotoURL-400} / {Video-400} just for the permalinks!
i want too, when clicks on a pic goes first for the permalink, and then (from the permalink), goes to a isolate link (like now).

if you look some error there, plz criticisms are welcome

i tried in so much ways, n its been hoours since i start, n stuck on it!

since now, thanks much

sorry for my english ninja.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
3diego
post Mar 23 2011, 11:10 AM
Post #2


Newbie
*

Group: Members
Posts: 16
Joined: 22-March 11
Member No.: 14,182



if need i post the code here, but plzzz help-me i'm sooo curious!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Mar 23 2011, 11:59 AM
Post #3


WDG Member
********

Group: Root Admin
Posts: 8,332
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Not many of us are familiar with Tumblr, so it may take a while for someone to read your post who can help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 23 2011, 12:00 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,810
Joined: 9-August 06
Member No.: 6



There's only one person who comes here regularly that uses Tumblr. Your problem isn't about HTML, it's about Tumblr and most of us know nothing about that. sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
3diego
post Mar 23 2011, 02:11 PM
Post #5


Newbie
*

Group: Members
Posts: 16
Joined: 22-March 11
Member No.: 14,182



seriously ;/?
i just want change the code for permalinks just it :/
i dont know how to say hey this is for this page n this is for that page in css language
omg this curiosity is killing me!!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
3diego
post Mar 23 2011, 02:12 PM
Post #6


Newbie
*

Group: Members
Posts: 16
Joined: 22-March 11
Member No.: 14,182



and @pandy who is this guy? i need mail him! biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Mar 23 2011, 02:58 PM
Post #7


WDG Member
********

Group: Root Admin
Posts: 8,332
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



"{PhotoURL-400}" and "{Video-400}" and "permalinks" aren't HTML, CSS, or JavaScript. They're Tumblr concepts. They may eventually cause Tumblr to send HTML, CSS, or JavaScript to the browser, but you need to understand Tumblr to get to that point.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
3diego
post Mar 23 2011, 03:23 PM
Post #8


Newbie
*

Group: Members
Posts: 16
Joined: 22-March 11
Member No.: 14,182



sad.gif!!! i saw so much themes with resizing of images but i cant figure it out! and another thing, if you visit againd, with IE the blocks are black, and go gray with the mouse, i was doing the whole thing on chrome, i think that i messed up something, what causes this on code? it is css right?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Mar 23 2011, 04:36 PM
Post #9


WDG Member
********

Group: Root Admin
Posts: 8,332
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Well, the online tools do report markup and CSS errors with the page:
http://htmlhelp.com/cgi-bin/validate.cgi?u...mp;warnings=yes
http://jigsaw.w3.org/css-validator/validat...ng=&lang=en

I don't know how much of that Tumblr will let you fix though.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
3diego
post Mar 23 2011, 04:36 PM
Post #10


Newbie
*

Group: Members
Posts: 16
Joined: 22-March 11
Member No.: 14,182



guys, so, i have this challenge, i found a theme that have this permalink page perfect, with resizing and all that i want!

i will post both to you can se every thing, and by your knowledge tell me where is the way or something!!
show me 1 light plzz


my code with troubles
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">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>{Title}{block:PostSummary} - {PostSummary}{/block:PostSummary}</title>        
        <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
        <link rel="icon" href="{Favicon}"/>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

        <!-- DEFAULT COLORS -->
        <meta name="color:Alternate Text" content="#bfad8a"/>
        <meta name="color:Alternate Header" content="#000"/>
        <meta name="color:Alternate Background" content="#fff"/>


    <!-- END DEFAULT COLORS -->

        <!-- iPhone -->
        <meta name="viewport" content="width=860"/>
        <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
              

<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}

body {
background:{color:Alternate Background};
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color:#555;
text-align: center;
}

#container {
width: 860px;
margin: 0 auto;
text-align: left;
}

.regular, .photo, .quote, .link, .conversation,.video, .audio, .metabox {
padding: 10px;
}

.regular img { max-width: 100%; }

.post {
width: 420px;
height: 450px;
background:#eee;
float: left;
margin-right: 10px;
margin-bottom: 10px;
position: relative;
overflow: hidden;
border-bottom-width: thin;
border-bottom-style: dashed;
border-bottom-color: #555;


}

.post:hover {
background:#eee;
}

.permalink {
border-width: 0px;
width: 250px;
height: 22px;
line-height: 11px;
position: absolute;
bottom: 0px;
left: 0px;
color: #000;
text-align:left;
background-color:#eee;
padding-left:10px;
padding-top:15px;
}

.permalink a {
color: #333;
border-bottom: 1px dotted #333;
font-size: 11px;
}

.permalink a:hover {
color: {color:Alternate Text};
border-bottom: 1px solid {color:Alternate Text};
}

.photobox {
height: 267px;
width: 400px;
overflow: hidden;
margin-bottom: 10px;
}

.audio .photobox {
background: #eee;
height: auto;
width: auto;
}

.player {
padding: 10px 20px;
border: 1px solid #eee;
}

.video .caption {
padding-top: 10px;
}

.quotetext {
font-size: 22px;
font-family: Helvetica, Arial, sans-serif;
line-height: 22px;
padding-bottom: 11px;
color: {color:Alternate Text};
}

.source {
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
text-align: right;
color: #666;
}

.caption {
line-height: 18px;
}

.conversation ul li {
line-height: 18px;
border-bottom: 1px dotted #222;
padding: 3px 0 3px 0px;
}

.conversation ul li span {
color: {color:Alternate Text};
}

.even {
border-bottom: 1px dotted #222;
}

ol li {
list-style: decimal outside;
margin: 0 0 0 20px;
padding: 0 0 5px 0
}

a {
color: {color:Alternate Text};
border-bottom: 1px dotted #443e31;
text-decoration: none;
}

a:hover {
color: #CAC9C8;
border-bottom: 1px solid #3F3F3F;
}

p {
line-height: 18px;
margin-bottom: 9px;
}

.photo strong, .photo b, .video strong, .video b, .audio strong, .audio b{
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 17px;
line-height: 18px;

}

h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 17px;
line-height: 18px;
padding: 0 0 9px 0;
}

#feed {
padding: 0px 0 15px 0;
position: relative;
margin-top:105px;
right:0px;

}

#header {
padding: 0px 0 40px 0;
position: relative;
border-bottom: 1px dashed #999;
margin-bottom:25px;

}

#header h1 {
width: 297px;
}

#header h1 a {
color:#000;
font-weight:bold;
border: 0;
font-size: 65px;
letter-spacing:-3px;
line-height: 50px;
color: {color:Alternate Header};
}

#header h1 a:hover {
color: #000;
}

#header h2 {
color:#0CF;
font: normal 1.2em/1.8 Helvetica, Arial, sans-serif;
margin-left:5px;
}

#header ul {
position: absolute;
left: 550px;
top: 40px;
}

#header ul li {
display: inline;
}

#header ul li form {
display: inline;
}

#header ul li form #searchbox {
background: #fff;
border-bottom: 1px dashed {color:Alternate Text};
opacity: 0.7;
color: #000;
}

#header ul li form #submitsearch {
display: none;
}

#header ul li a {
font-family: Helvetica, Arial, sans-serif;
color: #ddd;
font-style: bold;
border-bottom: 1px dashed #999;
margin-right: 11px;
}

#header ul li a:hover {
color: #fff;
border-bottom: 1px solid #fff;
}

#navigation, .meta {
text-align: left;
height: 450px;
float: left;
width: 260px;
background-color:#eee;
border-bottom: 1px dashed #444;
padding: 10;
}

#navigation a {
border: 0;
padding: 3px 8px;
background: #222;
}

#navigation a:hover {
background: #333;
}

.pages {
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
padding-bottom: 48px;
}

.pages span {
font-size: 110px;
}

.total {
color: #333;
}

#description{
clear: both;
padding: 4px 0;
text-align: left;
color:#0CF;
}

#search{
clear: both;
padding: 20px 0;
text-align: left;
color:#0CF;
}

#footer {
clear: both;
padding: 40px 0;
text-align: left;
}

#tags {
background-color:#eee;
padding: 40px 0;
text-align:justify;
width:828px;
font-famaly: arial, helvetica, sans serif;
font-size:8px;
color:#eee;
border-bottom: 1px dashed;
border-bottom-color:#666;
}

#pages{
clear: both;
padding: 40px 0;
text-align: left;
}

#contact{
text-align: right;
margin-right: 10px;
font-weight:bold;
}

body#perm #navigation {
display: none;
}

body#perm .post {
width: 580px;
float: left;
overflow: hidden;

  {block:Video}                        
              

}

body#perm .photobox, body#perm, .videobox {
float: none;
margin-right: 10px;
        }

.meta {
display: none;
}

body#perm .meta {
display: block;
text-align: left;
}

body#perm .permalink {
display: none;
z-index: 100;
}

.meta span, h3 {
text-transform: uppercase;
font-size: 10px;
color: {color:Alternate Text};
display: block;
line-height: 18px;
}

#searchresultcount {
text-align: left;
margin-bottom: 20px;
color: {color:Alternate Text};
}

.query { font-weight: bold; }

{CustomCSS}
</style>

    <!--[if IE]>
            <style type="text/css">
                .post, #navigation, .meta { background:#010101; }
                                #header ul li form #searchbox { filter: alpha(opacity=70); }
            </style>
        <![endif]-->
</head>
    <body {block:Permalink}id="perm"{/block:Permalink}>                
        <div id="container">    
            <div id="header"><div id="feed"><ul>
                     <!--<li><a href="/archive">archive</a></li>
                    <li><a href="{RSS}">rss feed</a></li>
                                <li>
                                    <form action="/search" method="get">
                                        <input type="text"  size="15" id="searchbox" name="q" value="{SearchQuery}"/>
                                        <input type="submit"  id="submitsearch" value="Search"/>
                                    </form>
                                </li>-->
                </ul>
                <h1><a href="/">{Title}</a></h1>
                                <h2>{Description}</h2>
                
            </div></div>
        
                    {block:SearchPage}
                    <div id="searchresultcount">
                        <p>Your search for <span class="query">{SearchQuery}</span> returned {SearchResultCount} result(s).</p>
                    </div>
                    {/block:SearchPage}
                    
            {block:Posts}
                <div class="post">
                    {block:Regular}
                        <div class="regular">        
                            {block:Title}<h1>{Title}</a></h1>{/block:Title}
                            {Body}
                        </div>
                    {/block:Regular}
                
                    


{block:Photo}
                <div class="permalink"><a
                        href="{Permalink}">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear} | {TimeAgo}</a></div>    
                        <div class="photo">
                            <div class="photobox">{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        </div>
                    {/block:Photo}




                
                    {block:Quote}
                        <div class="permalink"><a
                        href="{Permalink}">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</a></div>
                        <div class="quote">
                            <div class="quotetext">
                                 {Quote}
                            </div>
                            {block:Source}<div class="source"> {Source}</div>{/block:Source}</div>
                    {/block:Quote}
                
                    {block:Link}
                        <div class="permalink"><a
                        href="{Permalink}">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</a></div>
                        <div class="link">
                            <h1><a href="{URL}" {Target}>{Name} </a></h1>
                            {block:Description}
                                <p class="description">{Description}</p>
                            {/block:Description}
                        </div>
                    {/block:Link}
                
                    {block:Conversation}
                        <div class="permalink"><a
                        href="{Permalink}">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</a></div>
                        <div class="conversation">
                            {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
                                <ul>
                                    {block:Lines}
                                        <li class="{Alt}">
                                            {block:Label}<span class="label">{Label}</span>{/block:Label}
                                            {Line}
                                        </li>
                                    {/block:Lines}
                                </ul>
                        </div>
                    {/block:Conversation}
                
                    {block:Video}
                        <div class="permalink"><a
                        href="{Permalink}">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear} | {TimeAgo}</a></div>            
                        <div class="video">        
                            <div class="videobox">{Video-400}</div>                    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        </div>
                    {/block:Video}

                 {block:Audio}
                        <div class="permalink"><a
                        href="{Permalink}">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</a></div>
                        <div class="audio">
                            <div class="photobox"><div class="player">{AudioPlayerBlack}</div></div>
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        </div>
                    {/block:Audio}
                </div>
                      

                <div class="meta">
                    <div class="metabox">
                        <p><span>posted :</span> {DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}</p>
                        <p><span>tags :</span> {TagsAsClasses}</p>
                        {block:RebloggedFrom}<p><span>reblogged from :</span>
                        <a href="{ReblogParentURL}">{ReblogParentTitle}</a></p>{/block:RebloggedFrom}
                    </div>
                </div>
            {/block:Posts}
<div id="contact">
3diego.fx@gmail.com
</div>
    
        
            <div id="pages">
                {block:PreviousPage}
                    <a href="{PreviousPage}"></a>
                {/block:PreviousPage}{CurrentPage}
    
                {block:NextPage}
                    <a href="{NextPage}"></a>
                {/block:NextPage}
            </div>

                        <div id="search">
            <br />        <li>
                                    <form action="/search" method="get">
                                        <input type="text"  size="15" id="searchbox" name="q" value="{SearchQuery}"/>
                                        <input type="submit"  id="submitsearch" value=" Go! "/>
                                    </form>
                                </li>
            </div>

<div id="tags"><!-- Start Tumblr Tag Cloud -->
<script type="text/javascript" src="http://code.hr1v.com/jquery.1.2.6.min.js"></script><script type="text/javascript" src="http://tumblrtags.hr1v.com/widget.js?css=default&minsize=120&maxsize=550"></script>
<!-- End Tumblr Tag Cloud --></div>

<div id="footer">
                <a href="{RSS}">rss</a> |
                 <a href="http://www.tumblr.com/" target="_blank">tumblr</a>
                
        </div>
    </body>
</html>


the code ugly, but with the resizing ok
CODE

<!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>
        <title>{Title}</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}

        <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
        <meta name="image:Background" content="http://static.tumblr.com/ybdgkw4/8wKE9dwSQ/brownpaper_bg.jpg"/>
        <meta name="if:Allow Temporary Post Removal" content="1"/>
        <meta name="if:Allow Temporary Post Sorting" content="1"/>
        <meta name="if:Allow Post Size Toggling" content="1"/>
        <meta name="if:Allow Post Flip For Info" content="1"/>
        <meta name="if:Show Hover Tooltips" content="0"/>
        <meta name="if:Default to Large Sized Posts" content="0"/>
        <meta name="color:Main Background" content="#454545"/>
        <meta name="color:Header Background" content="#000"/>
        <meta name="color:Title" content="#fff"/>
        <meta name="color:Title Hover" content="#999"/>
        <meta name="color:Post Size Link" content="#666"/>
        <meta name="color:Description" content="#fff"/>
        <meta name="color:Post Background" content="#F2EFDF"/>
        <meta name="color:Link" content="#C02B00"/>
        <meta name="color:Link Hover" content="#C02B00"/>
        <meta name="color:Footer Links" content="#ffffff"/>
        <meta name="color:Footer Links Hover" content="#ffffff"/>
        <meta name="color:Body Text" content="#555"/>
        <meta name="color:Caption Text" content="#fff"/>
        <meta name="color:Chat Highlight" content="#fff"/>
        <meta name="color:Reblog Stripe" content="#C02B00"/>
        <meta name="color:Tool Tip Background" content="#888"/>

        <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js" type="text/javascript" charset="utf-8"></script>
        <script src="http://static.tumblr.com/ybdgkw4/PYvkqhjbk/mootools-1.2.3.1-more-photoboard.js" type="text/javascript" charset="utf-8"></script>

        <link rel="shortcut icon" href="{Favicon}">        
        <link rel="alternate" type="application/rss+xml" href="{RSS}">
        <style type="text/css" media="screen">
        /*
        Theme: Photo Board 2.4
        Last updated: Jan 3 2011
        Author: Ben Delaney - [url=http://bendelaney.me]http://bendelaney.me[/url]
        */
            
        /*BASIC RESET*/
        * {margin:0; padding:0;}
        fieldset,img {border:0;}
        ol,ul {list-style:none;}
        a:active, a:focus {outline: 0;}
        h1,h2,h3,h4,h5,h6,span {font-size:100%;font-weight:normal;}

        /*General*/
        body {
            font-family: "Arial Rounded MT Bold",Helvetica,Arial,"Lucida Grande",sans-serif;
            font-size: 12px;
            width: 100%;
            background-color: {color:Main Background};
            background-image: url({image:Background});
            }
        #wrapper {
            width: 100%;
            }
        a, a:visited {
            color: {color:Link};
            text-decoration: none;
            }
        a:hover {
            text-decoration: underline;
            color:{color:Link Hover};
            }
        a.install {
            background: url(http://static.tumblr.com/thpaaos/dHHkt0jor/install_theme.png);
            display: block;
            height: 20px;
            position: absolute;
            z-index:5000;
            right: 2px;
            top: 26px;
            width: 96px;
            text-indent: -9999px;
            }

        /*Header*/
        #header {
            min-height: 25px;
            overflow: hidden;
            background: {color:Header Background};
            }
            #header h1 {
                font-size: 14px;
                font-family: "Arial Rounded MT Bold",Helvetica,Arial,"Lucida Grande",sans-serif;
                margin-left: 14px;
                margin-right: 20px;
                padding-top: 4px;
                float: left;
                }
                #header h1 a, #header h1 a:visited {
                    color: {color:Title};
                    text-decoration: none;
                    }
                #header h1 a:hover {
                    color: {color:Title Hover};
                    }
            #header #sizes {
                float: left;
                width: 150px;
                {block:PermalinkPage}display:none;{/block:PermalinkPage}
                }
                #header #sizes li {
                    float: left;
                    }
                    #header #sizes li a, #header #sizes li a:visited {
                        font-family: "Arial Rounded MT Bold",Helvetica,Arial,"Lucida Grande",sans-serif;
                        font-size: 11px;
                        color: {color:Post Size Link};
                        float: left;
                        padding: 3px 8px;
                        margin-left: 8px;
                        margin-top: 4px;
                        text-decoration: none;
                        }
                    #header #sizes li a:hover {
                        background: {color:Post Size Link};
                        color: {color:Link Hover};
                        text-decoration: none!important;
                        }
                    #header #sizes li a:active {
                        background: #000;
                        }
            #about {
                margin-left: 14px;
                padding-top: 8px;
                padding-bottom: 12px;
                font-family: Helvetica,Arial,'Lucida Grande', sans-serif;
                font-size: 11px;
                color: {color:Description Color};
                clear: left;
                width: 85%;
                }
            #pagelinks {
                margin-left: 18px;
                font-family: Helvetica,Arial,'Lucida Grande', sans-serif;
                font-size: 11px;
                color: {Link};
                float: left;
                padding: 3px 8px;
                margin-top: 4px;
                }
                #pagelinks a, #pagelinks a:visited {
                    margin-right: 18px;
                    }
                #pagelinks a:hover {
                    text-decoration: underline;
                    color:{color:Link Hover};
                    }
        /*Sub-title on Tag and Search Results pages */
        h2 {
            color: #fff;
            margin: 14px;
            font-size: 20px;
            }

        /*Posts*/
        ol#posts {
            height:1%;
            overflow:hidden;
            }
        ol#posts.permalinkpage  {
            width:545px;
            margin:0 auto;
            }
            .post {
                background: {color:Post Background};
                display: block;
                margin: 14px;
                float: left;
                text-align: center;
                position: relative;
                overflow: hidden;
                border-radius: 8px;
                -moz-border-radius: 8px;
                -webkit-border-radius: 8px;
                -webkit-box-shadow: 0px 5px 40px rgba(0,0,0,0.75);
                }
                .post .inner {
                    padding: 22px 14px 14px;
                    margin-bottom:14px;
                    }

            .post.large {
                height: 708px;
                width: 528px;
                }
            .post.small {
                height: 436px;
                width: 328px;
                }
            ol#posts.permalinkpage .post {height:auto;}
            .post.large .photo img {
                margin-bottom: 10px;
                }
            .post.small .photo img {
                margin-bottom: 10px;
                width: 300px;
                }
            .post.small .video object, .post.small .video object embed {
                width: 300px!important;
                }
            .post.large .video object, .post.large .video object embed {
                width: 500px!important;
                }
            .post.small .photoset embed {
                width: 300px!important;
                height: 408px!important;
                }
            .post.large .photoset embed {
                width: 500px!important;
                }
            .post.small .quote.short .thequote {
                text-align: left;
                font-size: 40px;
                }
            .post.large .quote.short .thequote {
                font-size: 54px;
                }
            .post.small .quote.medium .thequote {
                font-size: 26px;
                }
            .post.large .quote.medium .thequote {
                font-size: 34px;
                }
            .post.small .quote.long .thequote {
                font-size: 18px;
                }    
            .post.large .quote.long .thequote {
                font-size: 24px;
                }
            .post.large .single-page li {
                float: none;
   

This post has been edited by 3diego: Mar 23 2011, 05:08 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
3diego
post Mar 23 2011, 04:51 PM
Post #11


Newbie
*

Group: Members
Posts: 16
Joined: 22-March 11
Member No.: 14,182



@Darin McGrew thanks for your help!
seems that ill be not easy to clean the code to see if the IE trouble will fix
for now i think that i'll put this away and try to fix the "permalink" stuff,
I THINK, that im a little closer now that i look this new code and see somethings that tells about the permalink;
the photoURL is 500 dont have 2 like i thought that i had to do;
saw too, some auto sizing on main page, etc..
sorry for my "beginner thinking" that was the thinks that i observe on this new code,
i dont know if is much, but could you guys help me how to use this new code on old one? or i'm crazy?

thannnks much!!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
3diego
post Mar 23 2011, 05:30 PM
Post #12


Newbie
*

Group: Members
Posts: 16
Joined: 22-March 11
Member No.: 14,182



sorry, the second code doesnt fit on that reply so ill post the rest :
CODE

.post.large .single-page li {
                float: none;
                margin: 14px auto;
                }

            .post h3 {
                font-size: 16px;
                margin-bottom:8px;
                font-weight: bold;
                }
            .post .chat,
            .post .link,
            .post .text,
            .post .quote,
            .post .audio {
                text-align: left;
                }
            .post .textbody,
            .post .audiobody,
            .post .linkbody,
            .post .photobody,
            .post .videobody {
                text-align: left;
                line-height: 18px;
                color:{color:Body Text};
                }
                
                .textbody img {
                    max-width: 100%;
                }
                
            .post p {
                margin-bottom:14px;
                }
            .post .link a.thelink,
            .post .link a.thelink:visited {
                margin-bottom:8px;
                display: block;
                padding-top: 1px;
                font-size: 24px;
                color: {color:Link};
                }
            .post .link a.thelink:hover {
                color: {color:Link Hover};
                text-decoration: underline;
                }
            .post .link .description {
                margin-top: 18px;
                }

            .post .quote .quotesource {
                padding:10px 0px 0px 20px;
                font-style: italic;
                }
                .post .quote .quotesource a {
                    color:{color:Link};
                    }

            .post .audio .audioartwork img {max-width:100%;}        
            .post .audio .audioplayercontainer {
                background:#000;
                }
            .post .audio .audiobody {
                margin-top:8px;
                }
            .post .chat .chatbody {
                margin:8px -14px 0;
                font-size: 14px;
                color:{color:Body Text};
                }
                .post .chat .chatbody li {
                    padding:2px 14px;
                    }
                .post .chat .chatbody li.even {
                    background:transparent;
                    }
                .post .chat .chatbody li.odd {
                    background:{color:Chat Highlight};
                    }
                .post .chat .chatbody li span.chatlabel {
                    font-weight: bold;
                    padding-right:4px;
                    color:#000;
                    }
            .post .inner blockquote {
                margin-left:8px;
                padding-left:8px;
                border-left:2px solid #ccc;
                }

            .post .caption {
                position: absolute;
                z-index: 500;
                bottom:36px;
                left:0px;
                opacity: 0;
                -moz-opacity: 0;
                -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                filter:alpha(opacity=0);
                width:100%;
                height:228px;
                overflow:hidden;
                color: {color:Caption Text};
                text-align: left;
                background: url(http://static.tumblr.com/ybdgkw4/BCKL9dwSQ/caption-bg.png);
                font-weight: bold;
                text-align: left;
                }

                .permalinkpage .post .caption {display:none;}
                .post .caption .captioninner {padding:8px;}

                .post .caption a,
                .post .caption a:visited {
                    color: #fff;
                    text-decoration: underline;
                    }
                .post .caption a.readmore {
                    display:block;
                    position:absolute;
                    z-index: 550;
                    text-decoration: none;
                    bottom:8px;
                    right:8px;
                    background-color:{color:Link};
                    color:#fff;
                    padding:4px 12px;
                    border-radius: 12px;
                    -moz-border-radius: 12px;
                    -webkit-border-radius: 12px;
                    }
                    .post .caption a.readmore:hover {
                        background-color:{color:Link Hover};
                        }
            .post .postactions {
                {block:PermalinkPage} display:none; {/block:PermalinkPage}
                position:absolute;
                top:0;
                left:0;
                height:20px;
                width:100%;
                z-index: 10000;
                }
                .post a.actions {
                    display:block;
                    width: 14px;
                    height: 14px;
                    background-image: url(http://static.tumblr.com/internal/6zRkqqnwf/tinyicons.png);
                    background-repeat:no-repeat;
                    text-indent:-9999px;
                    margin:3px;
                    opacity: 0.3;
                    -moz-opacity: 0.3;
                    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
                    filter:alpha(opacity=30);
                    }
                    .post a.actions:hover {
                        opacity: 1;
                        -moz-opacity: 1;
                        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                        filter:alpha(opacity=100);
                        }
                .post a.subtract {
                    float:left;
                    background-position:left top;
                    }
                .post a.flip {
                    float:right;
                    margin-right:6px;
                    background-position:-14px top;
                    }
                .post a.mover {
                    float:right;
                    margin-right:6px;
                    background-position:-28px top;
                    }
                .post a.permalink {
                    float:right;
                    background-position:right top;
                    }
            
            .post .reblogged {
                position:absolute;
                z-index: 1000;
                padding:3px 0px;
                bottom:0px;
                left:0px;
                width:100%;
                background:{color:Reblog Stripe};
                text-align: left;
                border-bottom-right-radius: 8px;
                -moz-border-radius-bottomright: 8px;
                -webkit-border-bottom-right-radius: 8px;
                border-bottom-left-radius: 8px;
                -moz-border-radius-bottomleft: 8px;
                -webkit-border-bottom-left-radius: 8px;
                }
                .post .reblogged a,
                .post .reblogged a:visited {
                    padding-left:9px;
                    color:#fff;
                    }
            
            .post .photobody,
            .post .videobody {
                line-height: 14px;
                margin-bottom:14px;
                padding:0 14px;
                }
            .post .backside {
                display:none;
                text-align: left;
                overflow:hidden;
                margin:20px 14px 14px;
                line-height: 24px;
                }
                ol#posts.permalinkpage .backside {
                    display:block;
                    margin-top:30px;
                    border-top: 4px dashed #e5e5e5;
                    }
                .post .backside h3 {
                    clear:left;
                    font-size: 20px;
                    margin:14px 0 0;
                    }
            .post .backside .taglist a {
                display: inline;
                font-size: 12px;
                text-decoration: none;
                margin-left: 8px;
                font-weight: normal;
                color: {color:Link};
                }
            .post .taglist a:hover {
                color: {color:Link Hover};
                }

            .post .backside dl {
                overflow:hidden;
                height:1%;
                }
            .post .backside dt {
                display:block;
                width:120px;
                float:left;
                clear:left;
                font-weight: bold;
                color:#000;
                text-transform: uppercase;
                }
            .post .backside dd {
                color:{color:Body Text};
                display:block;
                float:left
                }
                .post .backside dd span {
                    font-size: 11px;
                    font-style: italic;
                    }
            .post .backside .postnotes {
                margin:0 0 40px;
                }

            
        /*Footer*/
        #footer {
            clear:both;
            text-align: center;
            background: transparent;
            font-weight: bold;
            {block:PermalinkPage} margin-top:200px; {/block:PermalinkPage}
            }
        #footer a,
        #footer a:visited {
            font-family: "Arial Rounded MT Bold",Helvetica,Arial,"Lucida Grande",sans-serif;
            color: {color:Footer Links};
            }
            #footer a:hover {color: {color:Footer Links Hover};}
        #footer #pagenav {
            font-size: 18px;
            margin-bottom: 18px;
            }

        /*Tool-tips*/
        .tip {
            color: #fff;
            z-index: 13000;
            }
        .tip-title {
            font-family: Helvetica,Arial,"Lucida Grande",sans-serif;
            font-size: 11px;
            margin: 0;
            padding: 8px;
            background: {color:Tool Tip Background};
            }
        .tip-text {
            display: none;
            }

        /* CUSTOM CSS */
        {CustomCSS}
        </style>
        
    </head>
    <body>
<a href="http://www.tumblr.com/theme/113" class="install">install</a>
    <div id="wrapper">
        <div id="content">
            <div id="header">
                <h1><a href="/">{Title}</a></h1>
                {block:IfAllowPostSizeToggling}
                <ul id="sizes">
                    <li><a href="java script:void(0);" id="makelarge" accesskey="1" class="tips" title="view large posts">large</a></li>
                    <li><a href="java script:void(0);" id="makesmall" accesskey="2" class="tips" title="view small posts">small</a></li>
                </ul>
                {/block:IfAllowPostSizeToggling}

                {block:HasPages}
                <div id="pagelinks">
                    {block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}
                </div>
                {/block:HasPages}

                <div id="about">
                    <p>{block:AskEnabled}<a href="/ask">{AskLabel}</a>{/block:AskEnabled}{block:SubmissionsEnabled}<a href="/submit">{SubmitLabel}</a>{/block:SubmissionsEnabled}</p>
                    <p>{Description}</p>
                </div>
            </div>

            {block:TagPage}
            <h2>Items tagged "{Tag}":</h2>
            {/block:TagPage}

            {block:SearchPage}
            <h2>Your search for "{SearchQuery}" returned {SearchResultCount} results:</h2>
            {/block:SearchPage}

            <ol id="posts" class="{block:PermalinkPage}permalinkpage{/block:PermalinkPage}">
                {block:Posts}        
                <li class="post {block:IfNotDefaulttoLargeSizedPosts} {block:IndexPage}small{/block:IndexPage} {/block:IfNotDefaulttoLargeSizedPosts} {block:IfDefaulttoLargeSizedPosts} {block:IndexPage}large{/block:IndexPage} {/block:IfDefaulttoLargeSizedPosts} {block:PermalinkPage}large{/block:PermalinkPage}">

                    <!-- |||||||||||||||||||||||||||||||||||||||||| -->
                    <!-- PHOTO POSTS:                               -->
                    <!-- |||||||||||||||||||||||||||||||||||||||||| -->
                    {block:Photo}
                    <div class="photo inner">
                        <div class="postactions">
                            <a href="{Permalink}" class="actions permalink tips" title="permalink to this item">&bull;</a>
                            {block:IfAllowPostFlipForInfo}<a href="java script:void(0);" class="actions flip tips" title="flip for more info">flip</a>{/block:IfAllowPostFlipForInfo}
                            {block:IfAllowTemporaryPostSorting}<a href="java script:void(0);" class="actions mover tips" title="drag here to move">&harr;</a>{/block:IfAllowTemporaryPostSorting}
                            {block:IfAllowTemporaryPostRemoval}<a href="java script:void(0);" class="actions subtract tips" title="remove (not permanent)">&times;</a>{/block:IfAllowTemporaryPostRemoval}
                        </div>
                        {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}

                        {block:ContentSource}
                        <div class="reblogged">
                            <a href="{SourceURL}">{lang:Source}: {SourceTitle}</a>
                        </div>
                        {/block:ContentSource}
                    </div>
                    {/block:Photo}

                    <!-- |||||||||||||||||||||||||||||||||||||||||| -->
                    <!-- PHOTOSET POSTS:                            -->
                    <!-- |||||||||||||||||||||||||||||||||||||||||| -->
                    {block:Photoset}
                    <div class="photoset inner">
                        <div class="postactions">
                            <a href="{Permalink}" class="actions permalink tips" title="permalink to this item">&bull;</a>
                            {block:IfAllowPostFlipForInfo}<a href="java script:void(0);" class="actions flip tips" title="flip for more info">flip</a>{/block:IfAllowPostFlipForInfo}
                            {block:IfAllowTemporaryPostSorting}<a href="java script:void(0);" class="actions mover tips" title="drag here to move">&harr;</a>{/block:IfAllowTemporaryPostSorting}
                            {block:IfAllowTemporaryPostRemoval}<a href="java script:void(0);" class="actions subtract tips" title="remove (not permanent)">&times;</a>{/block:IfAllowTemporaryPostRemoval}
                        </div>

                        {Photoset-500}

                        {block:ContentSource}
                        <div class="reblogged">
                            <a href="{SourceURL}">{lang:Source}: {SourceTitle}</a>
                        </div>
                        {/block:ContentSource}

                    </div>
                    {/block:Photoset}

                    <!-- |||||||||||||||||||||||||||||||||||||||||| -->
                    <!-- TEXT POSTS:                                -->
                    <!-- |||||||||||||||||||||||||||||||||||||||||| -->
                    {block:Text}
                    <div class="text inner">
                        <div class="postactions">
                            <a href="{Permalink}" class="actions permalink tips" title="permalink to this item">&bull;</a>
                            {block:IfAllowPostFlipForInfo}<a href="java script:void(0);" class="actions flip tips" title="flip for more info">flip</a>{/block:IfAllowPostFlipForInfo}
                            {block:IfAllowTemporaryPostSorting}<a href="java script:void(0);" class="actions mover tips" title="drag here to move">&harr;</a>{/block:IfAllowTemporaryPostSorting}
                            {block:IfAllowTemporaryPostRemoval}<a href="java script:void(0);" class="actions subtract tips" title="remove (not permanent)">&times;</a>{/block:IfAllowTemporaryPostRemoval}
                        </div>
                        {block:Title}
                        <h3>{Title}</h3>
                        {/block:Title}
                        <div class="textbody">
                            {Body}
                        </div>

                        {block:ContentSource}
                        <div class="reblogged">
                            <a href="{SourceURL}">{lang:Source}: {SourceTitle}</a>
                        </div>
                        {/block:ContentSource}

                    </div>
                    {/block:Text}

                    <!-- |||||||||||||||||||||||||||||||||||||||||| -->
                    <!-- LINK POSTS:                                -->
                    <!-- |||||||||||||||||||||||||||||||||||||||||| -->
                    {block:Link}
                    <div class="link inner">
                        <div class="postactions">
                            <a href="{Permalink}" class="actions permalink tips" title="permalink to this item">&bull;</a>
                            {block:IfAllowPostFlipForInfo}<a href="java script:void(0);" class="actions flip tips" title="flip for more info">flip</a>{/block:IfAllowPostFlipForInfo}
                            {block:IfAllowTemporaryPostSorting}<a href="java script:void(0);" class="actions mover tips" title="drag here to move">&harr;</a>{/block:IfAllowTemporaryPostSorting}
                            {block:IfAllowTemporaryPostRemoval}<a href="java script:void(0);" class="actions subtract tips" title="remove (not permanent)">&times;</a>{/block:IfAllowTemporaryPostRemoval}
                        </div>
                        <a href="{URL}" {Target} class="thelink">{Name}</a>
                        
                        <div class="linkbody">
                            {Description}
                        </div>

                        {block:ContentSource}
                        <div class="reblogged">
                            <a href="{SourceURL}">{lang:Source}: {SourceTitle}</a>
                        </div>
                        {/block:ContentSource}

                    </div>
                    {/block:Link}

                    <!-- |||||||||||||||||||||||||||||||||||||||||| -->
                    <!-- QUOTE POSTS:                               -->
                    <!-- |||||||||||||||||||||||||||||||||||||||||| -->
                    {block:Quote}
                    <div class="quote {Length} inner">
                        <div class="postactions">
                            <a href="{Permalink}" class="actions permalink tips" title="permalink to this item">&bull;</a>
                            {block:IfAllowPostFlipForInfo}<a href="java script:void(0);" class="actions flip tips" title="flip for more info">flip</a>{/block:IfAllowPostFlipForInfo}
                            {block:IfAllowTemporaryPostSorting}<a href="java script:void(0);" class="actions mover tips" title="drag here to move">&harr;</a>{/block:IfAllowTemporaryPostSorting}
                            {block:IfAllowTemporaryPostRemoval}<a href="java script:void(0);" class="actions subtract tips" title="remove (not permanent)">&times;</a>{/block:IfAllowTemporaryPostRemoval}
                        </div>

                        <div class="thequote">{Quote}</div>

                        {block:ContentSource}
                        <div class="reblogged">
                            <a href="{SourceURL}">{lang:Source}: {SourceTitle}</a>
                        </div>
                        {/block:ContentSource}

                    </div>
                    {/block:Quote}

                    <!-- |||||||||||||||||||||||||||||||||||||||||| -->
                    <!-- AUDIO POSTS:                               -->
                    <!-- |||||||||||||||||||||||||||||||||||||||||| -->
                    {block:Audio}
            &n

This post has been edited by 3diego: Mar 23 2011, 05:33 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
3diego
post Mar 23 2011, 07:45 PM
Post #13


Newbie
*

Group: Members
Posts: 16
Joined: 22-March 11
Member No.: 14,182



sorry for the mess on post, i could not put all the code here, BUT, observing i'm going to somewhere, i think.
first http://www.tumblr.com/docs/en/custom_themes take a look here guys! tells a lot about the code.

i saw in the second code "IndexPage" n "PermalinkPage"
i think that was created 2 patterns "large" and "small", see here :
CODE


<ol id="posts" class="{block:PermalinkPage}permalinkpage{/block:PermalinkPage}">
                {block:Posts}        
                <li class="post {block:IfNotDefaulttoLargeSizedPosts} {block:IndexPage}small{/block:IndexPage} {/block:IfNotDefaulttoLargeSizedPosts} {block:IfDefaulttoLargeSizedPosts} {block:IndexPage}large{/block:IndexPage} {/block:IfDefaulttoLargeSizedPosts} {block:PermalinkPage}large{/block:PermalinkPage}">


to IndexPage has the option large n small and in Permalink page if i'm not wrong just "large" option what give the impression of resizing of images.
setting to small i had a smal picture on index page, and when i open the permalink, i had this thing large.
my thinking is right people?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
3diego
post Mar 23 2011, 09:07 PM
Post #14


Newbie
*

Group: Members
Posts: 16
Joined: 22-March 11
Member No.: 14,182



im back again! its late now i'm like crazy here but i'm getting!!!
i finally did the thing that i wanted so bad!
but it only happen with the photo i dont know WHY!
reading the stuffs there i had this report

previously
CODE
{block:Photo}
                <div class="permalink"><a
                        href="{Permalink}">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear} | {TimeAgo}</a></div>    
                        <div class="photo">
                            <div class="photobox">{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        </div>
                    {/block:Photo}


now
CODE
{block:Photo}
                <div class="permalink"><a
                        href="{Permalink}">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear} | {TimeAgo}</a></div>    
                        {block:IndexPage}
<div class="photo">
                            <div class="photobox">{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
{/block:IndexPage}

{block:PermalinkPage}
<div class="photo">
                            <div class="photobox">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
{/block:PermalinkPage}
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        </div>
                    {/block:Photo}


almost cry when i did, now the photos are smaller on index n bigger on permalink! but when i tried with the video (is the same structure) everything goes down my page goes crazy ! why? is just a piece?

se the code for video

CODE
{block:Video}
                        <div class="permalink"><a
                        href="{Permalink}">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear} | {TimeAgo}</a></div>            
                        <div class="video">        
                            <div class="videobox">{Video-400}</div>                    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        </div>
                    {/block:Video}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
3diego
post Mar 23 2011, 09:14 PM
Post #15


Newbie
*

Group: Members
Posts: 16
Joined: 22-March 11
Member No.: 14,182



FINALLY I DID IT. PLZ TAKE A LOOK THERE, OMG I'M CRYING! HAHA

guys now plz hep-me put the permalink url on photo and fix that thing with internet explorer :}?

thanks much biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
monoclebunny
post Mar 24 2011, 04:37 AM
Post #16


Member
***

Group: Members
Posts: 35
Joined: 1-March 11
Member No.: 14,015



Woah dude I couldn't even MAKE myself read all that lol talk about eyes bleeding.

If you can summarise concisely what you want doing I'll help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
3diego
post Mar 24 2011, 06:15 PM
Post #17


Newbie
*

Group: Members
Posts: 16
Joined: 22-March 11
Member No.: 14,182



haha i know! sorry! but if you read the first post and the 3 last will be more easy to understand, forget about the codes! (just in case of reference use the first one that i post!(the one that i'm using))

so...I was trying resize my images, on permalink!
it was about 400px on index page. i want 500px o permalink so as the embed videos.
ok. i got that!!!! how you can see on the last 3 posts i got first the pic resizing then the videos, just using {block:PermalinkPage} n {block:IndexPage} i think that was the big one, solved!

now if you look on my page its working well!
but if you access with internet explorer, i dont know why the "note" part is going black without the hover of the mouse :/

and i want too that the pic, on IndexPages sends me to Permalink first. and then when i click on the pic IN the permalink i go to HighRes. pic.

sorry for my english
and thanks @monoclebunny for the patience

sugestions will be welcome!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
3diego
post Mar 24 2011, 06:19 PM
Post #18


Newbie
*

Group: Members
Posts: 16
Joined: 22-March 11
Member No.: 14,182



maybe usefull to the troubleshooting of "IE"

CODE
.post {
width: 420px;
height: 450px;
background:#eee;
float: left;
margin-right: 10px;
margin-bottom: 10px;
position: relative;
overflow: hidden;
border-bottom-width: thin;
border-bottom-style: dashed;
border-bottom-color: #555;


}

.post:hover {
background:#eee;
}

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
3diego
post Mar 25 2011, 10:45 AM
Post #19


Newbie
*

Group: Members
Posts: 16
Joined: 22-March 11
Member No.: 14,182



omg! solved too! the trouble was that in the script had a part saying that if its IE uses black background!
but ok!!! now remains-me just ONE question, how can i put the picture of IndexPage to send me to permalink!?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
3diego
post Apr 12 2011, 09:52 PM
Post #20


Newbie
*

Group: Members
Posts: 16
Joined: 22-March 11
Member No.: 14,182



hey, somebody biggrin.gif?? plzz!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
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: 2nd June 2020 - 03:56 PM