API tools faq
paste
Advertisement
lubbilubb

we got that hover permalink aesthetic

lubbilubb
Jun 4th, 2015
324
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.46 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. theme by 330px
  4. you edit it as much as you like
  5. just dont remove credit, please~
  6. i made this harder than it actually was lmaoooo
  7.  
  8. -->
  9.  
  10. <!DOCTYPE html>
  11. <html>
  12. <head>
  13.  
  14. <title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  15. {block:Description}<meta name="description" content="{MetaDescription}" />
  16. {/block:Description}
  17. <link rel="shortcut icon" href="{image:favicon}" />
  18.  
  19.  
  20. <meta name="color:background" content="#ebdff8" />
  21. <meta name="color:chat 1" content="#ececec" />
  22. <meta name="color:chat 2" content="#a6e6ff" />
  23. <meta name="color:nav bg" content="#ce6f8f" />
  24. <meta name="color:nav border" content="#b15cb6" />
  25. <meta name="color:nav text" content="#ffffff" />
  26. <meta name="color:perma bg" content="#93dab8" />
  27. <meta name="color:perma text" content="#be56b0" />
  28. <meta name="color:text" content="#29253c" />
  29. <meta name="color:links" content="#ffffff" />
  30. <meta name="color:link hover" content="#ffffff" />
  31. <meta name="color:highlight" content="#ffffff" />
  32. <meta name="color:highlight text" content="#f0a9a9" />
  33. <meta name="color:scrollbar background" content="#e2eef0" />
  34. <meta name="color:scrollbar" content="#000000" />
  35. <meta name="color:scrollbar border" content="#ffffff" />
  36.  
  37. <meta name="image:background" content="http://static.tumblr.com/5f2a58ce48536b1166612e488232e93f/apnhngn/qF0ngqz1l/tumblr_static_8frq5yf8u8w0sg880ogcso04s.png" />
  38. <meta name="image:favicon" content="http://static.tumblr.com/791ae8b51d81c845f3eecbd2a8b73d27/apnhngn/LJAngr05t/tumblr_static_6tkfnhspz90cc408swssww0c.gif" />
  39. <meta name="image:sidebar" content="http://static.tumblr.com/8f2d450c1d662cf4216906fa79e98004/apnhngn/c4kngqz1l/tumblr_static_clwkcni8ne0ogwgw4g8gw0c88.png" />
  40. <meta name="image:transparent" content="" />
  41.  
  42. <meta name="select:font" content="arial" title="arial">
  43. <meta name="select:font" content="courier new" title="courier new">
  44. <meta name="select:font" content="verdana" title="verdana">
  45. <meta name="select:font" content="consolas" title="consolas">
  46. <meta name="select:font" content="inconsolata" title="inconsolata">
  47.  
  48. <meta name="if:250px posts" content="0" />
  49. <meta name="if:400px posts" content="1" />
  50. <meta name="if:max bg" content="1" />
  51. <meta name="if:infinite scroll" content="0">
  52. <meta name="if:tiny cursor" content="1">
  53. <meta name="if:hide description" content="0" />
  54. <meta name="if:hide captions" content="0">
  55. <meta name="if:hide tags" content="0">
  56. <meta name="if:black music player" content="1">
  57. <meta name="if:white music player" content="0">
  58.  
  59. <meta name="text:sidebar height" content="250" />
  60. <meta name="text:font size" content="11" />
  61. <meta name="text:note symbol" content=" notes" />
  62. <meta name="text:dropbox title" content="links" />
  63. <meta name="text:link 1 title" content="" />
  64. <meta name="text:link 2 title" content="" />
  65. <meta name="text:link 3 title" content="" />
  66. <meta name="text:url 1" content="" />
  67. <meta name="text:url 2" content="" />
  68. <meta name="text:url 3" content="" />
  69. <meta name="text:transparent horizontal" content="100"/>
  70. <meta name="text:transparent vertical" content="100"/>
  71.  
  72. <style type="text/css">
  73.  
  74. @font-face {
  75. font-family: 'Inconsolata';
  76. font-style: normal;
  77. font-weight: 250;
  78. src: local('Inconsolata'), url(http://themes.googleusercontent.com/static/fonts/inconsolata/v7/BjAYBlHtW3CJxDcjzrnZCIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
  79. }
  80.  
  81. ::-webkit-scrollbar {width: 6px; height: 3px; background: {color:scrollbar background};}
  82. ::-webkit-scrollbar-thumb {background-color:{color:scrollbar} ; border: 1px solid {color:scrollbar border}; }
  83.  
  84. ::selection {
  85. background: {color:highlight};
  86. color: {color:highlight text};
  87. }
  88. ::-moz-selection {
  89. background: {color:highlight};
  90. color: {color:highlight text};
  91. }
  92.  
  93. {block:iftinycursor}body, a {
  94. cursor:url('http://i.imgur.com/2qleX.jpg'), auto
  95. }
  96.  
  97. a:hover {
  98. cursor: url('http://i.imgur.com/IepP2.jpg'), auto;
  99.  
  100. } {/block:iftinycursor}
  101.  
  102. body {
  103. background: {color:Background} url('{image:Background}') top left fixed repeat; {block:ifmaxbg}background-size:cover;{/block:ifmaxbg};
  104. color: {color:text};
  105. font-family: {select:font};
  106. font-size: {text:font size}px;
  107. margin: 0;
  108. }
  109.  
  110. #sidebar {
  111. background-color: opacity 0;
  112. width: 120px;
  113. position: fixed;
  114. top: {text:sidebar height}px;
  115. margin-left:-140px;
  116. z-index:9999;
  117. }
  118.  
  119. #sidebar .img {
  120. width:auto;
  121. }
  122.  
  123. #sidebar .description {
  124. color: {color:text};
  125. font-family: {select:font};
  126. font-size: {text:font size}px;
  127. text-align: center;
  128. margin-top:3px;
  129. {block:ifhidedescription}display: none;{/block:ifhidedescription}
  130. }
  131.  
  132. #content {
  133. width: {block:if250pxposts}250px;{/block:if250pxposts} {block:if400pxposts}400px;{/block:if400pxposts}
  134. padding: 28px 0 40px;
  135. color: black;
  136. margin:0 auto;
  137. }
  138.  
  139. #content #posts {
  140. width: {block:if250pxposts}250px;{/block:if250pxposts} {block:if400pxposts}400px;{/block:if400pxposts}
  141. background:transparent;
  142. margin-left:65px;
  143. margin-bottom: 40px;
  144. padding: 5px;
  145. color: {color:text};
  146. word-wrap: break-word;
  147. }
  148.  
  149. #content a {
  150. color: {color:links};
  151. text-decoration: none;
  152. font-size: {text:font size}px;
  153. }
  154.  
  155. #content a:hover {
  156. background:transparent;
  157. color: {color:link hover};
  158. text-decoration: none
  159. }
  160.  
  161. #content blockquote {
  162. border-left: solid 1px {color:perma bg};
  163. margin: 0;
  164. padding-left: 10px;
  165. }
  166.  
  167. #posts #img {
  168. border: 0;
  169. text-align:center;
  170. max-width:100%;
  171. }
  172.  
  173. #posts #img a {
  174. background:transparent;
  175. }
  176.  
  177. #content #posts .title {
  178. font-size: 18px;
  179. font-weight:bold;
  180. }
  181.  
  182. #content #posts a{
  183. background-color:{color:perma bg};
  184.  
  185. }
  186.  
  187. #content #posts a:hover{
  188. background-color:transparent;
  189. }
  190.  
  191. #content #posts .neji {
  192. font-size:{text:font size}px;
  193. overflow: hidden;
  194. }
  195.  
  196. #content #posts #permalink {
  197. background-color: transparent;
  198. }
  199.  
  200. #content #posts .notes {
  201. text-align: center;
  202. clear: both;
  203. top:2%;
  204. background-color:transparent;
  205. color: {color:perma text};
  206. text-decoration:none;
  207. opacity: 0;
  208. filter:alpha(opacity=0);
  209. -moz-opacity: 0;
  210. -khtml-opacity: 0;
  211. -webkit-transition: all 0.5s ease;
  212. -moz-transition: all 0.5s ease;
  213. -o-transition: all 0.5s ease;
  214. }
  215.  
  216. #content #posts:hover .notes{
  217. background:transparent;
  218. color: {color:link hover};
  219. padding-left:4px;
  220. padding-right:4px;
  221. text-decoration:none;
  222. opacity: 1;
  223. filter:alpha(opacity=100);
  224. -moz-opacity: 1;
  225. -khtml-opacity: 1;
  226. -webkit-transition: all 0.5s ease;
  227. -moz-transition: all 0.5s ease;
  228. -o-transition: all 0.5s ease;
  229. }
  230.  
  231. #content #posts #tags .comma:last-child {
  232. display: none;
  233. }
  234.  
  235. #posts #caption {
  236. {block:ifhidecaptions}{block:IndexPage}
  237. display: none;{/block:IndexPage}{block:ifhidecaptions}
  238. clear: both;
  239. }
  240.  
  241.  
  242. #tags {
  243. {block:ifhidetags}{block:IndexPage}
  244. display: none;{/block:IndexPage}{/block:ifhidetags}
  245. {block:PermalinkPage}display: none;{/block:PermalinkPage}
  246. margin-top: 3px;
  247. text-align:center;
  248. }
  249.  
  250. img {
  251. border: 0;
  252. max-width: 100%;
  253. }
  254.  
  255. .chat ul {
  256. list-style: none;
  257. margin: 0;
  258. padding: 0;
  259. color:black;
  260. }
  261.  
  262. .chat li {
  263. border-radius: 0.2em;
  264. border: 1px solid rgba(0, 0, 0, 0.05);
  265. box-shadow: 1px 1px 1px rgb(255, 255, 255) inset;
  266. margin-bottom: 2%;
  267. padding: 2%;
  268. width: 50%;
  269. }
  270.  
  271. .chat .odd {
  272. background: {color:chat 1};
  273. float:left;
  274. }
  275.  
  276. .chat .even {
  277. background: {color:chat 2};
  278. float:right;
  279. }
  280.  
  281. .zayn {
  282. text-align:right;
  283. }
  284.  
  285. .aa {
  286. {block:if250pxposts}width:250px;{/block:if250pxposts}
  287. {block:if400pxposts}width:400px;{/block:if400pxposts}
  288. }
  289.  
  290. .ap {
  291. background:black;
  292. {block:ifwhitemusicplayer}background:white;{/block:ifwhitemusicplayer}
  293. {block:if250pxposts}width:250px;{/block:if250pxposts}
  294. {block:if400pxposts}width:400px;{/block:if400pxposts}
  295. margin-bottom:3px;
  296. }
  297.  
  298. #sidebar .image a{
  299. background:none;
  300. }
  301.  
  302. .ni {
  303. text-align:right;
  304. clear:both;
  305. }
  306.  
  307. .date {
  308. text-align:right;
  309. clear:both;
  310. }
  311.  
  312. .tagsp {
  313. text-align:right;
  314. clear:both;
  315. }
  316.  
  317. .pagination {
  318. text-align:center;
  319. margin-left:137px;
  320. }
  321.  
  322. .lt {
  323. font-size:18px;
  324. font-style:bold;
  325. background-color:{color:perma bg};
  326. text-align:center;
  327. padding:14px;
  328. }
  329.  
  330. .lt:hover{
  331. background-color:transparent;
  332. }
  333.  
  334. .ld {
  335. padding:14px;
  336. }
  337.  
  338. <style type="text/css">{CustomCSS}</style>
  339.  
  340. {block:ifinfinitescroll}
  341. <script type="text/javascript" src="http://yourjavascript.com/21212225154/esz.js"></script>
  342. {/block:ifinfinitescroll}
  343.  
  344. </head>
  345.  
  346. <div id="content">
  347.  
  348. <body>
  349.  
  350. <div id="sidebar">
  351. <center><div class="image"><a href="/"><img class="image" src="{image:sidebar}" style="max-width:100%;"/></a></div>
  352. <div class="description">
  353. {description}</div>
  354. </center>
  355.  
  356. <center><select onChange="location=this.options[this.selectedIndex].value;" style="font:{text:font size}px {select:font}; color:{color:nav text}; border: 1px solid {color:nav border}; background-color:{color:nav bg}; width: auto; -webkit-appearance: none; margin-top:8px; text-align:center;">
  357. <option value="">{text:dropbox title}</option>
  358. <option value="/">home</option>
  359. <option value="/ask">ask</option>
  360. <option value="/archive">past</option>
  361. {block:iflink1title}<option value="{text:url 1}">{text:link 1 title}</option>{block:iflink1title}
  362. {block:iflink2title}<option value="{text:url 2}">{text:link 2 title}</option>{block:iflink2title}
  363. {block:iflink3title}<option value="{text:url 3}">{text:link 3 title}</option>{block:iflink3title}
  364. <option value="http://330px.tumblr.com">theme</option>
  365. </select></form></center>
  366. </div>
  367.  
  368. <div class="autopagerize_page_element">
  369. {block:Posts}
  370.  
  371. {block:NoRebloggedFrom}
  372. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  373. {/block:NoRebloggedFrom}
  374.  
  375. {block:ContentSource}
  376. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  377. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  378. {/block:SourceLogo}
  379. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  380. {/block:ContentSource}
  381.  
  382. <div id="posts">
  383.  
  384. {block:Photo}<div class="image"><div id="img">
  385. {LinkOpenTag}{block:if250pxposts}<img src="{PhotoURL-250}" />{/block:if250pxposts}{LinkCloseTag}{block:if400pxposts}<img src="{PhotoURL-400}" />{/block:if400pxposts}</div></div>
  386. {/block:Photo}
  387.  
  388. {block:Photoset}
  389. {block:if250pxposts}{Photoset-250}{/block:if250pxposts}{block:if400pxposts}{Photoset-400}{/block:if400pxposts}
  390. {/block:Photoset}
  391.  
  392. {block:Video}
  393. {block:if250pxposts}{Video-250}{/block:if250pxposts}{block:if400pxposts}{Video-400}{/block:if400pxposts}
  394. {/block:Video}
  395.  
  396. {block:audio}
  397.  
  398. {block:AlbumArt}
  399. <div class="aa"><img src="{AlbumArtURL}"></div>
  400. {/block:AlbumArt}
  401.  
  402. {block:audioplayer}<div class="ap">{block:ifblackmusicplayer}{AudioplayerBlack}{/block:ifblackmusicplayer}{block:ifwhitemusicplayer}{AudioplayerWhite}{/block:ifwhitemusicplayer}
  403. </div>
  404.  
  405.  
  406.  
  407. {/block:audioplayer}
  408.  
  409.  
  410. {/block:audio}
  411.  
  412. {block:Text}
  413. {block:Title}<div class="title">{Title}</div>{/block:Title}
  414. <div class="neji">{Body}</div>
  415. {/block:Text}
  416.  
  417. {block:Answer}{Asker} asked: {Question}
  418. {Answer}{/block:Answer}
  419.  
  420. {block:Chat}
  421. {block:Title}<div class="title">{Title}<br /></div>{/block:Title}<br />
  422. <div class="chat">
  423. <ul>
  424. {block:Lines}<li class="{Alt}">{block:Label} {Label} {/block:Label}{Line}</li>{/block:Lines}
  425. </ul>
  426. </div>
  427. {/block:Chat}
  428.  
  429. {block:Quote}
  430. <div class="title"><center>“{Quote}”</center></div>
  431. {block:Source}<div class="zayn"><br>- {Source}</div>{/block:Source}
  432. {/block:Quote}
  433.  
  434. {block:Link}
  435. <a href="{URL}" ><div class="lt">{Name} »</div></a>
  436. {block:description}<div class="ld">{Description}</div>{/block:description}
  437. {/block:Link}
  438.  
  439. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
  440.  
  441.  
  442. {block:indexpage}<div id="permalink"><a href="{Permalink}"><div class="notes">{NoteCount}{text:note symbol}</a></a></div></div>
  443.  
  444. {block:HasTags}<div id="tags">
  445. {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}
  446. </div>
  447. {/block:HasTags}
  448. {/block:indexpage}
  449.  
  450. {block:permalinkpage}<div class="ni">{block:NoteCount}Notes: {NoteCount}{/block:NoteCount}</div>
  451.  
  452. <div class="date">{block:date}Posted: {Month} {DayofMonth} {Year}, {24Hour}:{Minutes}{/block:date}</div>
  453.  
  454. <div class="tagsp">{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}
  455. {/block:HasTags}</div>
  456.  
  457. {block:PostNotes}{PostNotes}{/block:PostNotes}
  458.  
  459. {/block:permalinkpage}
  460.  
  461. </div>
  462. {/block:Posts}
  463.  
  464. {block:ifnotinfinitescroll}
  465.  
  466. {block:Pagination}
  467. <div class="pagination">
  468. {block:PreviousPage}
  469. <a href="{PreviousPage}">Previous</a>
  470. {/block:PreviousPage}
  471.  
  472. {block:JumpPagination length="5"}
  473. {block:CurrentPage}
  474. <span class="current_page">{PageNumber}</span>
  475. {/block:CurrentPage}
  476.  
  477. {block:JumpPage}
  478. <a class="jump_page" href="{URL}">{PageNumber}</a>
  479. {/block:JumpPage}
  480. {/block:JumpPagination}
  481.  
  482. {block:NextPage}
  483. <a href="{NextPage}">Next</a>
  484. {/block:NextPage}
  485. </div>
  486. {/block:Pagination}
  487. </div>{/block:ifnotinfinitescroll}
  488. </div>
  489.  
  490. <div style="position:fixed; z-index:-1; left:{text:transparent horizontal}px; bottom:{text:transparent vertical}px; opacity:1;"><img style="width:100%;" src="{image:transparent}"></div>
  491.  
  492. </body>
  493. </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!