API tools faq
paste
Advertisement
dendysoft

SOFT FLANNEL tumblr theme by @dendysoft

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