The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Please help with Tumblr photosets - anything I've tried hasn't worked with my theme
obvioosseltobsessiivne
post Oct 22 2012, 04:19 PM
Post #1





Group: Members
Posts: 1
Joined: 22-October 12
Member No.: 17,990



Hello there, good people,

I have run into a wall with my Tumblr theme, particularly photosets. I've basically been using the same theme ever since I joined Tumblr in March 2011. It's a largely edited version of Insp, a theme I have no longer been able to track down, as otherwise I'd ask the original author.

As it was created before photosets were introduced, a compatibility problem has sprung up - every photoset I reblog is much narrower than the rest of my posts, all of which are 500px in width. What strikes me as particularly funny is that the default width for photosets should be 500px, only that in my case it isn't.

I have tried different bits of code both in the <head> and in the <body> but none of them have worked for me. As I am unwilling to change the theme for anything else, it'd be more than lovely if someone could figure out what it is that makes the sets narrower than the default 500.

The link to my Tumblr is http://obvioosseltobsessiivne.tumblr.com/. The most recent post as of October 23rd just happens to be a photoset (posted on the 20th) and, when compared to the posts below, should illustrate the problem well.

Here's the code:
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">
  <head>
    <title>{Title}{block:PostTitle}: {PostTitle}{/block:PostTitle}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>


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


    <!-- Custom link colors and show/hide post notes -->
    <meta name="color:Link color" content="#EB5159">
    <meta name="color:Link underline color" content="#B83030">
    <meta name="if:Show post notes" content="1">

    <style>



#wrapper {
    width: 500px;
    margin-left: 10px;
    position: relative;
}


body {
    color: #004D5D;
    background: #E3DDDD;
    font-family: Courier New, Bookman Old Style, Courier New, Lucida Console;
    font-weight: normal;
    font-size: 10pt;
    margin-left: 23px;
    margin-right: 23px;
    text-align: justify;
}


b, strong {
    color: #004D5D;
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    font-size: 10pt;
}


i {
    color: #004D5D;
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-weight: normal;
    font-size: 10pt;
}


u {
    color: #004D5D;
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    font-size: 10pt;
    border-bottom: 3px solid #7CA7A1;
}


#header {
    color: #004D5D;
    font-family: Lobster, Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    text-align: left;
    text-decoration: overline underline 1px solid #004D5D;
    font-size: 46px;
    line-height: 45px;
}


#header h1 {
    color: #004D5D;
    font-family: Lobster, Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    text-decoration: overline underline 1px solid #004D5D;
    font-size: 46px;
    line-height: 45px;
}


#header h1 a:link, #header h1 a:visited, #header h1 a:active  {
    color: #004D5D;
    font-family: Lobster, Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    text-decoration: overline underline 1px solid #004D5D;
    font-size: 46px;
    line-height: 45px;
}


#header h1 a:hover {
    color: #004D5D;
    background: #7CA7A1;
    font-family: Lobster, Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    text-decoration: overline underline 1px solid #004D5D;
    font-size: 46px;
    line-height: 45px;
}


#description {
    color: #004D5D;
    font-family: Courier New, Lucida Console;
    font-weight: normal;
    font-size: 8pt;
    line-height: 9pt;
    text-align: right;
}


#description a:link, a:visited, a:active {
    color: #7CA7A1;
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    text-decoration: underline;
}


#description a:hover {
    color: #004D5D;
    background: #7CA7A1;
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    text-decoration: overline underline;
}


#description div {
    margin-top: 42px
}


#description ul#pages {
            display: inline;
            text-align: center;
            list-style: none;
            margin-left: 0;
            padding-left: 0;
}

#description ul#pages li {
            list-style: none;
            display: inline;
          }


#content {
    margin: 0;
}


#search-results {
    margin: 0 0 2em 0;
}


.permalink {
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    font-size: 23px;
}


.permalink a:link, .permalink a:visited, .permalink a:active {
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    font-size: 23px;
}


.permalink a:hover {
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    font-size: 23px;
}


#content p {
   margin: 0 0 12px 0;
}


#content a:link, #content a:visited, #content a:active {
    color: #7CA7A1;
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    text-decoration: underline;
    font-size: 10pt;
}


#content a:hover {
    color: #004D5D;
    background: #7CA7A1;
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    text-decoration: overline underline;
    font-size: 10pt;
}


#content h2 {
    color: #004D5D;
    font-family: Lobster, Georgia, Lucida Console;
    font-weight: bold;
    font-size: 30px;
    line-height: 32px;
    text-align: left;
}


#content h2 a:link, #content h2 a:visited, #content h2 a:active {
    color: #004D5D;
    font-family: Lobster, Georgia, Lucida Console;
    font-weight: bold;
    font-size: 30px;
    line-height: 32px;
    text-align: left;
}


#content h2 a:hover {
    color: #004D5D;
    font-family: Lobster, Georgia, Lucida Console;
    font-weight: bold;
    font-size: 30px;
    line-height: 32px;
    text-align: left;
}


#content blockquote {
    margin-right: 0;
    marign-top: 0px;
    margin-bottom: 12px;
    margin-left: 1em;
    padding-left: 1em;
    border-left: 1px solid;
}


