Beautifully-Flawless

Theme 06- Preview 2

May 5th, 2014
329
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.29 KB | None | 0 0
  1. <!-- Theme 06: White & Blue by Klaroline Fantasies|Tumblr -->
  2.  
  3. <html>
  4. <head>
  5. <title>{Title}</title>
  6. <link rel="shortcut icon" href="{favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}<meta name="description"content="{MetaDescription}"/>{/block:Description}
  9.  
  10. <!--Variables-->
  11. <meta name="color:Selection" content="#B8E6FF" />
  12. <meta name="color:Scrollbar Bg" content="#B8E6FF" />
  13. <meta name="color:Background" content="#fff" />
  14. <meta name="color:Links" content="#999" />
  15. <meta name="color:Links Hover" content="#32B5FF" />
  16. <meta name="color:Posts Bg" content="#fff" />
  17. <meta name="color:Posts Border" content="#D5F0FF" />
  18. <meta name="color:Info Text" content="#32B5FF" />
  19. <meta name="color:Info Border" content="#32B5FF" />
  20. <meta name="color:Posts title" content="#B8E6FF" />
  21. <meta name="color:Permalink Icons Border" content="#75CBFC" />
  22. <meta name="color:Chat 1" content="#32B5FF" />
  23. <meta name="color:Chat 2" content="#75CBFC" />
  24. <meta name="color:Blockquote Border" content="#D5F0FF" />
  25. <meta name="color:Blockquote Bg" content="#eee" />
  26. <meta name="color:Source" content="#32B5FF" />
  27. <meta name="color:Asker Text" content="#aaa" />
  28. <meta name="color:Ask Text" content="#000" />
  29. <meta name="color:AskBox Border" content="#D5F0FF" />
  30. <meta name="color:Sidebars Bg" content="#fff" />
  31. <meta name="color:Sidebars Border" content="#D5F0FF" />
  32. <meta name="color:Description BG" content="#fff" />
  33. <meta name="color:Description Text" content="#000" />
  34. <meta name="color:Navigation Text" content="#888" />
  35. <meta name="color:Navigation Text Hover" content="32B5FF" />
  36.  
  37. <meta name="image:Background" content="" />
  38. <meta name="image:Big Sidebar" content="http://static.tumblr.com/1r3oeht/9E0n54vv5/sidebar-white.jpg" />
  39. <meta name="image:Left" content="http://static.tumblr.com/1r3oeht/UB1n54vuz/sidebar-2-white.jpg" />
  40. <meta name="image:Right" content="http://static.tumblr.com/1r3oeht/AHTn54vv0/klaus-sidebar-white.jpg" />
  41.  
  42. <meta name="text:Link 1 URL" content="" />
  43. <meta name="text:Link 2 URL" content="" />
  44. <meta name="text:Link 3 URL" content="" />
  45. <meta name="text:Link 4 URL" content="" />
  46. <meta name="text:Link 5 URL" content="" />
  47. <meta name="text:Link 6 URL" content="" />
  48. <meta name="text:Link 7 URL" content="" />
  49. <meta name="text:Link 8 URL" content="" />
  50. <meta name="text:Link 1" content="" />
  51. <meta name="text:Link 2" content="" />
  52. <meta name="text:Link 3" content="" />
  53. <meta name="text:Link 4" content="" />
  54. <meta name="text:Link 5" content="" />
  55. <meta name="text:Link 6" content="" />
  56. <meta name="text:Link 7" content="" />
  57. <meta name="text:Link 8" content="" />
  58.  
  59. <!--Variables-->
  60.  
  61. <!--Google Fonts-->
  62. <link href='http://fonts.googleapis.com/css?family=Antic|Carrois Gothic SC|Bilbo Swash Caps|Tulpen One|Fjalla One|Yanone Kaffeesatz|Metrophobic|Berkshire Swash|Felipa|Pathway Gothic One|Permanent Marker' rel='stylesheet' type='text/css'>
  63.  
  64. <style type="text/css">
  65.  
  66. #tumblr_controls{position:fixed !important;}
  67.  
  68. ::selection{background:{color:Selection};}::-moz-selection{background:{color:Selection};}::-webkit-selection{background:{color:Selection};}
  69.  
  70. ::-webkit-scrollbar-thumb{height:10px;background-color:{color:Scrollbar Bg};}
  71. ::-webkit-scrollbar{height:15px;width:5px;background-color:none;}
  72.  
  73. /* ~ BASICS ~ */
  74.  
  75. body {
  76. background-image: url('{image:Background}');
  77. background-attachment:fixed;
  78. background-position:left;
  79. background-repeat:repeat;
  80. background-color:{color:Background};
  81. }
  82.  
  83. body, div, p, textarea, submit, input {
  84. font-family:'calibri';
  85. color:{color:Text};
  86. font-size:11px;
  87. line-height:100%;
  88. text-align:justify;
  89. }
  90.  
  91. a:link, a:visited, a:active {
  92. text-decoration:none;
  93. color:{color:Links};
  94. -webkit-transition: all 0.4s ease-in-out;
  95. -moz-transition: all 0.4s ease-in-out;
  96. -o-transition: all 0.4s ease-in-out;
  97. transition: all 0.4s ease-in-out;
  98. }
  99.  
  100. a:hover {
  101. color:{color:Links Hover};
  102. text-shadow: 0px 1px 2px #625E6E;
  103. -webkit-transition: all 0.5s ease-out;
  104. -moz-transition: all 0.5s ease-out;
  105. transition: all 0.5s ease-out;
  106. }
  107.  
  108. #content{
  109. width:530px;
  110. float:left;
  111. margin-top:50px;
  112. margin-left:480px;
  113. }
  114.  
  115. .entry{
  116. float:left;
  117. padding:15px;
  118. overflow:hidden;
  119. margin-bottom:10px;
  120. background-color:{color:Posts Bg};
  121. border:4px solid {color:Posts Border};
  122. {block:IndexPage}
  123. width:500px;
  124. {/block:IndexPage}
  125. {block:PermalinkPage}
  126. width:500px;
  127. {/block:PermalinkPage}
  128. }
  129.  
  130. .entry:hover #info{
  131. -webkit-transition: all 0.5s ease-out;
  132. -moz-transition: all 0.5s ease-out;
  133. transition: all 0.5s ease-out;
  134. }
  135.  
  136. #info{
  137. font-size:10px;
  138. text-align:left;
  139. font-family:'Calibri';
  140. color:{color:Info Text};
  141. text-transform:uppercase;
  142. position:absolute;
  143. width:120px;
  144. height:auto;
  145. padding:5px;
  146. border-top:3px solid {color:Info Border};
  147. margin-left:530px;
  148. margin-top:-14px;
  149. }
  150.  
  151. #posttitle{
  152. font-family:'Fjalla One';
  153. font-size:25px;
  154. line-height:28px;
  155. color:{color:Posts title};
  156. text-align:center;
  157. text-transform:uppercase;
  158. text-shadow: 2px 1px 3px #aaa;
  159. }
  160.  
  161. .imageblog img{width:30px;height:30px;border:2px solid {color:Permalink Icons Border};margin-left:12px;margin-right:5px;}
  162.  
  163. .user_1 .label {color:{color:Chat 1}; font-weight:bold;}
  164. .user_2 .label {color:{color:Chat 2}; font-weight:bold;}
  165.  
  166. blockquote{
  167. border-left:5px solid {color:Blockquote Border};
  168. background:{color:Blockquote Bg};
  169. padding:5px;
  170. }
  171.  
  172. #postnotes {
  173. margin:0px 0px 0px 0px;
  174. width:510px;
  175. padding:5px;
  176. font-family:'calibri headings';
  177. font-size: 12px;
  178. background-color: none;
  179. }
  180.  
  181. #postnotes a {margin-top:1px;}
  182.  
  183. ol.notes li.note {padding:1px;border-bottom: solid 0px;}
  184. ol.notes li.note img.avatar {vertical-align:-4px;margin-right:0px;width:16px;height:16px;}
  185.  
  186. quote{
  187. font-family:'Permanent Marker';
  188. font-size:15px;
  189. line-height:20px;
  190. text-transform:uppercase;
  191. text-shadow: 0px 1px 2px #625E6E;
  192. }
  193.  
  194. #source{
  195. font-family:'Felipa';
  196. font-size:12px;
  197. line-height:12px;
  198. color:{color:Source};
  199. text-transform:none;
  200. letter-spacing:1px;
  201. text-align:right;
  202. }
  203.  
  204. asker{
  205. font-family:'Felipa';
  206. font-size:20px;
  207. line-height:20px;
  208. text-transform:none;
  209. color:{color:Asker Text};
  210. }
  211.  
  212. #ask{
  213. padding:6px;
  214. font-family:'Calibri';
  215. font-size:9px;
  216. text-transform:uppercase;
  217. color:{color:Ask Text};
  218. }
  219.  
  220. #askbox{
  221. border:2px solid {color:AskBox Border};
  222. overflow:hidden;
  223. margin-top:3px;
  224. padding:10px;
  225. box-shadow: 0px 2px 2px #000;
  226. }
  227.  
  228.  
  229. /* DESIGN */
  230.  
  231. #leftside{
  232. position:fixed;
  233. width:300px;
  234. height:100%;
  235. left:0px;
  236. top:40px;
  237. background{color:Sidebars Bg};
  238. z-index:9999;
  239. }
  240.  
  241. #leftside img{width:100%;height:600px;}
  242.  
  243. #rec{
  244. position:fixed;
  245. width:100px;
  246. height:100%;
  247. left:300px;
  248. top:39px;
  249. background:{color:Sidebars Bg};
  250. border-right:6px solid {color:Sidebars Border};
  251. z-index:9999;
  252. }
  253.  
  254. #rec img{width:100%;height:600px;}
  255.  
  256. #recc{
  257. position:fixed;
  258. width:100px;
  259. height:100%;
  260. right:0px;
  261. top:39px;
  262. background:{color:Sidebars Bg};
  263. border-left:6px solid {color:Sidebars Border};
  264. z-index:9999;
  265. }
  266.  
  267. #recc img{width:100%;height:600px;}
  268.  
  269. #des{
  270. position:absolute;
  271. background:{color:Description BG};
  272. border:1px solid {color:Sidebars Border};
  273. width:260px;
  274. max-height:120px;
  275. padding:5px;
  276. left:13px;
  277. top:420px;
  278. color:{color:Description Text};
  279. z-index:9999;
  280. text-align:center;
  281. font-family:'Arial';
  282. font-size:9px;
  283. line-height:10px;
  284. }
  285.  
  286. #navibox{
  287. position:fixed;
  288. width:100%;
  289. height:15px;
  290. left:0px;
  291. top:0px;
  292. padding:10px;
  293. line-height:20px;
  294. z-index:9999;
  295. background:{color:Background};
  296. text-align:center;
  297. box-shadow: 0px 2px 2px #aaa;
  298. }
  299.  
  300. #navibox a{
  301. float:center;
  302. display:inline-block;
  303. font-family:'Calibri';
  304. font-size:12px;
  305. text-transform:uppercase;
  306. margin-right:30px;
  307. text-align:center;
  308. color:{color:Navigation Text} !important;
  309. border-radius:30px;
  310. -webkit-transition: all 0.5s ease-in-out;
  311. -moz-transition: all 0.5s ease-in-out;
  312. -o-transition: all 0.5s ease-in-out;
  313. }
  314.  
  315. #navibox a:hover{
  316. color:{color:Navigation Text Hover} !important;
  317. -webkit-transition: all 0.5s ease-in-out;
  318. -moz-transition: all 0.5s ease-in-out;
  319. -o-transition: all 0.5s ease-in-out;
  320. }
  321.  
  322. #pagination{
  323. position:absolute;
  324. width:100px;
  325. height:10px;
  326. left:0px;
  327. top:400px;
  328. padding:6px;
  329. line-height:10px;
  330. z-index:9999;
  331. text-align:center;
  332. }
  333.  
  334. .jump_page {
  335. padding: 2px 3px;
  336. background-color:#eee;
  337. color:#aaa;
  338. font-family:century gothic;
  339. font-size:11px;
  340. text-decoration:none;
  341. }
  342.  
  343.  
  344. .current_page, .jump_page:hover {
  345. padding: 2px 3px;
  346. background-color:#B8E6FF;
  347. color:#000;
  348. font-family:century gothic;
  349. font-size:11px;
  350. text-decoration:none;
  351. }
  352.  
  353. </style>
  354. <body>
  355.  
  356. <div id="navibox">
  357. <a href="/">Refresh</a>
  358. <a href="/ask">Inbox</a>
  359. <a href="/submit">Submit</a>
  360. <a href="/archive">History</a>
  361. {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
  362. {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}
  363. {block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}
  364. {block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifLink4}
  365. {block:ifLink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:ifLink5}
  366. {block:ifLink6}<a href="{text:Link 6 URL}">{text:Link 6}</a>{/block:ifLink6}
  367. {block:ifLink7}<a href="{text:Link 7 URL}">{text:Link 7}</a>{/block:ifLink7}
  368. {block:ifLink8}<a href="{text:Link 8 URL}">{text:Link 8}</a>{/block:ifLink8}
  369. <a href="http://klaroline-fantasies.tumblr.com/">Credit</a>
  370. </div>
  371.  
  372. <div id="leftside">
  373. <div id="des">
  374. {Description}
  375. </div>
  376. <img src="{image:Big Sidebar}">
  377. </div>
  378. </div>
  379.  
  380. <div id="rec"><img src="{image:Left}">
  381. <div id="pagination">
  382. <center>
  383. {block:Pagination}
  384. {block:PreviousPage}<a href="{PreviousPage}" class="jump_page">&laquo;</a>{/block:PreviousPage}
  385. {block:JumpPagination length="5"}
  386. {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  387. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  388. {block:NextPage}<a href="{NextPage}" class="jump_page">&raquo;</a>{/block:NextPage}
  389. {/block:Pagination}
  390. </center>
  391. </div>
  392. </div>
  393. <div id="recc"><img src="{image:Right}"></div>
  394.  
  395. <div id="content">
  396. {block:Posts}
  397. <div class="entry">
  398.  
  399. {Block:IndexPage}
  400. <div id="info">
  401. <center>
  402. <a href="{permalink}">{NoteCount} Notes</a> . <a href="{ReblogURL}">Reblog</a>
  403. </center>
  404. <br>
  405. {block:ContentSource}
  406. <a href="{SourceURL}"title="source"> </a>
  407. {block:ContentSource}
  408. {block:RebloggedFrom}
  409. <div class="imageblog">
  410. <a href="{ReblogParentURL}"title="{ReblogParentName}">
  411. <img src="{ReblogParentPortraitURL-40}"></a>
  412. <a href="{ReblogRootURL}"title="{ReblogRootName}">
  413. <img src="{ReblogRootPortraitURL-40}"></a>
  414. </div>
  415. {/block:RebloggedFrom}
  416. <br>
  417. {block:HasTags}
  418. {block:Tags}# <a href="{TagURL}">{Tag}</a><br> {/block:Tags}
  419. {/block:HasTags}
  420. </div>
  421. {/Block:IndexPage}
  422.  
  423. {block:Text}
  424. {block:Title}
  425. <div id="posttitle">{Title}</div>
  426. {/block:Title}
  427. {Body}
  428. {/block:Text}
  429.  
  430. {block:Photo}
  431. {LinkOpenTag}
  432. <a href="{permalink}">
  433. <img class="photo"src="{PhotoURL-HighRes}"alt="{PhotoAlt}"width="100%"></a>
  434. {LinkCloseTag}
  435. {block:Caption}
  436. {Caption}
  437. {/block:Caption}
  438. {/block:Photo}
  439.  
  440. {block:Photoset}
  441. {Photoset-500}
  442. {block:Caption}
  443. {Caption}
  444. {/block:Caption}
  445. {/block:Photoset}
  446.  
  447. {block:Quote}
  448. <quote>{Quote}</quote>
  449. {block:Source}
  450. <div id="source">-{Source}</div>
  451. {/block:Source}
  452. {/block:Quote}
  453.  
  454. {block:Link}
  455. <a href="{URL}">{Target}<div id="posttitle">{Name}</div></a>
  456. {block:Description}{Description}{/block:Description}
  457. {/block:Link}
  458.  
  459. {block:Chat}
  460. {block:Title}<div id="posttitle">{Title}</div>{/block:Title}
  461. <ul class="chat">
  462. {block:Lines}
  463. <li class="user_{UserNumber}">
  464.  
  465. {block:Label}
  466. <span class="label">{Label}</span>
  467.  
  468. {/block:Label}
  469.  
  470. &nbsp;{Line}</li>
  471. {/block:Lines}</ul>
  472. {/block:Chat}
  473.  
  474. {block:Audio}
  475. {AudioPlayerWhite}
  476. {block:Caption}
  477. {Caption}
  478. {/block:Caption}
  479. {/block:Audio}
  480.  
  481. {block:Video}
  482. {Video-500}
  483. {block:Caption}{Caption}{/block:Caption}
  484. {/block:Video}
  485.  
  486. {block:Answer}
  487. <div id="askbox">
  488. <img src="{AskerPortraitURL-40}" width="40" align="left" style="margin-right:6px;border:2px solid #444;"/>
  489. <asker>{Asker}:</asker>
  490. <div id="ask">{Question}</div>
  491. </div>
  492. {Answer}
  493. {/block:Answer}
  494.  
  495. {block:PermalinkPage}
  496. <center>
  497. <br>
  498.  
  499. {block:NoteCount}
  500. {NoteCountWithLabel}
  501. {/block:NoteCount}
  502.  
  503. {block:HasTags}
  504. &middot;{block:Tags}<a href="TagURL">#{Tag}</a>{/block:Tags}
  505. {/block:hasTags}
  506. </center>
  507. {/block:PermalinkPage}
  508.  
  509. {block:PostNotes}{PostNotes}{/block:PostNotes}
  510.  
  511. </div>
  512. {/block:Posts}
  513. </div>
  514. </body>
  515. </html>
Advertisement
Add Comment
Please, Sign In to add comment