Advertisement
ValarMorghulis

Theme #10: You're So Dark (400px)

Oct 5th, 2014
215
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.79 KB | None | 0 0
  1.  
  2. <!---theme #10 by hbbits-->
  3.  
  4. <!DOCTYPE html>
  5. <head>
  6.  
  7.  
  8. <title>{Title}</title>
  9.  
  10. <link rel="shortcut icon" href="{favicon}">
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  12. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  13.  
  14. <!--Default Variables-->
  15.  
  16. <meta name="color:Background" content="#ffffff"/>
  17. <meta name="color:Text" content="#aaaaaa"/>
  18. <meta name="color:accent" content=""/>
  19. <meta name="color:Link" content="#000000"/>
  20. <meta name="color:sidebar links" content=""/>
  21.  
  22. <meta name="image:Sidebar Image" content=""/>
  23.  
  24. <meta name="text:Link 1" content="" />
  25. <meta name="text:Link 1 Text" content="" />
  26. <meta name="text:Link 2" content="" />
  27. <meta name="text:Link 2 Text" content="" />
  28. <meta name="text:Link 3" content="" />
  29. <meta name="text:Link 3 Text" content="" />
  30. <meta name="text:Link 4" content="" />
  31. <meta name="text:Link 4 Text" content="" />
  32. <meta name="text:Link 5" content="" />
  33. <meta name="text:Link 5 Text" content="" />
  34. <meta name="text:Link 6" content="" />
  35. <meta name="text:Link 6 Text" content="" />
  36.  
  37.  
  38. <!-- jquery for tooltips-->
  39.  
  40.  
  41. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  42.  
  43. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  44.  
  45. <script>
  46.  
  47. (function($){
  48.  
  49. $(document).ready(function(){
  50.  
  51. $("a[title]").style_my_tooltips({
  52.  
  53. tip_follows_cursor:true,
  54.  
  55. tip_delay_time:30,
  56.  
  57. tip_fade_speed:300,
  58.  
  59. attribute:"title"
  60.  
  61. });
  62.  
  63. });
  64.  
  65. })(jQuery);
  66.  
  67. </script>
  68.  
  69.  
  70.  
  71.  
  72.  
  73.  
  74. <!--CSS customization here. -->
  75.  
  76. <style type="text/css">
  77.  
  78. #s-m-t-tooltip{
  79. position:absolute;
  80. margin-top: 15px;
  81. z-index:9999;
  82. background:{color:background};
  83. border:{color:accent} 1px solid;
  84. padding:5px;
  85. }
  86.  
  87. /*basics*/
  88. blockquote {
  89. padding:0px 0 0px 5px;
  90. border-left:1px solid {color:text};
  91. margin-left:10px;
  92. }
  93.  
  94. body {
  95. background:{color:background};
  96. color:{color:text};
  97. font-family:arial;
  98. font-size:9px;
  99. text-align:justify;
  100. margin:0;
  101. line-height:16px;
  102. }
  103.  
  104.  
  105. a {
  106. color:{color:link};
  107. text-decoration:none;
  108. }
  109.  
  110. a:hover {
  111. font-style:italic;}
  112.  
  113. img{opacity:1;
  114. border:none;
  115. text-decoration:none}
  116.  
  117.  
  118. small {
  119. font-size:9px;
  120. }
  121.  
  122. big {
  123. font-size:9px;}
  124.  
  125.  
  126. #title {
  127. font-size:9px;
  128. line-height:18px;
  129. font-weight:bold;
  130. margin-bottom:10px;
  131. text-transform:uppercase;
  132. text-align:center;}
  133.  
  134.  
  135. /*sidebar*/
  136. #sidebar {text-align:left;
  137. position:fixed;
  138. margin-left:-225px;
  139. margin-top:100px;
  140. width:140px;
  141. }
  142.  
  143. #sidebarim {
  144. }
  145.  
  146. #sidebarim img {
  147. width:125px;
  148. border-radius:50%;
  149. border:solid {color:accent} 2px;
  150. padding:5px;
  151. }
  152.  
  153. #links {
  154. margin-left:14px;
  155. }
  156.  
  157. #links a {
  158. margin-right:5px;
  159. display:inline-block;
  160. margin-bottom:5px;
  161. background:{color:sidebar links};
  162. width:5px;
  163. height:5px;
  164. text-align:center;
  165. padding:4px;
  166. -webkit-transition: all 0.6s ease;
  167. -moz-transition: all 0.6s ease;
  168. -o-transition: all 0.6s ease;
  169. border-radius:100%;
  170. }
  171.  
  172. #links a:hover {
  173. border-radius:0%;
  174. -webkit-transition: all 0.5s ease;
  175. -moz-transition: all 0.5s ease;
  176. -o-transition: all 0.5s ease;
  177. }
  178.  
  179. #description {
  180. text-align:center;
  181. font-size:9px;
  182. }
  183.  
  184.  
  185. /*pagination*/
  186. #pagination {
  187. text-transform:lowercase;
  188. text-align:center;
  189. }
  190. #pagination a {
  191. padding:0 5px;
  192. }
  193.  
  194. /*container*/
  195. #con {
  196. left:50%;
  197. margin-left:-250px;
  198. position:absolute;
  199. }
  200.  
  201.  
  202.  
  203. /*posts*/
  204.  
  205. #entries {
  206. margin-top:75px;
  207. width:400px;
  208. margin-left:130px;
  209. }
  210.  
  211.  
  212.  
  213. #posts {
  214. width:400px;
  215. {block:IndexPage}
  216. margin-bottom:75px;
  217. {/block:IndexPage}
  218. {block:PermalinkPage}
  219. margin-bottom:50px;
  220. {/block:PermalinkPage}
  221. border:2px {color:accent} solid;
  222. padding:6px;
  223. }
  224. #posts img {
  225. max-width:400px;
  226. }
  227.  
  228. #posts img, #posts li, #posts blockquote {max-width: 100%;}
  229. .caption {width:100%;
  230. margin-top:10px;
  231.  
  232. }
  233.  
  234. /*quote*/
  235.  
  236. #titlequote{text-align:left;
  237. font-size:9px;
  238. line-height:18px;
  239. font-weight:bold;
  240. }
  241.  
  242. #source {
  243. text-align:right;
  244. margin-top:15px;
  245. margin-left:15px;}
  246.  
  247. /*audio*/
  248.  
  249. .player {
  250. width:30px;
  251. height:30px;
  252. margin:35px;
  253. overflow:hidden;
  254. position:absolute;
  255. background:white;
  256. -moz-border-radius: 30px;
  257. -webkit-border-radius: 30px;
  258. border-radius: 30px;
  259. }
  260.  
  261. .audioinfo {
  262. margin-bottom:40px;
  263. margin-top:-70px;
  264. margin-left:110px;
  265. }
  266.  
  267. /*asks*/
  268. .q {
  269. margin-bottom:10px;
  270. padding:5px;
  271. background-color:{color:accent};
  272. }
  273. .as {
  274. font-style:italic;
  275. }
  276.  
  277. .a {
  278. margin-top:10px;
  279. }
  280.  
  281.  
  282. /*chat*/
  283. .odd, .even {padding:5px;
  284. }
  285.  
  286. .odd {
  287. background-color:{color:accent};
  288. }
  289.  
  290. .chat ol {
  291. padding:0;
  292. list-style:none;
  293. }
  294. .line {padding:5px;}
  295.  
  296. .label {font-weight:bold;
  297. text-align:center;
  298. }
  299.  
  300. /*permalink and notes*/
  301. #permalink {
  302. margin-top:15px;
  303. font-size:9px;
  304. text-align:right;
  305. background-color:{color:accent};
  306. padding:10px;
  307. }
  308.  
  309. #permalink a {margin-right:10px;
  310. }
  311.  
  312.  
  313. .tags {
  314. word-break:break-all;
  315. font-size:9px;
  316. }
  317.  
  318. .pagenotes {
  319. {block:IndexPage}
  320. display: none!important;
  321. {/block:IndexPage}
  322. width:400px;
  323. text-align:left;
  324.  
  325. }
  326. .pagenotes img {
  327. display:none!important;}
  328. .pagenotes li {
  329. list-style-type:none;
  330. padding:5px 0px;
  331. text-align:left;
  332. margin:0 0 0 -40px;
  333. }
  334.  
  335.  
  336. #leave {
  337. color:{color:link};
  338. padding:2px;
  339. border-radius:100px;
  340. position:fixed;
  341. font-size:9px;
  342. letter-spacing:1px;
  343. right:16px;
  344. bottom:10px;
  345. }
  346.  
  347. #leave a {
  348. padding:3px;
  349. width:4px;
  350. }
  351.  
  352. #leave a:hover {
  353. text-decoration:none;
  354. color:{color:accent};
  355. }
  356.  
  357.  
  358.  
  359. {CustomCSS}
  360.  
  361.  
  362. </style>
  363.  
  364.  
  365.  
  366. </head>
  367.  
  368. <body>
  369.  
  370. <div id="con">
  371.  
  372. <div id="sidebar">
  373. <div id="sidebarim"><a href="/"><img src="{image:Sidebar Image}"></a></div>
  374. <div id="links">
  375. <a href="{text:Link 1}" title="{text:Link 1 Text}"></a>
  376. <a href="{text:Link 2}" title="{text:Link 2 Text}"></a>
  377. <a href="{text:Link 3}" title="{text:Link 3 Text}"></a>
  378. <a href="{text:Link 4}" title="{text:Link 4 Text}"></a>
  379. <a href="{text:Link 5}" title="{text:Link 5 Text}"></a>
  380. <a href="{text:Link 6}" title="{text:Link 6 Text}"></a>
  381. </div>
  382. <div id="description">{Description}</div>
  383.  
  384. <div id="pagination">
  385. {block:Pagination}
  386. {block:PreviousPage}
  387. <a href="{PreviousPage}">◄</a>
  388. {/block:PreviousPage}
  389.  
  390.  
  391. {block:NextPage}
  392. <a href="{NextPage}">►</a>
  393. {/block:NextPage}
  394. {/block:Pagination}
  395. </div>
  396.  
  397. </div>
  398.  
  399.  
  400. <div id="leave"><a href="http://hbbits.tumblr.com">theme</a></div>
  401.  
  402. <div id="entries">
  403.  
  404. {block:Posts}
  405. <div id="posts">
  406.  
  407.  
  408. {block:Quote}
  409.  
  410.  
  411. <div id="titlequote">“{Quote}”</div>
  412. {block:Source}<div id="source">&mdash; {Source}</div>{/block:Source}
  413. {/block:Quote}
  414.  
  415.  
  416.  
  417. {block:Text}
  418.  
  419. {block:Title}
  420. <div id="title">{Title}</div>{/block:Title}
  421. {Body}
  422. {/block:Text}
  423.  
  424. {block:Link}
  425. <div id="title"><a href="{URL}">{Name}</a></div>{block:Description}{Description}{/block:Description}
  426. {/block:Link}
  427.  
  428. {block:Chat}
  429. {block:Title}
  430. <h1><div id="title">{Title}</h1>
  431. {/block:Title}
  432. <div class="chat">
  433. <ol>{block:Lines}
  434. <li class="line {Alt}">
  435. {block:Label}
  436. <span class="label">
  437. {Label}</span>
  438. {/block:Label}{Line}</li>
  439. {/block:Lines}
  440. </ol></div>
  441. {/block:Chat}
  442.  
  443. {block:Photo}
  444. {LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
  445. {/block:Photo}
  446.  
  447. {block:Photoset}
  448. {Photoset-400}
  449. {/block:Photoset}
  450.  
  451. {block:Video}
  452. {Video-400}
  453. {/block:Video}
  454.  
  455. {block:Audio}
  456. <div class="player">{AudioPlayerWhite}</div>
  457. {block:AlbumArt}
  458. <img src="{AlbumArtURL}" width="100">
  459. {/block:AlbumArt}
  460. <div class="audioinfo">
  461. {block:TrackName}Track Name: {TrackName}{/block:TrackName}{block:Artist}<br>Artist: {Artist}{/block:Artist}
  462. </div>
  463. {/block:Audio}
  464.  
  465. {block:Answer}
  466. <div class="q">
  467. <div class="as">{Asker} is typing...</div>
  468. {Question}</div>
  469. <div class="a">{Answer}</div>
  470. {/block:Answer}
  471.  
  472. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  473.  
  474. {block:Date}
  475. <div id="permalink">
  476. {block:HasTags}<div class="tags">tagged with: {block:Tags}<a href="{TagUrl}"># {Tag}</a>{/block:Tags}</div>{/block:HasTags}{block:NoteCount}<a href="{Permalink}" title="{timeago}">{NoteCountWithLabel}</a>{/block:NoteCount}
  477. {block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{block:ContentSource}<a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:ContentSource}{/block:RebloggedFrom}
  478.  
  479.  
  480. </div>
  481. {/block:Date}
  482.  
  483.  
  484.  
  485. </div>
  486.  
  487.  
  488. {block:PostNotes}
  489. <div class="pagenotes">
  490. {PostNotes}
  491. </div>
  492. {/block:PostNotes}
  493.  
  494.  
  495. {/block:Posts}
  496.  
  497. </div>
  498.  
  499. </div>
  500.  
  501.  
  502. {block:ContentSource}
  503. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  504. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  505. {/block:SourceLogo}
  506. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  507. {/block:ContentSource}
  508.  
  509. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement