API tools faq
paste
jbtthemes

Theme 03: quarante-sept

jbtthemes
Jul 19th, 2016
428
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.89 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 03: quarante-sept --
  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. <!-- this theme was inspired by Rupert Friend's fantastic performance in the movie, Hitman: Agent 47 -->
  17.  
  18. <html>
  19. <head>
  20. <title>{text:browsertitle}</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23. {block:Description}
  24. <meta name="description" content="{MetaDescription}" />
  25. {/block:Description}
  26.  
  27. <!-- default appearance options -->
  28.  
  29. <meta name="color:background" content="#fff">
  30. <meta name="color:title" content="#972e0d">
  31. <meta name="color:title bar" content="#000">
  32. <meta name="color:title shadow" content="#000">
  33. <meta name="color:h1" content="#000">
  34. <meta name="color:h2" content="#000">
  35. <meta name="color:body" content="#000">
  36. <meta name="color:blockquote" content="#000">
  37. <meta name="color:description" content="#000">
  38. <meta name="color:bold" content="#ae4b33" />
  39. <meta name="color:italic" content="#c09992" />
  40. <meta name="color:link" content="#c09992">
  41. <meta name="color:link hover" content="#000">
  42. <meta name="color:sidelink" content="#000">
  43. <meta name="color:sidelink hover" content="#e89e8c">
  44. <meta name="color:permalink" content="#444444" />
  45. <meta name="color:permalink hover" content="#823826" />
  46. <meta name="color:tags" content="#823826" />
  47. <meta name="color:tags hover" content="#000" />
  48. <meta name="color:flagtext color" content="#000" />
  49. <meta name="color:flag1 color" content="#000" />
  50. <meta name="color:flag2 color" content="#000" />
  51. <meta name="color:flag3 color" content="#000" />
  52.  
  53. <meta name="image:portrait" content="" />
  54. <meta name="image:background" content="http://static.tumblr.com/poesisw/7m8oakotp/quarante-septbg-1.jpg" />
  55.  
  56. <meta name="if:archive" content="1">
  57.  
  58. <meta name="text:browsertitle" content=""/>
  59. <meta name="text:titlebar opacity" content=""/>
  60. <meta name="text:sidebarimg opacity" content=".8"/>
  61. <meta name="text:font size" content="11px" />
  62. <meta name="text:sidebar 3" content="write stuff here for the third bar. use the a href attribute for links"/>
  63. <meta name="text:link 1" content="link">
  64. <meta name="text:link 1 url" content="">
  65. <meta name="text:link 2" content="link">
  66. <meta name="text:link 2 url" content="">
  67. <meta name="text:link 3" content="link">
  68. <meta name="text:link 3 url" content="">
  69. <meta name="text:link 4" content="link">
  70. <meta name="text:link 4 url" content="">
  71. <meta name="text:link 5" content="link">
  72. <meta name="text:link 5 url" content="">
  73.  
  74. <!-- scripts -->
  75.  
  76. <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
  77.  
  78. <link href='https://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
  79.  
  80. <link href='https://fonts.googleapis.com/css?family=Old+Standard+TT:400italic' rel='stylesheet' type='text/css'>
  81.  
  82. <link href='https://fonts.googleapis.com/css?family=Norican' rel='stylesheet' type='text/css'>
  83.  
  84. <style type="text/css">
  85.  
  86. /*customize your scrollbar*/
  87.  
  88. ::-webkit-scrollbar {
  89. width: 3px;
  90. height: 1px;
  91. }
  92. ::-webkit-scrollbar-button {
  93. width: 0px;
  94. height: 0px;
  95. }
  96. ::-webkit-scrollbar-thumb {
  97. background: transparent;
  98. border: 0px none transparent;
  99. }
  100. ::-webkit-scrollbar-thumb:hover {
  101. background: #ffffff;
  102. }
  103. ::-webkit-scrollbar-thumb:active {
  104. background: #000;
  105. }
  106. ::-webkit-scrollbar-track {
  107. background: transparent;
  108. border: 0px none #ffffff;
  109. border-radius: 50px;
  110. }
  111. ::-webkit-scrollbar-track:hover {
  112. background: #000;
  113. }
  114. ::-webkit-scrollbar-track:active {
  115. background: #fff;
  116. }
  117. ::-webkit-scrollbar-corner {
  118. background: transparent;
  119. }
  120.  
  121. body {
  122. background-color:{color:background};
  123. font-family: 'Crimson Text', serif;
  124. font-size: {text:font size};
  125. color:{color:body};
  126. background-image:url({image:background});
  127. background-position: top left;
  128. background-repeat:no-repeat;
  129. background-attachment:fixed;
  130. background-size:cover;
  131. }
  132.  
  133. a {
  134. text-decoration:underline;
  135. color:{color:link};
  136. -webkit-transition: all 0.7s ease;
  137. -moz-transition: all 0.7s ease;
  138. -o-transition: all 0.7s ease;
  139. }
  140.  
  141. a:hover {
  142. color:{color:link hover};
  143. letter-spacing:1px;
  144. cursor:help;
  145. }
  146.  
  147. b, strong {
  148. color:{color:bold};
  149. text-transform:uppercase;
  150. font-family: 'Poiret One', cursive;
  151.  
  152. }
  153.  
  154. i, em {
  155. color:{color:italic};
  156. font-family: 'Old Standard TT', serif;
  157. text-transform:lowercase;
  158. }
  159.  
  160. blockquote {
  161. padding:2px 7px;
  162. margin:3px 0 3px 8px;
  163. border-left:1px solid {color:blockquote};
  164. }
  165.  
  166. blockquote img {
  167. max-width:100%;
  168. height:auto;
  169. }
  170.  
  171. img {
  172. max-width: 100%;
  173. }
  174.  
  175. h1 {
  176. font-size:30px;
  177. line-height:30px;
  178. text-transform: lowercase;
  179. padding:10px;
  180. color:{color:h1};
  181. }
  182.  
  183. h2 {
  184. font-size:20px;
  185. letter-spacing:1px;
  186. color:{color:h2};
  187. }
  188.  
  189. /* customization for post container */
  190.  
  191. #container {
  192. position:absolute;
  193. left:220px;
  194. height:500px;
  195. overflow-y:scroll;
  196. width:510px;
  197. top:225px;
  198. padding:10px;
  199. }
  200.  
  201. /* all the post info */
  202.  
  203. .posts {
  204. width:500px;
  205. background-color:transparent;
  206. padding:10px;;
  207. margin-bottom:10px;
  208. }
  209.  
  210. .permalinks {
  211. background-color:transparent;
  212. padding:5px;
  213. padding-left:0px;
  214. height:12px;
  215. }
  216.  
  217. .permalinks a {
  218. text-decoration:none;
  219. font-size: 9px;
  220. color:{color:permalink};
  221. }
  222.  
  223. .permalinks a:hover {
  224. color:{color:permalink hover};
  225. letter-spacing:0px;
  226. }
  227.  
  228. .date {
  229. float:left;
  230. font-size:9px;
  231. }
  232.  
  233. .reblogs {
  234. float:right;
  235. }
  236.  
  237. .tags {
  238. text-align:center;
  239. text-transform:lowercase;
  240. }
  241.  
  242. .tags a {
  243. text-decoration:none;
  244. font-size: 8px;
  245. text-transform:lowercase;
  246. color:{color:tags};
  247. }
  248.  
  249. .tags a:hover {
  250. color:{color:tags hover};
  251. }
  252.  
  253. /* customization for the title */
  254.  
  255. #titlecontainer {
  256. position:fixed;
  257. left:125px;
  258. top:145px;
  259. height:50px;
  260. width:500px;
  261. background:#fff;
  262. }
  263.  
  264. /* customize your sidebar image "portrait" */
  265.  
  266. #titlecontainer img {
  267. opacity:{text:sidebarimg opacity};
  268. -moz-border-radius-topleft: 50%;
  269. -webkit-border-top-left-radius: 50%;
  270. border-top-left-radius: 50%;
  271. -moz-border-radius-topright: 50%;
  272. -webkit-border-top-right-radius: 50%;
  273. border-top-right-radius: 50%;
  274. -MOZ-BORDER-RADIUS-BOTTOMRIGHT: 0;
  275. -WEBKIT-BORDER-BOTTOM-RIGHT-RADIUS: 0;
  276. BORDER-BOTTOM-RIGHT-RADIUS: 0;
  277. -moz-border-radius-bottomleft: 50%;
  278. -webkit-border-bottom-left-radius: 50%;
  279. border-bottom-left-radius: 50%;
  280. max-width:50px;
  281. max-height:50px;
  282. margin-right:10px;
  283. margin-left:5px;
  284. -webkit-transition: all 0.7s ease;
  285. -moz-transition: all 0.7s ease;
  286. -o-transition: all 0.7s ease;
  287. }
  288.  
  289. /* customization for the title continued... */
  290.  
  291. #titlebar {
  292. position:fixed;
  293. opacity:{text:titlebar opacity};
  294. top:200px;
  295. height:30px;
  296. width:100%;
  297. background:{color:title bar};
  298. }
  299.  
  300. #title {
  301. font-family: 'Norican', cursive;
  302. font-size: 60px;
  303. text-align: left;
  304. font-style: italic;
  305. text-transform: lowercase;
  306. color:{color:title};
  307. text-shadow: 0px 5px 10px {color:title shadow};
  308. }
  309.  
  310. #title a {
  311. text-decoration:none;
  312. font-family: 'Norican', cursive;
  313. text-transform: lowercase;
  314. color:{color:title};
  315. -webkit-filter:blur(0px);
  316. filter:blur(0px);
  317. -webkit-transition: all 0.7s ease;
  318. transition: all 0.7s ease;
  319. -moz-transition: all 0.7s ease;
  320. -o-transition: all 0.7s ease;
  321. }
  322.  
  323. #title a:hover {
  324. letter-spacing:0px;
  325. -webkit-filter:blur(2px);
  326. filter:blur(2px);
  327. }
  328.  
  329. /*customize your description*/
  330.  
  331. #description {
  332. font-size:8px;
  333. color:{color:description};
  334. text-align:center;
  335. padding:10px;
  336. font-family: 'Crimson Text', serif;;
  337. }
  338.  
  339. /* customize your sidebar links */
  340.  
  341. #sidelinks {
  342. padding-top: 10px;
  343. padding-bottom: 5px;
  344. margin-left:auto;
  345. margin-right:auto;
  346. text-transform: uppercase;
  347. font-size: 10px;
  348. font-family: 'Crimson Text', serif;
  349. }
  350.  
  351. #sidelinks a {
  352. display:inline-block;
  353. color:{color:sidelink};
  354. padding-left:10px;
  355. -webkit-transition: all 0.7s ease;
  356. -moz-transition: all 0.7s ease;
  357. -o-transition: all 0.7s ease;
  358. }
  359.  
  360. #sidelinks a:hover {
  361. color:{color:sidelink hover};
  362. letter-spacing:1px;
  363. }
  364.  
  365. /* more general stuffs for post and body */
  366.  
  367. #pagination {
  368. position:absolute;
  369. top:680px;
  370. left:750px;
  371. text-align:center;
  372. }
  373.  
  374. #pagination a {
  375. font-size: 20px;
  376. width: 270px;
  377. text-align: center;
  378. top: 10px;
  379. color:{color:sidelink};
  380. text-decoration:none;
  381. }
  382.  
  383. #pagination a:hover {
  384. color:#ffffff;
  385. }
  386.  
  387. .asker {
  388. font-size:15px;
  389. font-style: italic;
  390. text-align:center;
  391. border-bottom:1px solid #eee;
  392. margin-bottom:5px;
  393. padding-bottom:3px;
  394. }
  395.  
  396. .question {
  397. font-style: italic;
  398. color:{color:body};
  399. text-align:center;
  400. }
  401.  
  402. .quote {
  403. font-size:13px;
  404. letter-spacing:1px;
  405. text-align:center;
  406. border-bottom:1px solid #eee;
  407. margin-bottom:5px;
  408. padding-bottom:3px;
  409. }
  410.  
  411. .quotesource {
  412. font-size:10px;
  413. letter-spacing:1px;
  414. text-align:center;
  415. margin-bottom:5px;
  416. }
  417.  
  418. /************** FLAGS UPDATES TAB **************/
  419. /* tutorial by deanlirium|tumblr (clarence.tk) */
  420.  
  421. #flags {
  422. position:absolute;
  423. font-family: 'Crimson Text', serif;
  424. opacity:{text:titlebar opacity};
  425. top:230px;
  426. left:100px; /* distance from the left of the page - adjust as you wish! */
  427. text-align:center;
  428. text-transform:uppercase; /* the text is in all caps - delete this line and it won't be */
  429. color:{color:flagtext color}; /* change text color: use sites like http://www.colorpicker.com/ or the tumblr thing, copy the code it gives you and paste it! remember the #! */
  430. font-size:8px; /* adjust font size */
  431. letter-spacing:1px;
  432. z-index:2147483607;}
  433.  
  434. /* okay real talk - this updates tab is currently to the top left of your page - if you want to move it to right, just change every 'left' into 'right' and 'right' into 'left'! and I mean every. single. one. Such as the left:100px; above will become right:100px; there are also a bunch of 'margin-left's here below, so change them to margin-right. look for left and right stuff and switch.
  435. On the contrary, if you want to move it to the bottom of the page, switch every 'top' with 'bottom' and vice versa. That's really it! c: */
  436.  
  437. #flag1 {
  438. border:solid 2px {color:flag1 color}; /* flag color */
  439. border-bottom:solid 6px #000; /* IMPORTANT! -- to make the flag thicker increase the border and border-right value; it looks better if they both have the same number! */
  440. padding-top:20px;
  441. width:0px;
  442. height:0px; /* increase or decrease to change the lenght of the CLOSED flag */
  443. position:absolute;
  444. -moz-transition:all 0.7s ease-out;
  445. -webkit-transition:all 0.7s ease-out;
  446. -o-transition:all 0.7s ease-out;}
  447.  
  448. #flag1:hover {
  449. height:180px;} /* lenght of the OPEN flag */
  450.  
  451. #upd1 {
  452. position:absolute;
  453. width:110px;
  454. height:200px; /* adjust to fit the text if you write a lot! */
  455. padding:10px;
  456. padding-top:40px; /* adjust this if you've changed the length of the closed flag */
  457. top:-250px; /* IMPORTANT! keep this number equal to the sum of the padding-top, padding and height values!!!! */
  458. margin-left:6px; /* keep this number equal to the 'border' value for the flag */
  459. opacity:0;
  460. overflow:hidden;
  461. -moz-transition:all 0.7s ease-out;
  462. -webkit-transition:all 0.7s ease-out;
  463. -o-transition:all 0.7s ease-out;}
  464.  
  465. #flag1:hover #upd1{
  466. top:0px;
  467. opacity:1;}
  468.  
  469. /* following is the coding for the other flags - same as above! */
  470.  
  471. #flag2 {
  472. border:solid 2px {color:flag2 color};
  473. margin-left:10px;
  474. position:absolute;
  475. border-bottom:solid 6px #000;
  476. padding-top:20px;
  477. width:0px;
  478. height:40px;
  479. -moz-transition:all 0.7s ease-out;
  480. -webkit-transition:all 0.7s ease-out;
  481. -o-transition:all 0.7s ease-out;}
  482.  
  483. #flag2:hover {
  484. height:180px;}
  485.  
  486. #upd2 {
  487. position:absolute;
  488. width:110px;
  489. padding:10px;
  490. padding-top:40px;
  491. height:200px; /* adjust to fit the text if you write a lot! */
  492. top:-250px; /* IMPORTANT! keep this number equal to the sum of the padding-top, padding and height values!!!! */
  493. overflow:hidden;
  494. margin-left:6px;
  495. opacity:0;
  496. -moz-transition:all 0.7s ease-out;
  497. -webkit-transition:all 0.7s ease-out;
  498. -o-transition:all 0.7s ease-out;}
  499.  
  500. #flag2:hover #upd2{
  501. top:0px;
  502. opacity:1;}
  503.  
  504. /*if you want more flags, just copy the part of the code below and change the numbers - then increase the margin-left value for the #flag(number) adding 20px each new flag! copy from here: */
  505.  
  506. #flag3 {
  507. border:solid 2px {color:flag3 color};
  508. position:absolute;
  509. margin-left:20px;
  510. border-bottom:solid 6px #000;
  511. padding-top:20px;
  512. height:20px;
  513. width:0px;
  514. -moz-transition:all 0.7s ease-out;
  515. -webkit-transition:all 0.7s ease-out;
  516. -o-transition:all 0.7s ease-out;}
  517.  
  518. #flag3:hover {
  519. height:180px;}
  520.  
  521. #upd3 {
  522. position:absolute;
  523. width:110px;
  524. padding:10px;
  525. padding-top:40px;
  526. height:200px; /* adjust to fit the text if you write a lot! */
  527. top:-250px; /* IMPORTANT! keep this number equal to the sum of the padding-top, padding and height values!!!! */
  528. overflow:hidden;
  529. margin-left:6px;
  530. opacity:0;
  531. -moz-transition:all 0.7s ease-out;
  532. -webkit-transition:all 0.7s ease-out;
  533. -o-transition:all 0.7s ease-out;}
  534.  
  535. #flag3:hover #upd3{
  536. top:0px;
  537. opacity:1;}
  538.  
  539. /* to here */
  540.  
  541. /* DO NOT REMOVE THIS. It's my credit and I worked very hard on it. */
  542. #mycredit {
  543. z-index:999999999;
  544. bottom:5px;
  545. right:5px;
  546. height:30px;
  547. width:30px;
  548. opacity:.2;
  549. position:fixed;
  550. padding:5px;
  551. -webkit-transition: 0.8s ease-in;
  552. -moz-transition: .8s ease-in;
  553. transition: .8s ease-in;
  554. }
  555.  
  556. #mycredit:hover {
  557. transform:rotate(90deg);
  558. opacity:1;
  559. }
  560.  
  561. {CustomCSS}
  562.  
  563. </style>
  564.  
  565. <!-- DO NOT REMOVE MY CREDIT -->
  566. <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>
  567.  
  568. <body>
  569. <div id="flags">
  570. <div id="flag1"><div id="upd1">
  571. <div id="description">{block:Description}{Description}{/block:Description}
  572. </div>
  573.  
  574. </div></div>
  575.  
  576. <div id="flag2"><div id="upd2">
  577.  
  578. <div id="sidelinks">
  579. <a href="/ask">ask</a> <br>
  580. <a href="{text:link 1 url}">{text:link 1}</a> <br>
  581. <a href="{text:link 2 url}">{text:link 2}</a> <br>
  582. <a href="{text:link 3 url}">{text:link 3}</a> <br>
  583. <a href="{text:link 4 url}">{text:link 4}</a> <br>
  584. <a href="{text:link 5 url}">{text:link 5}</a> <br>
  585. {block:ifarchive}
  586. <a href="/archive">archive</a> <br>
  587. {/block:ifarchive}
  588. </div>
  589.  
  590. </div></div>
  591.  
  592. <!---- if you want more flags, copy from here ---->
  593.  
  594. <div id="flag3"><div id="upd3">
  595.  
  596. {text:sidebar 3}
  597.  
  598. </div></div>
  599.  
  600. <!---- to here and change the numbers according to your css! ---->
  601.  
  602. </div><div id="titlebar"></div>
  603. <div id="titlecontainer"><img src="{image:portrait}" style='float: left;'><div id="title"><a href="/">{Title}</a></div></div></div>
  604.  
  605. <div id="container">
  606.  
  607. {block:Posts}
  608.  
  609. <div class="posts">
  610.  
  611. {block:Text}{block:Title}<h1 style="text-align:left;padding-left:0px;">{Title}</h1>{/block:Title}{Body}{/block:Text}
  612.  
  613. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  614.  
  615. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  616.  
  617. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  618.  
  619. {block:Quote}<div class="quote">{Quote}</div>{block:Source}<div class="quotesource">{Source}</div>{/block:Source}{/block:Quote}
  620.  
  621. {block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
  622.  
  623. {block:Chat}{block:Title}{Title}</a>{/block:Title}
  624. {block:Lines}<li>{block:Label}{Label}{/block:Label}{Line}</li>{/block:Lines}{/block:Chat}
  625.  
  626. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  627.  
  628. {block:Audio}{AudioEmbed}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  629.  
  630. {block:Answer}
  631. <div class="asker">mission assigned by「{Asker}」</div>
  632. <div class="question">{Question}</div>
  633. {Answer}
  634. {/block:Answer}
  635.  
  636. <div class="permalinks">
  637. <div class="date"><a href="{Permalink}">{24hourwithzero}:{minutes} </a>◆ {DayOfMonthwithzero}.{MonthNumberwithzero}.{Year} {block:NoteCount}◆<a href="{Permalink}"> n{NoteCount}</a>{/block:NoteCount}</div>
  638. <div class="reblogs">{block:RebloggedFrom}
  639. <a href="{ReblogParentURL}">via </a>◆
  640. <a href="{ReblogRootURL}">source </a>◆
  641. {/block:RebloggedFrom} <a href="{ReblogURL}">reblog</a></div>
  642. </div>
  643.  
  644. <div class="tags">{block:HasTags}{block:Tags}<a href="{TagUrl}"> 「{Tag}」</a>{/block:Tags}{/block:HasTags}</div>
  645.  
  646. </div>
  647.  
  648. {/block:Posts}
  649.  
  650. </div>
  651.  
  652. <div id="pagination">
  653. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">↞</a>{/block:PreviousPage}
  654. {block:NextPage}<a href="{NextPage}">↠</a>{/block:NextPage}{/block:Pagination}
  655. </div>
  656.  
  657. {block:ContentSource}
  658. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  659. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  660. {/block:SourceLogo}
  661. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  662. {/block:ContentSource}
  663. </body>
  664.  
  665. </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!