API tools faq
paste
Advertisement
alinarps

THEME 004: "ELLA" // ALINARPS

alinarps
Jan 6th, 2015
589
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.16 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 004: "ELLA" 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.  
  34. <meta name="image:Background" content=""/>
  35. <meta name="image:Sidebar" content=""/>
  36. <meta name="image:Admin 1" content=""/>
  37. <meta name="image:Admin 2" content=""/>
  38. <meta name="image:Icon" content=""/>
  39. <meta name="image:Banner" content=""/>
  40.  
  41. <meta name="if:Background" content=""/>
  42.  
  43. <meta name="text:Link 1" content="one"/>
  44. <meta name="text:Link 1 URL" content="/"/>
  45. <meta name="text:Link 2" content="two"/>
  46. <meta name="text:Link 2 URL" content="/"/>
  47. <meta name="text:Link 3" content="three"/>
  48. <meta name="text:Link 3 URL" content="/"/>
  49. <meta name="text:Link 4" content="four"/>
  50. <meta name="text:Link 4 URL" content="/"/>
  51.  
  52. <style type="text/css">
  53.  
  54. /*BASICS*/
  55.  
  56. body {
  57. background-color:{color:Background};
  58. {block:IfBackground}
  59. background-image:url('{image:Background}');
  60. background-attachment:fixed;
  61. background-size:cover;
  62. {/block:IfBackground}
  63. font-family:arial;
  64. font-size:12px;
  65. text-align:justify;
  66. color:{color:text};
  67. }
  68.  
  69. a {
  70. text-decoration:none;
  71. color:{color:Links};
  72. -webkit-transition: all 0.5s ease-out;
  73. -moz-transition: all 0.5s ease-out;
  74. transition: all 0.5s ease-out;
  75. }
  76.  
  77. a:hover {
  78. text-decoration:none;
  79. color:{color:Hover};
  80. -webkit-transition: all 0.5s ease-out;
  81. -moz-transition: all 0.5s ease-out;
  82. transition: all 0.5s ease-out;
  83. }
  84.  
  85. blockquote {
  86. background-color:{color:accent};
  87. margin-left:40px;
  88. color:{color:text};
  89. border-left:1px solid {color:text};
  90. padding:10px;
  91. }
  92.  
  93. pre {
  94. padding:5px;
  95. width:98%;
  96. background-color:{color:text};
  97. color:{color:PostBG};
  98. border-bottom:2px solid {color:PostBG};;
  99. font-family:calibri;
  100. text-align:center;
  101. }
  102.  
  103. h1{
  104. background-color:{color:background};
  105. color:{color:text};
  106. padding:5px;
  107. border-bottom:5px solid {color:accent};
  108. font-size:12px;
  109. text-align:center;
  110. text-transform:uppercase;
  111. }
  112.  
  113.  
  114. /*POSTS*/
  115.  
  116. .entries {
  117. margin-top:10px;
  118. margin-left:600px;
  119. position:absolute;
  120. }
  121.  
  122. .post{
  123. padding:10px;
  124. background-color:{color:postbg};
  125. margin-top:15px;
  126. margin-bottom:15px;
  127. width:500px;
  128. }
  129.  
  130. ::-webkit-scrollbar-thumb {
  131. height:9px;
  132. background-color:{color:scrollbar};
  133. border:1px solid {color:scrollbar};
  134. }
  135.  
  136. ::-webkit-scrollbar {
  137. margin-right:5px;
  138. width:7px;
  139. height:5px;
  140. background-color:{color:scrollbarbg};
  141. }
  142.  
  143. /*SIDEBAR & PAGINATION*/
  144.  
  145. .sidebar{
  146. background-color:{color:postbg};
  147. width:300px;
  148. height:450px;
  149. border:5px solid {color:accent};
  150. position:fixed;
  151. margin-top:25px;
  152. margin-left:35px;
  153. }
  154.  
  155. .icon{
  156. margin-left:355px;
  157. margin-top:165px;
  158. background-color:{color:accent};
  159. width:200px;
  160. height:150px;
  161. position:fixed;
  162. z-index:99999;
  163. }
  164.  
  165. .desc{
  166. margin-left:355px;
  167. margin-top:328px;
  168. width:180px;
  169. height:100px;
  170. overflow:auto;
  171. padding:10px;
  172. background-color:{color:text};
  173. color:{color:background};
  174. position:fixed;
  175. }
  176.  
  177. .pagination{
  178. background-color:{color:accent};
  179. padding:5px;
  180. width:190px;
  181. position:fixed;
  182. margin-top:460px;
  183. margin-left:355px;
  184. color:{color:background};
  185. text-align:center;
  186. }
  187.  
  188. /*HOVERS*/
  189.  
  190. .nhover{
  191. background-color:{color:postbg};
  192. opacity:1;
  193. border:5px solid {color:accent};
  194. margin-top:25px;
  195. margin-left:35px;
  196. width:280px;
  197. height:430px;
  198. padding:10px;
  199. position:fixed;
  200. z-index:-999;
  201. }
  202.  
  203. .auhover{
  204. background-color:{color:postbg};
  205. opacity:1;
  206. border:5px solid {color:accent};
  207. margin-top:25px;
  208. margin-left:35px;
  209. width:280px;
  210. height:430px;
  211. padding:10px;
  212. position:fixed;
  213. z-index:-999;
  214. overflow:auto;
  215. }
  216.  
  217. .links{
  218. margin-top:5px;
  219. }
  220.  
  221. .links a{
  222. margin-bottom:5px;
  223. padding:10px;
  224. width:260px;
  225. background-color:{color:background};
  226. color:{color:links};
  227. display:block;
  228. text-align:center;
  229. -moz-transition-duration:0.7s;
  230. -webkit-transition-duration:0.7s;
  231. -o-transition-duration:0.7s;
  232. transition: all 0.5s ease-out;
  233. }
  234.  
  235. .links a:hover{
  236. background-color:{color:links};
  237. color:{color:background};
  238. letter-spacing:5px;
  239. -moz-transition-duration:0.7s;
  240. -webkit-transition-duration:0.7s;
  241. -o-transition-duration:0.7s;
  242. transition: all 0.5s ease-out;
  243. }
  244.  
  245. /*BUTTONS*/
  246.  
  247. .hbutton{
  248. margin-top:25px;
  249. margin-left:355px;
  250. width:180px;
  251. padding:10px;
  252. text-transform:uppercase;
  253. position:fixed;
  254. text-align:center;
  255. background-color:{color:postbg};
  256. color:{color:text};
  257. -moz-transition-duration:0.7s;
  258. -webkit-transition-duration:0.7s;
  259. -o-transition-duration:0.7s;
  260. transition: all 0.5s ease-out;
  261. }
  262.  
  263. .nbutton{
  264. margin-top:72px;
  265. margin-left:355px;
  266. width:180px;
  267. padding:10px;
  268. text-transform:uppercase;
  269. position:fixed;
  270. text-align:center;
  271. background-color:{color:postbg};
  272. color:{color:text};
  273. -moz-transition-duration:0.7s;
  274. -webkit-transition-duration:0.7s;
  275. -o-transition-duration:0.7s;
  276. transition: all 0.5s ease-out;
  277. }
  278.  
  279. .aubutton{
  280. margin-top:120px;
  281. margin-left:355px;
  282. width:180px;
  283. padding:10px;
  284. text-transform:uppercase;
  285. position:fixed;
  286. text-align:center;
  287. background-color:{color:postbg};
  288. color:{color:text};
  289. -moz-transition-duration:0.7s;
  290. -webkit-transition-duration:0.7s;
  291. -o-transition-duration:0.7s;
  292. transition: all 0.5s ease-out;
  293. }
  294.  
  295. /*POST INFO & TAGS */
  296.  
  297. .pinfo{
  298. padding:5px;
  299. background-color:{color:accent};
  300. color:{color:background};
  301. margin-top:5px;
  302. border-top:5px solid {color:background};
  303. border-bottom:5px solid {color:background};
  304. text-align:center;
  305. z-index:-999;
  306. margin-bottom:5px;
  307. -moz-transition-duration:0.7s;
  308. -webkit-transition-duration:0.7s;
  309. -o-transition-duration:0.7s;
  310. transition: all 0.5s ease-out;
  311. }
  312.  
  313. .pinfo a{
  314. color:{color:Info Links};
  315. text-decoration:none;
  316. -moz-transition-duration:0.7s;
  317. -webkit-transition-duration:0.7s;
  318. -o-transition-duration:0.7s;
  319. transition: all 0.5s ease-out;
  320. }
  321.  
  322. .pinfo a:hover{
  323. color:{color:Hover};
  324. text-decoration:none;
  325. -moz-transition-duration:0.7s;
  326. -webkit-transition-duration:0.7s;
  327. -o-transition-duration:0.7s;
  328. transition: all 0.5s ease-out;
  329. }
  330.  
  331. .tags{
  332. padding:0px;
  333. background-color:{color:background};
  334. color:{color:text};
  335. margin-top:5px;
  336. text-align:center;
  337. opacity:0;
  338. margin-top:-10px;
  339. z-index:9999999999;
  340. -moz-transition-duration:0.7s;
  341. -webkit-transition-duration:0.7s;
  342. -o-transition-duration:0.7s;
  343. transition: all 0.5s ease-out;
  344. }
  345.  
  346. .tags a{
  347. display:inline-block;
  348. text-decoration:none;
  349. margin-right:5px;
  350. -moz-transition-duration:0.7s;
  351. -webkit-transition-duration:0.7s;
  352. -o-transition-duration:0.7s;
  353. transition: all 0.5s ease-out;
  354. }
  355.  
  356. .post:hover .tags{
  357. opacity:1;
  358. margin-top:-5px;
  359. padding:5px;
  360. -moz-transition-duration:0.7s;
  361. -webkit-transition-duration:0.7s;
  362. -o-transition-duration:0.7s;
  363. transition: all 0.5s ease-out;
  364. }
  365.  
  366. .post:hover .pinfo{
  367. margin-bottom:0px;
  368. -moz-transition-duration:0.7s;
  369. -webkit-transition-duration:0.7s;
  370. -o-transition-duration:0.7s;
  371. transition: all 0.5s ease-out;
  372. }
  373.  
  374. /*AUDIO POSTS*/
  375.  
  376. .playbutton {
  377. width: 10px;
  378. height: 20px;
  379. overflow: hidden;
  380. position: relative;
  381. z-index: 1000;
  382. margin: 15px 24px 13px 16px;
  383. -webkit-transition: all 0.5s ease-out;
  384. -moz-transition: all 0.5s ease-out;
  385. transition: all 0.5s ease-out;
  386. }
  387.  
  388. .playbox {
  389. background-color: #000;
  390. position: absolute;
  391. z-index: 1000;
  392. margin-top: 22px;
  393. margin-left: 20px;
  394. opacity:0.3;
  395. -webkit-transition: all 0.5s ease-out;
  396. -moz-transition: all 0.5s ease-out;
  397. transition: all 0.5s ease-out;
  398. }
  399.  
  400. .playbox:hover{
  401. opacity:1;
  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. /*QUESTION POSTS*/
  408.  
  409. .question{
  410. background-color:{color:text};
  411. color:{color:background};
  412. padding:10px;
  413. }
  414. .asker{
  415. background-color:{color:background};
  416. color:{color:text};
  417. padding:5px;
  418. text-align:right;
  419. }
  420.  
  421. /*CREDIT -- DON'T REMOVE PLEASE OR I'LL KILL YOU THANKS*/
  422.  
  423. #credit{
  424. position:fixed;
  425. right:10px;
  426. bottom:10px;
  427. padding:5px;
  428. background-color:{color:accent};
  429. z-index:9999999999;
  430. -webkit-transition: all 0.5s ease-out;
  431. -moz-transition: all 0.5s ease-out;
  432. transition: all 0.5s ease-out;
  433. }
  434.  
  435. #credit:hover{
  436. background-color:{color:postbg};
  437. z-index:9999999999;
  438. -webkit-transition: all 0.5s ease-out;
  439. -moz-transition: all 0.5s ease-out;
  440. transition: all 0.5s ease-out;
  441. }
  442.  
  443. </style>
  444.  
  445. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  446. <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  447.  
  448. </head>
  449.  
  450. <body>
  451.  
  452. <div class="sidebar"><img src="{image:Sidebar}"/></div>
  453.  
  454. <!--NAVIGATION--->
  455. <div class="nhover">
  456. <img src="{image:Banner}" style="width:280px;height:230px;"/>
  457. <h1>{Title}</h1>
  458. <div class="links">
  459. <a href="{text:Link 1 URL}">{text:Link 1}</a>
  460. <a href="{text:Link 2 URL}">{text:Link 2}</a>
  461. <a href="{text:Link 3 URL}">{text:Link 3}</a>
  462. <a href="{text:Link 4 URL}">{text:Link 4}</a>
  463. </div>
  464. </div>
  465.  
  466. <!--ADMINS & UPDATES--->
  467. <div class="auhover">
  468. <h1>WHAT'S HAPPENED SO FAR?</h1>
  469. <span style="padding:3px;background-color:{color:text};color:{color:background};line-height:2;">00/00/00</span> look to customize these little update things in the html!
  470. <br/><br/>
  471. <span style="padding:4px;background-color:{color:text};color:{color:background};line-height:2;">00/00/00</span> just search for admins & updates with ctrl+f
  472. <br/><br/>
  473. <span style="padding:4px;background-color:{color:text};color:{color:background};line-height:2;">00/00/00</span> amaze
  474.  
  475. <h1>WHO RUNS THIS?</h1>
  476.  
  477. <img src="{image:Admin 1}" style="width:100px;height:100px;float:left;margin-right:10px;"> hello im lorum and im the ipsum admin who resides in the dolor timezone!! essentially this is a placeholder but dont tell anyone this is our little secret sRSLY do not tell a single soul or im done
  478. <p></p>
  479. <img src="{image:Admin 2}" style="width:100px;height:100px;float:right;margin-left:10px;"> hello im lorum and im the ipsum admin who resides in the dolor timezone!! essentially this is a placeholder but dont tell anyone this is our little secret sRSLY do not tell a single soul or im done
  480.  
  481. </div>
  482.  
  483. <!--BUTTONS--->
  484.  
  485. <div class="hbutton">HOME</div>
  486.  
  487. <div class="nbutton">NAVIGATION</div>
  488.  
  489. <div class="aubutton">ADMINS & UPDATES</div>
  490.  
  491. <!--ICONS, DESCRIPTION, PAGINATION--->
  492.  
  493. <div class="icon"><img src="{image:Icon}"/></div>
  494.  
  495. <div class="desc">{Description}</div>
  496.  
  497. <div class="pagination">
  498. &nbsp;
  499. {block:Pagination}
  500. {block:PreviousPage}
  501. <a href="{PreviousPage}">← GO BACK</a>
  502. {/block:PreviousPage}
  503. {block:NextPage}
  504. &nbsp;//&nbsp;<a href="{NextPage}"> CONTINUE →</a>
  505. {/block:NextPage}
  506. {/block:Pagination}
  507. &nbsp;
  508. </div>
  509. </div>
  510.  
  511. <!--POSTS--->
  512.  
  513. <div class="entries">
  514.  
  515. {block:Posts}
  516. <div class="post">
  517.  
  518. {block:Text}
  519. {block:Title}<pre>{Title}</pre>{/block:Title}
  520. {Body}
  521. {/block:Text}
  522.  
  523. {block:Photo}
  524. {LinkOpenTag}<img src="{PhotoURL-500}" width="500">{LinkCloseTag}
  525. {block:Caption}{Caption}{/block:Caption}
  526. {/block:Photo}
  527.  
  528. {block:Photoset}
  529. {Photoset-500}
  530. {block:Caption}{Caption}{/block:Caption}
  531. {/block:Photoset}
  532.  
  533. {block:Link}
  534. <pre><a href="{URL}" {Target}>{Name}</a></pre>
  535. {block:Description}{Description}{/block:Description}
  536. {/block:Link}
  537.  
  538. {block:Quote}
  539. <pre>"{Quote}"</pre>
  540. {block:Source}<div align="right"> —{Source}</div>{/block:Source}
  541. {/block:Quote}
  542.  
  543. {block:Chat}
  544. {block:Title}<pre>{Title}</pre>{/block:Title}
  545. {block:Lines}
  546. <div style="background-color:{color:background};padding:5px;margin-top:3px;margin-bottom:3px;">
  547. {block:Label}<b>{Label}</b>{/block:Label}
  548. {Line}<br>
  549. </div>
  550. {/block:Lines}
  551. {/block:Chat}
  552.  
  553. {block:Audio}
  554. <div class="playbox"><div class="playbutton">{block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}</div></div>
  555. {block:AlbumArt}
  556. <img src="{AlbumArtURL}" style="float:left;border:10px solid {color:text};width:70px;margin-right:10px;">
  557. {/block:AlbumArt}
  558. <div style="background-color:{color:background};height:70px;padding:10px;">
  559. {block:TrackName}<b>{TrackName}</b>{/block:TrackName}
  560. {block:Artist}<em>by {Artist}</em>{/block:Artist}
  561. <br /><br />
  562. {block:Album}{Album}{/block:Album}
  563. <br /><br />
  564. {block:PlayCount}Played {FormattedPlayCount} times{/block:PlayCount}
  565. </div>
  566. {block:Caption}{Caption}{/block:Caption}
  567. {/block:Audio}
  568.  
  569. {block:Video}
  570. {Video-500}
  571. {block:Caption}{Caption}{/block:Caption}
  572. {/block:Video}
  573.  
  574. {block:Answer}
  575. <div class="question">❝{Question}❞</div>
  576. <div class="asker">inquired {Asker}</div>
  577. {Answer}
  578. {/block:Answer}
  579.  
  580. <div class="pinfo">
  581. posted <a href="{Permalink}">{TimeAgo}</a> with {NoteCountWithLabel} {block:RebloggedFrom} via <a href="{ReblogParentURL}">{ReblogParentName}</a> from <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  582.  
  583.  
  584. {block:PostNotes}<br />{PostNotes}{/block:PostNotes}
  585. </div>
  586.  
  587. <div class="tags"> {block:Tags} <a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>
  588.  
  589. </div>
  590. {/block:Posts}
  591.  
  592. </div>
  593.  
  594. <!-----DO NOT TOUCH THIS!!!!---->
  595. <div id="credit"><a href="http://alinarps.tumblr.com/">ALINARPS</a></div>
  596.  
  597. <script>
  598. $(".hbutton").click(function() {
  599. if($(".sidebar").is(':hidden')){
  600. $( ".sidebar" ).toggle( "slide" );
  601. }
  602. });
  603.  
  604. $( ".nbutton" ).click(function() {
  605.  
  606. if($(".sidebar").is(':visible')){
  607. $( ".sidebar" ).toggle( "slide" );
  608. }
  609.  
  610. if($(".auhover").is(':visible')){
  611. $( ".auhover" ).toggle( "slide" );
  612. }
  613.  
  614. if($(".nhover").is(':hidden')){
  615. $( ".nhover" ).toggle( "slide" );
  616. }
  617. });
  618.  
  619. $( ".aubutton" ).click(function() {
  620. if($(".nhover").is(':visible')){
  621. $( ".nhover" ).toggle( "slide" );
  622. }
  623. if($(".auhover").is(':hidden')){
  624. $( ".auhover" ).toggle( "slide" );
  625. }
  626.  
  627. if($(".sidebar").is(':visible')){
  628. $( ".sidebar" ).toggle( "slide" );
  629. }
  630. });
  631. </script>
  632.  
  633. </body>
  634.  
  635. </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!