trashxhawkxguy

Karen theme

May 30th, 2016
33
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.55 KB | None | 0 0
  1. <html>
  2. <head>
  3. <title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6. {block:Description}
  7. <meta name="description" content="{MetaDescription}" />
  8. {/block:Description}
  9. <meta name="image:background" content="http://static.tumblr.com/roketoj/cpvo80g7w/background_for_karen.png" />
  10. <meta name="color:background" content="#000" />
  11. <meta name="color:text" content="#000" />
  12. <meta name="color:link" content="#ff0000" />
  13. <meta name="color:sidebar text" content="{sidebar}" />
  14. <meta name="image:sidebar background" content="" />
  15. <meta name="color:date background" content="" />
  16. <meta name="color:date text" content="" />
  17. <meta name="text:link image" content="#" />
  18. <meta name="text:link url 1" content="/" />
  19. <meta name="text:link url 2" content="/" />
  20. <meta name="text:link url 3" content="/" />
  21. <meta name="text:link url 4" content="/" />
  22. <meta name="color:tag text" content="" />
  23. <meta name="color:tag background" content="" />
  24. </head>
  25.  
  26. <style type="text/css">
  27. /* scrollbar info */
  28.  
  29.  
  30. ::-webkit-scrollbar {
  31. width: 2px;
  32. height: 2px;
  33. }
  34. ::-webkit-scrollbar-button {
  35. width: 0px;
  36. height: 0px;
  37. }
  38. ::-webkit-scrollbar-thumb {
  39. background: #e1e1e1;
  40. border: 0px none #ffffff;
  41. border-radius: 50px;
  42. }
  43. ::-webkit-scrollbar-thumb:hover {
  44. background: #ffffff;
  45. }
  46. ::-webkit-scrollbar-thumb:active {
  47. background: #000000;
  48. }
  49. ::-webkit-scrollbar-track {
  50. background: #666666;
  51. border: 0px none #ffffff;
  52. border-radius: 50px;
  53. }
  54. ::-webkit-scrollbar-track:hover {
  55. background: #666666;
  56. }
  57. ::-webkit-scrollbar-track:active {
  58. background: #333333;
  59. }
  60. ::-webkit-scrollbar-corner {
  61. background: transparent;
  62. }
  63.  
  64. #credit {
  65. position: absolute;
  66. bottom: 0px;
  67. right: 20px;
  68. color: #666;
  69. }
  70.  
  71. /* fun post stuff!!! */
  72.  
  73. h1 {
  74. font-size:25px;
  75. line-height:10px;
  76. text-align:center;
  77. padding:5px;
  78. color: #fff;
  79. }
  80.  
  81. a {
  82. text-decoration:none;
  83. color: {color:link};
  84.  
  85. }
  86. a:hover {
  87. color:#EED5B7;
  88. -webkit-transition: all 0.7s ease;
  89. -moz-transition: all 0.7s ease;
  90. -o-transition: all 0.7s ease;
  91.  
  92. }
  93.  
  94. b, strong {
  95. color:#000;
  96. text-transform:uppercase;
  97. }
  98.  
  99. i, em {
  100. color:#fff;
  101. font-family:'Bookman', serif;
  102. }
  103. /* blah unfun info */
  104. blockquote {
  105. padding:1px 5px;
  106. margin:3px 0 3px 8px;
  107. border-left:.5px solid #000;
  108. }
  109.  
  110. blockquote img {
  111. max-width: 100%;
  112. height:auto;
  113. border: 3px solid #000;
  114. }
  115.  
  116. img {
  117. max-width: 100%;
  118. border: 3px solid #000;
  119. }
  120.  
  121.  
  122.  
  123.  
  124. /* here is the post info */
  125. body {
  126. background-color: {color:background};
  127. font-family:β€˜Gibson’, sans-serif;
  128. font-size: 12px;
  129. color:#000;
  130. background-image:url('{image:background}');
  131. background-position: top left;
  132. background-repeat: no-repeat;
  133. background-attachment: fixed;
  134. }
  135.  
  136. #container {
  137. position:absolute;
  138. width: 480px;
  139. height: 470px;
  140. top: 190px;
  141. left: 120px;
  142. overflow-y:scroll;
  143. background-color: #fff;
  144. }
  145.  
  146. /* welp */
  147. .posts {
  148. width: 450px;
  149. padding: 10px;
  150. border: 3px solid #000;
  151. text-align: justify;
  152. margin-bottom: 30px;
  153. color: {color:text};
  154. }
  155.  
  156. .permalinks {
  157. letter-spacing: 2px;
  158. padding: 2px;
  159. margin: auto;
  160. background: {color:date background};
  161. border-top: 2px solid #000;
  162. border-bottom: 2px solid #000;
  163. }
  164.  
  165. /* ~~~~~~taggggs~~~~~~ */
  166.  
  167.  
  168. .date {
  169. float:left;
  170. background-color: {color:date background};
  171. color: {color:date text};
  172. margin-right: 3px;
  173. }
  174. .reblogs {
  175. float: right;
  176. background-color: {color:date background};
  177. color: {color:date text};
  178. margin: 5px;
  179. }
  180.  
  181. .tags {
  182. float: right;
  183. text-align: right;
  184. padding: 10px;
  185. margin: auto;
  186. margin-top: 10px;
  187. }
  188.  
  189. .tags a {
  190. margin: auto;
  191. float: right;
  192. text-decoration:none;
  193. font-size: 10px;
  194. text-transform:uppercase;
  195. color: #f26367;
  196. background-color: {color:tag background};
  197. color: {color:tag text};
  198. }
  199.  
  200. .tags a:hover {
  201. color:#CD0000;
  202. -webkit-transition: all 0.7s ease;
  203. -moz-transition: all 0.7s ease;
  204. -o-transition: all 0.7s ease;
  205. }
  206.  
  207.  
  208. /* i love uselessly dividing shit */
  209. #pagi {
  210. position:fixed;
  211. font-size: 20px;
  212. top: 670px;
  213. left: 790px;
  214. -webkit-transition: all 0.7s ease;
  215. -moz-transition: all 0.7s ease;
  216. -o-transition: all 0.7s ease;
  217. }
  218.  
  219. #pagination a:hover {
  220. color: #ffffff;
  221. }
  222.  
  223. #sidebar {
  224. position:fixed;
  225. left: 610px;
  226. top: 190px;
  227. width: 210px;
  228. height: 470px;
  229. text-align:center;
  230. background-color: #fff;
  231. background-image: url('{image:sidebar background}');
  232. background-position: bottom;
  233. background-repeat: no-repeat;
  234. }
  235. #hoverbox {
  236. position: fixed;
  237. top: 190px;
  238. margin-left: 0px;
  239. }
  240. #hovercontent {
  241. height: 20px;
  242. width: 205px;
  243. padding: 10px;
  244. overflow: auto;
  245. margin-top:10px;
  246. color: {color:text};
  247. opacity: 0;
  248. -webkit-transition: all 0.7S ease;
  249. -moz-transition: all 0.7S ease
  250. -o-transition: all 0.7S ease
  251. }
  252.  
  253. #hoverbox:hover #hovercontent {
  254. opacity:1;
  255. -webkit-transition: all 0.7s ease;
  256. -moz-transition: all 0.7s ease;
  257. -o-transition: all 0.7s ease;}
  258. #hovertitle {
  259. font-size: 10px;
  260. line-height: 15px;
  261. letter-spacing:2px;
  262. font-weight:normal;
  263. color:{color:text};}
  264.  
  265. /* links */
  266. .link001 {
  267. position:fixed;
  268. font-family: signerica;
  269. width:10px;
  270. left: 610px;
  271. top: 250px;
  272. font-size:25px;
  273. margin-right: 15px;
  274. text-transform:uppercase;
  275. text-align:center;
  276. line-height:170%;
  277. -moz-transform: rotate(-5deg);
  278. -webkit-transform: rotate(-5deg);
  279. -o-transform: rotate(-5deg);
  280. -ms-transform: rotate(-5deg);
  281. transform: rotate(-19deg);
  282. }
  283.  
  284. .link001 a{
  285. line-height:170%;
  286. padding:1px;
  287. margin-top:1px;
  288. margin-left:2px;
  289. color: {color:link};
  290. size:15px;
  291. -moz-transition-duration:.7s;
  292. -webkit-transition-duration:.7s;
  293. -o-transition-duration:.7s;
  294. }
  295.  
  296. .link001 a:hover {
  297. color:#000;
  298. letter-spacing: 4px;
  299. -moz-transition-duration:.4s;
  300. -webkit-transition-duration:.4s;
  301. -o-transition-duration:.4s;
  302.  
  303. }
  304.  
  305. .link002 {
  306. position:fixed;
  307. font-family:signerica;
  308. margin-right: 15px;
  309.  
  310. width:10px;
  311. left: 660px;
  312. top: 245px;
  313. font-size:25px;
  314. text-transform:uppercase;
  315. text-align:center;
  316. line-height:170%;
  317. -moz-transform: rotate(-5deg);
  318. -webkit-transform: rotate(-5deg);
  319. -o-transform: rotate(-5deg);
  320. -ms-transform: rotate(-5deg);
  321. transform: rotate(19deg);
  322. }
  323.  
  324. .link002 a{
  325. line-height:170%;
  326. padding:1px;
  327. margin-top:1px;
  328. margin-left:2px;
  329. color: {color:link};
  330. size:15px;
  331. -moz-transition-duration:.7s;
  332. -webkit-transition-duration:.7s;
  333. -o-transition-duration:.7s;
  334. }
  335.  
  336. .link002 a:hover {
  337. color:#000;
  338. letter-spacing: 4px;
  339. -moz-transition-duration:.4s;
  340. -webkit-transition-duration:.4s;
  341. -o-transition-duration:.4s;
  342.  
  343. }
  344.  
  345. .link003 {
  346. position:fixed;
  347. font-family:signerica;
  348. margin-right: 15px;
  349.  
  350. width:10px;
  351. left: 710px;
  352. top: 255px;
  353. font-size:25px;
  354. text-transform:uppercase;
  355. text-align:center;
  356. line-height:170%;
  357. -moz-transform: rotate(-5deg);
  358. -webkit-transform: rotate(-5deg);
  359. -o-transform: rotate(-5deg);
  360. -ms-transform: rotate(-5deg);
  361. transform: rotate(-41deg);
  362. }
  363.  
  364. .link003 a{
  365. line-height:170%;
  366. padding:1px;
  367. margin-top:1px;
  368. margin-left:2px;
  369. color: {color:link};
  370. size:15px;
  371. -moz-transition-duration:.7s;
  372. -webkit-transition-duration:.7s;
  373. -o-transition-duration:.7s;
  374. }
  375.  
  376. .link003 a:hover {
  377. color:#000;
  378. letter-spacing: 4px;
  379. -moz-transition-duration:.4s;
  380. -webkit-transition-duration:.4s;
  381. -o-transition-duration:.4s;
  382.  
  383. }
  384.  
  385. .link004 {
  386. position:fixed;
  387. font-family:signerica;
  388. margin-right: 15px;
  389.  
  390. width:10px;
  391. left: 750px;
  392. top: 245px;
  393. font-size:25px;
  394. text-transform:uppercase;
  395. text-align:center;
  396. line-height:170%;
  397. -moz-transform: rotate(-5deg);
  398. -webkit-transform: rotate(-5deg);
  399. -o-transform: rotate(-5deg);
  400. -ms-transform: rotate(-5deg);
  401. transform: rotate(29deg);
  402. }
  403.  
  404. .link004 a{
  405. line-height:170%;
  406. padding:1px;
  407. margin-top:1px;
  408. margin-left:2px;
  409. color: {color:link};
  410. size:15px;
  411. -moz-transition-duration:.7s;
  412. -webkit-transition-duration:.7s;
  413. -o-transition-duration:.7s;
  414. }
  415.  
  416. .link004 a:hover {
  417. color:#000;
  418. letter-spacing: 4px;
  419. -moz-transition-duration:.4s;
  420. -webkit-transition-duration:.4s;
  421. -o-transition-duration:.4s;
  422.  
  423. }
  424.  
  425.  
  426. /* boring */
  427. .asker {
  428. font-size:15px;
  429. font-style: italic;
  430. text-align: center;
  431. background-color: #999;
  432. border-bottom:1px solid #000;
  433. margin-bottom:5px;
  434. padding-bottom:3px;
  435. }
  436.  
  437. .question {
  438. width: 350px;
  439. height: auto;
  440. font-style: italic;
  441. padding-left:50px;
  442. padding-right:50px;
  443. padding-top: 10px;
  444. padding-bottom: 10px;
  445. border: 3px solid #000;
  446. border-radius: 2px;
  447. }
  448. .quote {
  449. font-size:13px;
  450. letter-spacing:1px;
  451. text-align:center;
  452. border-bottom:1px solid #eee;
  453. margin-bottom:5px;
  454. padding-bottom:3px;
  455. }
  456.  
  457. .quotesource {
  458. font-size:10px;
  459. letter-spacing:1px;
  460. text-align:center;
  461. margin-bottom:5px;
  462. }
  463.  
  464. .title-position {
  465. position: absolute;
  466. top: 135px;
  467. left: 185px;
  468. -moz-transition: all 0.8s ease-in-out 0.8;
  469. -webkit-transition-duration: all 0.8s ease-in-out 0.8;
  470. transition: all 0.8s ease-in-out 0.8s;
  471.  
  472. }
  473. .title-position a {
  474. font-size: 30px;
  475. color: #000;
  476. text-transform: uppercase;
  477. letter-spacing: 35px;
  478. -moz-transition: all 0.8s ease-in-out 1.8;
  479. -webkit-transition-duration: all 0.8s ease-in-out 1.8;
  480. transition: all 0.8s ease-in-out 1.8s;
  481.  
  482.  
  483.  
  484. }
  485.  
  486.  
  487. .title-position a:hover {
  488. -moz-transition: all 1.8s ease-in-out;
  489. -webkit-transition-duration: all 1.8s ease-in-out 1.8s;
  490. transition: 1.8s ease-in-out;
  491. color: red;
  492. text-transform: uppercase;
  493. letter-spacing: 20px;
  494.  
  495. }
  496. /* stop */
  497. </style>
  498.  
  499. <body>
  500. <div class="title-position">
  501. <a href="/">{Title}</a>
  502. </div>
  503. <div id="sidebar">
  504. <div id="hovertitle">Hover for Desc</div>
  505. <div id="hoverbox"><div id="hovercontent">
  506. {block:description} {description}{/block:description}
  507.  
  508. </div>
  509. </div>
  510.  
  511.  
  512. </div>
  513.  
  514. <div class="link001">
  515. <a href="{text:link url 1}" rel="home" class="poplight" title="home">{text:link image}</a></div>
  516. <div class="link002">
  517. <a href="{text:link url 1}" rel="home" class="poplight" title="ask">{text:link image}</a></div>
  518. <div class="link003">
  519. <a href="{text:link url 1}" rel="home" class="poplight" title"change">{text:link image}</a></div>
  520. <div class="link004">
  521. <a href="{text:link url 1}" rel="home" class="poplight" title"change">{text:link image}</a></div>
  522.  
  523. {block:Pagination}<div id="pagi">
  524. {block:PreviousPage}<a href="{PreviousPage}">β‡š</a>{/block:PreviousPage}
  525. {block:CurrentPage}<span class="current_page">{PageNumber}</span>&nbsp;&nbsp;{/block:CurrentPage}
  526. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>&nbsp;&nbsp;{/block:JumpPage}
  527. {/block:JumpPagination}
  528. {block:NextPage}<a href="{NextPage}">⇛</a>{/block:NextPage}
  529. </div>{/block:Pagination}
  530.  
  531.  
  532. <div id="container">
  533.  
  534. {block:Posts}
  535.  
  536. <div class="posts">
  537.  
  538. {block:Text}{block:Title}{Title}{/block:Title}{Body}{/block:Text}
  539.  
  540. {block:Photo}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  541.  
  542. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  543.  
  544. {block:Photoset}{Photoset-400}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  545.  
  546. {block:Quote}"{Quote}"{block:Source}{Source}{/block:Source}{/block:Quote}
  547.  
  548. {block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
  549.  
  550. {block:Chat}{block:Title}{Title}</a>{/block:Title}
  551. {block:Lines}<li>{block:Label}{Label}{/block:Label}{Line}</li>{/block:Lines}{/block:Chat}
  552.  
  553. {block:Video}{Video-250}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  554.  
  555. {block:Audio}{AudioEmbed}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  556. {block:Answer}
  557. <div class="asker">{Asker} Tipped</div>
  558. <div class="question">{Question}</div>
  559. {Answer}
  560. {/block:Answer}
  561. <div class="permalinks">
  562. <div class="date"><a href="{Permalink}">{DayOfMonth}{DayOfMonthSuffix} {ShortMonth} {Year} </a> <a href="{Permalink}"> {block:NoteCount}{NoteCount}{/block:NoteCount}</a></div>
  563. {block:RebloggedFrom}
  564. <a href="{ReblogParentURL}"> via</a>
  565. <a href="{ReblogRootURL}">source</a>
  566. {/block:RebloggedFrom}
  567. <a href="{ReblogURL}">reblog</a>
  568. <div class="tags">{block:HasTags}{block:Tags}<a href="{TagUrl}"> {Tag}</a>{/block:Tags}{/block:HasTags}</div>
  569. </div>
  570.  
  571.  
  572.  
  573.  
  574.  
  575.  
  576. </div>
  577.  
  578. {/block:Posts}
  579.  
  580. </div>
  581.  
  582. {block:ContentSource}
  583. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  584. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  585. {/block:SourceLogo}
  586. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  587. {/block:ContentSource}
  588.  
  589.  
  590.  
  591. <div id="credit">theme by <a href="http://trashxhawkxguy.tumblr.com">Cris</a>
  592.  
  593. </div>
  594.  
  595. <!--. -->
  596. </body>
  597. </html>
Add Comment
Please, Sign In to add comment