#content ul, #content ol {
    margin-left: 1em;
    padding-left: 1em;
    margin-bottom: 12px;
}


#content img {
    max-width: 100%;
}


.post {
    margin: 0 0 3.5em 0;
}


.post img, .post embed, .post object {
    display: block;
    margin: 0 0 19px 0;
    border: none;
}


.post h2, .post h2 a:link, .post h2 a:visited, .post h2 a:active  {
    color: #004D5D;
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    text-decoration: overline underline 1px solid #004D5D;
    font-size: 50px;
    line-height: 5px;
}


.post h2 a:hover {
    color: #004D5D;
    background: #7CA7A1;
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    text-decoration: overline underline 1px solid #004D5D;
    font-size: 50px;
    line-height: 5px;
}


.text h2 a, .text h2 a:hover, .chat h2 a, .chat h2 a:hover {
    color: #004D5D;
    font-family: Georgia, Lucida Console;
    font-weight: bold;
    font-size: 30pt;
}


.link h2 a {
    color: #004D5D;
    font-family: Georgia, Lucida Console;
    font-weight: bold;
    font-size: 30pt;
}


.link h2 a:hover {
    color: #004D5D;
    font-family: Georgia, Lucida Console;
    font-weight: bold;
    font-size: 30pt;

}


.photo, .video, .audio {
    padding: 4px 0 0 0;
}


.video embed, .video object {
    min-width: 100%;

}

            
.video iframe {
    width: 100%;
    margin: 0 0 13px 0;
}


.audio {
    margin-top: 16px;
    min-height: 70px;
}


.big-quote {
    width: 77%;
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-size: 15px !important;
    line-height: 15px !important;
    font-weight: bold;
    text-align: left;
              text-indent: -0.35em !important;
              border-left: none !important;
              margin-left: 0 !important;
              padding-left: 0 !important;
}


.big-quote:before {
    content: '«';
    font-size: 23px;
    line-height: 5px;
    font-family: Courier New;
    font-weight: bold;
}


.big-quote:after {
    content: '»';
    font-size: 23px;
    line-height: 5px;
    font-family: Courier New;
    font-weight: bold;
}


.chat ul {
    list-style: none;
    margin-left: 0 !important;
    padding-left: 0 !important;
}


.album-art {
    float: left;
    width: 70px;
    height: 70px;
    margin: 0 13px 13px 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-box-shadow: 0 1px 3px #A8A8A8;
    -moz-box-shadow: 0 1px 3px #A8A8A8;
    overflow: hidden;
}


ol.notes {
    list-style: none;
    margin-left: 0 !important;
    padding-left: 0 !important;
}


ol.notes li.note img.avatar {
    display: none;
}


#nav {
    text-align: center;
}


#nav a:link, #nav a:visited, #nav a:active {
    color: #7CA7A1;
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    text-decoration: underline;
    font-size: 10pt;
}


#nav a:hover {
    color: #004D5D;
    background: #7CA7A1;
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    text-decoration: overline underline;
    font-size: 10pt;
}


#footer {
    color: #004D5D;
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-weight: normal;
    font-size: 10px;
    margin: 6.5em 0 2em 0;
    text-align: left;
}


#footer a:link, #footer a:visited, #footer a:active {
    color: #7CA7A1;
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    text-decoration: underline;
}


#footer a:hover {
    color: #004D5D;
    background: #7CA7A1;
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-weight: bold;
    text-decoration: overline underline 1px solid #004D5D;
}


#footer form {
    position: absolute;
    bottom: 0;
    right: 0;
}


#footer input {
    width: 140px;
    height: 15px;
    border: 1px solid #7CA7A1;
    color: #004D5D;
    font-family: Bookman Old Style, Courier New, Lucida Console;
    font-size: 10px;
    line-height: 15px;
}


::-moz-selection {
    background: #00A2A0;
    color: #004D5D;
}


{CustomCSS}


