API tools faq
paste
dendysoft

DREAMATORIUM tumblr theme by @dendysoft

dendysoft
Nov 12th, 2022 (edited)
185
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.71 KB | Source Code | 0 0
raw download clone embed print report
  1. <html>
  2. <!---
  3. base code by @ps1, available here: https://ps1.tumblr.com/post/616166839615176704/base-code-by-ps1-preview-code-a-simple-sidebar
  4. dreamatorium theme by @dendysoft
  5. --->
  6.  
  7. <head>
  8.         <title>{Title}</title>
  9.         <link rel="icon" href="{image:FavIcon}" type="image/gif" >
  10.         <link rel="alternate" type="application/rss+xml" href="{RSS}">
  11.         {block:Description}
  12.             <meta name="description" content="{MetaDescription}" />
  13.         {/block:Description}
  14.  
  15. <!--- Add Custom Fonts Here (like Google Fonts) --->
  16.  
  17.  
  18. <!--- Then add Font name to the 'Font Family' in Theme Options Area --->
  19.  
  20. <meta name="image:favicon" content=""/>  
  21. <meta name="image:sidebar" content=""/>
  22.  
  23. <meta name="color:background" content="#330">
  24. <meta name="color:grid" content="#ec3"
  25. <meta name="color:posts" content="#fff">
  26. <meta name="color:font color" content="#00f">
  27.  
  28. <meta name="color:links" content="#f33">
  29. <meta name="color:links hover" content="#ccf">
  30. <meta name="color:search font" content="#00c">
  31. <meta name="color:search bkg" content="#ec3">
  32.  
  33. <meta name="text:font family" content="arial">
  34. <meta name="text:font size" content="14">
  35. <meta name="text:search text" content="imagine">
  36.  
  37. <meta name="if:links underline" content="0"/>
  38. <meta name="if:hide title" content="0"/>
  39. <meta name="if:hide searchbar" content="0"/>
  40. <meta name="if:hide desc" content="0"/>
  41. <meta name="if:hide links" content="0"/>
  42. <meta name="text:post opacity" content="0.8" />
  43. <meta name="if:hide caption" content="0"/>
  44. <meta name="if:hide tags" content="0" />
  45.  
  46. <meta name="text:link spacer" content="">
  47. <meta name="text:link 1" content="ONE">
  48. <meta name="text:link 1 URL" content="/">
  49. <meta name="text:link 2" content="TWO">
  50. <meta name="text:link 2 URL" content="/">
  51. <meta name="text:link 3" content="THREE">
  52. <meta name="text:link 3 URL" content="/">
  53.  
  54. <style type="text/css">
  55. ::-moz-selection {
  56.     background: {color:grid};
  57.     color: {color:links hover};}
  58.    
  59. ::selection {
  60.     background: {color:grid};
  61.     color: {color:links};}
  62.  
  63. body {
  64.     background-color:{color:background};
  65.     background-image: linear-gradient(90deg, {color:grid}, 10%, transparent 10%), linear-gradient({color:grid}, 10%, transparent 10%);
  66.     background-size:80px 80px;
  67.     font-family: '{text:font family}';
  68.     font-size: {text:font size}px;
  69.     color: {color:font color};
  70.     line-height: 120%;
  71.     word-wrap: break-word;
  72.     overflow-x:hidden;
  73.     }
  74. p {margin: 10px;}
  75. ul {list-style: square;}
  76. img {max-width: 100%;}
  77. h1 {line-height: 150%;}
  78.  
  79. a:link, a:active, a:visited {
  80.     color: {color:links};
  81.     {block:IfNotLinksUnderline}
  82.     text-decoration: none;{/block:IfNotLinksUnderline}
  83.     {block:IfLinksUnderline}
  84.     text-decoration: underline;{/block:IfLinksUnderline}
  85.     -webkit-transition: all 0.2s ease-in-out;
  86.     -moz-transition: all 0.2s ease-in-out;
  87.     -o-transition: all 0.2s ease-in-out;
  88.     -ms-transition: all 0.2s ease-in-out;
  89.     transition: all 0.2s ease-in-out;}
  90.  
  91. a:hover {
  92.     color: {color:Links Hover};
  93.     text-decoration: {select:links hover};
  94.     -webkit-transition: all 0.2s ease-in-out;
  95.     -moz-transition: all 0.2s ease-in-out;
  96.     -o-transition: all 0.2s ease-in-out;
  97.     -ms-transition: all 0.2s ease-in-out;
  98.     transition: all 0.2s ease-in-out;}
  99.  
  100. ::-webkit-scrollbar-track {
  101.     border: 0;
  102.     background-color: {color:Background};}
  103. ::-webkit-scrollbar {
  104.     width: 10px;}
  105. ::-webkit-scrollbar-thumb {
  106.     background-color: {color:links};}
  107.  
  108. /* the container of both your sidebar and posts */
  109.  
  110. #content {
  111.     margin: auto;
  112.     width: 700px;}
  113.  
  114. /* sidebar style obvi */
  115.  
  116. #sidebar {
  117.     color: {color:font color};
  118.     background-color: rgb(255,255,255,{text:post opacity});
  119.     text-align: center;
  120.     margin-left: -50px;
  121.     position: fixed;
  122.     padding: 10px;
  123.     width: 250px;}
  124.  
  125. #sidebar img {max-width:100%;}
  126. .desc, .linkz {margin-top: 10px;}
  127. .title {margin-bottom: 5px;}
  128.  
  129. /* post style obvi */
  130.  
  131. .posts {
  132.     background-color: rgb(255,255,255,{text:post opacity});
  133.     margin-top: 50px;
  134.     margin-bottom: 80px;
  135.     margin-left: 300px;
  136.     padding: 10px;
  137.     width: 400px;
  138.     position: relative;}
  139.  
  140. .posts blockquote {
  141.     margin: 10px;
  142.     padding-left: 5px;
  143.     border-left: 1px solid {color:links};}
  144.  
  145. /* footer of every post */
  146.  
  147. #notes, .tags{
  148.     text-align: center;
  149.     margin-top: 5px;}
  150.    
  151. #notes img {display: inline;}
  152.  
  153. /* stylize your asks */
  154.  
  155. .question {
  156.     padding: 5px; margin-top: 10px;}
  157.  
  158. /* where the notes show on the permalink page */
  159.  
  160. #permanotes {
  161.     margin-top: 20px;
  162.     margin-bottom: 10px;}
  163.    
  164. #permanotes ol.notes {
  165.     list-style-type: none;
  166.     margin: 0;
  167.     padding: 0;}
  168.    
  169. #permanotes img.avatar {
  170.     margin-right: 10px;
  171.     display: inline;
  172.     width: 16px;
  173.     height: 16px;}
  174.  
  175. /* next page/previous page */
  176.  
  177. .pagination {
  178.     text-align: right;
  179.     font-size: 50px;
  180.     margin-left: 300px;
  181.     margin-top: -50px;
  182.     margin-bottom: 100px;
  183.     padding: 10px;
  184.     width: 400px;}
  185.  
  186. /* searchbar stuff */
  187.  
  188. .search {margin: 10px 0 10px 0;}
  189.  
  190. .query {
  191.     height:40px;
  192.     width: 240px;
  193.     padding-left: 5px;
  194.     color: {color:search font};
  195.     font-size: inherit;
  196.     font-family: inherit;
  197.     background-color: {color:search bkg};
  198.     border:none;
  199. }
  200.    
  201. .query::placeholder {color: {color:search font};}
  202.  
  203. /* quote stylization */
  204.  
  205. .quote {
  206.     text-align: justify;
  207.     font-style: italic;
  208.     font-weight: bold;
  209.     font-size: 140%;
  210.     line-height: 130%;}
  211.  
  212. .source {
  213.     text-align: right;}
  214.  
  215. /* audio stuff */
  216.  
  217. .spotify_audio_player {
  218.     height:80px!important;
  219.     width:100%!important;}
  220.    
  221. .soundcloud_audio_player {
  222.     height:150px!important;
  223.     width:100%!important;}
  224.  
  225. iframe, img, embed, object, video {
  226.  
  227. max-width: 100%;
  228.  
  229. }
  230.  
  231. /* playbutton background */
  232.  
  233. .trackback {
  234.     position: absolute;
  235.     left: 20px;
  236.     top: 20px;
  237.     width: 19px;
  238.     height: 19px;
  239.     background-color: #fff;
  240.     padding: 10px;
  241.     opacity: .4;}
  242.  
  243. /* playbutton */
  244.  
  245. .pressplay{
  246.     position: relative;
  247.     width: 25px;
  248.     height: 25px;
  249.     overflow: hidden;
  250.     left: -6px;
  251.     top: -3px;}
  252.  
  253. /* album img container */
  254.  
  255. .albumpic {
  256.     position: absolute;
  257.     left: 0px;
  258.     top: 0px;
  259.     width: 79px;
  260.     height: 79px;}
  261.  
  262. /* album img */
  263.  
  264. .albumpic img {
  265.     width: 100%;
  266.     height: auto;
  267.    
  268. }
  269.    
  270. /* track info ye */
  271.            
  272. .trackinfo {
  273.     width: auto;
  274.     display:inline-block;
  275.     margin-left: 90px;
  276.     min-height: 85px;}
  277.  
  278. /* makes both audio player & track info inline */
  279.  
  280. .audiowrapper {
  281. position: relative; display:inline-block;}
  282.  
  283. /* obvi the credit link at the bottom corner */
  284.  
  285. #credit { position: fixed; bottom: 15px; left: 15px; font-size: 26px;}
  286.  
  287. /* base code by @ps1 */
  288.  
  289.  
  290. </style>
  291.  
  292.  
  293. <!-- search tags -->
  294. <script>
  295. $(document).ready(function(){
  296.    $('.search').submit(function(event){
  297.        var value = $('input:first').val();
  298.        location.replace('http://{Name}.tumblr.com/tagged/' + value);
  299.    });
  300. });
  301. </script>
  302.  
  303. </head>  
  304.  
  305.  
  306. <div id="content">
  307.  
  308. <div id="sidebar">
  309.  
  310. <!-- i made everything optional but you can remove the variables if you want everything default. -->
  311.  
  312. {block:ifNotHideSearchbar}
  313. <div class="search">
  314. <form class="search" action="javascript:return false">
  315. <input type="text" class="query" placeholder="{text:search text}">
  316. </div>{/block:ifNotHideSearchbar}
  317.  
  318. {block:ifNotHideTitle}
  319. <div class="title"><a href="/">{Title}</a></div>
  320. {/block:ifNotHideTitle}
  321.  
  322. <a href="/"><img src="{image:sidebar}"></a>
  323.  
  324. {block:ifNotHideLinks}
  325. <div class="linkz">
  326. <a href="{text:link 1 URL}">{text:link 1}</a> {text:link spacer}
  327. <a href="{text:link 2 URL}">{text:link 2}</a> {text:link spacer}
  328. <a href="{text:link 3 URL}">{text:link 3}</a>
  329. </div>{/block:ifNotHideLinks}
  330.  
  331. {block:ifNotHideDesc}
  332. <div class="desc">{Description}</div>
  333. {/block:ifNotHideDesc}
  334. </div>
  335.  
  336. {block:Posts}
  337. <div class="posts">
  338.  
  339. {block:Text}
  340. {block:Title}<a href="{Permalink}">{Title}</a>{/block:Title}
  341. {Body}
  342. {/block:Text}
  343.  
  344. {block:Quote}
  345. <div class="quote">"{Quote}"</div>
  346. {block:Source}<div class="source">&mdash; {Source}</div>{/block:Source}
  347. {/block:Quote}
  348.  
  349. {block:Link}
  350. <big><a href="{URL}">{Name}</a></big>
  351. {block:Description}{Description}{/block:Description}
  352. {/block:Link}
  353.  
  354. {block:Chat}
  355. {block:Title}{Title}{/block:Title}
  356. {block:Lines}
  357. <div class="{Alt} user_{UserNumber}">
  358. {block:Label}{Label}{/block:Label} {Line}
  359. </div>
  360. {/block:Lines}
  361. {/block:Chat}
  362.  
  363.  
  364. {block:Answer}
  365. {Asker}
  366. <div class="question">{Question}</div>
  367. {Answer}
  368. {/block:Answer}
  369.  
  370.  
  371. {block:Photo}
  372. {LinkOpenTag}<img src="{PhotoURL-400}" alt="{Permalink}"/>{LinkCloseTag}
  373. {/block:Photo}
  374.  
  375. {block:Photoset}
  376. {Photoset-400}
  377. {/block:Photoset}
  378.  
  379. {block:Video}
  380. {Video-400}
  381. {/block:Video}
  382.  
  383. {block:AudioPlayer}
  384. <div class="audiowrapper">
  385. {block:AlbumArt}
  386. <div class="albumpic"><img src="{AlbumArtURL}"></div>
  387. {/block:AlbumArt}
  388. <div class="trackback">
  389. <div class="pressplay">
  390. {AudioPlayer}
  391. </div></div>
  392. <div class="trackinfo">
  393. {block:TrackName}{TrackName}{/block:TrackName}<br>
  394. {block:Artist}<b>{Artist}</b>{/block:Artist}<br>
  395. {block:Album}<i>{Album}</i>{/block:Album}<br>
  396. </div></div>
  397. {/block:AudioPlayer}
  398.    
  399. {block:ifNotHideCaption}
  400. {block:Caption}{Caption}{/block:Caption}
  401. {/block:ifNotHideCaption}
  402.  
  403.  
  404. {block:IndexPage}<div id="notes">
  405. <a href="{Permalink}">{NoteCount} notes</a>
  406. {text:link spacer}
  407. <a href="{ReblogURL}">reblog</a>
  408. </div>{/block:IndexPage}
  409.  
  410. {block:IndexPage}{block:ifNotHideTags}
  411. <div class="tags">
  412. {block:HasTags}{block:Tags}
  413. <a href="{TagURL}">#{Tag}</a>
  414. {/block:Tags}{/block:HasTags}</div>
  415. {/block:ifNotHideTags}{/block:IndexPage}
  416.  
  417.  
  418. {block:PermalinkPage}
  419. {block:ifHideCaption}
  420. {block:Caption}{Caption}{/block:Caption}
  421. {/block:ifHideCaption}
  422.  
  423. <p>{block:NoteCount}Notes: <a href="{Permalink}">{NoteCount}</a><br>{/block:NoteCount}
  424. {block:HasTags}Tags: {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}<br>{/block:HasTags}
  425. {block:RebloggedFrom}
  426. Via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
  427. <br>{/block:RebloggedFrom}{block:ContentSource}
  428. Source: <a href="{SourceURL}">{SourceTitle}</a>
  429. {/block:ContentSource}</p>
  430.  
  431. {block:NoteCount}<div id="permanotes">
  432. {block:PostNotes}{PostNotes}{/block:PostNotes}
  433. </div>{/block:NoteCount}
  434. {/block:PermalinkPage}
  435. </div>
  436. {/block:Posts}
  437.  
  438. {block:IndexPage}<div class="pagination">    
  439. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}" style="float:left;">&larr;</a>&nbsp;&nbsp;{/block:PreviousPage}{block:NextPage}
  440.  <a href="{NextPage}">&rarr;</a></p>{/block:NextPage}{/block:Pagination}
  441. </div>{/block:IndexPage}
  442.  
  443. </div>
  444. </div>
  445.  
  446. <div id="credit">
  447. <a href="https://dreamatoriumtheme.tumblr.com/" style="text-decoration:none">{text:link spacer}</a>  
  448. </div>
  449. </body>
  450. </html>
  451.  
  452.  
Tags: theme tumblr tumblr theme community layout dreamatorium
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!