Tumblr help.

Discussion in 'Web Design and Development' started by bluap84, Aug 1, 2011.

  1. bluap84, Aug 1, 2011
    Last edited by a moderator: Aug 1, 2011

    bluap84 macrumors 6502

    Joined:
    Feb 12, 2011
    Location:
    UK
    #1
    Hi guys.

    wondering if you could lend a hand with a tumblr page of mine....it has this code

    PHP:
    <!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">

    <!-- 
    THEME BY NICK LOUI -->

    <
    head>

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


    <!-- DEFAULT 
    VARIABLES (CAN BE EDITED IN THE 'APPEARANCE' TAB) -->

    <
    meta name="color:Background" content="#F5F5F5"/>
    <
    meta name="color:Title" content="#607890"/>
    <
    meta name="color:Text" content="#505050"/>
    <
    meta name="text:Text Size" content="11"/>
    <
    meta name="font:Body" content="arial"/>

    <
    meta name="color:Link" content="#666666"/>
    <
    meta name="color:Link Hover" content="#ADADAD"/>


    <
    style type="text/css">

    body {
    background-color:{color:Background};
    background-image:url();
    background-attachmentfixed;
    color:{color:Text};
    font-size:{text:Text Size}px;
    line-height:15px;
    font-family:{font:body};
    }

    aa:visiteda:active {
    color:{color:Link};
    text-decorationnone;
    }

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

    ol.notes {
    padding0px;
    margin25px 0px;
    list-
    style-typenone;
    border-bottomdotted 1px {color:text};
    }

    ol.notes li.note {
    border-topdotted 1px {color:text};
    padding10px;
    }

    ol.notes li.note img.avatar {
    margin-right10px;
    width20px;
    height20px;
    }

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

    #content{
    width:800px
    padding:10px;
    left:220px;
    margin:auto;
    }

    #header{
    height:150px;
    width:800px;
    left:200px;
    padding:15px
    font-color:{color:text};
    background-color:#000;
    margin:auto;
    overflow:hidden;
    color#000;
    background-imageurl('http://static.tumblr.com/y3xb5n9/7iylo918p/skyline.jpg');
    background-repeatno-repeat;
    }

    #header a {color: #333;}
    #header a:hover {color: #c0c0c0 !important; }


    #post{
    margin-bottom:15px;
    padding:0;
    background-color:#fafafa;
    }

    h1 {
    font-size:16px;
    font:{font:title};
    color:{color:Title};
    text-transform:none;
    line-height:20px;
    }



    .
    h2 {
    font-weight:normal;
    font-size:11px;
    font:{Font:Text};
    color:{color:Text};
    text-transform:uppercase;
    background-colortransparent;
    text-alignright;
    padding:1px;
    }


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

    h4 {
    font-size:20px;
    font:{font:title};
    color:{color:Title};
    text-transform:none;
    line-height:20px;
    }

    .
    name {
    font-size:40px;
    font:{font:title};
    text-transform:none;
    line-height:25px;
    text-align:left;
    }


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


    imga imgobjectembed {
    max-width:100% !important;
    heightauto !important;
    border0px !important;
    margin0 auto;
    }

    .
    video {text-aligncenter; }
    .
    video object, .video embed {width100% !important;min-height400px !important; }

    .
    album-art {
    floatleft;
    width100px;
    height100px;
    overflowhidden;
    margin-right10px;
    }

    .
    postinfo {opacity0;     -webkit-transitionopacity 300ms ease-in 200ms
        -
    moz-transitionopacity 300ms ease-in 200ms;
        -
    o-transitionopacity 300ms ease-in 200ms;
        
    transitionopacity 300ms ease-in 200ms;
    }
    #post:hover .postinfo {opacity: 1;
        
    -webkit-transitionopacity 300ms ease-in 200ms
        -
    moz-transitionopacity 300ms ease-in 200ms;
        -
    o-transitionopacity 300ms ease-in 200ms;
        
    transitionopacity 300ms ease-in 200ms;

    }
    #fancybox-title-main a {color: #fff !important; } 
    {CustomCSS}
    </
    style>
    <
    script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
    </script>
    <!-- Start fancybox Javascript -->
    <script type="text/javascript" src="http://static.tumblr.com/wsxi7t8/HP7l6pp2x/jquery.mousewheel-3.0.2.pack.js"></script>
    <script type="text/javascript" src="http://static.tumblr.com/wsxi7t8/6H5l6pp22/jquery.fancybox-1.3.1.js"></script>
    <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/wsxi7t8/WTel6pp1n/jquery.fancybox-1.3.1.css" media="screen" />
    <script type="text/javascript">
            $(document).ready(function() {
                /*
                *   image.
                */

                $(".lightbox").fancybox({

                });

            });
    </script>
    <!-- End fancybox Javascript -->

    </head>
    <body>

    <div id="header">
    <div class="name">
    <a href="/">{Title}</a>
    </div><p>
    <a href="/ask">ASK</a> |  {block:HasPages}{block:Pages} <a href="{URL}">{Label}</a> | {/block:Pages} {/block:HasPages}       {block:Description}<b>{Description}</b>{/block:Description}


    </div>
    </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}
    <a href="{PhotoURL-HighRes}?.jpg" class="lightbox" title="<a href='{LinkURL}'>{PhotoAlt}</a>"><center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></center></a>
    {block:Caption}
    <div class="caption">{Caption}</div>
    {/block:Caption}
    {/block:Photo}

    {block:Photoset}
        
        <!-- Each of the Photoset photos -->
        {block:Photos}
            
            {block:HighRes}
            <a href="{PhotoURL-HighRes}?.jpg" class="lightbox" title="<a href='{LinkURL}'>{PhotoAlt}</a>"><center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></center></a>
            {/block:HighRes}
            
            {Caption}
            
        {/block:Photos}
    {/block:Photoset}

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

    {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}
    <div class="video">{Video-500}</div>
    {block:Caption}<div class="caption">
    {Caption}</div>
    {/block:Caption}
    {/block:Video}


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

    {block:Answer}
    <b>{Asker} said:
    {Question}</b><br><br>
    {answer}
    {/block:answer}

    <div class="postinfo">
    <div class="h2">
    {block:NoteCount}{NoteCountWithLabel}</a> | <a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank">Reblog</a>{/block:NoteCount}<br>
    <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>
    </div>
    {/block:Posts}



    </div>

    <div id="credit">
    <font size="+1">
    {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><br>


    </div>


    </body>
    </html>
    [/COLOR]


    but when embedding Vimeo videos it doesnt embed them to the correct size. the code for the video is:

    [COLOR="DeepSkyBlue"]<iframe src="http://player.vimeo.com/video/27098692?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
    you got any ideas? As the theme its self i can mod, but if i cant embed 800px wide videos id rather not bother
     
  2. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #2
    BTW, wrong doctype.

    Code:
    <!DOCTYPE html> 
    Replace line 1 with that.

    and remove the xmlns attr from the html tag.

    The actual page has a width of 500px set in css. It's not in the template you posted. If you view the source and look at line 34 you can see what I mean. If you can't edit that css (never messed with tumblr, don't know where something like that would be) then you can probably manipulate with js.

    Inside your document.ready put:

    Code:
    $('body').css({'width':'800px'});
    
    *note that's slower than using CSS, but if you can't edit the original css then it's the next best thing.
     

Share This Page