</style>



    <!--
      Widescreen YouTube Embeds by Matthew Buchanan & Hayden Hunter
      http://matthewbuchanan.name/451892574
      http://blog.haydenhunter.me

      Released under a Creative Commons attribution license:
      http://creativecommons.org/licenses/by/3.0/nz/
    -->
    <script type="text/javascript" src="http://static.tumblr.com/gamwyyb/AWMl9e51w/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
      $("object").each(function () {
        if ($(this).find("embed[src^='http://www.youtube.com']").length > 0) {
          // Identify and hide embed(s)
          var parent = $(this).parent();
          parent.css("visibility","hidden");
          var youtubeCode = parent.html();
          var params = "";
          if (youtubeCode.toLowerCase().indexOf("<param") == -1) {
            // IE doesn't return params with html(), so…
            $("param", this).each(function () {
              params += $(this).get(0).outerHTML;
            });
          }
          // Set colours in control bar to match page background
          var oldOpts = /rel=0/g;
          var newOpts = "rel=0&color1=0xE4E4E4&color2=0xFFFFFF";
          youtubeCode = youtubeCode.replace(oldOpts, newOpts);
          if (params != "") {
            params = params.replace(oldOpts, newOpts);
            youtubeCode = youtubeCode.replace(/<embed/i, params + "<embed");
          }
          // Extract YouTube ID and calculate ideal height
          var youtubeIDParam = $(this).find("embed").attr("src");
          var youtubeIDPattern = /\/v\/([0-9A-Za-z-_]*)/;
          var youtubeID = youtubeIDParam.match(youtubeIDPattern);
          var youtubeHeight = Math.floor(parent.find("object").width() * 0.75 + 25);
          var youtubeHeightWide = Math.floor(parent.find("object").width() * 0.5625 + 25);
          // Test for widescreen aspect ratio
          $.getJSON("http://gdata.youtube.com/feeds/api/videos/" + youtubeID[1] + "?v=2&alt=json-in-script&callback=?", function (data) {
            oldOpts = /height="?([0-9]*)"?/g;
            if (data.entry.media$group.yt$aspectRatio != null) {
              newOpts = 'height="' + youtubeHeightWide + '"';
            } else {
              newOpts = 'height="' + youtubeHeight + '"';
            }
            youtubeCode = youtubeCode.replace(oldOpts, newOpts);
            if (params != "") {
              params = params.replace(oldOpts, newOpts);
              youtubeCode = youtubeCode.replace(/<embed/i, params + "<embed");
            }
            // Replace YouTube embed with new code
            parent.html(youtubeCode).css("visibility","visible");
          });
        }
      });
    });
    </script>

    <!-- add your Google Analytics code here-->

  </head>
  <body>
    <div id="wrapper">
      <div id="header">
        <h1><a href="/">{Title}</a></h1>
        <div id="description">
          {Description}
          <div>
          {block:HasPages}
          {block:Pages}<ul id="pages"><li></li><a href="{URL}">{Label}</a></ul>{/block:Pages}
          {/block:HasPages}
          </div>
        </div>
      </div>
      <div id="content">
        {block:SearchPage}
        <div id="search-results">
          {SearchResultCount} Results for <b>{SearchQuery}</b>
        </div>
        {/block:SearchPage}
        {block:Posts}
        <div class="permalink"><a href="{Permalink}">


{block:NewDayDate}{DayOfMonthWithZero}.{MonthNumberWithZero}.{Year}{/block:NewDayDate}
{block:SameDayDate}{DayOfMonthWithZero}.{MonthNumberWithZero}.{Year}{/block:SameDayDate}




</a></div>
        {block:Text}
        <div class="text post">
          {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
          {Body}
        </div>
        {/block:Text}
        {block:Link}
        <div class="link post">
          <h2><a href="{URL}">{Name}</a></h2>
          {block:Description}{Description}{/block:Description}
        </div>
        {/block:Link}
        {block:Quote}
        <div class="quote post">
          <blockquote class="big-quote">{Quote}</blockquote>
          {block:Source}{Source}{/block:Source}
        </div>
        {/block:Quote}
        {block:Photo}
        <div class="photo post">
          {LinkOpenTag}<img src="{PhotoUrl-500}" alt="{PhotoAlt}">{LinkCloseTag}
          {block:Caption}{Caption}{/block:Caption}
        </div>
        {/block:Photo}
        {block:Chat}
        <div class="chat post">
          {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
          <ul>
            {block:Lines}<li>{block:Label}<b>{Label}</b>{/block:Label} {Line}</li>{/block:Lines}
          </ul>
        </div>
        {/block:Chat}
        {block:Audio}
        <div class="audio post">
          {block:AlbumArt}<div class="album-art"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
          {AudioPlayerGrey}
          {block:Caption}{Caption}{/block:Caption}
        </div>
        {/block:Audio}
        {block:Video}
        <div class="video post">
          {Video-400}
          {block:Caption}{Caption}{/block:Caption}
        </div>
        {/block:Video}
        {block:IfShowPostNotes}{block:PostNotes}
        <h3>Notes</h3>
        {PostNotes}
        {/block:PostNotes}{/block:IfShowPostNotes}
        {/block:Posts}
      </div>
      {block:IndexPage}
      {block:Pagination}
      <div id="nav">
        {block:NextPage}<a href="{NextPage}"><b>« Magamistuppa!</b></a>   {/block:NextPage}{CurrentPage} : {TotalPages}{block:PreviousPage}   <a href="{PreviousPage}"><b>Kööki! »</b></a>{/block:PreviousPage}
      </div>
      {/block:Pagination}
      {/block:IndexPage}
      <div id="footer">
        <a href="{RSS}">RSS-Nämm-Nämm</a> : <a href="/archive">Sahver</a> : Interjöörikujunduseks isehäkitud "insp".
        <form action="/search" method="get">
          <input type="text" name="q" value="Kes otsib, see leiab!" onclick="java script:if (this.value == 'Search') this.value = '';"/>
        </form>
      </div>
    </div>
  </body>
</html>

Thanks in advance!

This post has been edited by obvioosseltobsessiivne: Oct 22 2012, 04:21 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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: 19th March 2024 - 05:38 AM