Advertisement
thanksamber

Theme 003

Jul 24th, 2014
3,513
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.70 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <!-- macfustythemes -->
  4. <head>
  5. <title>{Title}</title>
  6. {block:Description}
  7. <meta name="description" content="{MetaDescription}">
  8. {/block:Description}
  9.  
  10. <meta name="image:Header" content="https://secure.static.tumblr.com/7abf534896b41796e23ac36b32bca51a/j2tdnxz/vqxn98asw/tumblr_static_4jh7bhwiul2c0skscc48kwkos.png">
  11. <meta name="image:Background" content="">
  12. <meta name="image:SideIcon1" content="">
  13. <meta name="image:SideIcon2" content="">
  14. <meta name="image:SideIcon3" content="">
  15.  
  16.  
  17. <meta name="color:Background" content="#fff">
  18. <meta name="color:Highlight" content="#97412c">
  19. <meta name="color:Side Background" content="#fff">
  20. <meta name="color:Nav Background" content="#a84c37">
  21. <meta name="color:Text" content="#000">
  22. <meta name="color:Side Text" content="#fff">
  23. <meta name="color:Links" content="#97412c">
  24. <meta name="color:Hover" content="#000">
  25. <meta name="color:Title" content="#000">
  26.  
  27. <meta name="text:Link1" content="/">
  28. <meta name="text:Link1 Title" content="link 1">
  29. <meta name="text:Link2" content="/">
  30. <meta name="text:Link2 Title" content="link 2">
  31. <meta name="text:Link3" content="/">
  32. <meta name="text:Link3 Title" content="link 3">
  33. <meta name="text:Link4" content="/">
  34. <meta name="text:Link4 Title" content="link 4">
  35.  
  36. <meta name="if:Side Shadow" content="0">
  37. <meta name="if:Title" content="1">
  38.  
  39. <meta name="text:Box1 Label" content="About">
  40.  
  41. <meta name="text:Box2 Label" content="Box 2">
  42. <meta name="text:Box2 Content" content="">
  43.  
  44. <meta name="text:Box3 Label" content="Icon List">
  45. <meta name="text:Icon1 Label" content="Icon 1">
  46. <meta name="text:Icon2 Label" content="Icon 2">
  47. <meta name="text:Icon3 Label" content="Icon 3">
  48.  
  49. <meta name="text:Box4 Label" content="Box 3">
  50. <meta name="text:Box4 Content" content="">
  51.  
  52.  
  53. <link rel="shortcut icon" href="{Favicon}">
  54.  
  55. <link href='http://fonts.googleapis.com/css?family=Stint+Ultra+Condensed' rel='stylesheet' type='text/css'>
  56.  
  57. <!-- HTML5 Shiv -->
  58. <!--[if lt IE 9]>
  59. <script src="http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
  60. <![endif]-->
  61.  
  62. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  63. <script src="http://static.tumblr.com/j2tdnxz/DlUn7j362/jquery.sticky.js"></script>
  64. <script>
  65. $(document).ready(function(){
  66. $("#nav").sticky({topSpacing:0});
  67. });
  68. </script>
  69. <style>
  70.  
  71. body {
  72. background-color: {color:Background};
  73. background-image: url('{image:Background}');
  74. background-repeat: repeat;
  75. color: {color:Text};
  76. font-size: 11px;
  77. font-family: 'Georgia', serif;
  78. line-height: 18px;
  79. }
  80.  
  81. a {
  82. color: {color:Links};
  83. text-decoration: none;
  84. -moz-transition: all 0.5s ease;
  85. -o-transition: all 0.5s ease;
  86. -webkit-transition: all 0.5s ease;
  87. transition: all 0.5s ease;
  88. }
  89.  
  90. a:hover {
  91. color: {color:Hover};
  92. letter-spacing: 1px;
  93. }
  94.  
  95. .clear {
  96. clear: both;
  97. }
  98.  
  99. /** HEADER **/
  100.  
  101. #header {
  102. width: 70%;
  103. margin-left: 15%;
  104. }
  105.  
  106. #header img {
  107. width: 100%;
  108. }
  109.  
  110. #maintitle {
  111. width: 70%;
  112. position: absolute;
  113. margin-top: -40px;
  114. text-align: center;
  115. font-variant: small-caps;
  116. font-size: 40px;
  117. letter-spacing: 5px;
  118. color: {color:Title};
  119. }
  120.  
  121. #nav {
  122. width: 70%;
  123. margin-left: 15%;
  124. height: 30px;
  125. background-color: {color:Nav Background};
  126. line-height: 29px;
  127. text-align: center;
  128. position: relative;
  129. z-index: 2;
  130. }
  131.  
  132. #nav a {
  133. font-variant: small-caps;
  134. background-color: {color:Nav Background};
  135. color: {color:Side Text};
  136. font-size: 14px;
  137. padding: 5px 40px 6px 40px;
  138. }
  139.  
  140. #nav a:hover {
  141. background-color: {color:Background};
  142. color: {color:Links};
  143. }
  144.  
  145. pre {
  146. width: 96%;
  147. background-color: {color:Highlight};
  148. padding: 1% 2% 1% 2%;
  149. letter-spacing: 2px;
  150. font-variant: small-caps;
  151. color: {color:Side Text};
  152. font-family: 'Times', serif;
  153. }
  154.  
  155. pre a {
  156. color: {color:Side Text};
  157. }
  158.  
  159. /** CONTENT **/
  160.  
  161. #content {
  162. width: 70%;
  163. margin: 20px 0 0 15%;
  164. }
  165.  
  166. #sidebar {
  167. float: right;
  168. width: 32.1%;
  169. }
  170.  
  171. .sidehead {
  172. width: 100%;
  173. height: 50px;
  174. background-color: {color:Highlight};
  175. color: {color:Side Text};
  176. text-align: center;
  177. font-variant: small-caps;
  178. letter-spacing: 5px;
  179. line-height: 50px;
  180. font-size: 16px;
  181. margin-bottom: 10px;
  182. }
  183.  
  184. .side {
  185. width: 90%;
  186. padding: 5%;
  187. background-color: {color:Side Background};
  188. text-align: justify;
  189. margin-bottom: 10px;
  190. }
  191.  
  192. .shadow {
  193. box-shadow: 2px 2px 5px #000;
  194. }
  195.  
  196. .wantedicon {
  197. float: left;
  198. }
  199.  
  200. .wantedicon img {
  201. width: 60px;
  202. border: 5px solid {color:Highlight};
  203. }
  204.  
  205. .wanted {
  206. text-align: center;
  207. font-variant: small-caps;
  208. margin-top: 25px;
  209. font-size: 14px;
  210. }
  211.  
  212.  
  213.  
  214.  
  215. /** POSTS **/
  216.  
  217. #column {
  218. float: left;
  219. width: 64.2%;
  220. }
  221.  
  222. .post {
  223. width: 83.5%;
  224. text-align: justify;
  225. margin-bottom: 10px;
  226. }
  227.  
  228. .post img {
  229. max-width: 100%;
  230. }
  231.  
  232. .title {
  233. width: 90%;
  234. padding: 5%;
  235. font-size: 18px;
  236. letter-spacing: 5px;
  237. background-color: {color:Highlight};
  238. color: {color:Side Text};
  239. font-variant: small-caps;
  240. }
  241.  
  242. .title2 {
  243. width: 90%;
  244. padding: 5%;
  245. font-size: 18px;
  246. letter-spacing: 5px;
  247. background-color: {color:Highlight};
  248. font-variant: small-caps;
  249. text-align: justify;
  250. color: {color:Side Text};
  251. margin-bottom: 10px;
  252. }
  253.  
  254. .title3 {
  255. width: 90%;
  256. padding: 5%;
  257. font-size: 18px;
  258. letter-spacing: 5px;
  259. background-color: {color:Highlight};
  260. font-variant: small-caps;
  261. text-align: center;
  262. color: {color:Side Text};
  263. margin-bottom: 10px;
  264. }
  265.  
  266. .title3 a {
  267. color: {color:Side Text};
  268. }
  269.  
  270. .title3 a:hover {
  271. color: {color:Hover};
  272. letter-spacing: 7px;
  273. }
  274.  
  275. .player {
  276. margin-top: 20px;
  277. padding-left: 30%;
  278. }
  279.  
  280. .label {
  281. float: left;
  282. font-variant: small-caps;
  283. margin-right: 5px;
  284. font-weight: bold;
  285. }
  286.  
  287. .track {
  288. text-align: center;
  289. font-variant: small-caps;
  290. margin-top: 10px;
  291. padding: 1% 2% 1% 2%;
  292. color: {color:Side Text};
  293. }
  294.  
  295. .questionblock {
  296. float: left;
  297. background-color: {color:Highlight};
  298. width: 74%;
  299. padding: 3%;
  300. margin-bottom: 10px;
  301. }
  302.  
  303.  
  304. .question {
  305. background-color: {color:Background};
  306. width: 90%;
  307. padding: 5%;
  308. text-align: justify;
  309. }
  310.  
  311. .asker {
  312. font-variant: small-caps;
  313. font-size: 13px;
  314. letter-spacing: 2px;
  315. }
  316.  
  317. .askicon {
  318. margin: 3% 0 0 7%;
  319. float: left;
  320. width: 10%;
  321. position: relative;
  322. }
  323.  
  324. .askicon img {
  325. width: 100%;
  326. border: 7px solid {color:Highlight};
  327. }
  328.  
  329. .askicon:before
  330. {
  331. content: "";
  332. position: absolute;
  333. left: -70%;
  334. top: 30%;
  335. right: -15px;
  336. border-style: solid;
  337. border-width: 13px 0 13px 28px;
  338. border-color: transparent {color:Highlight};
  339. display: block;
  340. width: 0;
  341. z-index: 1;
  342. }
  343.  
  344. .answer {
  345. width: 80%;
  346. margin-bottom: 20px;
  347. }
  348.  
  349. .bottom {
  350. margin-bottom: 40px;
  351. }
  352.  
  353. .date {
  354. font-variant: small-caps;
  355. width: 79.3%;
  356. padding: 1% 2% 1% 2%;
  357. background-color: {color:Highlight};
  358. }
  359.  
  360. .date a {
  361. color: {color:Side Text};
  362. }
  363.  
  364. .date a:hover {
  365. color: {color:Side Text};
  366. }
  367.  
  368. .tags {
  369. text-transform: lowercase;
  370. }
  371.  
  372. .tags a {
  373. color: {color:Text};
  374. }
  375.  
  376.  
  377. /** PAGINATION */
  378.  
  379. #pagination {
  380. position: fixed;
  381. right: 0;
  382. bottom: 2%;
  383. font-variant: small-caps;
  384. font-size: 13px;
  385. width: 15%;
  386. text-align: center;
  387. }
  388.  
  389. @media (min-width:480px) {
  390. .mobile {
  391. display:none !important;
  392. }
  393. }
  394.  
  395. @media (max-width: 480px) {
  396. .mobile {
  397. display:block !important;
  398. }
  399. }
  400.  
  401.  
  402. </style>
  403. </head>
  404. <body>
  405.  
  406. <!-- HEADER -->
  407. <div id="header">
  408. <img src="{image:Header}">
  409. {block:ifTitle}<div id="maintitle">{Title}</div>{/block:ifTitle}
  410. </div>
  411. <div id="nav">
  412. <a href="/">Home</a>
  413. <a href="/ask">Ask</a>
  414. {block:ifLink1}
  415. <a href="{text:Link1}">{text:Link1 Title}</a>
  416. {/block:ifLink1}
  417. {block:ifLink2}
  418. <a href="{text:Link2}">{text:Link2 Title}</a>
  419. {/block:ifLink2}
  420. {block:ifLink3}
  421. <a href="{text:Link3}">{text:Link3 Title}</a>
  422. {/block:ifLink3}
  423. {block:ifLink4}
  424. <a href="{text:Link4}">{text:Link4 Title}</a>
  425. {/block:ifLink4}
  426. <a href="http://macfustythemes.tumblr.com/">Theme</a>
  427. </div>
  428.  
  429. <div id="content">
  430. <!-- POSTS -->
  431. <div id="column">
  432. {block:Posts}
  433. <div class="post">
  434.  
  435. {block:Text}
  436. {block:Title}<div class="title">{Title}</div>{/block:Title}
  437. {Body}
  438. {/block:Text}
  439.  
  440. {block:Photo}
  441. <img src="{PhotoUrl-500}">
  442. {block:Caption}{Caption}{/block:Caption}
  443. {/block:Photo}
  444.  
  445. {block:Photoset}
  446. {Photoset-500}
  447. {block:Caption}{Caption}{/block:Caption}
  448. {/block:Photoset}
  449.  
  450. {block:Quote}
  451. <div class="title2">{Quote}</div>
  452. {block:Source}{Source}{/block:Source}
  453. {/block:Quote}
  454.  
  455. {block:Link}
  456. <div class="title3">
  457. <a href="{Url}" target="{Target}">
  458. {Name}
  459. </a></div>
  460. {block:Description}{Description}{/block:Description}
  461. {/block:Link}
  462.  
  463. {block:Chat}
  464. {block:Title}<div class="title">{Title}</div>{/block:Title}
  465. {block:Lines}<p>
  466. {block:Label}
  467. <div class="label">{Label}</div>
  468. {/block:Label}
  469. {Line}</p>
  470. <div class="clear"></div>
  471. {/block:Lines}
  472. {/block:Chat}
  473.  
  474. {block:Audio}
  475. <div class="player">{AudioPlayerBlack}</div>
  476. <div class="track">{block:TrackName}{TrackName}{/block:TrackName} {block:Artist} / {Artist}{/block:Artist}</div>
  477. {block:Caption}{Caption}{/block:Caption}
  478. {/block:Audio}
  479.  
  480. {block:Video}
  481. {Video-500}
  482. {block:Caption}{Caption}{/block:Caption}
  483. {/block:Video}
  484.  
  485. {block:Answer}
  486. <div class="questionblock">
  487. <div class="question">
  488. <div class="asker">{Asker} asked:</div>
  489. {Question}</div>
  490. </div>
  491. <div class="askicon"><img src="{AskerPortraitUrl-128}"></div>
  492. <div class="clear"></div>
  493. <div class="answer">{Answer}</div>
  494. {/block:Answer}
  495. </div>
  496. <div class="bottom">
  497. <div class="date">
  498. {block:Date}
  499. <a href="{Permalink}">Posted {TimeAgo} with {NoteCountWithLabel}</a>
  500. {/block:Date}
  501. </div>
  502. {block:HasTags}
  503. <div class="tags">
  504. {block:Tags}<a href="{TagUrl}">#{Tag}</a> {/block:Tags}
  505. </div>
  506. {/block:HasTags}
  507. </div>
  508.  
  509. {block:PostNotes}
  510. {PostNotes}
  511. {/block:PostNotes}
  512. {/block:Posts}
  513. </div>
  514.  
  515. <!-- SIDEBAR -->
  516.  
  517. <div id="sidebar">
  518. {block:ifBox1Label}
  519. <div class="sidehead {block:ifSideShadow}shadow{/block:ifSideShadow}">{text:Box1 Label}</div>
  520. <div class="side {block:ifSideShadow}shadow{/block:ifSideShadow}">
  521. {Description}
  522. </div>
  523. {/block:ifBox1Label}
  524.  
  525. {block:ifBox2Label}
  526. <div class="sidehead {block:ifSideShadow}shadow{/block:ifSideShadow}">{text:Box2 Label}</div>
  527. <div class="side {block:ifSideShadow}shadow{/block:ifSideShadow}">
  528. {text:Box2 Content}
  529. </div>
  530. {/block:ifBox2Label}
  531.  
  532. {block:ifBox3Label}
  533. <div class="sidehead {block:ifSideShadow}shadow{/block:ifSideShadow}">{text:Box3 Label}</div>
  534. <div class="side {block:ifSideShadow}shadow{/block:ifSideShadow}">
  535. {block:ifIcon1Label}
  536. <div class="wantedicon"><img src="{image:SideIcon1}"></div>
  537. <div class="wanted">{text:Icon1 Label}</div>
  538. <div class="clear"></div>
  539. {/block:ifIcon1Label}
  540.  
  541. {block:ifIcon2Label}
  542. <div class="wantedicon"><img src="{image:SideIcon2}"></div>
  543. <div class="wanted">{text:Icon2 Label}</div>
  544. <div class="clear"></div>
  545. {/block:ifIcon2Label}
  546.  
  547. {block:ifIcon3Label}
  548. <div class="wantedicon"><img src="{image:SideIcon3}"></div>
  549. <div class="wanted">{text:Icon3 Label}</div>
  550. <div class="clear"></div>
  551. {/block:ifIcon3Label}
  552. </div>
  553. {/block:ifBox3Label}
  554.  
  555. {block:ifBox4Label}
  556. <div class="sidehead {block:ifSideShadow}shadow{/block:ifSideShadow}">{text:Box4 Label}</div>
  557. <div class="side {block:ifSideShadow}shadow{/block:ifSideShadow}">
  558. {text:Box4 Content}
  559. </div>
  560. {/block:ifBox4Label}
  561.  
  562. </div>
  563. </div>
  564.  
  565. <!-- PAGINATION -->
  566. {block:Pagination}
  567. <div id="pagination">
  568. {block:PreviousPage}<a href="{PreviousPage}">&larr; Prev</a>
  569. &nbsp;&nbsp;&nbsp;
  570. {/block:PreviousPage}
  571. {block:NextPage}
  572. <a href="{NextPage}">Next &rarr;</a>
  573. {/block:NextPage}
  574. </div>
  575. {/block:Pagination}
  576.  
  577.  
  578. </body>
  579. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement