API tools faq
paste
Advertisement
alinarps

THEME 007: "NINA 2.0" // ALINARPS

alinarps
Feb 5th, 2015
647
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.64 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!--
  4.  
  5. THEME 007: "NINA (2.0)" by ALINARPS
  6. - Please don't steal or redistribute, I worked very hard on this.
  7. - You can edit to your own liking, but don't repost any edited versions unless you have talked to me first.
  8. - If you have any questions regarding this page, feel free to ask!
  9. - Have fun with it!
  10.  
  11. -->
  12.  
  13. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  14.  
  15.  
  16. <head>
  17.  
  18. <title>{Title}</title>
  19.  
  20. <link rel="shortcut icon" href="{Favicon}" />
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  22. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  23.  
  24. <meta name="color:Background" content="#ffffff"/>
  25. <meta name="color:Text" content="#000000"/>
  26. <meta name="color:Links" content="#aaaaaa"/>
  27. <meta name="color:Hover" content="#ffffff"/>
  28. <meta name="color:Info Links" content="#000000"/>
  29. <meta name="color:accent" content="#aaaaaa"/>
  30. <meta name="color:PostBG" content="#cccccc"/>
  31. <meta name="color:scrollbar" content="#aaaaaa"/>
  32. <meta name="color:scrollbarBG" content="#cccccc"/>
  33. <meta name="color:LinksBG" content="#ffffff"/>
  34. <meta name="color:SidebarBG" content="#cccccc"/>
  35.  
  36. <meta name="image:Background" content=""/>
  37. <meta name="image:Sidebar" content=""/>
  38. <meta name="image:Icon 1" content=""/>
  39. <meta name="image:Icon 2" content=""/>
  40. <meta name="image:Sidebar 2" content=""/>
  41.  
  42. <meta name="if:Background" content=""/>
  43.  
  44. <meta name="text:Navigation Title" content="click me!"/>
  45. <meta name="text:Link 1" content="one"/>
  46. <meta name="text:Link 1 URL" content="/"/>
  47. <meta name="text:Link 2" content="two"/>
  48. <meta name="text:Link 2 URL" content="/"/>
  49. <meta name="text:Link 3" content="three"/>
  50. <meta name="text:Link 3 URL" content="/"/>
  51. <meta name="text:Link 4" content="four"/>
  52. <meta name="text:Link 4 URL" content="/"/>
  53. <meta name="text:Link 5" content="five"/>
  54. <meta name="text:Link 5 URL" content="/"/>
  55. <meta name="text:Link 6" content="six"/>
  56. <meta name="text:Link 6 URL" content="/"/>
  57.  
  58. <style type="text/css">
  59.  
  60. /*BASICS*/
  61.  
  62. body {
  63. background-color:{color:Background};
  64. padding:1px;
  65. {block:IfBackground}
  66. background-image:url('{image:Background}');
  67. background-attachment:fixed;
  68. background-size:cover;
  69. {/block:IfBackground}
  70. font-family:'arial';
  71. font-size:12px;
  72. text-align:justify;
  73. color:{color:text};
  74. }
  75.  
  76. a {
  77. text-decoration:none;
  78. color:{color:Links};
  79. -webkit-transition: all 0.5s ease-out;
  80. -moz-transition: all 0.5s ease-out;
  81. transition: all 0.5s ease-out;
  82. }
  83.  
  84. a:hover {
  85. text-decoration:none;
  86. color:{color:Hover};
  87. -webkit-transition: all 0.5s ease-out;
  88. -moz-transition: all 0.5s ease-out;
  89. transition: all 0.5s ease-out;
  90. }
  91.  
  92. blockquote {
  93. background-color:{color:accent};
  94. margin-left:40px;
  95. color:{color:text};
  96. border-left:1px solid {color:text};
  97. padding:10px;
  98. }
  99.  
  100. pre {
  101. padding:5px;
  102. width:98%;
  103. white-space:normal;
  104. background-color:{color:text};
  105. color:{color:PostBG};
  106. border-bottom:2px solid {color:accent};
  107. font-family:arial;
  108. text-align:center;
  109. }
  110.  
  111. h1{
  112. background-color:{color:background};
  113. color:{color:text};
  114. padding:5px;
  115. border-bottom:5px solid {color:accent};
  116. font-size:12px;
  117. text-align:center;
  118. text-transform:uppercase;
  119. word-break: break-all;
  120. word-wrap: break-word;
  121. }
  122.  
  123.  
  124. /*POSTS*/
  125.  
  126. .entries {
  127. margin-top:5px;
  128. margin-left:520px;
  129. position:absolute;
  130. }
  131.  
  132. .post{
  133. padding:10px;
  134. background-color:{color:postbg};
  135. margin-top:15px;
  136. margin-bottom:15px;
  137. width:500px;
  138. }
  139.  
  140. ::-webkit-scrollbar-thumb {
  141. height:9px;
  142. background-color:{color:scrollbar};
  143. border:1px solid {color:scrollbar};
  144. }
  145.  
  146. ::-webkit-scrollbar {
  147. margin-right:5px;
  148. width:7px;
  149. height:5px;
  150. background-color:{color:scrollbarbg};
  151. }
  152.  
  153. /*SIDEBAR & PAGINATION*/
  154.  
  155. .sidebar{
  156. background-color:{color:postbg};
  157. width:400px;
  158. height:400px;
  159. border:5px solid {color:accent};
  160. position:fixed;
  161. margin-top:55px;
  162. margin-left:95px;
  163. }
  164.  
  165. .desc{
  166. width:177px;
  167. height:130px;
  168. overflow:auto;
  169. padding:10px;
  170. background-color:{color:text};
  171. color:{color:background};
  172. margin-top:10px;
  173. }
  174.  
  175. .pagination{
  176. background-color:{color:postbg};
  177. padding:5px;
  178. width:400px;
  179. position:fixed;
  180. margin-top:465px;
  181. margin-left:95px;
  182. color:{color:background};
  183. text-align:center;
  184. }
  185.  
  186. .pagination a{
  187. color:{color:text};
  188. padding:2px;
  189. background-color:{color:background};
  190. font-weight:600;
  191. text-decoration:none;
  192. -moz-transition-duration:0.7s;
  193. -webkit-transition-duration:0.7s;
  194. -o-transition-duration:0.7s;
  195. transition: all 0.5s ease-out;
  196. }
  197.  
  198. .pagination a:hover{
  199. color:{color:background};
  200. background-color:{color:text};
  201. text-decoration:none;
  202. -moz-transition-duration:0.7s;
  203. -webkit-transition-duration:0.7s;
  204. -o-transition-duration:0.7s;
  205. transition: all 0.5s ease-out;
  206. }
  207.  
  208. /*SIDEBAR HOVER*/
  209.  
  210. .shover{
  211. background-color:{color:postbg};
  212. border:5px solid {color:accent};
  213. margin-top:55px;
  214. margin-left:95px;
  215. width:380px;
  216. height:380px;
  217. padding:10px;
  218. position:fixed;
  219. z-index:-999;
  220. }
  221.  
  222. .links{
  223. text-align:left;
  224. margin-left:0px;
  225. background-color:{color:Text};
  226. width:177px;
  227. height:100px;
  228. padding:10px;
  229. margin-top:100px;
  230. }
  231.  
  232. .links a{
  233. margin-bottom:5px;
  234. margin-right:2px;
  235. padding:5px;
  236. width:74px;
  237. background-color:{color:LinksBG};
  238. color:{color:links};
  239. display:inline-block;
  240. text-align:center;
  241. font-weight:600;
  242. text-transform:uppercase;
  243. -moz-transition-duration:0.7s;
  244. -webkit-transition-duration:0.7s;
  245. -o-transition-duration:0.7s;
  246. transition: all 0.5s ease-out;
  247. }
  248.  
  249. .links a:hover{
  250. background-color:{color:links};
  251. color:{color:postbg};
  252. -moz-transition-duration:0.7s;
  253. -webkit-transition-duration:0.7s;
  254. -o-transition-duration:0.7s;
  255. transition: all 0.5s ease-out;
  256. }
  257.  
  258. /*NAVIGATION*/
  259.  
  260. .nav{
  261. margin-top:20px;
  262. margin-left:95px;
  263. width:400px;
  264. height:30px;
  265. padding:5px;
  266. text-transform:uppercase;
  267. position:fixed;
  268. text-align:right;
  269. background-color:{color:accent};
  270. color:{color:text};
  271. -moz-transition-duration:0.7s;
  272. -webkit-transition-duration:0.7s;
  273. -o-transition-duration:0.7s;
  274. transition: all 0.5s ease-out;
  275. }
  276.  
  277. .nav b{
  278. color:{color:background};
  279. background-color:{color:text};
  280. padding:5px;
  281. margin-top:2px;
  282. display:inline-block;
  283. text-align:right;
  284. -moz-transition-duration:0.7s;
  285. -webkit-transition-duration:0.7s;
  286. -o-transition-duration:0.7s;
  287. transition: all 0.5s ease-out;
  288. }
  289.  
  290. .nav a{
  291. color:{color:text};
  292. background-color:{color:background};
  293. padding:5px;
  294. margin-top:2px;
  295. display:inline-block;
  296. text-align:right;
  297. -moz-transition-duration:0.7s;
  298. -webkit-transition-duration:0.7s;
  299. -o-transition-duration:0.7s;
  300. transition: all 0.5s ease-out;
  301. }
  302.  
  303. .nav a:hover{
  304. color:{color:background};
  305. background-color:{color:text};
  306. padding:5px;
  307. margin-top:2px;
  308. display:inline-block;
  309. text-align:right;
  310. -moz-transition-duration:0.7s;
  311. -webkit-transition-duration:0.7s;
  312. -o-transition-duration:0.7s;
  313. transition: all 0.5s ease-out;
  314. }
  315.  
  316. /*POST INFO & TAGS */
  317.  
  318. .pinfo{
  319. padding:5px;
  320. background-color:{color:accent};
  321. color:{color:text};
  322. width:510px;
  323. margin-left:-10px;
  324. margin-top:-10px;
  325. text-align:center;
  326. z-index:-999;
  327. margin-bottom:10px;
  328. text-transform:uppercase;
  329. font-weight:600;
  330. -moz-transition-duration:0.7s;
  331. -webkit-transition-duration:0.7s;
  332. -o-transition-duration:0.7s;
  333. transition: all 0.5s ease-out;
  334. }
  335.  
  336. .pinfo a{
  337. color:{color:postbg};
  338. text-decoration:none;
  339. -moz-transition-duration:0.7s;
  340. -webkit-transition-duration:0.7s;
  341. -o-transition-duration:0.7s;
  342. transition: all 0.5s ease-out;
  343. }
  344.  
  345. .pinfo a:hover{
  346. color:{color:Hover};
  347. text-decoration:none;
  348. -moz-transition-duration:0.7s;
  349. -webkit-transition-duration:0.7s;
  350. -o-transition-duration:0.7s;
  351. transition: all 0.5s ease-out;
  352. }
  353.  
  354. .tags{
  355. padding:5px;
  356. background-color:{color:accent};
  357. color:{color:text};
  358. text-align:center;
  359. opacity:0;
  360. margin-top:-25px;
  361. margin-bottom:-10px;
  362. margin-left:-10px;
  363. width:510px;
  364. z-index:9999999999;
  365. line-height:1.4;
  366. -moz-transition-duration:0.7s;
  367. -webkit-transition-duration:0.7s;
  368. -o-transition-duration:0.7s;
  369. transition: all 0.5s ease-out;
  370. }
  371.  
  372. .tags a{
  373. display:inline-block;
  374. text-decoration:none;
  375. margin-right:5px;
  376. background-color:{color:Info links};
  377. padding:3px;
  378. -moz-transition-duration:1.7s;
  379. -webkit-transition-duration:1.7s;
  380. -o-transition-duration:1.7s;
  381. transition: all 1.5s ease-out;
  382. }
  383.  
  384. .post:hover .tags{
  385. opacity:1;
  386. margin-top:10px;
  387. -moz-transition-duration:0.7s;
  388. -webkit-transition-duration:0.7s;
  389. -o-transition-duration:0.7s;
  390. transition: all 0.5s ease-out;
  391. }
  392.  
  393. /*AUDIO POSTS*/
  394.  
  395. .playbutton {
  396. width: 10px;
  397. height: 20px;
  398. overflow: hidden;
  399. position: relative;
  400. z-index: 1000;
  401. margin: 15px 24px 13px 16px;
  402. -webkit-transition: all 0.5s ease-out;
  403. -moz-transition: all 0.5s ease-out;
  404. transition: all 0.5s ease-out;
  405. }
  406.  
  407. .playbox {
  408. background-color: #000;
  409. position: absolute;
  410. z-index: 1000;
  411. margin-top: 22px;
  412. margin-left: 20px;
  413. opacity:0.3;
  414. -webkit-transition: all 0.5s ease-out;
  415. -moz-transition: all 0.5s ease-out;
  416. transition: all 0.5s ease-out;
  417. }
  418.  
  419. .playbox:hover{
  420. opacity:1;
  421. -webkit-transition: all 0.5s ease-out;
  422. -moz-transition: all 0.5s ease-out;
  423. transition: all 0.5s ease-out;
  424. }
  425.  
  426. /*QUESTION POSTS*/
  427.  
  428. .question{
  429. background-color:{color:text};
  430. color:{color:background};
  431. padding:10px;
  432. }
  433. .asker{
  434. background-color:{color:background};
  435. color:{color:text};
  436. padding:5px;
  437. text-align:right;
  438. }
  439.  
  440. /*CREDIT -- DON'T REMOVE PLEASE OR I'LL KILL YOU THANKS*/
  441.  
  442. #credit{
  443. position:fixed;
  444. right:10px;
  445. bottom:10px;
  446. padding:5px;
  447. background-color:{color:accent};
  448. z-index:9999999999;
  449. -webkit-transition: all 0.5s ease-out;
  450. -moz-transition: all 0.5s ease-out;
  451. transition: all 0.5s ease-out;
  452. }
  453.  
  454. #credit:hover{
  455. background-color:{color:postbg};
  456. z-index:9999999999;
  457. -webkit-transition: all 0.5s ease-out;
  458. -moz-transition: all 0.5s ease-out;
  459. transition: all 0.5s ease-out;
  460. }
  461.  
  462. </style>
  463.  
  464. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  465.  
  466. </head>
  467.  
  468. <body>
  469.  
  470. <div class="nav">
  471.  
  472. <a href="#" style="float:left;font-weight:600;" class="click">{Text:Navigation Title}</a></b>
  473.  
  474. <b>{Title}</b>
  475. <img src="{PortraitURL-24}" style="float:right;margin-left:5px;border:3px solid {color:text};"/>
  476. </div>
  477.  
  478. <div class="sidebar"><img src="{image:Sidebar}"/></div>
  479.  
  480. <div class="shover">
  481.  
  482. <img src="{image:Icon 1}" style="width:80px;height:80px;border:5px solid {color:text};border-radius:100px;position:fixed;"/>
  483.  
  484. <img src="{image:Icon 2}" style="width:80px;height:80px;border:5px solid {color:text};border-radius:100px;position:fixed;margin-left:105px;"/>
  485.  
  486. <div class="links">
  487.  
  488. <div style="background-color:{color:accent};margin-left:-10px;color:{color:background};padding:2px;width:193px;margin-top:-10px;font-weight:600;margin-bottom:10px;">navigation</div>
  489.  
  490. <a href="{text:Link 1 URL}">{text:Link 1}</a>
  491. <a href="{text:Link 2 URL}">{text:Link 2}</a>
  492. <a href="{text:Link 3 URL}">{text:Link 3}</a>
  493. <a href="{text:Link 4 URL}">{text:Link 4}</a>
  494. <a href="{text:Link 5 URL}">{text:Link 5}</a>
  495. <a href="{text:Link 6 URL}">{text:Link 6}</a>
  496. </div>
  497.  
  498. <div class="desc">{Description}</div>
  499.  
  500. <img src="{image:Sidebar 2}" style="float:right;width:173px;height:380px;margin-top:-380px;"/>
  501.  
  502. </div>
  503.  
  504.  
  505.  
  506. <div class="pagination">
  507. &nbsp;
  508. {block:Pagination}
  509. {block:PreviousPage}
  510. <a href="{PreviousPage}">PREVIOUS</a>
  511. {/block:PreviousPage}
  512. &nbsp;&bull; &nbsp;
  513. {block:NextPage}
  514. <a href="{NextPage}">NEXT</a>
  515. {/block:NextPage}
  516. {/block:Pagination}
  517. &nbsp;
  518. </div>
  519. </div>
  520.  
  521.  
  522. <div class="entries">
  523.  
  524. {block:Posts}
  525. <div class="post">
  526.  
  527. <div class="pinfo">
  528. posted <a href="{Permalink}">{TimeAgo}</a> with {NoteCountWithLabel} {block:RebloggedFrom} via <a href="{ReblogParentURL}">{ReblogParentName}</a> from <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  529.  
  530.  
  531. {block:PostNotes}<br />{PostNotes}{/block:PostNotes}
  532. </div>
  533.  
  534. {block:Text}
  535. {block:Title}<h1>{Title}</h1>{/block:Title}
  536. {Body}
  537. {/block:Text}
  538.  
  539. {block:Photo}
  540. {LinkOpenTag}<img src="{PhotoURL-500}" width="500">{LinkCloseTag}
  541. {block:Caption}{Caption}{/block:Caption}
  542. {/block:Photo}
  543.  
  544. {block:Photoset}
  545. {Photoset-500}
  546. {block:Caption}{Caption}{/block:Caption}
  547. {/block:Photoset}
  548.  
  549. {block:Link}
  550. <pre><a href="{URL}" {Target}>{Name}</a></pre>
  551. {block:Description}{Description}{/block:Description}
  552. {/block:Link}
  553.  
  554. {block:Quote}
  555. <pre>"{Quote}"</pre>
  556. {block:Source}<div align="right"> —{Source}</div>{/block:Source}
  557. {/block:Quote}
  558.  
  559. {block:Chat}
  560. {block:Title}<pre>{Title}</pre>{/block:Title}
  561. {block:Lines}
  562. <div style="background-color:{color:background};padding:5px;margin-top:3px;margin-bottom:3px;">
  563. {block:Label}<b>{Label}</b>{/block:Label}
  564. {Line}<br>
  565. </div>
  566. {/block:Lines}
  567. {/block:Chat}
  568.  
  569. {block:Audio}
  570. <div class="playbox"><div class="playbutton">{block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}</div></div>
  571. {block:AlbumArt}
  572. <img src="{AlbumArtURL}" style="float:left;border:10px solid {color:text};width:70px;margin-right:10px;">
  573. {/block:AlbumArt}
  574. <div style="background-color:{color:background};height:70px;padding:10px;">
  575. {block:TrackName}<b>{TrackName}</b>{/block:TrackName}
  576. {block:Artist}<em>by {Artist}</em>{/block:Artist}
  577. <br /><br />
  578. {block:Album}{Album}{/block:Album}
  579. <br /><br />
  580. {block:PlayCount}Played {FormattedPlayCount} times{/block:PlayCount}
  581. </div>
  582. {block:Caption}{Caption}{/block:Caption}
  583. {/block:Audio}
  584.  
  585. {block:Video}
  586. {Video-500}
  587. {block:Caption}{Caption}{/block:Caption}
  588. {/block:Video}
  589.  
  590. {block:Answer}
  591. <div class="question">❝{Question}❞</div>
  592. <div class="asker">inquired {Asker}</div>
  593. {Answer}
  594. {/block:Answer}
  595.  
  596. {block:HasTags}<div class="tags"> {block:Tags} <a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}
  597.  
  598. </div>
  599.  
  600. {/block:Posts}
  601.  
  602.  
  603. </div>
  604.  
  605. <!-----DO NOT TOUCH THIS!!!!---->
  606. <div id="credit"><a href="http://alinarps.tumblr.com/">ALINARPS</a></div>
  607.  
  608. <script>
  609. $( ".click" ).click(function() {
  610. $( ".sidebar" ).fadeToggle( "slow" );
  611. });
  612. </script>
  613.  
  614. </body>
  615.  
  616. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!