API tools faq
paste
Advertisement
heider

WEB HTML Code -Two Column Tumblr Theme

heider
Nov 24th, 2013
90
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 18.24 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <head>
  6.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  7.         <title>{Title}{block:PostSummary} - {PostSummary}{/block:PostSummary}</title>
  8.         <link rel="icon" href="{Favicon}"/>
  9.         <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
  10.         <meta name="viewport" content="width=775"/>
  11.  
  12.  <!-- >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
  13.  <!-- Option Menu Generated by Tumblings.net -->
  14.  <!-- >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
  15.      <meta name="if:Enable Endless Scrolling" content="1" />
  16.      <meta name="image:Background" content="" />
  17.      <meta name="color:Background" content="#3b627e" />
  18.  <!-- >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
  19.  
  20.         <style type="text/css">
  21.  
  22.         body {
  23.  background: {color:Background} url('{image:Background}') top left fixed repeat;
  24.  font-family: {font:Body};
  25.  }
  26.  
  27.             #content {
  28.                 width:            900px;
  29.                 margin:           auto;
  30.                 padding:          15px;
  31.                 font-family:      'Helvetica Neue', Helvetica, 'Lucida Grande', Helvetiker, Verdana, sans-serif;
  32.                 position:         relative;
  33.                 background-image: url('http://static.tumblr.com/tcy8vbf/g2rkh15c7/bg2.png');
  34.                 background-repeat: repeat-x;
  35.             }
  36.  
  37.             a {
  38.                 color:            #ffffff;
  39.             }
  40.  
  41.             h1.blogtitle, h2.blogtitle {
  42.                font-family: Helvetica, Georgia, "Times New Roman", Times, serif;
  43.                     font-size: 4.5em;
  44.                     font-weight: bold;
  45.                     text-align: left;
  46.                     margin: auto;
  47.                     padding: 10px 10px 25px;
  48.                     color: #151515;
  49.                     display: block;
  50.                     letter-spacing: -.08em;
  51.                 }
  52.  
  53.  
  54.             h1.blogtitle a, h2.blogtitle a{
  55.                 color:            #ffffff;
  56.                 text-decoration:  none;
  57.             }
  58.  
  59.             #description {
  60.                 position:         absolute;
  61.                                 left:                       655px;
  62. background-image: url('http://static.tumblr.com/tcy8vbf/8jNkh15e4/trans.png');
  63. padding: 10px
  64.             }
  65.  
  66.  
  67.             #description div {
  68.                 font-family:      'Helvetica Neue', Helvetica, 'Lucida Grande', Helvetiker, Verdana, sans-serif;
  69.                 line-height:      20px;
  70.                 width:            225px;
  71.                 color:            #eeeeee;
  72.             }
  73.  
  74.                         #description div#search {
  75.                                 text-align: right;
  76.                         }
  77.  
  78.             #description div a {
  79.                 color:            #ffffff;
  80.             }
  81.  
  82.             #description #nav_container {
  83.                 font-size: 13px;
  84.                 font-weight: bold;
  85.             }
  86.  
  87.             #description #nav_container .dim {
  88.                 filter: alpha(opacity=50);
  89.                 -moz-opacity: 0.5;
  90.                 opacity: 0.5;
  91.             }
  92.  
  93. .following {
  94.   margin-top: 5px;
  95.   margin-bottom: 5px;
  96.  
  97. }
  98.  
  99. .following a img {
  100.   border: 1px solid {color:Flickr};
  101.   padding: 1px;
  102.   margin: 1px;
  103. }
  104.  
  105. .following a img:hover {
  106.   border: 1px solid {color:Flickr Hover};
  107.   padding: 1px;
  108.   margin: 1px;
  109. }
  110.  
  111.                         #searchresultcount {
  112.                             margin: 0 0 30px;
  113.                             text-align: center;
  114.                             color:#FFFFFF
  115.                         }
  116.  
  117.             .post {
  118.                 position:         relative;
  119.                 margin-bottom:    20px;
  120.                 width:600px;
  121.                 background-image: url('http://static.tumblr.com/tcy8vbf/8jNkh15e4/trans.png');
  122. padding: 10px;
  123.                 color:            #dddddd;
  124.             }
  125.  
  126.             .post div.labels {
  127.                 position:         absolute;
  128.                 right:            580px;
  129.                 text-align:       right;
  130.                 width:            150px;
  131.             }
  132.  
  133.             .post div.date {
  134.  
  135.                 white-space:      nowrap;
  136.                 font-family:  20px    'Helvetica Neue', Helvetica, 'Lucida Grande', Helvetiker, Verdana, sans-serif;
  137.                 font-weight: bold
  138.                 letter-spacing:   -1px;
  139.                 color:            #000000;
  140.                 display:          inline;
  141.                 padding:          3px 5px 0px 5px;
  142.                 line-height:      20px;
  143.             }
  144.  
  145.             .post div.date a {
  146.                 color:            #000000;
  147.                 font-weight: bold;
  148.                 text-decoration:  none;
  149.             }
  150.  
  151.             .post h1, .post h2 {
  152.                 font-size:        18px;
  153.                 font-weight:      Bold;
  154.                 color:            #ffffff;
  155.                 letter-spacing:   -1px;
  156.                 margin:           0px 0px 10px 0px;
  157.             }
  158.  
  159.             .post h1 a, .post h2 a {
  160.                 color:            #ffffff;
  161.                 text-decoration:  none;
  162.             }
  163.  
  164.             /* Regular Post */
  165.             .post .regular {
  166.                 font-size:        14px;
  167.                 color:            #dddddd;
  168.                 line-height:      18px;
  169.             }
  170.  
  171.             .post .regular blockquote {
  172.                 font-style: italic;
  173.             }
  174.  
  175.             /* Photo Post */
  176.             .post .photo img, .post img.accent{
  177.                 display: block;
  178.                 margin: auto;
  179.                 border:           solid 10px #000000;
  180.             }
  181.  
  182.             .post .photo div.caption {
  183.                 font-size:        14px;
  184.                 color:            #dddddd;
  185.                 margin-top:       5px;
  186.             }
  187.  
  188.             .post .photo div.caption a {
  189.                 color:            #ffffff;
  190.             }
  191.  
  192.             /* Quote Post */
  193.             .post .quote span.quote {
  194.                 font:             Bold 19px Helvetica, sans-serif;
  195.                 letter-spacing:   -1px;
  196.                 color:            #eeeeee;
  197.             }
  198.  
  199.             .post .quote span.quote a {
  200.                 color:            #ffffff;
  201.             }
  202.  
  203.             .post .quote span.quote big.quote {
  204.                 font:             Bold 60px Georgia, serif;
  205.                 line-height:      8px;
  206.                 vertical-align:   -20px;
  207.             }
  208.  
  209.             .post .quote span.source {
  210.                 font-size:        14px;
  211.                 font-weight:      Bold;
  212.                 color:            #dddddd;
  213.                 letter-spacing:   -1px;
  214.             }
  215.  
  216.             .post .quote span.source a {
  217.                 color:            #ffffff;
  218.             }
  219.  
  220.             /* Link Post */
  221.             .post .link a.link {
  222.                 font:             22px Helvetica, Helvetiker, Verdana, arial, sans-serif;
  223.                 letter-spacing:   -1px;
  224.                 color:            #ffffff;
  225.             }
  226.  
  227.             .post .link span.description {
  228.                 font-size: 14px;
  229.                 font-weight: normal;
  230.                 letter-spacing: -1px;
  231.                 font:             14px Helvetica, Helvetiker, Verdana, arial, sans-serif;
  232.             }
  233.  
  234.             /* Conversation Post */
  235.             .post .conversation ul {
  236.                 list-style-type:  none;
  237.                 margin:           0px;
  238.                 padding:          0px;
  239.                 border-left:      solid 5px #000;
  240.             }
  241.  
  242.             .post .conversation ul li {
  243.                 border-bottom:    solid 1px #000;
  244.                 font-size:        12px;
  245.                 padding:          4px 0px 4px 8px;
  246.                 color:            #eeeeee;
  247.             }
  248.  
  249.             .post .conversation ul li span.label {
  250.                 font-weight:      bold;
  251.                 color:            #ffffff;
  252.             }
  253.  
  254.             /* Audio Post */      
  255.             .post .audio div.caption {
  256.                 font-size:        14px;
  257.                 color:            #dddddd;
  258.                 margin-top:       5px;
  259.             }
  260.  
  261.             .post .audio div.caption a {
  262.                 color:            #ffffff;
  263.             }
  264.  
  265.             /* Video Post */
  266.             .post .video {
  267.                 width:            500px;
  268.                 margin:           auto;
  269.             }
  270.  
  271.             .post .video div.caption {
  272.                 font-size:        14px;
  273.                 color:            #dddddd;
  274.                 margin-top:       5px;
  275.             }
  276.  
  277.             .post div.video div.caption a {
  278.                 color:            #ffffff;
  279.             }
  280.  
  281.             /* Footer */
  282.             #footer {
  283.                 margin:           40px 0px 30px 0px;
  284.                 text-align:       center;
  285.                 font-size:        13px;
  286. background-image: url('http://static.tumblr.com/tcy8vbf/8jNkh15e4/trans.png');
  287.             }
  288.  
  289.  
  290.  
  291.             .query { font-weight: bold; }
  292.             .search{float:center;}
  293.  
  294.  
  295.             .postdate {float: right; padding-left: 1em;}
  296.  
  297.             .sharethis {margin-top: 1em;}
  298.             .sidebar-box {
  299.         border-bottom: 1px solid #ccc;
  300.         border-top: 1px solid #fff;
  301.         padding: 20px 0;
  302.         }
  303.  
  304.     .sidebar-box h3 {
  305.         font-size: 16px;
  306.         letter-spacing: -.05em;
  307.         {block:IfForceUppercase}text-transform: uppercase;{/block:IfForceUppercase}
  308.         }
  309.  
  310.     .last-sidebar { border-bottom: 0; }
  311.  
  312.     #right-column #about-box { border-top: 0 !important; padding-top: 0 !important; }
  313.  
  314.     #avatar {
  315.         background: url(http://static.tumblr.com/2wjmz5y/Zbqlapgb4/simplethings-user-pic.png) no-repeat top left;
  316.         float: left;
  317.         margin: 0 5px 10px -5px;
  318.         padding: 8px;
  319.         }
  320.  
  321.     .about-title {
  322.         float: left;
  323.         font-size: 14px;
  324.         overflow: hidden;
  325.         {block:IfForceUppercase}text-transform: uppercase;{/block:IfForceUppercase}
  326.         width: 180px;
  327.         }
  328.  
  329.     .about-title span {
  330.         display: block;
  331.         font-size: 18px;
  332.         margin-top: 5px;
  333.         }
  334.  
  335.     .blog-description {
  336.         clear: both;
  337.         line-height: 1.4em;
  338.         }
  339.  
  340.     #sidebar-nav li a {
  341.         border: 1px solid transparent;
  342.         color: {color:Navigation Link};
  343.         display: block;
  344.         font-size: 16px;
  345.         font-weight: bold;
  346.         letter-spacing: -.05em;
  347.         padding: 5px;
  348.         {block:IfForceUppercase}text-transform: uppercase;{/block:IfForceUppercase}
  349.         }
  350.  
  351.     #sidebar-nav li a:hover {
  352.         background: url(http://static.tumblr.com/2wjmz5y/AJPljqxqj/sidebar-link-hover.png);
  353.         background: rgba(0,0,0,.07);
  354.         border-color: rgba(0,0,0,.14);
  355.         text-decoration: none;
  356.         }
  357.         #scrollToTop:link,
  358. #scrollToTop:visited {
  359.   display: none;
  360.   position: fixed;
  361.   top: 20px;
  362.   right: 20px;
  363. }
  364. /***** Footer *****/
  365.     #footer {
  366.         border-top: 1px solid #aaa;
  367.         margin-top: 40px;
  368.         min-height: 35px;
  369.         text-align: center;
  370.                 {block:IfEnableEndlessScrolling}
  371.                 margin-top: 0;
  372.  
  373.                 bottom: 0;
  374.                 left: 0;
  375.                 width: 100%;
  376.                 z-index: 1000;
  377.                 {/block:IfEnableEndlessScrolling}
  378.         }
  379.  
  380.     #footer-inner {
  381.         clear: both;
  382.         color: #666;
  383.         margin: 0 auto;
  384.         padding: 12px;
  385.         text-shadow: 1px 1px #d0d0d0;
  386.         width: 800px;
  387.         }
  388.  
  389.     #footer-inner a { color: #0f3455; }
  390.         </style>
  391.  
  392.         <style type="text/css">{CustomCSS}</style>
  393.  
  394.         {block:IfEnableEndlessScrolling}
  395.  <script type="text/javascript" src="http://static.tumblr.com/0szq8b5/R0cmg0bw1/tumblr-endless-scrolling.js"></script>
  396. {/block:IfEnableEndlessScrolling}
  397.  
  398.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  399. <script type="text/javascript" src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  400. <a href="javascript:;" id="scrollToTop" rel="nofollow" title="Go to Top"><img src="http://static.tumblr.com/cqpvki8/7yWlh05zn/seta.png" title="Go to Top" alt="Go to Top"/></a>
  401.  
  402.     </head>
  403.     <body>
  404.         <div id="content">
  405.             {block:IndexPage}<h1 class="blogtitle"><a href="/">{Title}</a></h1>{/block:IndexPage}
  406.             {block:PermalinkPage}<h2 class="blogtitle"><a href="/">{Title}</a></h2>{/block:PermalinkPage}
  407.  
  408.             <div id="description"><div>
  409.  
  410.             <div class="search">
  411. <div id="search">
  412. <form action="/search" method="get">
  413. <input type="text" name="q" value="{SearchQuery}"/>
  414. <input type="submit" value="Find"/>
  415. </form>
  416. </div>
  417.     </div><br/>
  418.  
  419.             <div class="sidebar-box" id="about-box">
  420.                 <img src="{PortraitURL-48}" alt="{Title}" id="avatar" />
  421.                 <p class="about-title"><span>{lang:About}</span> {Title}</p>
  422.                 <div class="blog-description">
  423.                     {Description}
  424.                 </div> <!-- .blog-description -->
  425.             </div> <!-- .sidebar-box -->
  426.  
  427.                     <p><center><strong>
  428.                         <a href="/archive" id="archive_link">Archive</a>
  429.                         <span class="dim"> | </span>
  430.                         <a href="{RSS}">RSS</a>
  431. <span class="dim"> | </span>
  432. <a href="/random" id="random_link">Random</a></strong><br/>
  433.  <br/>  
  434.     <strong><u>Blogroll</u></strong>
  435.  
  436. <div class="following">
  437. {block:Following}
  438.       {block:Followed}
  439.       <a href="{FollowedURL}"><img src="{FollowedPortraitURL-24}" border="0"/></a>            {/block:Followed}
  440.       {/block:Following}
  441.  
  442. </p>
  443. </div>
  444. </center>
  445. </div>
  446.  
  447.             </div>
  448.  
  449.                         {block:SearchPage}
  450.                         <div id="searchresultcount">
  451.                             <p>Your search for <span class="query">{SearchQuery}</span> returned {SearchResultCount} result(s).</p>
  452.                         </div>
  453.                         {/block:SearchPage}
  454.  
  455.             {block:Posts}
  456.                 <div class="post">
  457.  
  458.                     {block:Regular}
  459.                         <div class="regular">
  460.                             <div class="postdate">{DayOfMonth}{DayOfMonthSuffix} {ShortMonth} {Year}</div>
  461.  
  462.                             {block:Title}
  463.                                 {block:IndexPage}<h2><a href="{Permalink}">{Title}</a></h2>{/block:IndexPage}
  464.                                 {block:PermalinkPage}<h1>{Title}</h1>{/block:PermalinkPage}
  465.                             {/block:Title}
  466.  
  467.                             {Body}
  468.                         </div>
  469.                     {/block:Regular}
  470.  
  471.                     {block:Photo}
  472.                         <div class="photo">
  473.                             {block:IndexPage}
  474.                                 <h2><a href="{Permalink}">Photo: {DayOfMonth}<sup>{DayOfMonthSuffix}</sup> {ShortMonth} '{ShortYear}</a></h2>
  475.                                 <a href="{Permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></a>
  476.                             {/block:IndexPage}
  477.  
  478.                             {block:PermalinkPage}
  479.                                 <h1>Photo: {DayOfMonth}<sup>{DayOfMonthSuffix}</sup> {ShortMonth} '{ShortYear}</h1>
  480.                                 {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
  481.                             {/block:PermalinkPage}
  482.  
  483.                             {block:Caption}
  484.                                 <div class="caption">{Caption}</div>
  485.                             {/block:Caption}
  486.                         </div>
  487.                     {/block:Photo}
  488.  
  489.                     {block:Quote}
  490.                         <div class="quote">
  491.                             <span class="quote">
  492.                                 <big class="quote">&#147;</big> {Quote}
  493.                             </span>
  494.                             {block:Source}<span class="source">{Source}</span>{/block:Source}
  495.                         </div>
  496.                     {/block:Quote}
  497.  
  498.                     {block:Link}
  499.                         <div class="link">
  500.                             <a href="{URL}" class="link" {Target}>{Name}</a>
  501.                             {block:Description}
  502.                                 <span class="description">{Description}</span>
  503.                             {/block:Description}
  504.                         </div>
  505.                     {/block:Link}
  506.  
  507.                     {block:Conversation}
  508.                         <div class="conversation">
  509.  
  510.                             {block:Title}
  511.                                 {block:IndexPage}<h2><a href="{Permalink}">{Title}</a></h2>{/block:IndexPage}
  512.                                 {block:PermalinkPage}<h1>{Title}</h1>{/block:PermalinkPage}
  513.                             {/block:Title}
  514.  
  515.                             <ul>
  516.                                 {block:Lines}
  517.                                     <li>
  518.                                         {block:Label}<span class="label">{Label}</span>{/block:Label}
  519.                                         {Line}
  520.                                     </li>
  521.                                 {/block:Lines}
  522.                             </ul>
  523.                         </div>
  524.                     {/block:Conversation}
  525.  
  526.                     {block:Audio}
  527.                         <div class="audio">
  528.                             {AudioPlayerBlack}
  529.                             {block:Caption}
  530.                                 <div class="caption">{Caption}</div>
  531.                             {/block:Caption}
  532.                         </div>
  533.                     {/block:Audio}
  534.  
  535.                     {block:Video}
  536.                         <div class="video">
  537.                             {Video-500}
  538.                             {block:Caption}
  539.                                 <div class="caption">{Caption}</div>
  540.                             {/block:Caption}
  541.                         </div>
  542.                     {/block:Video}
  543.  
  544.                     {block:HasTags}
  545.                     <ul class="tags">
  546.                         Tags: {block:Tags}
  547.  
  548.                                <a href="{TagURL}">{Tag}</a>
  549.  
  550.                         {/block:Tags}
  551.                     </ul>
  552.                 {/block:HasTags}
  553.  
  554.                 </div>
  555.  
  556.             {/block:Posts}
  557.  
  558. {block:ifNotEnableendlessscrolling}
  559.             <div id="pagination">
  560.             {block:Pagination}{block:PreviousPage}<a class="naoAtual" href="{PreviousPage}">&#9668;</a>{/block:PreviousPage}{/block:Pagination}
  561.                 {block:JumpPagination length="6"}
  562. {block:CurrentPage}<a class="atual" href="{URL}">{PageNumber}</a>{/block:CurrentPage}
  563. {block:JumpPage}<a class="naoAtual" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  564. {/block:JumpPagination}
  565. {block:Pagination}{block:NextPage}<a class="naoAtual" href="{NextPage}">&#9658;</a>{/block:NextPage}{/block:Pagination}
  566. </div>
  567. {/block:ifNotEnableendlessscrolling}
  568.  
  569. <!-- Note: If you remove this credit, Normal theme features will not work -->
  570.             <div id="footer">
  571.         <div id="footer-inner">
  572.             <p>Copyright &copy; {CopyrightYears} <a href="/">{Title}</a>.          
  573.             Creativity v.2.0 Theme by <a href="http://tumblings.net">Tumblings</a>.</p>
  574.         </div> <!-- #footer-inner -->
  575.     </div> <!-- #footer -->
  576.         </div>
  577.  
  578.     </body>
  579. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!