Advertisement
mayriella

eight

Sep 4th, 2013
557
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.14 KB | None | 0 0
  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.  
  6. . .
  7. | _|_ o
  8. .-.| . ..--.| .-. .,-. . .-.
  9. ( | | |`--.| ( )| ) | (.-'
  10. `-'`-`--|`--'`-'`-' |`-'-' `-`--'
  11. ; |
  12. `-'
  13.  
  14. THEME 'EIGHT' BY DYSTOPIE.TUMBLR.COM
  15.  
  16. DO NOT REMOVE THE CREDIT
  17. DO NOT USE AS A BASE
  18. DO NOT CLAIM AS YOURS
  19.  
  20. Features: sidebar description, portrait 48px, 6 links customized.
  21. Live preview: dystopie.tumblr.com/eight
  22.  
  23. -->
  24.  
  25.  
  26.  
  27. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  28.  
  29. <head>
  30.  
  31. <!-- DEFAULT VARIABLES -->
  32. <meta name="color:background" content="#ffffff" />
  33. <meta name="color:scrollbar" content="#000000" />
  34. <meta name="color:text" content="#D5D5D5" />
  35. <meta name="color:link" content="#c4c2c2" />
  36. <meta name="text:Link1" content="" />
  37. <meta name="text:Link1 Title" content="" />
  38. <meta name="text:Link2" content="" />
  39. <meta name="text:Link2 Title" content="" />
  40. <meta name="text:Link3" content="" />
  41. <meta name="text:Link3 Title" content="" />
  42. <meta name="text:Link4" content="" />
  43. <meta name="text:Link4 Title" content="" />
  44. <meta name="text:Link5" content="" />
  45. <meta name="text:Link5 Title" content="" />
  46. <meta name="text:Link6" content="" />
  47. <meta name="text:Link6 Title" content="" />
  48.  
  49. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  50. <title>{Title}</title>
  51. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  52. <link rel="shortcut icon" href="{Favicon}" />
  53. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  54. <style type="text/css">
  55.  
  56. /* basics */
  57. body {color:{color:text}; text-align:justify; font-family:cambria; font-style:italic; font-size:9px; margin:auto;}
  58.  
  59. a:link, a:active, a:visited{color:{color:link}; text-decoration:none; -moz-transition-duration:.7s; -webkit-transition-duration:.7s; -o-transition-duration:.7s;}
  60. a:hover{color:{color:text}; -moz-transition-duration:.4s; -webkit-transition-duration:.4s; -o-transition-duration:.4s;}
  61.  
  62. b, strong{color:{color:text};}
  63. i, em{color:{color:text};}
  64. p{margin-top:5px; margin-bottom:5px}
  65. blockquote {border-left:3px double {color:link}; padding:5px; padding-left:5px; margin:0px;}
  66.  
  67. /* content */
  68. #container {background-color:transparent; text-align:center; margin:auto;}
  69.  
  70.  
  71. /* posts */
  72. #entries {margin:auto; margin-top:50px; text-align:justify;}
  73. #entry {margin:auto; width:500px; background-color:transparent; text-align:justify; padding:5px; margin-top:80px;}
  74. #posts {width:500px; background-color:transparent; margin:auto;}
  75.  
  76.  
  77. /* topbar */
  78. #top {background-color:#000000; position:fixed; width:100%; height:25px; margin:auto; top:0px; left:0px; border-bottom:1px solid #ffffff; outline:1px solid #000000;}
  79. #links {position:fixed; text-transform:lowercase; font-size:8px; font-family:arial; letter-spacing:1px; font-style:normal; margin:auto; top:0px; width:100%; padding:8px 0px;}
  80. #links a{color:#ffffff; text-decoration:none; -moz-transition-duration:.7s; -webkit-transition-duration:.7s; -o-transition-duration:.7s; padding:2px; border:1px solid #000000; outline:1px solid #000000;}
  81. #links a:hover {color:#000000; background-color:#ffffff; -moz-transition-duration:.4s; -webkit-transition-duration:.4s; -o-transition-duration:.4s; border:1px solid #000000; outline:1px solid #ffffff; padding:2px;}
  82.  
  83. /* description */
  84. #desc{margin:auto; width:200px;}
  85. #desc img{width:48px; -webkit-border-radius: 50em;}
  86.  
  87. /* titles */
  88. h1{color:{color:text}; text-transform:lowercase; font-size:10px; letter-spacing:1px; font-family:arial; font-style:normal; font-weight:100;}
  89. h2{color:{color:text}; text-transform:lowercase; font-size:15px; font-family:cambria; font-style:italic; font-weight:100;}
  90. h3{color:{color:text}; text-transform:lowercase; font-size:10px; letter-spacing:1px; font-family:arial; font-style:normal; font-weight:100;}
  91.  
  92. /* post bottom */
  93. #info {margin-top:15px;}
  94. .tag {text-transform:lowercase; font-size:8px; letter-spacing:1px; font-family:arial; font-style:normal; background:#F9F9F9; padding:5px;}
  95. .data {font-size:8px; letter-spacing:1px; font-family:arial; font-style:normal; color:{color:text}; border-top:1px solid #F9F9F9; padding:5px;}
  96. .data a:hover{color:{color:link};}
  97.  
  98. /* post permalink */
  99. #perma {font-family:cambria; font-style:italic; font-size:9px; color:{color:text}; width:500px; margin:auto;}
  100. #perma a{font-size:8px; letter-spacing:1px; font-family:arial; font-style:normal; color:{color:link};}
  101.  
  102. /* ask */
  103. #question {}
  104. .askquest {color:{color:text}; text-transform:lowercase; font-size:10px; letter-spacing:1px; font-family:arial; font-style:normal; font-weight:100; background:trans; border:3px double #eeeeee; padding:5px;}
  105. .askquest a{color:{color:link};}
  106. .askquest a:hover{color:{color:text};}
  107. .reply {font-family:cambria; font-style:italic; font-size:9px; color:{color:text};}
  108.  
  109. /* audio*/
  110. #audio {height:60px;}
  111. #cover {border:3px double #eeeeee; float:left; width:50px; height:50px; margin-top:-2px;}
  112. #player {width:25px; height:25px; margin-top:15px; margin-left:15px; overflow:hidden; position:absolute; opacity:0.4; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; transition: all 0.7s ease-out;}
  113. #player:hover {opacity:0.9; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; transition: all 0.7s ease-out;}
  114. #line {margin-left:80px; text-transform:lowercase; padding-left:-5px; min-height:70px; line-height:158%;}
  115. .track {font-family:cambra; font-size:10px; background:#F9F9F9; padding:5px;}
  116. .artist {font-size:8px; letter-spacing:1px; font-family:arial; font-style:normal; background:#F9F9F9; padding:5px; border-top:2px solid #ffffff;}
  117.  
  118. /* chat */
  119. .user_1 {margin-right:25px; color:{color:text}; background:#F9F9F9;}
  120. .user_2 {background-color:transparent; color:{color:text}; margin-right:25px; font-family:cambra;}
  121. .user_3 {margin-right:25px; color:{color:text}; background:#F9F9F9;}
  122. .user_4 {background-color:transparent; color:{color:text}; margin-right:25px; font-family:cambra;}
  123. .user_5 {margin-right:25px; color:{color:text}; background:#F9F9F9;}
  124. .user_6 {background-color:transparent; color:{color:text}; margin-right:25px; font-family:cambra;}
  125. .user_7 {margin-right:25px; color:{color:text}; background:#F9F9F9;}
  126. .user_8 {background-color:transparent; color:{color:text}; margin-right:25px; font-family:cambra;}
  127. .user_9 {margin-right:25px; color:{color:text}; background:#F9F9F9;}
  128. .user_10 {background-color:transparent; color:{color:text}; margin-right:25px; font-family:cambra;}
  129. .user_11 {margin-right:25px; color:{color:text}; background:#F9F9F9;}
  130. .user_12 {background-color:transparent; color:{color:text}; margin-right:25px; font-family:cambra;}
  131. ul.chat, .chat ol, .chat li {list-style:none; margin:0px; padding:5px;}
  132.  
  133. /* notes */
  134. ol.notes {padding:0px; list-style-type:none; border-bottom:1px solid #F9F9F9;}
  135. ol.notes li.note {border-top:1px solid #F9F9F9; padding:10px;}
  136. ol.notes li.note img.avatar {vertical-align:-4px; margin-right:10px; width: 16px; height:16px;}
  137. ol.notes li.note span.action {font-weight:normal;}
  138. ol.notes li.note .answer_content {font-weight:normal;}
  139. ol.notes li.note blockquote {border-color:#F9F9F9; padding:4px 10px; margin: 10px 0px 0px 25px;}
  140. ol.notes li.note blockquote a {text-decoration:none;}
  141.  
  142. /* extra */
  143. ::-webkit-scrollbar-thumb:vertical {background-color:{color:scrollbar}; height:10px;}
  144. ::-webkit-scrollbar-thumb:horizontal {background-color:{color:scrollbar}; height:10px !important;}
  145. ::-webkit-scrollbar {height:10px; width:10px; background-color:#ffffff;}
  146.  
  147. html {cursor: url("http://i.imgur.com/2qleX.jpg"), default;}
  148. html a{cursor: url("http://i.imgur.com/IepP2.jpg"), default;}
  149.  
  150. ::selection {background:#000000; color:{color:background};}
  151. ::-moz-selection {background:#000000; color:{color:background};}
  152. ::-webkit-selection {background:#000000; color:{color:background};}
  153.  
  154. #dhtmltooltip {position:absolute; width:auto; font-size:8px; letter-spacing:1px; font-family:arial; font-style:normal; border:1px solid #ffffff; outline:1px solid #000000; padding:2px; background-color:#000000; color:#ffffff; visibility:hidden; z-index:100;}
  155.  
  156. #d {position:fixed; right:0px; bottom:0px; font:10px cambria; color:{color:link}; padding:5px;}
  157.  
  158. </style>
  159. <style type="text/css">{CustomCSS}</style>
  160.  
  161. </head>
  162.  
  163. <style type="text/css"></style>
  164.  
  165. <body>
  166. <div id="top"></div>
  167. <div id="container">
  168.  
  169. <div id="links">
  170. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">‹</a>{/block:PreviousPage}{/block:Pagination} {block:ifLink1}<a href="{text:Link1}">{text:Link1 Title}</a>{/block:ifLink1}
  171. {block:ifLink2}<a href="{text:Link2}">{text:Link2 Title}</a>{/block:ifLink2}
  172. {block:ifLink3}<a href="{text:Link3}">{text:Link3 Title}</a>{/block:ifLink3}
  173. {block:ifLink4}<a href="{text:Link4}">{text:Link4 Title}</a>{/block:ifLink4}
  174. {block:ifLink5}<a href="{text:Link5}">{text:Link5 Title}</a>{/block:ifLink5}
  175. {block:ifLink6}<a href="{text:Link6}">{text:Link6 Title}</a>{/block:ifLink6} {block:Pagination}{block:NextPage}<a href="{NextPage}">›</a>{/block:NextPage}{/block:Pagination}{/block:Pagination}
  176. </div>
  177.  
  178. <div id="d"><a href="http://dystopie.tumblr.com/codes" onMouseover="ddrivetip('theme by dystopie')"; onMouseout="hideddrivetip()">ディストピア</a></div>
  179. <div id="entries">
  180.  
  181. <div id="desc"><img src="{PortraitURL-48}" align="left" Vspace="0" Hspace="5"><a style="text-transform:lowercase; font-size:8px; letter-spacing:1px; font-family:arial; font-style:normal;">{Description}</div>
  182.  
  183. {block:Posts}
  184. <div id="posts">
  185.  
  186. <div id="entry">
  187.  
  188. {block:Title}<h1>{Title}</h1>{/block:Title}
  189. {block:Text}{Body}{/block:Text}
  190.  
  191. {block:Quote}<h2>“{Quote}”</h2><h1>— {Source}</h1>{/block:Quote}
  192.  
  193. {block:Link}<a href="{URL}" class="link" {Target}><h3>{Name}</h3></a>
  194. {block:Description}<P>{Description}</p>{/block:Description}{/block:Link}
  195.  
  196. {block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  197. {block:Photoset}<center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  198.  
  199. {block:Chat}<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>{/block:Chat}
  200.  
  201. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  202.  
  203. {block:Answer}<div id="question">
  204. <div class="askquest">{Asker}: {Question}</div>
  205. <div class="reply">{Answer}</div>
  206. </div>{/block:Answer}
  207.  
  208. {block:Audio}
  209. <div id="audio">
  210. <div id="player">{AudioPlayerGrey}</div>
  211. {block:AlbumArt}<img id="cover" src="{AlbumArtURL}">{/block:AlbumArt}
  212. <div id="line">
  213. <div class="track">{block:TrackName}{TrackName}{/block:TrackName}</div>
  214. <div class="artist">{block:Artist}{Artist}{/block:Artist}</div>
  215. </div>
  216. </div><br>
  217. {block:Caption}{Caption}{/block:Caption}
  218. {/block:Audio}
  219.  
  220. </div>
  221.  
  222. <div id="info">
  223. {block:HasTags}<div class="tag">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}<br>
  224. <div class="data"><a style="float:right; background:#F9F9F9;; padding:3px; margin-top:-5px; margin-right:-5px;" href="{Permalink}" onMouseover="ddrivetip('permalink')"; onMouseout="hideddrivetip()">+</a></div>
  225. </div>
  226.  
  227. </div>
  228.  
  229. {block:PermalinkPage}<div id="perma">{block:Date}{DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix} {Year}{/block:Date}<br>
  230. {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}<br>
  231. {block:RebloggedFrom}Via: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
  232. Source: <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  233. {block:PostNotes}{PostNotes}{/block:PostNotes}
  234. </div>{/block:PermalinkPage}
  235. <br><br><br>{/block:Posts}
  236.  
  237.  
  238. {block:ContentSource}
  239. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  240. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  241. {/block:SourceLogo}
  242. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  243. {/block:ContentSource}
  244.  
  245. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  246.  
  247. </div>
  248.  
  249. </div>
  250.  
  251. <div id="dhtmltooltip"></div>
  252. <script type="text/javascript">
  253. var offsetxpoint=-15
  254. var offsetypoint=15
  255. var ie=document.all
  256. var ns6=document.getElementById && !document.all
  257. var enabletip=false
  258. if (ie||ns6)
  259. var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
  260. function ietruebody(){
  261. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  262. }
  263. function ddrivetip(thetext, thecolor, thewidth){
  264. if (ns6||ie){
  265. if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
  266. if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
  267. tipobj.innerHTML=thetext
  268. enabletip=true
  269. return false
  270. }
  271. }
  272. function positiontip(e){
  273. if (enabletip){
  274. var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
  275. var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
  276. var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
  277. var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
  278. var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
  279. if (rightedge<tipobj.offsetWidth)
  280. tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
  281. else if (curX<leftedge)
  282. tipobj.style.left="5px"
  283. else
  284. tipobj.style.left=curX+offsetxpoint+"px"
  285. if (bottomedge<tipobj.offsetHeight)
  286. tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
  287. else
  288. tipobj.style.top=curY+offsetypoint+"px"
  289. tipobj.style.visibility="visible"
  290. }
  291. }
  292. function hideddrivetip(){
  293. if (ns6||ie){
  294. enabletip=false
  295. tipobj.style.visibility="hidden"
  296. tipobj.style.left="-1000px"
  297. tipobj.style.backgroundColor=''
  298. tipobj.style.width=''
  299. }
  300. }
  301. document.onmousemove=positiontip
  302. </script>
  303.  
  304. </body>
  305. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement