rp-schtuff

RpSchtuff Theme 03 - Alara

May 17th, 2019 (edited)
936
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.84 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. Everything should be customizable from the basic editor. You have complete control over all colors.
  14.  
  15. The sidebar images are 70px by 70px and will resize automatically.
  16.  
  17. Things tilt and spin when you hover on them! Yeah!!
  18.  
  19. The sidebar can have unlimited links. 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.
  20.  
  21.  
  22.  
  23. Feel free to contact me with any questions or concerns!
  24.  
  25. ~Jeanette (rpschtuff)
  26.  
  27. -->
  28.  
  29.  
  30. <html>
  31. <head>
  32. <title>{Title}</title>
  33. <link rel="shortcut icon" href="{Favicon}">
  34. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  35. {block:Description}
  36. <meta name="description" content="{MetaDescription}" />
  37. {/block:Description}
  38.  
  39. <meta name="image:img 1" content="http://placehold.it/100x100" />
  40. <meta name="image:img 2" content="http://placehold.it/100x100" />
  41. <meta name="image:img 3" content="http://placehold.it/100x100" />
  42. <meta name="image:img 4" content="http://placehold.it/100x100" />
  43. <meta name="image:img 5" content="http://placehold.it/100x100" />
  44.  
  45. <meta name="if:show submit" content="1" />
  46. <meta name="if:show archive" content="1" />
  47.  
  48. <meta name="color:background" content="#222222" />
  49. <meta name="color:text" content="#9F9F9F" />
  50. <meta name="color:borders" content="#4C3531" />
  51. <meta name="color:bold" content="#ffffff" />
  52. <meta name="color:italic" content="#ffffff" />
  53. <meta name="color:link" content="#C65D4B" />
  54. <meta name="color:link hover" content="#cccccc" />
  55. <meta name="color:sidebar title" content="#C65D4B" />
  56. <meta name="color:description text" content="#9f9f9f" />
  57. <meta name="color:sidebar links" content="#C65D4B" />
  58. <meta name="color:sidebar links hover" content="#cccccc" />
  59. <meta name="color:h1" content="#C65D4B" />
  60. <meta name="color:h2" content="#C65D4B" />
  61. <meta name="color:permalinks" content="#C65D4B" />
  62. <meta name="color:permalinks hover" content="#cccccc" />
  63. <meta name="color:tags" content="#656464" />
  64. <meta name="color:tags hover" content="#cccccc" />
  65.  
  66. <meta name="text:sidebar title" content="title!" />
  67. <meta name="text:description" content="description!" />
  68. <meta name="text:home title" content="home" />
  69. <meta name="text:ask title" content="ask" />
  70. <meta name="text:submit title" content="submit" />
  71. <meta name="text:archive title" content="archive" />
  72.  
  73. <link href="https://fonts.googleapis.com/css2?family=Antic&family=Sail&family=Vidaloka&display=swap" rel="stylesheet">
  74.  
  75. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
  76.  
  77.  
  78. <!-- CUSTOM TOOLTIPS BY @HTMLQUEENS -->
  79. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  80. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  81. <script>
  82. (function($){
  83. $(document).ready(function(){
  84. $("a[title]").style_my_tooltips({
  85. tip_follows_cursor:true,
  86. tip_delay_time:50,
  87. tip_fade_speed:200,
  88. attribute:"title"
  89. });
  90. });
  91. })(jQuery);
  92. </script>
  93.  
  94. </head>
  95.  
  96. <style type="text/css">
  97.  
  98. .tooltip{
  99. display: inline;
  100. position: relative;
  101. }
  102.  
  103. /* CUSTOM TOOLTIPS BY @HTMLQUEENS */
  104. #s-m-t-tooltip {
  105. padding:6px;
  106. width:auto;
  107. max-width:300px;
  108. background-repeat:repeat;
  109. background-attachment:fixed;
  110. text-align:center;
  111. max-height:300px;
  112. margin:10px 20px 10px 5px;
  113. color:{color:text};
  114. font-weight:bold;
  115. font-family: 'antic';
  116. text-transform:uppercase;
  117. background-color:{color:background};
  118. border:1px solid {color:borders};
  119. font-size:10px;
  120. letter-spacing:1px;
  121. z-index:99999;
  122. transition:0.7s ease-in-out;
  123. -o-transition:0.7s ease-in-out;
  124. -ms-transition:0.7s ease-in-out;
  125. -moz-transition:0.7s ease-in-out;
  126. -webkit-transition:0.7s ease-in-out;
  127. }
  128.  
  129. /* CUSTOM SCROLLBAR BY @HELP-WITH-CODING */
  130. ::-webkit-scrollbar {
  131. width: 3px;
  132. background: transparent;
  133. z-index:-999999999;
  134. }
  135.  
  136. ::-webkit-scrollbar-thumb {
  137. background: {color:borders};
  138. border-radius:7px;
  139. }
  140.  
  141. body {
  142. background-color:{color:background};
  143. font-family:'antic';
  144. font-size:12px;
  145. color:{color:text};
  146. line-height:16px;
  147. overflow-x:hidden;
  148. overflow-y:scroll;
  149. background-repeat:repeat;
  150. }
  151.  
  152. small, sub, sup {
  153. font-size:1em;
  154. }
  155.  
  156. a {
  157. text-decoration:none;
  158. color:{color:link};
  159. -webkit-transition: all 0.7s ease;
  160. -moz-transition: all 0.7s ease;
  161. -o-transition: all 0.7s ease;
  162. }
  163.  
  164. a:hover {
  165. color:{color:link hover};
  166. -webkit-transition: all 0.7s ease;
  167. -moz-transition: all 0.7s ease;
  168. -o-transition: all 0.7s ease;
  169. }
  170.  
  171. b, bold, strong {
  172. color:{color:bold};
  173. text-transform:uppercase;
  174. font-family:'vidaloka';
  175. letter-spacing:2px;
  176. font-size:12px;
  177. }
  178.  
  179. i, em, italic {
  180. color:{color:italic};
  181. font-size:15px;
  182. font-weight:400;
  183. letter-spacing:1.5px;
  184. font-family:'sail';
  185. font-style:normal;
  186. text-transform:none;
  187. }
  188.  
  189. img {
  190. max-width: 100%;
  191. }
  192.  
  193. hr {
  194. border:0;
  195. background-color:{color:borders};
  196. width:80%;
  197. height:1px;
  198. margin-top:10px;
  199. margin-bottom:10px;
  200. }
  201.  
  202. h1 {
  203. font-size:40px;
  204. text-align:right;
  205. margin-right:-25px;
  206. padding-right:25px;
  207. margin-left:-25px;
  208. padding-left:25px;
  209. font-weight:normal;
  210. letter-spacing:1px;
  211. color:{color:h1};
  212. font-family:'sail';
  213. margin-top:-10px;
  214. padding-top:10px;
  215. padding-bottom:20px;
  216. border-bottom:1px solid {color:borders};
  217. }
  218.  
  219. h2 {
  220. text-align:left;
  221. font-family:'vidaloka';
  222. text-transform:uppercase;
  223. font-size:14px;
  224. font-weight:bold;
  225. color:{color:h2};
  226. margin-top:30px;
  227. letter-spacing:8px;
  228. padding-bottom:5px;
  229. }
  230.  
  231. #description {
  232. position:fixed;
  233. text-align:justify;
  234. text-align-last:center;
  235. padding:5px;
  236. width:300px;
  237. left:40px;
  238. top:50%;
  239. transform:translateY(-50%);
  240. letter-spacing:1px;
  241. color:{color:description text};
  242. border:1px solid {color:borders};
  243. border-radius:15px;
  244. }
  245.  
  246. #description h1 {
  247. font-size:40px;
  248. margin-bottom:0px;
  249. letter-spacing:1px;
  250. text-transform:none;
  251. font-weight:normal;
  252. padding-bottom:0px;
  253. margin:0;
  254. margin-top:10px;
  255. margin-bottom:10px;
  256. text-align:right;
  257. color:{color:sidebar title};
  258. font-family:'sail';
  259. border:0;
  260. }
  261.  
  262. #description h1 a {
  263. color:{color:sidebar title};
  264. }
  265.  
  266. #desc {
  267. padding:10px;
  268. margin:10px;
  269. margin-bottom:-5px;
  270. margin-top:5px;
  271. }
  272.  
  273. .imgrow {
  274. position:fixed;
  275. text-align:center;
  276. left:380px;
  277. top:50%;
  278. transform:translateY(-50%);
  279. }
  280.  
  281. .imgrow img {
  282. display:block;
  283. width:70px;
  284. height:70px;
  285. border:1px solid {color:borders};
  286. padding:10px;
  287. border-radius:25%;
  288. margin:20px;
  289. object-fit:cover;
  290. -webkit-transition: all 1s ease;
  291. -moz-transition: all 1s ease;
  292. -o-transition: all 1s ease;
  293. }
  294.  
  295. .imgrow img:hover {
  296. transform:rotate(360deg);
  297. -webkit-transition: all 1s ease;
  298. -moz-transition: all 1s ease;
  299. -o-transition: all 1s ease;
  300. }
  301.  
  302. #links {
  303. font-size:11px;
  304. text-align:center;
  305. font-family:'vidaloka';
  306. font-weight:bold;
  307. letter-spacing:2px;
  308. padding:10px;
  309. }
  310.  
  311. #links a {
  312. display:inline-block;
  313. text-decoration:none;
  314. text-transform:uppercase;
  315. text-align:center;
  316. width:100%;
  317. height:15px;
  318. margin-top:2px;
  319. margin-bottom:2px;
  320. padding-bottom:3px;
  321. padding-top:4px;
  322. border:1px solid {color:borders};
  323. color:{color:sidebar links};
  324. border-radius:25px;
  325. -webkit-transition: all 0.7s ease;
  326. -moz-transition: all 0.7s ease;
  327. -o-transition: all 0.7s ease;
  328. }
  329.  
  330. #links a:hover {
  331. color:{color:side links hover};
  332. -webkit-transition: all 0.7s ease;
  333. -moz-transition: all 0.7s ease;
  334. -o-transition: all 0.7s ease;
  335. }
  336.  
  337. #links a:nth-of-type(odd):hover {
  338. transform:rotate(-1deg);
  339. }
  340.  
  341. #links a:nth-of-type(even):hover {
  342. transform:rotate(1deg);
  343. }
  344.  
  345. #pagination {
  346. text-align:center;
  347. }
  348.  
  349. #pagination a {
  350. display:inline-block;
  351. width:50%;
  352. }
  353.  
  354. #container {
  355. position:absolute;
  356. left:500px;
  357. height:100vh;
  358. }
  359.  
  360. .posts {
  361. width:500px;
  362. text-align:justify;
  363. padding:25px;
  364. margin:40px;
  365. color:{color:text};
  366. margin-bottom:50px;
  367. line-height:16px;
  368. letter-spacing:1px;
  369. border:1px solid {color:borders};
  370. padding-bottom:10px;
  371. border-radius:20px;
  372. -webkit-transition: all 0.7s ease;
  373. -moz-transition: all 0.7s ease;
  374. -o-transition: all 0.7s ease;
  375. }
  376.  
  377. blockquote {
  378. padding-left:9px;
  379. margin-left:3px;
  380. border-left:1px solid {color:borders};
  381. max-width:100%;
  382. margin-right:0px;
  383. }
  384.  
  385. blockquote img {
  386. max-width:100%;
  387. height:auto;
  388. }
  389.  
  390. .asker {
  391. font-size:18px;
  392. text-align:right;
  393. text-transform:lowercase;
  394. font-family:'sail';
  395. }
  396.  
  397. .asker a {
  398. text-transform:lowercase;
  399. font-size:18px;
  400. }
  401.  
  402. .question {
  403. text-align:justify;
  404. text-align-last:right;
  405. letter-spacing:1.5px;
  406. margin-top:5px;
  407. padding-bottom:10px;
  408. border-bottom:1px solid {color:borders};
  409. margin-left:-25px;
  410. padding-left:25px;
  411. margin-right:-25px;
  412. padding-right:25px;
  413. }
  414.  
  415. .quote {
  416. font-size:20px;
  417. text-align:center;
  418. font-family:'sail';
  419. margin-bottom:5px;
  420. letter-spacing:2px;
  421. padding-bottom:3px;
  422. }
  423.  
  424. .quote:before {
  425. content:"❝ ";
  426. }
  427.  
  428. .quote:after {
  429. content:" ❞";
  430. }
  431.  
  432. .quotesource {
  433. font-size:10px;
  434. letter-spacing:1px;
  435. text-align:right;
  436. margin-bottom:5px;
  437. }
  438.  
  439. .permalinks {
  440. text-align:center;
  441. color:{color:permalinks};
  442. margin-top:15px;
  443. padding-top:10px;
  444. padding-bottom:0;
  445. margin-bottom:0;
  446. margin-left:-25px;
  447. padding-left:25px;
  448. margin-right:-25px;
  449. padding-right:25px;
  450. border-top:1px solid {color:borders};
  451. text-transform:uppercase;
  452. -webkit-transition: all 0.7s ease;
  453. -moz-transition: all 0.7s ease;
  454. -o-transition: all 0.7s ease;
  455. }
  456.  
  457. .permalinks a {
  458. display:inline-block;
  459. position:relative;
  460. text-decoration:none;
  461. font-family:'vidaloka';
  462. letter-spacing:1px;
  463. font-size:10px;
  464. padding-left:10px;
  465. padding-right:10px;
  466. color:{color:permalinks};
  467. -webkit-transition: all 0.7s ease;
  468. -moz-transition: all 0.7s ease;
  469. -o-transition: all 0.7s ease;
  470. }
  471.  
  472. .permalinks a:hover {
  473. color:{permalinks hover};
  474. transform:rotate(360deg);
  475. }
  476.  
  477. .permalinks i {
  478. color:{color:permalinks};
  479. -webkit-transition: all 0.7s ease;
  480. -moz-transition: all 0.7s ease;
  481. -o-transition: all 0.7s ease;
  482. }
  483.  
  484. .permalinks i:hover {
  485. color:{color:permalinks hover};
  486. -webkit-transition: all 0.7s ease;
  487. -moz-transition: all 0.7s ease;
  488. -o-transition: all 0.7s ease;
  489. }
  490.  
  491. .tags {
  492. text-transform:none;
  493. letter-spacing:1px;
  494. margin-top:5px;
  495. text-align:center;
  496. -webkit-transition: all 0.7s ease;
  497. -moz-transition: all 0.7s ease;
  498. -o-transition: all 0.7s ease;
  499. }
  500.  
  501. .tags a {
  502. text-transform:none;
  503. text-decoration:none;
  504. font-size:9px;
  505. color:{color:tags};
  506. -webkit-transition: all 0.7s ease;
  507. -moz-transition: all 0.7s ease;
  508. -o-transition: all 0.7s ease;
  509. }
  510.  
  511. .tags a:hover {
  512. color:{color:tags hover};
  513. -webkit-transition: all 0.7s ease;
  514. -moz-transition: all 0.7s ease;
  515. -o-transition: all 0.7s ease;
  516. }
  517.  
  518. #notecontainer {
  519. margin: 20px auto;
  520. width: 500px;
  521. font-size: 11px;
  522. }
  523.  
  524. #notecontainer ol.notes {
  525. list-style-type: none;
  526. margin: 0;
  527. padding: 0;
  528. }
  529.  
  530. #notecontainer img.avatar {
  531. margin-right: 10px;
  532. width: 16px;
  533. height: 16px;
  534. }
  535.  
  536. #notecontainer a {
  537. text-transform:uppercase;
  538. font-size:10px;
  539. letter-spacing:1px;
  540. }
  541.  
  542.  
  543. /* DO NOT TOUCH */
  544. #credit {
  545. position:fixed;
  546. text-transform:uppercase;
  547. text-align:center;
  548. font-size:9px;
  549. line-height:100%;
  550. bottom:10px;
  551. right:10px;
  552. color:{color:text};
  553. border:1px solid {color:borders};
  554. padding:10px;
  555. border-radius:10px;
  556. -webkit-transition: all 0.7s ease;
  557. -moz-transition: all 0.7s ease;
  558. -o-transition: all 0.7s ease;
  559. }
  560.  
  561. #credit:hover {
  562. transform:rotate(-2deg);
  563. -webkit-transition: all 0.7s ease;
  564. -moz-transition: all 0.7s ease;
  565. -o-transition: all 0.7s ease;
  566. }
  567.  
  568. #credit a {
  569. color:{color:text};
  570. }
  571.  
  572. </style>
  573.  
  574. <body>
  575.  
  576. </div>
  577.  
  578.  
  579. <div id="description">
  580.  
  581. <a href="/"><h1>{text:sidebar title}</h1></a>
  582.  
  583. <div id="desc">
  584. {text:description}
  585. </div>
  586.  
  587. <div id="links">
  588. <a href="/">{text:home title}</a>
  589. <a href="/ask">{text:ask title}</a>
  590.  
  591. {block:ifShowSubmit}
  592. <a href="/submit">{text:submit title}</a>
  593. {/block:ifShowSubmit}
  594.  
  595. {block:HasPages}
  596. {block:Pages}
  597. <a href="{URL}">{Label}</a>
  598. {/block:Pages}
  599. {/block:HasPages}
  600.  
  601. {block:ifShowArchive}
  602. <a href="/archive">{text:archive title}</a>
  603. {/block:ifShowArchive}
  604.  
  605. {block:Pagination}
  606. <div id="pagination">
  607. {block:PreviousPage}
  608. <a href="{PreviousPage}">◀</a>
  609. {/block:PreviousPage}
  610. {block:NextPage}
  611. <a href="{NextPage}">▶</a>
  612. {/block:NextPage}
  613. </div>
  614. {/block:Pagination}
  615.  
  616. </div>
  617.  
  618. </div>
  619.  
  620.  
  621. <div class="imgrow">
  622. <img src="{image:img 1}">
  623. <img src="{image:img 2}">
  624. <img src="{image:img 3}">
  625. <img src="{image:img 4}">
  626. <img src="{image:img 5}">
  627. </div>
  628.  
  629.  
  630.  
  631. <div id="container">
  632. {block:Posts}
  633.  
  634. {block:ContentSource}
  635. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  636. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  637. {/block:SourceLogo}
  638. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  639. {/block:ContentSource}
  640.  
  641.  
  642. <div class="posts">
  643.  
  644. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  645.  
  646. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  647.  
  648. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  649.  
  650. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  651.  
  652. {block:Quote}<div class="quote">{Quote}"</div>{block:Source}<div class="quotesource">—{Source}</div>{/block:Source}{/block:Quote}
  653.  
  654. {block:Link}<a href="{URL}" class="link" {Target}><h2>{Name}</h2></a>{block:Description}{Description}{/block:Description}{/block:Link}
  655.  
  656. {block:Chat}{block:Title}<h1>{Title}</h1></a>{/block:Title}
  657. {block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  658.  
  659. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  660.  
  661. {block:Audio}{AudioEmbed}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  662.  
  663. {block:Answer}
  664. <div class="asker">{Asker} asked</div>
  665. <div class="question">{Question}</div>
  666. {Answer}
  667. {/block:Answer}
  668.  
  669.  
  670.  
  671. {block:Date}
  672. <div class="permalinks">
  673.  
  674. <a href="{permalink}" title="{ShortMonth} {DayofMonth} {Year} - {12Hour}:{Seconds} {CapitalAmPm}"><i class="fas fa-clock"></i></a>
  675.  
  676. {block:NoteCount}<a href="{permalink}" title="{NoteCount} notes"><i class="fas fa-check-circle"></i></a>{/block:NoteCount}
  677.  
  678. {block:RebloggedFrom}<a href="{ReblogParentURL}" title="via {ReblogParentName}"><i class="fas fa-user-circle"></i></a>{/block:RebloggedFrom}
  679.  
  680. {block:RebloggedFrom}<a href="{ReblogRootURL}" title="from {ReblogRootName}"><i class="fas fa-info-circle"></i></a>{/block:RebloggedFrom}
  681.  
  682. <a href="{ReblogURL}" title="reblog"><i class="fas fa-sync-alt"></i></a>
  683.  
  684. </div>
  685. {/block:Date}
  686.  
  687. {block:HasTags}
  688. <div class="tags">
  689. {block:Tags}<a href="{TagUrl}">#{Tag}</a> {/block:Tags}
  690. </div>
  691. {/block:HasTags}
  692.  
  693. {block:Permalink}
  694. {block:PostNotes}
  695. <div id="notecontainer">{PostNotes}</div>
  696. {/block:PostNotes}
  697. {/block:Permalink}
  698.  
  699. </div>
  700. {/block:Posts}
  701.  
  702.  
  703. </div>
  704.  
  705. <!-- DO NOT TOUCH -->
  706. <div id="credit">
  707. <a href="http://rpschtuff.tumblr.com">theme by<br><i>rpschtuff</i></a>
  708. </div>
  709. <!-- DO NOT TOUCH -->
  710.  
  711. </body>
  712. </html>
Advertisement
Add Comment
Please, Sign In to add comment