API tools faq
paste
Advertisement
vassilias

Theme 01. Vermillion

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