Advertisement
ohmy-klaus

Theme 5 by ohmyklaus

Jun 23rd, 2012
23,757
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.40 KB | None | 0 0
  1. <!-- #5 WTH is a Stiles?
  2. by ohmyklaus.tumblr.com
  3.  
  4. ######## ## ## ## ## ## ##
  5. ######## ## ## ### ### ## ##
  6. ## ## ######## #### #### ## ##
  7. ## ## ######## ## #### ## ####
  8. ######## ## ## ## ## ## ##
  9. ######## ## ## ## ## ##
  10.  
  11. DO NOT REMOVE THE CREDIT!
  12. DO NOT CLAIM AS YOUR OWN! -->
  13.  
  14.  
  15.  
  16. <html><head>
  17.  
  18. <meta name="text:Blog Title" content="Your title" />
  19. <meta name="image:Sidebar Image" content=""/>
  20. <meta name="if:Shadow" content="2">
  21.  
  22. <meta name="color:Background" content="#faf5ed"/>
  23. <meta name="color:Font" content="#99806f"/>
  24. <meta name="color:Links" content="#f33c4f"/>
  25. <meta name="color:Links Hover" content="#99806f"/>
  26. <meta name="color:Bold" content="#f33c4f"/>
  27.  
  28. <meta name="color:Posts Hover Background" content="#fffcf8"/>
  29. <meta name="color:Nav Links Color" content="#faf5ed"/>
  30. <meta name="color:Color 1" content="#f33c4f"/>
  31. <meta name="color:Color 2" content="#99806f"/>
  32.  
  33. <meta name="color:Scrollbar" content="#f33c4f"/>
  34.  
  35. <meta name="text:Link 1 URL" content="/" />
  36. <meta name="text:Link 1 Title" content="home" />
  37. <meta name="text:Link 2 URL" content="/ask" />
  38. <meta name="text:Link 2 Title" content="ask" />
  39. <meta name="text:Link 3 URL" content="/" />
  40. <meta name="text:Link 3 Title" content="link" />
  41. <meta name="text:Link 4 URL" content="/" />
  42. <meta name="text:Link 4 Title" content="link" />
  43. <meta name="text:Link 5 URL" content="/" />
  44. <meta name="text:Link 5 Title" content="link" />
  45. <meta name="text:Link 6 URL" content="/" />
  46. <meta name="text:Link 6 Title" content="link" />
  47.  
  48.  
  49. <title>{Title}</title>
  50. <link rel="shortcut icon" href="{Favicon}">
  51.  
  52.  
  53. <style type="text/css">
  54.  
  55.  
  56.  
  57. /* --- BASICS --- */
  58.  
  59.  
  60. body {
  61. font-family: Trebuchet MS;
  62. font-size: 10px;
  63. line-height: 100%;
  64. color: {color:Font};
  65. background-color: {color:Background}; }
  66.  
  67.  
  68. a:link, a:visited, a:active {
  69. font-family: Trebuchet MS;
  70. font-size: 10px;
  71. line-height: 100%;
  72. color: {color:Links};
  73. -webkit-transition-duration: .90s; }
  74.  
  75. a:hover {
  76. color: {color:Links Hover};
  77. -webkit-transition-duration: .90s; }
  78.  
  79. b, strong {
  80. color: {color:Bold}; }
  81.  
  82.  
  83. blockquote {
  84. margin-left: 0px;
  85. padding-left: 4px;
  86. border-left: 4px solid {color:Bold}; }
  87.  
  88. blockquote {
  89. margin-left: 0px;
  90. width: auto;
  91. padding-left: 10px;
  92. font-family: Calibri;
  93. line-height: 100%;
  94. font-size: 10px;
  95. color: {color:Font};
  96. border-left: 3px solid {color:Border}; }
  97.  
  98. .tumblr_blog {
  99. padding-left: 10px;
  100. font-family: Calibri;
  101. line-height: 100%;
  102. font-size: 11px;
  103. font-weight: bold;
  104. letter-spacing: 0.5px;
  105. color: {color:Font};
  106. border-left: 3px solid {color:Links}; }
  107.  
  108. #title {
  109. margin-top: 5px;
  110. margin-bottom: 5px;
  111. padding-bottom: 4px;
  112. font-family: Trebuchet MS;
  113. font-size: 16px;
  114. line-height: 100%;
  115. text-align: center; }
  116.  
  117. #link {
  118. margin-top: 5px;
  119. padding-bottom: 0px;
  120. font-family: Trebuchet MS;
  121. font-size: 16px;
  122. line-height: 100%;
  123. text-align: center; }
  124.  
  125. h1 {
  126. margin-top: 0px;
  127. margin-bottom: 0px;
  128. padding: 0px;
  129. font-family: Trebuchet MS;
  130. font-size: 16px;
  131. line-height: 100%;
  132. line-height: 15px;
  133. letter-spacing: 0px;
  134. text-transform: none;
  135. font-weight: normal;
  136. text-align: left;
  137. color: {color:Links}; }
  138.  
  139.  
  140. /* --- QUOTE --- */
  141.  
  142. #quote {
  143. margin: 0px 32px;
  144. font-family: Calibri;
  145. font-size: 16px; }
  146.  
  147. #source {
  148. font-size: 8px;
  149. line-height: 200%; }
  150.  
  151.  
  152. /* --- AUDIO --- */
  153.  
  154. #audio {
  155. padding: 0px; }
  156.  
  157. .qu {
  158. opacity: 0.7;
  159. font-family: georgia;
  160. font-size: 25px;
  161. font-weight: bold;
  162. line-height: 33px;}
  163.  
  164. .ote {
  165. opacity: 0.9;
  166. margin-top: -34px;
  167. text-indent: 15px; }
  168.  
  169. .audio {
  170. background-color :white;
  171. display: block; }
  172.  
  173.  
  174. /* --- QUESTION --- */
  175.  
  176. .asker {
  177. width: 490px;
  178. padding: 5px;
  179. font-size: 10px;
  180. text-transform: normal;
  181. line-height: 100%;
  182. font-weight: normal;
  183. color:{color:Font};}
  184.  
  185. .asker img {
  186. float: left;
  187. padding: 0px 7px 0px 0px; }
  188.  
  189. .asker a {
  190. margin: 0;
  191. padding: 0;
  192. font-size: 10px;
  193. line-height: 100%;
  194. font-weight: bold;
  195. text-transform: normal;
  196. color: {color:Links};}
  197.  
  198. .asker a:hover {
  199. margin: 0;
  200. padding: 0;
  201. font-weight: bold;
  202. text-transform: normal;
  203. color: {color:Links Hover}; }
  204.  
  205. .question {
  206. font-size: 10px;
  207. font-weight: normal;
  208. text-transform: none;
  209. color:{color:Font};
  210. background-color: {color:Posts Hover Background}; }
  211.  
  212. .answer {
  213. padding-top: 0px;
  214. padding-left: 5px;
  215. padding-right: 5px; }
  216.  
  217. .answer img {
  218. max-width: 500px; }
  219.  
  220. img a {
  221. border:none;
  222. width:100%; }
  223.  
  224.  
  225. /* --- CHAT --- */
  226.  
  227. .user_1 .label {color:{color:links}; font-weight:bold;}
  228. .user_2 .label {color:{color:links}; font-weight:bold;}
  229. .user_3 .label {color:{color:links}; font-weight:bold;}
  230. .user_4 .label {color:{color:links}; font-weight:bold;}
  231. .user_5 .label {color:{color:links}; font-weight:bold;}
  232. .user_6 .label {color:{color:links}; font-weight:bold;}
  233. .user_7 .label {color:{color:links}; font-weight:bold;}
  234. .user_8 .label {color:{color:links}; font-weight:bold;}
  235. .user_9 .label {color:{color:links}; font-weight:bold;}
  236. .user_10 .label {color:{color:links}; font-weight:bold;}
  237. .user_11 .label {color:{color:links}; font-weight:bold;}
  238. .user_12 .label {color:{color:links}; font-weight:bold;}
  239. .user_13 .label {color:{color:links}; font-weight:bold;}
  240. .user_14 .label {color:{color:links}; font-weight:bold;}
  241. .user_15 .label {color:{color:links}; font-weight:bold;}
  242. .user_16 .label {color:{color:links}; font-weight:bold;}
  243. .user_17 .label {color:{color:links}; font-weight:bold;}
  244. .user_18 .label {color:{color:links}; font-weight:bold;}
  245. .user_19 .label {color:{color:links}; font-weight:bold;}
  246. .user_20 .label {color:{color:links}; font-weight:bold;}
  247.  
  248. ul.chat, .chat ol, .chat li {
  249. margin:0px;
  250. padding:0px;
  251. list-style:none;}
  252.  
  253.  
  254. /* --- SCROLLBAR --- */
  255.  
  256. ::-webkit-scrollbar-thumb:vertical {
  257. height:10px;
  258. background-color: {color:Scrollbar};
  259. {block:ifShadow}
  260. box-shadow: 0 0px 6px 0px #ccc;
  261. {/block:ifShadow} }
  262.  
  263. ::-webkit-scrollbar-thumb:horizontal {
  264. height:10px;
  265. background-color: {color:Scrollbar};
  266. {block:ifShadow}
  267. box-shadow: 0 0px 6px 0px #ccc;
  268. {/block:ifShadow} }
  269.  
  270. ::-webkit-scrollbar {
  271. height: 10px;
  272. width: 5px;
  273. background-color: {color:Background}; }
  274.  
  275.  
  276. /* --- PERMALINK NOTES PAGE --- */
  277.  
  278. #perma-notes {
  279. position: absolute;
  280. margin-top: -15px;
  281. margin-left: 0px;
  282. margin-bottom: 50px;
  283. width: 460px;
  284. padding: 20px 30px;
  285. background-color: {color:Background};
  286. -webkit-transition: 0.4s linear; }
  287.  
  288. #perma-notes img {
  289. width: 0px;
  290. height: 0px; }
  291.  
  292. ol.notes, .notes li {
  293. margin: 0px 0px 0px 0px;
  294. width: 480px;
  295. padding: 2px;
  296. text-align: left;
  297. color: {color:Font}; }
  298.  
  299. ol.notes, .notes li a {
  300. text-align: left;
  301. color: {color:Links}; }
  302.  
  303. ol.notes, .notes li a:hover {
  304. color: {color:Links Hover}; }
  305.  
  306.  
  307. /* --- POSTS --- */
  308.  
  309. #entries {
  310. position: absolute;
  311. margin-top: 40px;
  312. margin-bottom: 20px;
  313. margin-left: 300px;
  314. width: 520px; }
  315.  
  316. #posts {
  317. overflow: hidden;
  318. margin-top: 0px;
  319. margin-bottom: 20px;
  320. padding: 10px 10px 8px 10px;
  321. font-family: Trebuchet MS;
  322. font-size: 10px;
  323. line-height: 100%;
  324. background-color: {color:Background};
  325. border-top: 5px solid {color:Background};
  326. border-bottom: 5px solid {color:Background};
  327. -webkit-transition-duration: .90s; }
  328.  
  329. #posts:hover {
  330. background-color: {color:Posts Hover Background};
  331. border-top: 5px solid {color:Font};
  332. border-bottom: 5px solid {color:Font};
  333. -webkit-transition-duration: .90s;
  334. {block:ifShadow}
  335. box-shadow: 0 0px 6px 0px #ccc;
  336. {/block:ifShadow} }
  337.  
  338. #posts:hover #info {
  339. opacity:1;
  340. margin-left: 520px;
  341. display:block;
  342. -webkit-transition-duration: .90s; }
  343.  
  344.  
  345. /* --- POST INFO --- */
  346.  
  347. #info {
  348. position: absolute;
  349. opacity: 0;
  350. margin-top: 0px;
  351. margin-left: 520px;
  352. width: 150px;
  353. padding: 1px 5px 3px 5px;
  354. font-family: Trebuchet MS;
  355. font-size: 8px;
  356. line-height:120%;
  357. letter-spacing: 0.5px;
  358. text-transform: uppercase;
  359. text-align: left;
  360. color: {color:Font};
  361. background-color: none;
  362. -webkit-transition-duration: .90s; }
  363.  
  364. #info a {
  365. font-family: Trebuchet MS;
  366. font-size: 8px;
  367. line-height: 100%;
  368. text-transform: uppercase;
  369. color: {color:Font}; }
  370.  
  371. #info a:hover {
  372. color: {color:Links};
  373. -webkit-transition-duration: .90s; }
  374.  
  375.  
  376. /* --- BORDER --- */
  377.  
  378. #top {
  379. position: fixed;
  380. top: 0px;
  381. margin-left: 300px;
  382. width: 520px;
  383. height: 10px;
  384. background-color: {color:Font};
  385. border-bottom: 5px solid {color:Links};
  386. z-index: 1001;
  387. {block:ifShadow}
  388. box-shadow: 0 0px 6px 0px #ccc;
  389. {/block:ifShadow} }
  390.  
  391. #bottom {
  392. position: fixed;
  393. bottom: 0px;
  394. margin-left: 300px;
  395. width: 520px;
  396. height: 10px;
  397. background-color: {color:Font};
  398. border-top: 5px solid {color:Links};
  399. z-index: 1001;
  400. {block:ifShadow}
  401. box-shadow: 0 0px 6px 0px #ccc;
  402. {/block:ifShadow} }
  403.  
  404.  
  405. /* --- SIDEBAR --- */
  406.  
  407. #center {
  408. margin-left: auto;
  409. margin-right: auto;
  410. width: 800px; }
  411.  
  412. #position {
  413. position: fixed;
  414. top: 120px;
  415. margin-left: 20px;
  416. width: 200px; }
  417.  
  418. .sidebar {
  419. margin-left: 0px;
  420. padding: 0px 0px 0px 0px;}
  421.  
  422. .sidebar img {
  423. width: 200px;
  424. height: auto;
  425. {block:ifShadow}
  426. box-shadow: 0 0px 6px 0px #ccc;
  427. {/block:ifShadow} }
  428.  
  429. #title {
  430. position: fixed;
  431. margin-top: -45px;
  432. width: 200px;
  433. font-family: Trebuchet MS;
  434. font-size: 9px;
  435. font-weight: bold;
  436. line-height: 100%;
  437. letter-spacing: 2px;
  438. text-transform: uppercase;
  439. text-align: center;
  440. color: {color:Links}; }
  441.  
  442. #description {
  443. position: fixed;
  444. opacity: 1;
  445. overflow: hidden;
  446. margin-top: 30px;
  447. margin-left: 0px;
  448. width: 200px;
  449. padding: 6px 0px 4px 0px;
  450. font-family: Trebuchet MS;
  451. font-size: 10px;
  452. line-height: 100%;
  453. text-align: center;
  454. color: {color:Font};
  455. background: none;
  456. border: 5px solid none;
  457. -webkit-transition-duration: .90s;}
  458.  
  459. #description img {
  460. width: auto;
  461. height: auto;
  462. {block:ifShadow}
  463. box-shadow: 0 0px 0px 0px #ccc;
  464. {/block:ifShadow} }
  465.  
  466.  
  467. /* --- NAVIGATION --- */
  468.  
  469. #nav-a, #nav-b, #nav-c {
  470. position: fixed;
  471. margin-top: -21px;
  472. {block:ifShadow}
  473. box-shadow: 0 0px 6px 0px #ccc;
  474. {/block:ifShadow}
  475. -webkit-transition-duration: .90s; }
  476.  
  477. #nav-d, #nav-e, #nav-f {
  478. position: fixed;
  479. margin-top: 6px;
  480. {block:ifShadow}
  481. box-shadow: 0 0px 6px 0px #ccc;
  482. {/block:ifShadow}
  483. -webkit-transition-duration: .90s; }
  484.  
  485. #nav-a:hover, #nav-b:hover, #nav-c:hover {
  486. color: {color:Background}; }
  487.  
  488. #nav-d:hover, #nav-e:hover, #nav-f:hover {
  489. color: {color:Background}; }
  490.  
  491. #nav-a, #nav-c, #nav-e {
  492. background: {color:Color 1}; }
  493.  
  494. #nav-b, #nav-d, #nav-f {
  495. background: {color:Color 2}; }
  496.  
  497. #nav-a, #nav-d {
  498. margin-left: -1px; }
  499.  
  500. #nav-b, #nav-e {
  501. margin-left: 68px; }
  502.  
  503. #nav-c, #nav-f {
  504. margin-left: 137px; }
  505.  
  506. .links {
  507. display: block;
  508. width: 64px;
  509. padding: 3px 0px;
  510. font-family: Trebuchet MS;
  511. font-size: 8px;
  512. text-transform: uppercase;
  513. text-align: center;
  514. color: {color:Nav Links Color};
  515. -webkit-transition-duration: .90s; }
  516.  
  517. .links a {
  518. text-decoration: none;
  519. text-transform: none;
  520. color: {color:Nav Links Color}; }
  521.  
  522. .links:hover, .links a:hover {
  523. background: {color:Background};
  524. color: {color:Font}; }
  525.  
  526.  
  527. /* --- PAGES --- */
  528.  
  529. #prev {
  530. position: fixed;
  531. margin-top: 70px;
  532. margin-left: -40px;
  533. width: 0px;
  534. -webkit-transition-duration: .90s; }
  535.  
  536. #next {
  537. position: fixed;
  538. margin-top: 70px;
  539. margin-left: 205px;
  540. width: 0px;
  541. -webkit-transition-duration: .90s; }
  542.  
  543. .pages {
  544. display: block;
  545. width: 30px;
  546. padding: 0px 2px 4px 2px;
  547. font: 35px tahoma;
  548. text-align: center;
  549. color: {color:Links};
  550. background: none;
  551. -webkit-transition-duration: .90s; }
  552.  
  553. .pages a, a {
  554. text-decoration: none;
  555. text-transform: none;
  556. color: {color:Links}; }
  557.  
  558. .pages:hover {
  559. color: {color:Font};
  560. background: none; }
  561.  
  562.  
  563. /* --- CREDIT --- */
  564.  
  565. #credit {
  566. position: fixed;
  567. bottom: 10px;
  568. right: 20px;
  569. width: 6px;
  570. height: 8px;
  571. padding: 3px 5px 5px 5px;
  572. font-family: Calibri;
  573. font-size: 10px;
  574. letter-spacing: 1px;
  575. text-align:center;
  576. text-transform: uppercase;
  577. color: {color:Font};
  578. overflow: hidden;
  579. -webkit-transition-duration: .60s;
  580. z-index: 10000; }
  581.  
  582. #credit a {
  583. color: {color:Font}; }
  584.  
  585. #credit b {
  586. font-style: italic;
  587. font-weight: bold;
  588. color: {color:Links}; }
  589.  
  590. #credit:hover {
  591. width: 28px;
  592. -webkit-transition-duration: .60s; }
  593.  
  594.  
  595. </style></head>
  596.  
  597. <body>
  598.  
  599. <!-- DO NOT REMOVE !!! --><div id="credit">
  600. <a href="http://ohmyklaus.tumblr.com/tagged/themes">
  601. <b>t</b>heme</a></div> <!-- DO NOT REMOVE !!! -->
  602.  
  603.  
  604. <div id="center">
  605.  
  606. <div id="top"><br></div>
  607. <div id="bottom"><br></div>
  608.  
  609. <div id="position">
  610.  
  611. <div id="title">{text:Blog Title}</div>
  612.  
  613. <div class="sidebar">
  614.  
  615. {block:Pagination}{block:PreviousPage}
  616. <div id="prev"><a href="{PreviousPage}">
  617. <div class="pages">«</div></a></div>
  618. {/block:PreviousPage}{/block:Pagination}
  619.  
  620. {block:Pagination}{block:NextPage}
  621. <div id="next"><a href="{NextPage}">
  622. <div class="pages">»</div></a></div>
  623. {/block:NextPage}{/block:Pagination}
  624.  
  625. <div id="nav-a"><a href="{text:Link 1 URL}">
  626. <div class="links">{text:Link 1 Title}</div></a></div>
  627.  
  628. <div id="nav-b"><a href="{text:Link 2 URL}">
  629. <div class="links">{text:Link 2 Title}</div></a></div>
  630.  
  631. <div id="nav-c"><a href="{text:Link 3 URL}">
  632. <div class="links">{text:Link 3 Title}</div></a></div>
  633.  
  634. <img src="{image:Sidebar Image}">
  635.  
  636. <div id="nav-d"><a href="{text:Link 4 URL}">
  637. <div class="links">{text:Link 4 Title}</div></a></div>
  638.  
  639. <div id="nav-e"><a href="{text:Link 5 URL}">
  640. <div class="links">{text:Link 5 Title}</div></a></div>
  641.  
  642. <div id="nav-f"><a href="{text:Link 6 URL}">
  643. <div class="links">{text:Link 6 Title}</div></a></div>
  644.  
  645. <div id="description">{description}</div>
  646.  
  647. </div>
  648. </div>
  649.  
  650.  
  651. <div id="entries">
  652. {block:Posts}
  653. <div id="posts">
  654.  
  655. <div id="info">
  656.  
  657. {block:Date}Posted <a href="{Permalink}">{TimeAgo}</a><br>{/block:Date}
  658. {block:NoteCount}with <a href="{Permalink}">{NoteCount} notes</a><br>
  659. {/block:NoteCount}
  660. {block:RebloggedFrom}
  661. <br>via: <a href="{ReblogParentURL}">
  662. <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
  663. {/block:RebloggedFrom}
  664. {block:ContentSource}
  665. source: <a href="{SourceURL}">{SourceLink}</a><br>
  666. {/block:ContentSource}
  667.  
  668. {block:HasTags}<br>Tags:
  669. {block:Tags}
  670. #<a href="/tagged/{Tag}">{Tag}</a>
  671. {/block:Tags}
  672. {/block:HasTags}
  673.  
  674. </div>
  675.  
  676.  
  677. {block:Title}
  678. <h1>{Title}&nbsp;</h1>
  679. {/block:Title}
  680.  
  681. {block:Text}
  682. {Body}
  683. {/block:Text}
  684.  
  685. {block:Quote}
  686. <div id="quote">
  687. <center>
  688. " {Quote} "
  689. </center>
  690. </div>
  691. {block:Source}
  692. <div id="source">
  693. <center>
  694. {Source}
  695. </center>
  696. </div>{/block:Source}
  697. {/block:Quote}
  698.  
  699. {block:Link}
  700. <a href="{URL}" class="link" {Target}><h1>{Name}&nbsp;</h1></a>
  701. {block:Description}{Description}{/block:Description}
  702. {/block:Link}
  703.  
  704. {block:Photo}
  705. {LinkOpenTag}
  706. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  707. {LinkCloseTag}<br>
  708. {block:Caption}
  709. {Caption}
  710. {/block:Caption}
  711. {/block:Photo}
  712.  
  713. {block:Photoset}
  714. {Photoset-500}
  715. {block:Caption}
  716. {Caption}
  717. {/block:Caption}
  718. {/block:Photoset}
  719.  
  720. {block:Chat}
  721. <ul class="chat">
  722. {block:Lines}
  723. <li class="user_{UserNumber}">
  724. {block:Label}
  725. <span class="label">{Label}</span>
  726. {/block:Label}
  727. &nbsp;{Line}</li>
  728. {/block:Lines}</ul>
  729. {/block:Chat}
  730.  
  731. {block:Video}
  732. {Video-500}
  733. {block:Caption}
  734. {Caption}
  735. {/block:Caption}
  736. {/block:Video}
  737.  
  738. {block:Answer}
  739. <div class="asker">
  740. <img src="{AskerPortraitURL-24}"><b>{Asker}</b> asked:
  741. <div class="questions">
  742. {Question}
  743. </div></div>
  744. <div class="answer">
  745. {Answer}
  746. </div>
  747. {/block:Answer}
  748.  
  749. {block:Audio}
  750. <div id="audio">
  751. {block:AlbumArt}
  752. <img src="{AlbumArtURL}" width="55px" height="55px" align="left" style="margin-right:10px" />
  753. {/block:AlbumArt}
  754. {block:TrackName}
  755. Song: <b>{TrackName}</b><br>
  756. {/block:TrackName}
  757. {block:Artist}
  758. Artist: <b>{Artist}</b><br><br>
  759. {/block:Artist}
  760. {AudioPlayerBlack}<br>
  761. </div>
  762. {block:Caption}
  763. {Caption}
  764. {/block:Caption}
  765. {/block:Audio}
  766.  
  767.  
  768. </div>
  769. {/block:Posts}
  770.  
  771. {block:PostNotes}
  772. <div id="perma-notes">{PostNotes}</div>
  773. {/block:PostNotes}
  774.  
  775. </div>
  776.  
  777. </body>
  778. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement