rp-schtuff

RPSchtuff Theme 04 - Ravenpaw

Aug 1st, 2019 (edited)
847
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.30 KB | None | 0 0
  1. <!--
  2.  
  3. RULES:
  4.  
  5. You may edit this code however you wish, and you may use this code as a base - FOR PERSONAL USE ONLY. You may not use this code for any commissions or other paid work unless you've discussed it with me.
  6.  
  7. You may not remove, move, or alter my credit in any way.
  8.  
  9.  
  10.  
  11. THEME FEATURES:
  12.  
  13. This is a responsive container theme built for 500px wide posts that will automatically adjust to the computer screen's height. The container is built entirely in the code and does not rely on a precise wallpaper to look correct.
  14.  
  15. Everything should be customizable from the basic editor. You have complete control over all colors.
  16.  
  17. There can be unlimited links above the container. Use the "show a link to this page" button in the page editor, and they will appear in the order they were selected. They might not show up in the theme editor screen, so be sure to check the blog itself to confirm it.
  18.  
  19.  
  20.  
  21. TIPS:
  22.  
  23. For the container background opacity, enter a value between 0 and 1, with 0 being completely transparent and 1 being completely opaque. For example: 50% transparency would be 0.5
  24.  
  25.  
  26.  
  27. Feel free to contact me with any questions or concerns!
  28.  
  29. ~Jeanette (rpschtuff)
  30.  
  31. -->
  32.  
  33.  
  34. <html>
  35. <head>
  36. <title>{Title}</title>
  37. <link rel="shortcut icon" href="{Favicon}">
  38. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  39. {block:Description}
  40. <meta name="description" content="{MetaDescription}" />
  41. {/block:Description}
  42.  
  43. <meta name="image:background" content="https://i.postimg.cc/SykrTxSq/tumblr-static-d9sfceofqog8cc4cw4kokk4ok.png" />
  44. <meta name="text:main title" content="title goes here" />
  45. <meta name="text:description" content="description goes here" />
  46. <meta name="text:container background opacity" content="0.9" />
  47. <meta name="text:sidebar position from top" content="420px" />
  48. <meta name="text:home title" content="home" />
  49. <meta name="text:ask title" content="ask" />
  50. <meta name="text:submit title" content="submit" />
  51. <meta name="text:archive title" content="archive" />
  52. <meta name="text:symbol" content="❈" />
  53. <meta name="color:background" content="#000000" />
  54. <meta name="color:container background" content="#040404" />
  55. <meta name="color:container border" content="#30510c" />
  56. <meta name="color:glow" content="#132c05" />
  57. <meta name="color:main title" content="#132c05" />
  58. <meta name="color:text" content="#cccccc" />
  59. <meta name="color:link" content="#6d981f" />
  60. <meta name="color:link hover" content="#ccc" />
  61. <meta name="color:bold" content="#fff" />
  62. <meta name="color:italic" content="#fff" />
  63. <meta name="color:h1" content="#fff" />
  64. <meta name="color:h2" content="#eeeeee" />
  65. <meta name="color:top links" content="#132c05" />
  66. <meta name="color:top links hover" content="#ccc" />
  67. <meta name="color:permalinks" content="#6d981f" />
  68. <meta name="color:permalinks hover" content="#ccc" />
  69. <meta name="color:tags" content="#ccc" />
  70. <meta name="color:tags hover" content="#6d981f" />
  71. <meta name="if:show submit" content="1" />
  72. <meta name="if:show archive" content="1" />
  73.  
  74. <link href="https://fonts.googleapis.com/css2?family=Antic&display=swap" rel="stylesheet">
  75.  
  76. <link href="https://fonts.googleapis.com/css?family=Grenze&display=swap" rel="stylesheet">
  77.  
  78. <link href="https://fonts.googleapis.com/css?family=Lovers+Quarrel" rel="stylesheet">
  79.  
  80.  
  81. <!-- CUSTOM TOOLTIPS BY @HTMLQUEENS -->
  82. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  83. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  84. <script>
  85. (function($){
  86. $(document).ready(function(){
  87. $("a[title]").style_my_tooltips({
  88. tip_follows_cursor:true,
  89. tip_delay_time:50,
  90. tip_fade_speed:200,
  91. attribute:"title"
  92. });
  93. });
  94. })(jQuery);
  95. </script>
  96.  
  97. </head>
  98.  
  99. <style type="text/css">
  100.  
  101. .tooltip{
  102. display: inline;
  103. position: relative;
  104. }
  105.  
  106. /* CUSTOM TOOLTIPS BY @HTMLQUEENS */
  107. #s-m-t-tooltip {
  108. padding:6px;
  109. width:auto;
  110. max-width:300px;
  111. background-repeat:repeat;
  112. background-attachment:fixed;
  113. text-align:center;
  114. max-height:300px;
  115. margin:10px 20px 10px 5px;
  116. color:{color:text};
  117. font-weight:bold;
  118. font-family: 'grenze';
  119. text-transform:uppercase;
  120. background-color:{color:container background};
  121. border:1px solid {color:container border};
  122. box-shadow:0 0 10px {color:glow};
  123. border-radius:7px;
  124. font-size:10px;
  125. letter-spacing:1px;
  126. z-index:99999;
  127. transition:0.7s ease-in-out;
  128. -o-transition:0.7s ease-in-out;
  129. -ms-transition:0.7s ease-in-out;
  130. -moz-transition:0.7s ease-in-out;
  131. -webkit-transition:0.7s ease-in-out;
  132. }
  133.  
  134. /* CUSTOM SCROLLBAR BY @HELP-WITH-CODING */
  135. ::-webkit-scrollbar {
  136. width: 5px;
  137. background: transparent;
  138. z-index:-999999999;
  139. border-radius:7px;
  140. }
  141.  
  142. ::-webkit-scrollbar-thumb {
  143. background: -moz-radial-gradient(center, ellipse cover, {color:container border} 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
  144. background: -webkit-radial-gradient(center, ellipse cover, {color:container border} 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  145. background: radial-gradient(ellipse at center, {color:container border} 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  146. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e4511', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  147. border-radius:7px;
  148. }
  149.  
  150. body {
  151. background-color:{color:background};
  152. font-family:'antic';
  153. font-size:10.5px;
  154. color:{color:text};
  155. background-image:url('{image:background}');
  156. background-position:top left;
  157. background-attachment:fixed;
  158. background-repeat:no-repeat;
  159. line-height:16px;
  160. overflow:hidden;
  161. }
  162.  
  163. small, sub, sup {
  164. font-size:1em;
  165. }
  166.  
  167. a {
  168. text-decoration:none;
  169. color:{color:link};
  170. -webkit-transition: all 0.7s ease;
  171. -moz-transition: all 0.7s ease;
  172. -o-transition: all 0.7s ease;
  173. }
  174.  
  175. a:hover {
  176. color:{color:link hover};
  177. -webkit-transition: all 0.7s ease;
  178. -moz-transition: all 0.7s ease;
  179. -o-transition: all 0.7s ease;
  180. }
  181.  
  182. b, bold, strong {
  183. color:{color:bold};
  184. text-transform:uppercase;
  185. font-family:'grenze';
  186. letter-spacing:2px;
  187. font-size:12px;
  188. }
  189.  
  190. i, em, italic {
  191. color:{color:italic};
  192. font-size:22px;
  193. font-weight:400;
  194. letter-spacing:1.5px;
  195. font-family:'lovers quarrel';
  196. font-style:normal;
  197. text-transform:lowercase;
  198. }
  199.  
  200. pre {
  201. background-color:{color:container border};
  202. font-family:'grenze';
  203. }
  204.  
  205. img {
  206. max-width: 100%;
  207. }
  208.  
  209. h1 {
  210. font-size:30px;
  211. line-height:25px;
  212. text-align:center;
  213. letter-spacing:2px;
  214. color:{color:h1};
  215. text-transform:uppercase;
  216. font-family:'grenze';
  217. }
  218.  
  219. h2 {
  220. text-align:center;
  221. font-family:'lovers quarrel';
  222. font-size:22px;
  223. font-weight:bold;
  224. color:{color:h2};
  225. margin-top:30px;
  226. letter-spacing:8px;
  227. padding-bottom:5px;
  228. text-shadow:0 0 30px {color:glow};
  229. border-bottom:1px solid {color:container border};
  230. }
  231.  
  232. #title {
  233. position:fixed;
  234. font-size:60px;
  235. font-family:'lovers quarrel';
  236. width:520px;
  237. text-align:right;
  238. left:110px;
  239. top:60px;
  240. color:{color:main title};
  241. text-shadow:0 0 10px {color:glow};
  242. z-index:999999999;
  243. }
  244.  
  245. #title a {
  246. color:{color:main title};
  247. }
  248.  
  249. #toplinks {
  250. position:fixed;
  251. top:60px;
  252. left:110px;
  253. z-index:9999999999999;
  254. }
  255.  
  256. #toplinks a {
  257. display:inline-block;
  258. padding-right:10px;
  259. font-size:15px;
  260. color:{color:top links};
  261. }
  262.  
  263. #toplinks a.page {
  264. font-size:12px;
  265. vertical-align:top;
  266. }
  267.  
  268. #description {
  269. position:fixed;
  270. width:250px;
  271. left:670px;
  272. top:{text:sidebar position from top};
  273. padding:10px;
  274. line-height:16px;
  275. letter-spacing:1px;
  276. font-size:10.5px;
  277. text-align:justify;
  278. text-align-last:center;
  279. overflow-y:scroll;
  280. overflow-x:hidden;
  281. border:1px solid {color:container border};
  282. box-shadow:0 0 10px {color:glow};
  283. background-color:rgba({RGBColor:container background}, {text:container background opacity});
  284. }
  285.  
  286. #description h1 {
  287. font-size:16px;
  288. }
  289.  
  290. #description h2 {
  291. font-size:16px;
  292. }
  293.  
  294. #container {
  295. position:absolute;
  296. left:100px;
  297. height:calc(100% - 120px);
  298. top:80px;
  299. padding:10px;
  300. width:520px;
  301. overflow-y:scroll;
  302. overflow-x:hidden;
  303. border:1px solid {color:container border};
  304. box-shadow:0 0 10px {color:glow};
  305. background-color:rgba({RGBColor:container background}, {text:container background opacity});
  306. }
  307.  
  308. .posts {
  309. width:500px;
  310. text-align:justify;
  311. padding:10px;
  312. color:{color:text};
  313. margin-bottom:50px;
  314. line-height:16px;
  315. letter-spacing:1px;
  316. }
  317.  
  318. .posts:last-of-type {
  319. margin-bottom:0;
  320. }
  321.  
  322. blockquote {
  323. padding-left:9px;
  324. margin-left:3px;
  325. border-left:1px solid {color:container border};
  326. max-width:100%;
  327. margin-right:0px;
  328. }
  329.  
  330. blockquote img {
  331. max-width:100%;
  332. height:auto;
  333. }
  334.  
  335. .asker {
  336. font-size:24px;
  337. text-align:center;
  338. text-transform:lowercase;
  339. font-family:'lovers quarrel';
  340. }
  341.  
  342. .asker a {
  343. text-transform:lowercase;
  344. }
  345.  
  346. .question {
  347. text-align:justify;
  348. text-align-last: center;
  349. letter-spacing:1.5px;
  350. border-bottom:1px solid {color:container border};
  351. }
  352.  
  353. .quote {
  354. font-size:24px;
  355. text-align:center;
  356. font-family:'lovers quarrel';
  357. margin-bottom:5px;
  358. letter-spacing:2px;
  359. padding-bottom:3px;
  360. }
  361.  
  362. .quote:before {
  363. content:"❝ ";
  364. }
  365.  
  366. .quote:after {
  367. content:" ❞";
  368. }
  369.  
  370. .quotesource {
  371. font-size:10px;
  372. letter-spacing:1px;
  373. text-align:right;
  374. margin-bottom:5px;
  375. }
  376.  
  377. .permalinks {
  378. padding:10px;
  379. padding-bottom:0;
  380. margin-bottom:0;
  381. text-align:center;
  382. color:{color:permalinks};
  383. text-transform:uppercase;
  384. -webkit-transition: all 0.7s ease;
  385. -moz-transition: all 0.7s ease;
  386. -o-transition: all 0.7s ease;
  387. }
  388.  
  389. .permalinks a {
  390. display:inline-block;
  391. position:relative;
  392. text-decoration:none;
  393. font-family:'grenze';
  394. letter-spacing:1px;
  395. font-size:14px;
  396. padding-left:10px;
  397. padding-right:10px;
  398. color:{color:permalinks};
  399. -webkit-transition: all 0.7s ease;
  400. -moz-transition: all 0.7s ease;
  401. -o-transition: all 0.7s ease;
  402. }
  403.  
  404. .permalinks a:hover {
  405. color:{permalinks hover};
  406. }
  407.  
  408. .tags {
  409. text-transform:none;
  410. letter-spacing:1px;
  411. text-align:center;
  412. -webkit-transition: all 0.7s ease;
  413. -moz-transition: all 0.7s ease;
  414. -o-transition: all 0.7s ease;
  415. }
  416.  
  417. .tags a {
  418. margin-top:-10px;
  419. text-transform:none;
  420. text-decoration:none;
  421. font-size:9px;
  422. color:{color:tags};
  423. -webkit-transition: all 0.7s ease;
  424. -moz-transition: all 0.7s ease;
  425. -o-transition: all 0.7s ease;
  426. }
  427.  
  428. .tags a:hover {
  429. color:{color:tags hover};
  430. -webkit-transition: all 0.7s ease;
  431. -moz-transition: all 0.7s ease;
  432. -o-transition: all 0.7s ease;
  433. }
  434.  
  435. #notecontainer {
  436. margin: 20px auto;
  437. width: 500px;
  438. font-size: 11px;
  439. }
  440.  
  441. #notecontainer ol.notes {
  442. list-style-type: none;
  443. margin: 0;
  444. padding: 0;
  445. }
  446.  
  447. #notecontainer img.avatar {
  448. margin-right: 10px;
  449. width: 16px;
  450. height: 16px;
  451. }
  452.  
  453. #notecontainer a {
  454. text-transform:uppercase;
  455. font-size:10px;
  456. letter-spacing:1px;
  457. }
  458.  
  459.  
  460. /* DO NOT TOUCH */
  461. #credit {
  462. position:absolute;
  463. text-transform:uppercase;
  464. text-align:center;
  465. font-size:9px;
  466. line-height:100%;
  467. bottom:10px;
  468. right:10px;
  469. padding:7px;
  470. color:{color:text};
  471. border:1px solid {color:container border};
  472. box-shadow:0 0 10px {color:glow};
  473. background-color:rgba({RGBColor:container background}, {text:container background opacity});
  474. }
  475.  
  476. #credit a {
  477. color:{color:text};
  478. }
  479.  
  480. </style>
  481.  
  482. <body>
  483.  
  484. </div>
  485.  
  486.  
  487. <div id="toplinks">
  488. {block:PreviousPage}
  489. <a class="page" href="{PreviousPage}" title="previous">⟪</a>
  490. {/block:PreviousPage}
  491.  
  492. <a href="/" title="{text:home title}">{text:symbol}</a>
  493. <a href="/ask" title="{text:ask title}">{text:symbol}</a>
  494.  
  495. {block:IfShowSubmit}
  496. <a href="/submit" title="{text:submit title}">{text:symbol}</a>
  497. {/block:IfShowSubmit}
  498.  
  499. {block:HasPages}
  500. {block:Pages}
  501. <a href="{URL}" title="{Label}">{text:symbol}</a>
  502. {/block:Pages}
  503. {/block:HasPages}
  504.  
  505. {block:NextPage}
  506. <a class="page" href="{NextPage}" title="next">⟫</a>
  507. {/block:NextPage}
  508. </div>
  509.  
  510.  
  511. <div id="title">
  512. <a href="/">{text:main title}</a>
  513. </div>
  514.  
  515.  
  516. <div id="description">
  517. {text:description}
  518. </div>
  519.  
  520.  
  521. <div id="container">
  522. {block:Posts}
  523.  
  524. {block:ContentSource}
  525. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  526. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  527. {/block:SourceLogo}
  528. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  529. {/block:ContentSource}
  530.  
  531.  
  532. <div class="posts">
  533.  
  534. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  535.  
  536. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  537.  
  538. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  539.  
  540. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  541.  
  542. {block:Quote}<div class="quote">{Quote}</div>{block:Source}<div class="quotesource">—{Source}</div>{/block:Source}{/block:Quote}
  543.  
  544. {block:Link}<a href="{URL}" class="link" {Target}><h2>{Name}</h2></a>{block:Description}{Description}{/block:Description}{/block:Link}
  545.  
  546. {block:Chat}{block:Title}<h1>{Title}</h1></a>{/block:Title}
  547. {block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  548.  
  549. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  550.  
  551. {block:Audio}{AudioEmbed}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  552.  
  553. {block:Answer}
  554. <div class="asker">{Asker} asked</div>
  555. <div class="question">{Question}</div>
  556. {Answer}
  557. {/block:Answer}
  558.  
  559.  
  560.  
  561. {block:Date}
  562. <div class="permalinks">
  563.  
  564. <a href="{permalink}" title="posted {ShortMonth} {DayofMonth} {Year} - {12Hour}:{Seconds} {CapitalAmPm}">{text:symbol}</a>
  565.  
  566. {block:NoteCount}<a href="{permalink}" title="{NoteCount} notes">{text:symbol}</a>{/block:NoteCount}
  567.  
  568. {block:RebloggedFrom}<a href="{ReblogParentURL}" title="via: {ReblogParentName}">{text:symbol}</a>{/block:RebloggedFrom}
  569.  
  570. {block:RebloggedFrom}<a href="{ReblogRootURL}" title="source: {ReblogRootName}">{text:symbol}</a>{/block:RebloggedFrom}
  571.  
  572. <a href="{ReblogURL}" title="reblog">{text:symbol}</a>
  573.  
  574. </div>
  575. {/block:Date}
  576.  
  577. <div class="tags">
  578. {block:HasTags}{block:Tags}<a href="{TagUrl}">#{Tag}</a> {/block:Tags}{/block:HasTags}
  579. </div>
  580.  
  581. {block:Permalink}
  582. {block:PostNotes}
  583. <div id="notecontainer">{PostNotes}</div>
  584. {/block:PostNotes}
  585. {/block:Permalink}
  586.  
  587. </div>
  588. {/block:Posts}
  589.  
  590.  
  591. </div>
  592.  
  593. <!-- DO NOT TOUCH -->
  594. <div id="credit">
  595. <a href="http://rp-schtuff.tumblr.com">theme by<br><i>rp-schtuff</i></a>
  596. </div>
  597. <!-- DO NOT TOUCH -->
  598.  
  599. </body>
  600. </html>
Add Comment
Please, Sign In to add comment