API tools faq
paste
jbtthemes

Theme 04: ianthe

jbtthemes
Jul 24th, 2016
526
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!-- THEME MADE BY BREQ --
  4.  
  5. @rpjustxce.tumblr.com
  6. --------------------------
  7. THEME 04: Ianthe --
  8. --------------------------
  9. TERMS OF USAGE:
  10. - DO NOT REMOVE THE CREDIT
  11. - DO NOT REDISTRIBUTE
  12. - DO NOT CLAIM AS YOUR OWN
  13. - DO NOT USE AS A BASE
  14. -------------------------->
  15.  
  16. <html>
  17. <head>
  18. <title>{text:browser title}</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21. {block:Description}
  22. <meta name="description" content="{MetaDescription}" />
  23. {/block:Description}
  24.  
  25. <!-- default appearance options -->
  26.  
  27. <meta name="color:background" content="#7e7e8b">
  28. <meta name="color:body" content="#dccbe7">
  29. <meta name="color:description" content="#bb9999">
  30. <meta name="color:title" content="#3b0a60">
  31. <meta name="color:bold" content="#572a4e" />
  32. <meta name="color:italic" content="#572a4e" />
  33. <meta name="color:blockquote" content="#dccbe7">
  34. <meta name="color:link" content="#bb9999">
  35. <meta name="color:link hover" content="#000">
  36. <meta name="color:sidelink" content="#3b0a60">
  37. <meta name="color:sidelink hover" content="#fff">
  38. <meta name="color:permalink" content="#d3d4c9" />
  39. <meta name="color:permalink hover" content="#fff" />
  40. <meta name="color:tags" content="#c9cbb4" />
  41. <meta name="color:tags hover" content="#fff" />
  42. <meta name="color:tooltiptext" content="#fff" />
  43. <meta name="color:tooltipbg" content="#7e7e8b"/>
  44.  
  45. <meta name="image:portrait" content="http://images4.fanpop.com/image/photos/23300000/Daenerys-daenerys-targaryen-23352670-100-100.jpg" />
  46. <meta name="image:background" content="" />
  47. <meta name="image:sidebar1bg" content="http://static.tumblr.com/poesisw/UN2oatuap/599317bdd99f36997b520b37bb379d61_copy.jpg" />
  48. <meta name="text:font size" content="11px" />
  49. <meta name="text:browser title" content="you can choose to have a different browser title or copy paste your blog title here" />
  50.  
  51. <meta name="if:archive" content="1">
  52. <meta name="if:hover permalinks" content="1">
  53.  
  54. <meta name="text:link 1" content="link">
  55. <meta name="text:link 1 url" content="">
  56. <meta name="text:link 2" content="link">
  57. <meta name="text:link 2 url" content="">
  58. <meta name="text:link 3" content="link">
  59. <meta name="text:link 3 url" content="">
  60. <meta name="text:link 4" content="link">
  61. <meta name="text:link 4 url" content="">
  62. <meta name="text:link 5" content="link">
  63. <meta name="text:link 5 url" content="">
  64.  
  65. <!--scripts-->
  66.  
  67. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  68.  
  69. <script src="https://static.tumblr.com/fiw4iub/4jdnu5ta4/jquery.style-my-tooltips.js"></script>
  70.  
  71. <script>
  72. (function($){
  73. $(document).ready(function(){
  74. $("a[title]").style_my_tooltips({
  75. tip_follows_cursor:true,
  76. tip_delay_time:90,
  77. tip_fade_speed:600,
  78. attribute:"title"
  79. });
  80. });
  81. })(jQuery);
  82. </script>
  83.  
  84. </head>
  85.  
  86. <style type="text/css">
  87.  
  88. /*customize your scrollbar*/
  89.  
  90. ::-webkit-scrollbar {
  91. width: 0px;
  92. height: 1px;
  93. }
  94. ::-webkit-scrollbar-thumb {
  95. background: transparent;
  96. border: 0px none transparent;
  97. }
  98. ::-webkit-scrollbar-track {
  99. background: transparent;
  100. border: 0px none #ffffff;
  101. border-radius: 50px;
  102. }
  103. ::-webkit-scrollbar-corner {
  104. background: transparent;
  105. }
  106.  
  107. body {
  108. background-color:{color:background};
  109. font-family: trebuchet, ms;
  110. font-size: {text:font size};
  111. color:{color:body};
  112. background-image:url({image:background});
  113. background-position: top left;
  114. background-repeat:no-repeat;
  115. background-attachment:fixed;
  116. background-size:cover;
  117. }
  118.  
  119. a {
  120. text-decoration:none;
  121. color:{color:link};
  122. -webkit-transition: all 0.7s ease;
  123. -moz-transition: all 0.7s ease;
  124. -o-transition: all 0.7s ease;
  125. }
  126.  
  127. a:hover {
  128. color:{color:link hover};
  129. }
  130.  
  131. b, strong {
  132. color:{color:bold};
  133. text-transform:uppercase;
  134. }
  135.  
  136. i, em {
  137. color:{color:italic};
  138. font-family:cursive;
  139. }
  140.  
  141. hr {
  142. color:{color:body};
  143. opacity:.5;
  144. }
  145.  
  146. blockquote {
  147. padding:2px 7px;
  148. margin:3px 0 3px 8px;
  149. border-left:3px solid {color:blockquote};
  150. border-radius:15px;
  151. }
  152.  
  153. blockquote img {
  154. max-width:500px;
  155. height:auto;
  156. }
  157.  
  158. img {
  159. max-width: 500px;
  160. }
  161.  
  162. h1 {
  163. font-family:cursive;
  164. font-size:30px;
  165. line-height:30px;
  166. text-align:right;
  167. text-transform: lowercase;
  168. padding:10px;
  169. }
  170.  
  171. #sidebar1 {
  172. position:fixed;
  173. width:350px;
  174. height:100%;
  175. background-color:transparent;
  176. background-image:url({image:sidebar1bg});
  177. background-size:cover;
  178. background-position:top left;
  179. background-repeat:no-repeat;
  180. }
  181.  
  182. #sidebar1:hover #sidelinks{
  183. opacity:1;
  184. -webkit-transition: all ease 0.8s;
  185. -moz-transition: all ease 0.8s;
  186. transition: all 0.8s ease;
  187. }
  188.  
  189. /* customize your sidebar links */
  190.  
  191. #sidelinks {
  192. position:fixed;
  193. width: 300px;
  194. height: auto;
  195. top:400px;
  196. text-align:center;
  197. margin-right:auto;
  198. margin-left:auto;
  199. opacity:.2;
  200. -webkit-transition: all ease 0.8s;
  201. -moz-transition: all ease 0.8s;
  202. transition: all 0.8s ease;
  203. }
  204.  
  205. #sidelinks ul {
  206. font-size: 12px;
  207. padding-left:120px;
  208. }
  209.  
  210. #sidelinks ul li {
  211. position: relative;
  212. height: 10px;
  213. list-style-type: none;
  214. text-align: center;
  215. width: 100px;
  216. padding: 5px;
  217. padding-bottom:8px;
  218. margin-bottom:5px;
  219. opacity:.8;
  220. background-color: {color:background};
  221. -webkit-transition: all ease 0.8s;
  222. -moz-transition: all ease 0.8s;
  223. transition: all 0.8s ease;
  224. }
  225.  
  226. #sidelinks a {
  227. letter-spacing: 1px;
  228. color:{color:sidelink};
  229. BOX-SHADOW: inset 0 0 0 0 {color:sidelink hover};
  230. -webkit-transition: all ease 0.8s;
  231. -moz-transition: all ease 0.8s;
  232. transition: all 0.8s ease;
  233. }
  234.  
  235. #sidelinks ul a {
  236. color: {color:sidelink};
  237. -webkit-transition: all ease 0.8s;
  238. -moz-transition: all ease 0.8s;
  239. transition: all 0.8s ease;
  240. }
  241.  
  242. #sidelinks ul li:hover {
  243. background:transparent;
  244. box-shadow: inset 110px 0 0 0 {color:sidelink hover};
  245. width: 100px;
  246. -webkit-transition: all ease 0.8s;
  247. -moz-transition: all ease 0.8s;
  248. transition: all 0.8s ease;
  249. }
  250.  
  251. /* customization for post container */
  252.  
  253. #container {
  254. position:fixed;
  255. height:100%;
  256. left:430px;
  257. text-align:justify;
  258. color:{color:body};
  259. overflow-y:scroll;
  260. }
  261.  
  262. /* all the post info */
  263.  
  264. .posts {
  265. width:500px;
  266. margin-top:20px;
  267. padding:10px;
  268. text-align:justify;
  269. font-size:11px;
  270. line-height:90%;
  271. letter-spacing:0px;
  272. color:{color:body};
  273. }
  274.  
  275. .permalinks {
  276. text-transform: lowercase;
  277. background-color:rgba(178,178,189,.5);
  278. padding-top: 10px;
  279. height:20px;
  280. margin-top:5px;
  281. text-transform:uppercase;
  282. text-shadow:0 0 3px #aaa, 0 0 10px {color:permalink};
  283. letter-spacing:1px;
  284. font-size:8px;
  285. color:{color:permalink};
  286. {block:ifhoverpermalinks}
  287. opacity:0;
  288. {/block:ifhoverpermalinks}
  289. -webkit-transition: all ease 0.8s;
  290. -moz-transition: all ease 0.8s;
  291. transition: all 0.8s ease;
  292. }
  293.  
  294. .permalinks a {
  295. padding:10px;
  296. color:{color:permalink};
  297. text-decoration:none;
  298.  
  299. }
  300.  
  301. .permalinks a:hover {
  302. color:{color:permalink hover};
  303. }
  304.  
  305. .date {
  306. float:left;
  307. }
  308.  
  309. .reblogs {
  310. float:right;
  311. }
  312.  
  313. {block:ifhoverpermalinks}
  314. .posts:hover .permalinks {
  315. opacity:.8;
  316. -webkit-transition: all ease 0.8s;
  317. -moz-transition: all ease 0.8s;
  318. transition: all 0.8s ease;
  319. }
  320. {/block:ifhoverpermalinks}
  321.  
  322. {block:PermalinkPage}
  323. .tags {
  324. width:500px;
  325. font-family: trebuchet ms;
  326. text-transform: uppercase;
  327. font-size: 7px;
  328. color:{color:tags};
  329. letter-spacing:1px;
  330. text-align:center;
  331. padding:6px;
  332. -moz-transition-duration:0.5s;
  333. -webkit-transition-duration:0.5s;
  334. -o-transition-duration:0.5s;
  335. }
  336.  
  337. .tags a {
  338. text-decoration:none;
  339. font-size: 8px;
  340. text-transform:lowercase;
  341. color:{color:tags};
  342. }
  343.  
  344. .tags a:hover {
  345. color:{color:tags hover};
  346. }
  347.  
  348. {/block:PermalinkPage}
  349.  
  350. /* sidebar stuff */
  351.  
  352. #sidebar {
  353. color:{color:body};
  354. position:fixed;
  355. top:50px;
  356. left:1050px;
  357. width:100px;
  358. height:auto;
  359. text-align:center;
  360. }
  361.  
  362. .title {
  363. color:{color:title};
  364. position:relative;
  365. font-family:cursive;
  366. text-transform:lowercase;
  367. margin-left:auto;
  368. margin-right:auto;
  369. font-weight:bold;
  370. font-size:30px;
  371. }
  372.  
  373. #description {
  374. height: auto;
  375. width: 100px;
  376. padding: 5px;
  377. margin-top:10px;
  378. margin-bottom:10px;
  379. margin-right:auto;
  380. margin-left: auto;
  381. font-size:8px;
  382. color:{color:description};
  383. letter-spacing:1px;
  384. line-height:100%;
  385. font-family: trebuchet ms;
  386. text-transform: lowercase;
  387. }
  388.  
  389. /* customize your sidebar image "portrait" */
  390.  
  391. #sidebar img {
  392. opacity:0.4;
  393. max-width:60%;
  394. margin-left:auto;
  395. margin-right:auto;
  396. border-radius:50px;
  397. -moz-transition-duration:0.5s;
  398. -webkit-transition-duration:0.5s;
  399. -o-transition-duration:0.5s;
  400. }
  401.  
  402. #sidebar img:hover {
  403. opacity: 1.0;
  404. -moz-transition-duration:0.5s;
  405. -webkit-transition-duration:0.5s;
  406. -o-transition-duration:0.5s
  407. }
  408.  
  409. /* more general stuffs for post and body */
  410.  
  411. #pagination {
  412. margin-right:auto;
  413. margin-left:auto;
  414. }
  415.  
  416. #pagination a {
  417. font-size: 10px;
  418. width: 100px;
  419. text-align: center;
  420. opacity:.5;
  421. top: 10px;
  422. color:{color:sidelink};
  423. font-family:cursive;
  424. }
  425.  
  426. #pagination a:hover {
  427. color:#ffffff;
  428. opacity:1;
  429. }
  430.  
  431. .asker {
  432. font-family: trebuchet ms;
  433. text-transform: uppercase;
  434. font-size:10px;
  435. color:{color:body};
  436. }
  437.  
  438. .question {
  439. font-family: trebuchet ms;
  440. text-transform: uppercase;
  441. font-size:10px;
  442. color:{color:body};
  443. }
  444.  
  445. .ask {
  446. padding-top:15px;
  447. padding-bottom:15px;
  448. width:500px;
  449. text-align:right;
  450. color:{color:body};
  451. font-family: trebuchet ms;
  452. text-transform: uppercase;
  453. font-size:10px;
  454. }
  455.  
  456. .answer {
  457. width:500px;
  458. padding:5px;
  459. font-style: normal;
  460. font-family: trebuchet ms;
  461. font-size:8x;
  462. color:{color:body};
  463. }
  464.  
  465. .quote {
  466. font-size:13px;
  467. letter-spacing:1px;
  468. text-align:center;
  469. border-bottom:1px solid #eee;
  470. margin-bottom:5px;
  471. padding-bottom:3px;
  472. }
  473.  
  474. .quotesource {
  475. font-size:10px;
  476. letter-spacing:1px;
  477. text-align:center;
  478. margin-bottom:5px;
  479. }
  480.  
  481. /*customization for tooltips */
  482. #s-m-t-tooltip {
  483. max-width:300px;
  484. border-radius: 0px; /*if you want rounded corners*/
  485. padding:4px;
  486. padding-right:10px;
  487. padding-left:10px;
  488. margin:15px 15px 5px 0px;/*how far it appears from link*/
  489. color:{color:tooltiptext};
  490. text-shadow:0 0 3px #aaa, 0 0 20px {color:tooltiptext};
  491. font-size:8px;
  492. text-transform:uppercase;
  493. background:{color:tooltipbg};
  494. z-index:99999;/*don't change this*/
  495. }
  496.  
  497. /* DO NOT REMOVE THIS. It's my credit and I worked very hard on it. */
  498. #mycredit {
  499. z-index:999999999;
  500. bottom:5px;
  501. right:5px;
  502. height:30px;
  503. width:30px;
  504. opacity:.2;
  505. position:fixed;
  506. padding:5px;
  507. -webkit-transition: 0.8s ease-in;
  508. -moz-transition: .8s ease-in;
  509. transition: .8s ease-in;
  510. }
  511.  
  512. #mycredit img {
  513. height:30px;
  514. width:30px;
  515. }
  516.  
  517. #mycredit:hover {
  518. transform:rotate(90deg);
  519. opacity:1;
  520. }
  521.  
  522. {CustomCSS}
  523.  
  524. </style>
  525.  
  526. <body>
  527. <!--navigation links-->
  528. <div id="sidebar1">
  529. <div id="sidelinks">
  530. <ul>
  531. <li><a href="/ask">index</a>
  532. <li><a href="/ask">ask</a>
  533. <li><a href="{text:link 1 url}">{text:link 1}</a></li>
  534. <li><a href="{text:link 2 url}">{text:link 2}</a> </li>
  535. <li><a href="{text:link 3 url}">{text:link 3}</a> </li>
  536. <li><a href="{text:link 4 url}">{text:link 4}</a></li>
  537. <li><a href="{text:link 5 url}">{text:link 5}</a></li>
  538. {block:ifarchive}<li><a href="/archive">archive</a>{/block:ifarchive}
  539. </ul>
  540. </div></div>
  541.  
  542. <!--sidebar-->
  543. <div id="sidebar"><a href="/"><img src="{image:portrait}"></a>
  544. <div class="title">{Title}</div>
  545. <div id="description">{block:Description}{Description}{/block:Description}
  546. </div>
  547. <div id="pagination">
  548. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">retreat</a>{/block:PreviousPage}
  549. {block:NextPage}<a href="{NextPage}">forth</a>{/block:NextPage}{/block:Pagination}
  550. </div></div></div>
  551.  
  552. <div id="container">
  553.  
  554. {block:Posts}
  555.  
  556. <div class="posts">
  557.  
  558. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  559.  
  560. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  561.  
  562. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  563.  
  564. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  565.  
  566. {block:Quote}<div class="quote">{Quote}</div>{block:Source}<div class="quotesource">{Source}</div>{/block:Source}{/block:Quote}
  567.  
  568. {block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
  569.  
  570. {block:Chat}{block:Title}{Title}</a>{/block:Title}
  571. {block:Lines}<li>{block:Label}{Label}{/block:Label}{Line}</li>{/block:Lines}{/block:Chat}
  572.  
  573. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  574.  
  575. {block:Audio}{AudioEmbed}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  576.  
  577. {block:Answer}<div class="ask"><span id="asker">{Asker} asked:</span> <p><span id="question">{Question}</span></div><div class="answer">{Answer}</div>{/block:answer}
  578.  
  579. <div class="permalinks">
  580. <div class="date"><a href="{Permalink}" title="Posted {Timeago} {block:NoteCount}with {NoteCount}{/block:NoteCount} notes ">Information.</a></div>
  581. <div class="reblogs"><a href="{ReblogURL}">reblog.</a></div>
  582. </div>
  583.  
  584. {block:PermalinkPage}<div class="tags">{block:HasTags}{block:Tags}<a href="{TagUrl}"> #{Tag}</a>{/block:Tags}{/block:HasTags}</div>{/block:PermalinkPage}
  585.  
  586. </div>
  587.  
  588. {block:Postnotes}<div class="permalinks">{PostNotes}</div>{/block:Postnotes}
  589.  
  590. {/block:Posts}
  591.  
  592. </div>
  593.  
  594. {block:ContentSource}
  595. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  596. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  597. {/block:SourceLogo}
  598. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  599. {/block:ContentSource}
  600.  
  601. <!-- DO NOT REMOVE MY CREDIT -->
  602. <div id="mycredit"><a href="http://rpjustxce.tumblr.com/" title="theme by Justxce Themes"><img src="http://static.tumblr.com/ewpefvd/Uteohiglh/rpj-icon.png"></a></div>
  603. </body>
  604.  
  605. </html>
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!