Advertisement
Guest User

Citrus theme

a guest
Aug 28th, 2016
2,057
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.74 KB | None | 0 0
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <!--
  5.  
  6. citrus theme by howlcastles
  7.  
  8. if you have any questions about the theme, please don't hesitate to contact me at howlcastles.tumblr.com/ask!
  9.  
  10. Rules:
  11. 1.do not remove theme credit
  12. 2.do not use as base code
  13. 3.don’t repost/claim as your own
  14. 4.light editing of code is allowed, just dont remove credit
  15. 5.if you use parts of this theme in your own code, please credit me!
  16.  
  17. -->
  18. <title>{TITLE}</title>
  19. <link rel="shortcut icon" href="{Favicon}" />
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  21. <!--images-->
  22. <meta name="image:Avatar" content="" />
  23. <meta name="image:Background" content="" />
  24. <meta name="image:SidebarPixel" content="" />
  25. <meta name="image:LeftImage" content="" />
  26. <meta name="image:RightImage" content="" />
  27. <meta name="image:Cursor" content="" />
  28. <meta name="image:CursorHover" content="" />
  29. <!--colors-->
  30. <meta name="color:Background" content="#FFFFFF"/>
  31. <meta name="color:FontColor" content="#000000" />
  32. <meta name="color:SidebarBG" content="#ffffff" />
  33. <meta name="color:SidelinksBG" content="#FFFFFF" />
  34. <meta name="color:ContentBG" content="#FFFFFF" />
  35. <meta name="color:InfoBG" content="#ffff99" />
  36. <meta name="color:ScrollbarSlider" content="#000000" />
  37. <meta name="color:Scrollbar" content="#ffffff" />
  38. <meta name="color:UpdatesTitleTextColor" content="#000000" />
  39. <meta name="color:UpdatesBoxTextColor" content="#000000" />
  40. <meta name="color:UpdatesBG" content="ffffff" />
  41. <meta name="color:Links" content="#ff9966" />
  42. <meta name="color:LinkHover" content="#ffcc66" />
  43. <meta name="color:BlockquoteColor" content="#ffcc66" />
  44. <meta name="color:BorderColor" content="#000000" />
  45. <!--if-->
  46. <meta name="if:ShowBlogTitle" content="1" />
  47. <meta name="if:BGCover" content="0"/>
  48. <meta name="if:LinkUnderline" content="1" />
  49. <meta name="if:RoundedBorder" content="1" />
  50. <meta name="if:RoundedImages" content="1" />
  51. <meta name="if:BoxShadow" content="1" />
  52. <meta name="if:ShowTags" content="1" />
  53. <meta name="if:Dropdown" content="1" />
  54. <meta name="if:Link2" content="1" />
  55. <meta name="if:Link3" content="1" />
  56. <!--select-->
  57. <meta name="select:font" content="ms gothic" title="ms gothic"/>
  58. <meta name="select:font" content="consolas" title="consolas"/>
  59. <meta name="select:font" content="Courier New" title="courier new" />
  60. <meta name="select:BorderStyle" content="solid" title="solid" />
  61. <meta name="select:BorderStyle" content="dotted" title="dotted" />
  62. <meta name="select:BorderStyle" content="dashed" title="dashed" />
  63. <meta name="select:BorderStyle" content="none" title="none" />
  64. <!--text-->
  65. <meta name="text:FontSize" content="15" />
  66. <meta name="text:BackPaginationText" content="←" />
  67. <meta name="text:ForwardPaginationText" content="β†’" />
  68. <meta name="text:NoteSymbol" content="β™‘" />
  69. <meta name="text:UpdatesBoxTitle" content="updates" />
  70. <meta name="text:UpdatesBox" content="<p>here are your updates!</p><p>
  71. you can type whatever you want in here and it will show up in your updates box!</p><p>make sure to type < br > after a paragraph to put your text on a new line!</p>" />
  72. <meta name="text:DropdownTitle" content="navigation" />
  73. <meta name="text:Link1URL" content="" />
  74. <meta name="text:Link1Title" content="" />
  75. <meta name="text:Link2URL" content="" />
  76. <meta name="text:Link2Title" content="" />
  77. <meta name="text:Link3URL" content="" />
  78. <meta name="text:Link3Title" content="" />
  79. <style>
  80. *{
  81. margin: 0;
  82. padding: 0;
  83. }
  84. body{
  85. background:{color:Background} url('{image:background}') fixed {block:ifnotBGCover}repeat{/block:ifnotBGCover};
  86. {block:ifBGCover}background-size:cover;{/block:ifBGCover}
  87. color: {color:FontColor};
  88. font-family: '{select:font}';
  89. font-size: {text:FontSize}px;
  90. word-wrap:break-word;
  91. margin:0px;
  92. cursor: url('{image:Cursor}'), auto;
  93.  
  94. }
  95. p {
  96. margin: 10px 0;
  97. word-spacing: -1px;
  98. }
  99. p.icon{
  100. margin: 0px;
  101. }
  102. a{
  103. color: {color:Links};
  104. {block:ifLinkUnderline}
  105. text-decoration: underline;
  106. {/block:ifLinkUnderline}
  107. {block:ifnotLinkUnderline}
  108. text-decoration: none;
  109. {/block:ifnotLinkUnderline}
  110. }
  111. a:hover{
  112. color: {color:LinkHover};
  113. transition: 0.5s;
  114. -moz-transition: 0.5s;
  115. -webkit-transition: 0.5s;
  116. -o-transition: 0.5s;
  117. cursor: url('{image:CursorHover}'), auto;
  118. }
  119. {block:ifRoundedImages}
  120. img{
  121. border-radius:5px;
  122. }
  123. {/block:ifRoundedImages}
  124. ul{
  125. padding-top: 8px;
  126. padding-left:30px;
  127. }
  128. ol{
  129. padding-top: 8px;
  130. padding-left:30px;
  131. }
  132. ul.tags{
  133. list-style-type: none;
  134. padding:0;
  135. margin:0;
  136. }
  137. li.text{
  138. list-style-type: none;
  139. padding:0;
  140. margin:0;
  141. }
  142. li.photo{
  143. list-style-type: none;
  144. padding:0;
  145. margin:0;
  146. }
  147. li.panorama{
  148. list-style-type: none;
  149. padding:0;
  150. margin:0;
  151. }
  152. li.photoset{
  153. list-style-type: none;
  154. padding:0;
  155. margin:0;
  156. }
  157. li.quote{
  158. list-style-type: none;
  159. padding:0;
  160. margin:0;
  161. }
  162. li.audio{
  163. list-style-type: none;
  164. padding:0;
  165. margin:0;
  166. }
  167. li.video{
  168. list-style-type: none;
  169. padding:0;
  170. margin:0;
  171. }
  172. li.chat{
  173. list-style-type: none;
  174. padding:0;
  175. margin:0;
  176. }
  177. li.link{
  178. list-style-type: none;
  179. padding:0;
  180. margin:0;
  181. }
  182. blockquote {
  183. border-left: 3px solid;
  184. margin-left: 3%;
  185. padding-left: 10px;
  186. padding-top: 2px;
  187. padding-bottom: 2px;
  188. }
  189. ::-webkit-scrollbar-thumb:vertical {
  190. background-color: {color:ScrollbarSlider};
  191. height: 50px;
  192. }
  193. ::-webkit-scrollbar {
  194. height: 0px;
  195. width: 10px;
  196. background-color: {color:Scrollbar};
  197. }
  198. #updatesbox {
  199. height:30px;
  200. width:70px;
  201. {block:ifRoundedBorder}
  202. border-radius: 20px;
  203. {/block:ifRoundedBorder}
  204. border-style: {select:BorderStyle};
  205. border-width: 1px;
  206. border-color:{color:BorderColor};
  207. padding:0px 5px 5px 5px;
  208. z-index:0;
  209. overflow:hidden;
  210. text-align:center;
  211. font-weight: bold;
  212. top:25px;
  213. left:35px;
  214. color:{color:UpdatesTitleTextColor};
  215. position:fixed;
  216. background:{color:UpdatesBG};
  217. -moz-transition-duration:0.8s;
  218. -webkit-transition-duration:0.8s;
  219. -o-transition-duration:0.8s;
  220. }
  221.  
  222. #updatesbox:hover {
  223. min-height:60px;
  224. height: auto;
  225. width:100px;
  226. -moz-transition-duration:1s;
  227. -webkit-transition-duration:1s;
  228. -o-transition-duration:1s;
  229. }
  230. #updates {
  231. width:100px;
  232. line-height:10px;
  233. font-size:12px;
  234. font-family:{select:font};
  235. font-weight: normal;
  236. color: {color:UpdatesBoxTextColor};
  237. -moz-transition-duration:1s;
  238. -webkit-transition-duration:1s;
  239. -o-transition-duration:1s;
  240. }
  241. #wrap{
  242. position: relative;
  243. margin: 50px auto;
  244. width: 400px;
  245. left: 1%;
  246. }
  247. #content{
  248. width: 400px;
  249. padding: 10px;
  250. background:{color:ContentBG};
  251. {block:ifBoxShadow}
  252. box-shadow:6px 6px 0 rgba(0,0,0,0.2);
  253. {/block:ifBoxShadow}
  254. margin: 15px;
  255. border-style: {select:BorderStyle};
  256. border-width: 1px;
  257. {block:ifRoundedBorder}
  258. border-radius: 10px;
  259. {/block:ifRoundedBorder}
  260. border-color: {color:BorderColor};
  261.  
  262. }
  263. .info{
  264. background:{color:InfoBG};
  265. padding:5px;
  266. {block:ifRoundedBorder}
  267. border-radius:6px;
  268. {/block:ifRoundedBorder}
  269. border:{select:BorderStyle} {color:BorderColor};
  270. border-width: 1px;
  271. text-align:left;
  272. }
  273. #rightimage{
  274. position: fixed;
  275. bottom: 0px;
  276. right: 0px;
  277. }
  278. #leftimage{
  279. position: fixed;
  280. bottom: 0px;
  281. left: 0px;
  282. }
  283. #sidebar{
  284. position:fixed;
  285. width:160px;
  286. padding:10px;
  287. margin-top:0px;
  288. margin-left:-90px;
  289. background: {color:SidebarBG};
  290. left: 27%;
  291. top: 100px;
  292. min-height: 200px;
  293. height: auto;
  294. border-style: {select:BorderStyle};
  295. border-width: 1px;
  296. {block:ifRoundedBorder}
  297. border-radius: 10px;
  298. {/block:ifRoundedBorder}
  299. border-color: {color:BorderColor};
  300. {block:ifBoxShadow}
  301. box-shadow:6px 6px 0 rgba(0,0,0,0.2);
  302. {/block:ifBoxShadow}
  303. }
  304. #sidebar .wrap{
  305. padding: 3px 7px;
  306. width: auto;
  307. height: auto;
  308. text-align: center;
  309. font-size: {text:FontSize}px;
  310.  
  311. }
  312. #sidebar.wrap h2{
  313. text-align: center;
  314. font-size: 22px;
  315. font-weight: bold;
  316. }
  317. #pagination {
  318. padding-top: 5px;
  319. padding-bottom:5px;
  320. text-align:center;
  321. font-weight:bold;
  322. }
  323.  
  324. #pagination a {
  325. padding:0 15px;
  326. }
  327.  
  328. .ask{
  329. position: fixed;
  330. width: 35px;
  331. height: 35px;
  332. top: 120px;
  333. padding: 1px;
  334. margin-left:-63px;
  335. background: {color:SideLinksBG};
  336. {block:ifBoxShadow}
  337. box-shadow:5px 5px 0 rgba(0,0,0,0.2);
  338. {/block:ifBoxShadow}
  339. border-style: {select:BorderStyle};
  340. border-width: 1px;
  341. {block:ifRoundedBorder}
  342. border-radius: 10px;
  343. {/block:ifRoundedBorder}
  344. border-color: {color:BorderColor};
  345. font-size: 23px;
  346.  
  347. }
  348. .submit{
  349. position: fixed;
  350. width: 35px;
  351. height: 35px;
  352. top: 165px;
  353. padding: 1px;
  354. margin-left:-1px;
  355. background: {color:SideLinksBG};
  356. {block:ifBoxShadow}
  357. box-shadow:5px 5px 0 rgba(0,0,0,0.2);
  358. {/block:ifBoxShadow}
  359. border-style: {select:BorderStyle};
  360. border-width: 1px;
  361. {block:ifRoundedBorder}
  362. border-radius: 10px;
  363. {/block:ifRoundedBorder}
  364. border-color: {color:BorderColor};
  365. font-size: 23px;
  366.  
  367. }
  368. .archive{
  369. position: fixed;
  370. width: 35px;
  371. height: 35px;
  372. top: 210px;
  373. padding: 1px;
  374. margin-left:1px;
  375. background: {color:SideLinksBG};
  376. {block:ifBoxShadow}
  377. box-shadow:5px 5px 0 rgba(0,0,0,0.2);
  378. {/block:ifBoxShadow}
  379. border-style: {select:BorderStyle};
  380. border-width: 1px;
  381. margin-left: -2px;
  382. {block:ifRoundedBorder}
  383. border-radius: 10px;
  384. {/block:ifRoundedBorder}
  385. border-color: {color:BorderColor};
  386. font-size: 23px;
  387.  
  388. }
  389. .theme{
  390. position: fixed;
  391. width: 35px;
  392. height: 35px;
  393. top: 255px;
  394. padding: 1px;
  395. margin-left:0px;
  396. background: {color:SideLinksBG};
  397. {block:ifBoxShadow}
  398. box-shadow:5px 5px 0 rgba(0,0,0,0.2);
  399. {/block:ifBoxShadow}
  400. border-style: {select:BorderStyle};
  401. border-width: 1px;
  402. margin-left: -2px;
  403. {block:ifRoundedBorder}
  404. border-radius: 10px;
  405. {/block:ifRoundedBorder}
  406. border-color: {color:BorderColor};
  407. font-size: 23px;
  408.  
  409. }
  410. .pagi{
  411. position: fixed;
  412. bottom: 5px;
  413.  
  414. }
  415. .sidebarpixel{
  416. position: fixed;
  417. top: 80px;
  418. }
  419. iframe, img, embed, object, video {
  420. max-width: 100%;
  421. }
  422. </style>
  423.  
  424. </head>
  425. <body>
  426. <div id="updatesbox">
  427. <p><center>{text:UpdatesBoxTitle}</center></p>
  428. <div id="updates">
  429. <p><center>{text:UpdatesBox}</center></p>
  430. </div>
  431. </div>
  432. <div id="rightimage">
  433. <img src="{image:RightImage}">
  434. </div>
  435. <div id="leftimage">
  436. <img src="{image:LeftImage}">
  437. </div>
  438. <div id="sidebar">
  439. <div class="wrap">
  440. <center><a href"{BlogURL}"><img src="{image:avatar}" width="150px" alt="Avatar"></a></center>
  441. {block:ifShowBlogTitle}
  442. <h2>{TITLE}</h2>
  443. {/block:ifShowBlogTitle}
  444. <p>{Description}</p>
  445. {block:ifDropdown}
  446. <select style="width: 100px auto; border: 1px solid;{block:ifRoundedBorder}border-radius: 5px;{/block:ifRoundedBorder} padding: 2px; color: {color:FontColor}; background-color: #fff; font-family: {select:font}; letter-spacing: 1px;" onChange="location.href=this.options[this.selectedIndex].value;">
  447. <option value="/">{text:DropdownTitle}</option>
  448. <option value="{text:Link1URL}">{text:Link1Title}</option>
  449. {block:ifLink2}
  450. <option value="{text:Link2URL}">{text:Link2Title}</option>
  451. {/block:ifLink2}
  452. {block:ifLink3}
  453. <option value="{text:Link3URL}">{text:Link3Title}</option>
  454. {/block:ifLink3}
  455. </select>
  456. {/block:ifDropdown}
  457. <div id="pagination">
  458. {block:Pagination}
  459. {block:PreviousPage}
  460. <a href="{PreviousPage}">{text:BackPaginationText} </a>
  461. {/block:PreviousPage}
  462.  
  463.  
  464. {block:NextPage}
  465. <a href="{NextPage}"> {text:ForwardPaginationText}</a>
  466. {/block:NextPage}
  467. {/block:Pagination}
  468. </div>
  469. <div class="ask">
  470. <p class="icon"><center><a href"/ask" title="{AskLabel}">πŸ–‚</a></center></p>
  471. <div class="submit">
  472. <p class="icon"><center><a href"/submit" title="{SubmitLabel}">πŸ—</a></center></p>
  473. <div class="archive">
  474. <p class="icon"><center><a href"/archive" title="Archive">πŸ”™</a></center></p>
  475. <div class="theme">
  476. <p class="icon"><center><a href"http://howl.skytaxi.jp" title="Theme">πŸ–³</a></center></p>
  477. </div>
  478. </div>
  479. </div>
  480.  
  481. </div>
  482. <div class="sidebarpixel">
  483. <img src="{image:SidebarPixel}">
  484. <div class="pagi">
  485.  
  486. </div>
  487. </div>
  488. </div>
  489. </div>
  490. </div>
  491. <div id="wrap">
  492. {block:Posts}
  493. <div id="content">
  494.  
  495. {block:Text}
  496. <li class="text">
  497. {block:Title}
  498. <h3><a href"{Permalink}">{Title}</a></h3>
  499. {/block:Title}{Body}
  500. </li>
  501. {/block:Text}{block:Photo}
  502. <li class="photo">
  503. <img src="{PhotoURL-400}" alt="{PhotoAlt}"/>
  504.  
  505. {block:Caption}
  506. <div class="caption">{Caption}</div>
  507. {/block:Caption}
  508. </li>
  509. {/block:Photo}{block:Panorama}
  510. <li class="panorama">
  511. {LinkOpenTag}
  512. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  513. {LinkCloseTag}{block:Caption}
  514. <div class="caption">{Caption}</div>
  515. {/block:Caption}
  516. </li>
  517. {/block:Panorama}{block:Photoset}
  518. <li class="photoset">
  519. {Photoset-400}{block:Caption}
  520. <div class="caption">{Caption}</div>
  521. {/block:Caption}
  522. </li>
  523. {/block:Photoset}{block:Quote}
  524. <li class="quote">
  525. "{Quote}"
  526.  
  527. {block:Source}
  528. <div class="source">{Source}</div>
  529. {/block:Source}
  530. </li>
  531. {/block:Quote}{block:Link}
  532. <li class="link">
  533. <a href"{URL}" class="link" {Target}>{Name}</a>
  534.  
  535. {block:Description}
  536. <div class="description">{Description}</div>
  537. {/block:Description}
  538. </li>
  539. {/block:Link}{block:Chat}
  540. <li class="chat">
  541. {block:Title}
  542. <h3><a href"{Permalink}">{Title}</a></h3>
  543. {/block:Title}
  544.  
  545. <ul class="chat">
  546. {block:Lines}
  547. <li class="{Alt} user_{UserNumber}">
  548. {block:Label}
  549. <span class="label">{Label}</span>
  550. {/block:Label}{Line}
  551. </li>
  552. {/block:Lines}
  553. </ul>
  554. </li>
  555. {/block:Chat}{block:Video}
  556. <li class="video">
  557. {Video-400}{block:Caption}
  558. <div class="caption">{Caption}</div>
  559. {/block:Caption}
  560. </li>
  561. {/block:Video}{block:Audio}
  562. <li class="audio">
  563. {AudioEmbed-400}{block:Caption}
  564. <div class="caption">{Caption}</div>
  565. {/block:Caption}
  566. </li>
  567. {/block:Audio}
  568. <p></p>
  569. {block:Date}
  570. <div class="info">
  571. {block:IndexPage}
  572. πŸ•’ {TimeAgo} (<a href"{Permalink}" title="{NoteCountWithLabel}">{NoteCount}{text:NoteSymbol}</a>){block:RebloggedFrom} - <a href"{ReblogParentURL}" title="{ReblogParentName}">via</a> ; <a href"{ReblogRootURL}" title="{ReblogRootName}">src</a>{/block:RebloggedFrom}
  573. {/block:IndexPage}
  574. {block:PermalinkPage}
  575. {12Hour}:{Minutes} - {MonthNumber}/{DayOfMonth}/{Year} (<a href"{Permalink}" title="{NoteCountWithLabel}">{NoteCount}{text:NoteSymbol}</a>)
  576. {block:RebloggedFrom}<br><a href"{ReblogParentURL}" title="{ReblogParentName}">via</a> + <a href"{ReblogRootURL}" title="{ReblogRootName}">src</a>{/block:RebloggedFrom}
  577. {/block:PermalinkPage}
  578. {block:ifshowtags}
  579. {block:HasTags}
  580. <br>
  581. {block:Tags}
  582. #<a href"{TagURL}">{Tag}</a>&nbsp;
  583. {/block:Tags}
  584. {/block:HasTags}
  585. {/block:ifshowtags}
  586. </div>
  587.  
  588. {block:PostNotes}
  589. {PostNotes}
  590. {/block:PostNotes}
  591.  
  592. {/block:Date}
  593. {/block:HasTags}
  594. </div>
  595. {/block:Posts}
  596. </div>
  597. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  598. <script type="text/javascript">function blockquote_colors(){
  599. var colors = ["{color:BlockquoteColor}"];
  600. $('body').find('blockquote').each( function (i) {
  601. $(this).css("border-left-color", colors[i % colors.length]);
  602. });
  603. }
  604.  
  605. blockquote_colors();
  606.  
  607. $( document ).ajaxComplete(function() {
  608. blockquote_colors();
  609. });
  610. </script>
  611. </body>
  612. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement