Advertisement
harreyeh

theme blog theme v2

Mar 20th, 2014
438
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.96 KB | None | 0 0
  1. <head>
  2. <title>{title}</title>
  3. <!--- change the title of the page here --->
  4.  
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <!---
  7.  
  8. ᴛʜᴇᴍᴇ ʙʏ ʜᴀʀᴅᴢɪᴀᴍ
  9. please don't take off the credit it's really small!!!!
  10.  
  11.  
  12. ╭━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮ ╭━━┳╮╱╱╭╮
  13. ┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃ ┃╭╮┃╰╮╭╯┃
  14. ╰╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮ ┃╰╯╰╮╰╯╭╯
  15. ╱╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃ ┃╭━╮┣╮╭╯
  16. ╱╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃ ┃╰━╯┃┃┃
  17. ╱╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯ ╰━━━╯╰╯
  18. ╭╮╱╭┳━━━┳━━━┳━━━┳━━━━┳━━┳━━━┳━╮╭━╮
  19. ┃┃╱┃┃╭━╮┃╭━╮┣╮╭╮┣━━╮━┣┫┣┫╭━╮┃┃╰╯┃┃
  20. ┃╰━╯┃┃╱┃┃╰━╯┃┃┃┃┃╱╭╯╭╯┃┃┃┃╱┃┃╭╮╭╮┃
  21. ┃╭━╮┃╰━╯┃╭╮╭╯┃┃┃┃╭╯╭╯╱┃┃┃╰━╯┃┃┃┃┃┃
  22. ┃┃╱┃┃╭━╮┃┃┃╰┳╯╰╯┣╯━╰━┳┫┣┫╭━╮┃┃┃┃┃┃
  23. ╰╯╱╰┻╯╱╰┻╯╰━┻━━━┻━━━━┻━━┻╯╱╰┻╯╰╯╰╯
  24.  
  25.  
  26. hardziam.tumblr.com // themesbyzsu.tumblr.com
  27.  
  28. --->
  29.  
  30. <meta name="color:Link" content="#eee">
  31. <meta name="color:Link Hover" content="#222">
  32.  
  33. <meta name="text:Blog URL" content="put your blog url here!!!" />
  34. <meta name="text:Link1" content="link" />
  35. <meta name="text:Link1 URL" content="/" />
  36. <meta name="text:Link2" content="link" />
  37. <meta name="text:Link2 URL" content="/" />
  38. <meta name="text:Link3" content="link" />
  39. <meta name="text:Link3 URL" content="/" />
  40. <meta name="text:Link4" content="link" />
  41. <meta name="text:Link4 URL" content="/" />
  42. <meta name="text:Link5" content="link" />
  43. <meta name="text:Link5 URL" content="/" />
  44.  
  45. <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
  46. <script type="text/javascript" src="http://static.tumblr.com/tiu5k68/xTkm8wqw2/tumblr-title-qtip.js"></script>
  47.  
  48.  
  49. <style type="text/css">
  50.  
  51. ::-webkit-scrollbar {background-color:none; border:3px solid #fff;height:4px; width:4px; opacity:0.5;}
  52. ::-webkit-scrollbar-thumb:vertical {background-color:#eee; border:2px solid #eee; height:40px;opacity:0.5;}
  53. ::-webkit-scrollbar-thumb:horizontal {background-color:#eee;border:2px solid #eee; opacity:0.5; height:8px!important}
  54.  
  55. div#qTip {
  56. text-align: center;
  57. text-transform: lowercase;
  58. letter-spacing: 0px;
  59. background: #000000;
  60. display: none;
  61. font-style: italic;
  62. font-family: times;
  63. max-width: 350px;
  64. min-width:50px;
  65. position: absolute;
  66. z-index: 9999;
  67. color: white;
  68. font-size: 9px;
  69. padding: 4px;
  70. line-height: 10px;
  71. margin: -5px 0 0 10px;
  72. border-radius: 2px;
  73. letter-spacing: 1px;
  74. }
  75.  
  76. body { /*here you can put in a background */
  77. padding: 0;
  78. margin:auto;
  79. position:absolute;
  80. font-size:10px;
  81. font-family: 'Lato' sans-serif;
  82. }
  83.  
  84. a {
  85. text-decoration:none;
  86. outline:none;
  87. color:{color:Link};
  88. -webkit-transition: all 0.5s ease-in-out;
  89. -moz-transition: all 0.5s ease-in-out;
  90. -o-transition: all 0.5s ease-in-out;
  91. }
  92.  
  93. a:hover {
  94. color:{color:Link Hover};
  95. -webkit-transition: all 0.5s ease-in-out;
  96. -moz-transition: all 0.5s ease-in-out;
  97. -o-transition: all 0.5s ease-in-out;
  98. }
  99.  
  100. pre{
  101. width:250px;
  102. text-align:left;
  103. overflow:auto;
  104. background:#f8f8f8;
  105. }
  106. #thing{
  107. }
  108.  
  109. #cont {
  110. width:700px;
  111. height:600px;
  112. background:white;
  113. position:fixed;
  114. left:100px;
  115. top:0px;
  116. margin-top:90px;
  117. overflow:auto;
  118. }
  119.  
  120. #info {
  121. background:#fff;
  122. padding:5px 10px 5px 10px;
  123. color:#ddd;
  124. width:310px;
  125. text-align:center;
  126. margin-bottom:-6px;
  127. margin-left:-20px;
  128. z-index:100000;
  129. }
  130.  
  131. .line {
  132. background:#ddd;
  133. margin-top:5px;
  134. height:1px;
  135. width:310px;
  136. margin-bottom:-7px;
  137. }
  138.  
  139. .date{
  140. background:white;
  141. margin-left:40px;
  142. width:85px;
  143. }
  144.  
  145. .tags{
  146. display:none;
  147. }
  148.  
  149. #posts {
  150. width:320px;
  151. padding:5px;
  152. height:95%;
  153. left:801px;
  154. text-align:center;
  155. top:0px;
  156. position:fixed;
  157. padding-top:20px;
  158. overflow:auto;
  159. border:solid black;
  160. border-width:0px 0px 0px 1px;
  161. background:white;
  162. }
  163.  
  164. #post{
  165. width:300px;
  166. padding:5px;
  167. text-align:left;
  168. font-size:10px;
  169. margin-bottom:30px;
  170. }
  171.  
  172. #post img{
  173. max-width:250px;
  174. }
  175.  
  176. #profiles {
  177. width:100%;
  178. height:100%;
  179. background:#fff;
  180. }
  181.  
  182. .dudes {
  183. height:220%;
  184. z-index:99999;
  185. top:20px;
  186. }
  187.  
  188. .dude {
  189. width:200px;
  190. height:130px;
  191. overflow:hidden;
  192. background-color:#fff;
  193. padding-right:10px;
  194. position:relative;
  195. -webkit-transition-duration:.8s;
  196. -moz-transition-duration:.8s;
  197. -o-transition-duration:.8s;
  198. -ms-transition-duration:.8s;
  199. }
  200.  
  201. .header {
  202. color:#333;
  203. font-family:Lato;
  204. text-transform:uppercase;
  205. letter-spacing:2px;
  206. padding:10px;
  207. text-align:center;
  208. }
  209.  
  210.  
  211. #header {
  212. color:#333;
  213. font-family:Lato;
  214. text-transform:uppercase;
  215. letter-spacing:2px;
  216. padding:10px;
  217. text-align:center;
  218. position:fixed;
  219. width:680px;
  220. background:white;
  221. z-index:1000000000;
  222. top:10px;
  223. padding-top:20px;
  224. border-bottom:1px solid black;
  225. }
  226. #header a{
  227. color:#333;
  228. font-weight:bold;
  229. display:inline-block;
  230. font-style:none;
  231. font-size:9px;
  232. padding:3px;
  233. letter-spacing:2px;
  234. border:1px solid white;
  235. }
  236.  
  237. #header a:hover{
  238. border:1px solid #333;
  239. }
  240.  
  241. .icon {
  242. width:200px;
  243. height:150px;
  244. z-index:1;
  245. overflow:hidden;
  246. margin-left:0px;
  247. -webkit-transition-duration:.8s;
  248. -moz-transition-duration:.8s;
  249. -o-transition-duration:.8s;
  250. -ms-transition-duration:.8s;
  251. }
  252.  
  253. .icon img {
  254. width:200px;
  255. height:130px;
  256. z-index:-999;
  257. -webkit-transition-duration:.8s;
  258.  
  259. }
  260.  
  261. td {
  262. width:150px;
  263. -webkit-transition-duration:.4s;
  264. -moz-transition-duration:.4s;
  265. -o-transition-duration:.4s;
  266. -ms-transition-duration:.4s;
  267.  
  268. }
  269.  
  270.  
  271. .name {
  272. width:200px;
  273. margin-left:0px;
  274. font-size:9px;
  275. font-family:Lato;
  276. text-transform:uppercase;
  277. text-align:center;
  278. letter-spacing:5px;
  279. position:absolute;
  280. margin-top:0px;
  281. color:white;
  282. -webkit-transition-duration:.7s;
  283. -moz-transition-duration:.7s;
  284. -o-transition-duration:.7s;
  285. -ms-transition-duration:.7s;
  286. }
  287.  
  288. .name a {
  289. display:block;
  290. color:black;
  291. font-weight:bold;
  292. padding:5px 10px 5px 10px;
  293. border-bottom:3px solid rgba(0,0,0,0.4);
  294. background-color:rgba(255,255,255,0.8);
  295. width:180px;
  296. }
  297.  
  298.  
  299. td:hover .icon img {
  300. z-index:-999;
  301. }
  302.  
  303.  
  304. td:hover .name {
  305. margin-top:-150px;
  306. }
  307.  
  308. .description {
  309. background:white;
  310. color:#222;
  311. display:block;
  312. width:185px;
  313. min-height:110px;
  314. position:absolute;
  315. text-align:center;
  316. margin-top:30px;
  317. text-transform:uppercase;
  318. padding:10px;
  319. font-family:'Lato' sans-serif;
  320. font-size:9px;
  321. letter-spacing:1px;
  322. margin-left:-5px;
  323. -webkit-transition-duration:.7s;
  324. -moz-transition-duration:.7s;
  325. -o-transition-duration:.7s;
  326. -ms-transition-duration:.7s;
  327.  
  328. }
  329.  
  330. .description a{
  331. color:#000;
  332. border-bottom:1px solid white;
  333. -webkit-transition-duration:.8s;
  334. -moz-transition-duration:.8s;
  335. -o-transition-duration:.8s;
  336. -ms-transition-duration:.8s;
  337. }
  338.  
  339. .description a:hover{
  340. color:black;
  341. border-bottom:1px solid black;
  342. -webkit-transition-duration:.4s;
  343. -moz-transition-duration:.4s;
  344. -o-transition-duration:.4s;
  345. -ms-transition-duration:.4s;
  346. }
  347.  
  348. td:hover .description {
  349. margin-top:-120px;
  350. }
  351.  
  352. .etc {
  353. border-bottom:1px solid #eee;
  354. margin-bottom:15px;
  355. }
  356. .etc a{
  357. display:inline-block;
  358. width:10px;
  359. height:10px;
  360. background:#ddd;
  361. overflow:hidden;
  362. margin-bottom:-6px;
  363. }
  364.  
  365. .etc a:first-child{
  366. background:#333; border:1px solid #333;
  367. }
  368. .etc a:nth-of-type(2n+0) {BACKGROUND-COLOR: #aaa; border:1px solid #aaa}
  369. .etc a:nth-of-type(3n+0) {BACKGROUND-COLOR: #ccc; border:1px solid #ccc}
  370. .etc a:nth-of-type(4n+0) {BACKGROUND-COLOR: #eee; border:1px solid #eee}
  371.  
  372. .etc a:hover{
  373. background:white;
  374. }
  375.  
  376. blockquote {
  377. margin-left:10px;
  378. border-left:2px solid #eee;
  379. padding-left:5px;
  380. }
  381.  
  382. #credit a{
  383. position:fixed;
  384. right:3px;
  385. bottom:3px;
  386. padding:4px;
  387. width:15px;
  388. text-transform:none;
  389. font-family: 'Lato' sans-serif;
  390. font-weight:none;
  391. letter-spacing:1px;
  392. font-size:9px;
  393. border:1px solid;
  394. outline:3px solid white;
  395. opacity:1;
  396. border-color:#bbb;
  397. background: #fff;
  398. -moz-transition-duration:1s;
  399. -webkit-transition-duration:1s;
  400. -o-transition-duration:1s;
  401. }
  402.  
  403. #credit span{
  404. position:fixed;
  405. bottom:4px;
  406. height:9px;
  407. color:white;
  408. padding:5px;
  409. line-height:9px;
  410. right:-90px;
  411. background:black;
  412. text-transform:uppercase;
  413. letter-spacing:2px;
  414. font-weight:300;
  415. -moz-transition-duration:1s;
  416. -webkit-transition-duration:1s;
  417. -o-transition-duration:1s;
  418. }
  419.  
  420. #credit:hover span{
  421. right:30px;
  422. -moz-transition-duration:1s;
  423. -webkit-transition-duration:1s;
  424. -o-transition-duration:1s;
  425. }
  426. #credit a:hover {
  427. opacity:1;
  428. width:15px;
  429. border-color:black;
  430. color:black;
  431. -moz-transition-duration:0.5s;
  432. -webkit-transition-duration:0.5s;
  433. -o-transition-duration:0.5s;
  434. }
  435.  
  436.  
  437. ol.notes {
  438. padding: 0px;
  439. margin: 25px 30px;
  440. list-style-type: none;
  441. text-align:center;
  442. position: relative;
  443. z-index: 2;
  444. text-transform: uppercase;
  445. font-size: 9px;
  446. letter-spacing:1px;
  447. clear:both;}
  448.  
  449. ol.notes a {color: {color:Link};}
  450.  
  451. ol.notes li.note {padding: 10px;}
  452.  
  453. ol.notes li.note img.avatar {
  454. vertical-align: -4px;
  455. margin-right: 10px;
  456. width: 16px;
  457. height: 16px;}
  458.  
  459. ol.notes li.note span.action {font-weight: normal;}
  460.  
  461. ol.notes li.note .answer_content {font-weight: normal;}
  462.  
  463. ol.notes li.note blockquote {
  464. border-color: #eee;
  465. padding: 4px 10px;
  466. margin: 10px 0px 0px 25px;}
  467.  
  468. ol.notes li.note blockquote a {text-decoration: none;}
  469.  
  470. </style>
  471.  
  472.  
  473. </head>
  474.  
  475. <body>
  476.  
  477. <div id="cont">
  478.  
  479. <div id="posts">
  480. {block:Posts}
  481. <div id="post">
  482.  
  483. <div class="etc">
  484. <a href="{ReblogURL}" title="reblog"></a>
  485. {block:NoteCount}<a href="{Permalink}" title="{NoteCountWithLabel}"></a>{/block:NoteCount}
  486. {block:RebloggedFrom}
  487. <a href="{ReblogParentURL}" title="via"></a>
  488. {block:ContentSource} <a href="{SourceURL}" title="source"></a>{block:ContentSource}{/block:RebloggedFrom}
  489. </div>
  490.  
  491. {block:Text}<h1>{title}</h1>{Body}{/block:Text}
  492.  
  493. {block:Quote}<h2>“{Quote}” — {Source}</h2>{/block:Quote}
  494.  
  495. {block:Link}<a href="{URL}" class="link" {Target}> <h2>{Name}</h2></a>
  496. {block:Description}<P>{Description}</p>{/block:Description}{/block:Link}
  497.  
  498. {block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-250}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  499. {block:Photoset}<center>{Photoset-250}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  500.  
  501. {block:Chat}{block:Title}<t>{Title}</t><br>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  502. {block:Video}{Video-250}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  503.  
  504. {block:Answer}
  505. <div id="question" style="background:#eee; padding:5px;">
  506. <div class="q">{Question} - {Asker}</div>
  507. </div>
  508.  
  509. <div id="answer">
  510. {Answer}
  511. </div>
  512. {/block:Answer}
  513.  
  514.  
  515.  
  516. {block:Audio}
  517.  
  518. {block:AlbumArt}
  519.  
  520. <div id="audio">
  521. <div class="album_art">
  522. <img width="100px" style="float:right" src="{AlbumArtURL}" alt="{block:Artist}{Artist}{/block:Artist}{block:TrackName} - ckName}{/block:TrackName}" style="margin-bottom:10px;" />
  523. {/block:AlbumArt}
  524.  
  525.  
  526.  
  527.  
  528. <div class="audio">
  529.  
  530. <div class="meta">
  531. <div class="player" style="float:right; width:25px; overflow:hidden; background:#eee; margin-bottom:-10px; border:10px solid #eee">{AudioPlayerWhite}</div>
  532.  
  533. <font style="font-weight:bold; letter-spacing:1px; font-size:12px; text-transform:uppercase;">{block:TrackName}{TrackName}{/block:TrackName}</font><br>
  534.  
  535. {block:Artist}{Artist}{/block:Artist}<br>
  536. {block:PlayCount}{PlayCountWithLabel}{/block:PlayCount}
  537.  
  538. </div> </div>
  539. </div>
  540. <div id="caption">
  541. {Caption}
  542. </div>
  543. </div>
  544. {/block:Audio}
  545.  
  546.  
  547.  
  548. <div id="info">
  549. <div class="line"></div>
  550. <div class="date">
  551. <a href="{Permalink}" title="{TimeAgo}"><span style="text-transform:uppercase; letter-spacing:1px;">{ShortDayOfWeek} {DayOfMonthWithZero} {Year}</span></a> </a>{/block:Date}
  552. </div>
  553. <div class="tags">
  554.  
  555. {block:HasTags} {block:Tags}<a href="{TagURL}">{Tag};</a> {/block:Tags}{/block:HasTags}</div></div></div><br>
  556. {/block:Posts}
  557.  
  558. {block:PreviousPage}<a href="{PreviousPage}">prev</a>{/block:PreviousPage} //
  559. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  560.  
  561. {block:PostNotes}
  562. {PostNotes-16}
  563. {/block:PostNotes}
  564. </div>
  565. <div class="dudes">
  566. <div id="profiles">
  567.  
  568.  
  569. <div id="header"><img src="{PortraitURL-40}" style="float:left"><big><big>{Title}</big><br>
  570.  
  571. <a href="{text:Link1 URL}">{text:Link1}</a>
  572. <a href="{text:Link2 URL}">{text:Link2}</a>
  573. <a href="{text:Link3 URL}">{text:Link3}</a>
  574. <a href="{text:Link4 URL}">{text:Link4}</a>
  575. <a href="{text:Link5 URL}">{text:Link5}</a>
  576.  
  577.  
  578. </big>
  579. </div>
  580.  
  581.  
  582.  
  583. <!---------
  584.  
  585.  
  586.  
  587.  
  588. HELLO!
  589. PUT YOUR THEMES BELOW THIS BIT HERE!!!!!!
  590.  
  591.  
  592.  
  593.  
  594.  
  595. ---------->
  596.  
  597.  
  598.  
  599.  
  600.  
  601. <div class="header">themes<br><span style="font-style:italic;text-transform:none;font-size:7px;letter-spacing:2px;">
  602. themes description.
  603. </span></div>
  604.  
  605.  
  606. <table align="center">
  607. <tr>
  608.  
  609. <td>
  610. <div class="dude">
  611. <div class="icon"><img src="THEME IMAGE URL"></div>
  612. <div class="name">
  613. <a href="/">- THEME NAME -<br>
  614. <small><small>short subtitle</small></small></a>
  615. </div>
  616.  
  617.  
  618. <div class="description">
  619. theme description <p>
  620. <a href="PREVIEW URL">preview</a> - <a href="CODE/POST URL">info</a>
  621. </p>
  622. </div>
  623. </div>
  624. </td>
  625.  
  626.  
  627.  
  628.  
  629.  
  630.  
  631. <!------- PUT YOUR NEXT THEMES UNDER THIS.
  632.  
  633.  
  634. --------------------------------------------------------------------
  635. !!!! IMPORTANT NOTE !!!!!!
  636.  
  637. each theme table has three columns, so after every three themes, you NEED to add in this:
  638.  
  639. </tr></table><br><table align="center"><tr>
  640.  
  641. and then you just add in the next theme like normal. version one is a lot more simple to understand so you may just want to use that one!!!
  642.  
  643. !!!! IMPORTANT NOTE !!!!!!
  644. --------------------------------------------------------------------
  645.  
  646.  
  647. copy this template for each new theme. If the theme is new, add in this:
  648.  
  649. <font style="color:red; font-weight:bold; font-style:italic">New!</font>
  650.  
  651.  
  652.  
  653. <td>
  654. <div class="dude">
  655. <div class="icon"><img src="THEME IMAGE URL"></div>
  656. <div class="name">
  657. <a href="/">- THEME NAME -<br>
  658. <small><small>short subtitle</small></small></a>
  659. </div>
  660.  
  661.  
  662. <div class="description">
  663. theme description <p>
  664. <a href="PREVIEW URL">preview</a> - <a href="CODE/POST URL">info</a>
  665. </p>
  666. </div>
  667. </div>
  668. </td>
  669.  
  670.  
  671.  
  672. --------->
  673.  
  674.  
  675. </tr>
  676. </table>
  677.  
  678.  
  679. <div class="header">pages<br><span style="font-style:italic;text-transform:none;font-size:7px;letter-spacing:2px;">here you can put in a little pages description.</span></div>
  680. <br>
  681. <br>
  682.  
  683.  
  684. <table align="center">
  685. <tr>
  686.  
  687.  
  688. <!------------
  689.  
  690.  
  691. PAGES START HERE.
  692. add new themes in the exact same way as above.
  693.  
  694.  
  695. -------------->
  696.  
  697.  
  698. <td>
  699. <div class="dude">
  700. <div class="icon"><img src="THEME IMAGE URL"></div>
  701. <div class="name">
  702. <a href="/">- THEME NAME -<br>
  703. <small><small>short subtitle</small></small></a>
  704. </div>
  705.  
  706.  
  707. <div class="description">
  708. theme description <p>
  709. <a href="PREVIEW URL">preview</a> - <a href="CODE/POST URL">info</a>
  710. </p>
  711. </div>
  712. </div>
  713. </td>
  714.  
  715.  
  716.  
  717.  
  718.  
  719. <!--- end pages ---->
  720. </tr>
  721. </table>
  722.  
  723.  
  724.  
  725.  
  726.  
  727.  
  728. <br><br>
  729. <div style="width:100%; height:0; border-bottom:1px solid black;"></div>
  730. <div class="header">questions?<br><span style="font-style:italic;text-transform:none;font-size:7px;letter-spacing:2px;">
  731.  
  732.  
  733. here you can write a little message about the type of questions you answer, and it can be as long as you'd like.
  734.  
  735.  
  736. </span></div>
  737. <br>
  738.  
  739. <iframe style="margin-left:10px" frameborder="0" height="190px" id="ask_form" scrolling="no" src="http://www.tumblr.com/ask_form/{text:Blog URL}.tumblr.com" width="95%"></iframe>
  740. </div>
  741. </div>
  742.  
  743.  
  744.  
  745. <div id="credit">
  746. <span>theme credit</span>
  747. <a href="http://hardziam.tumblr.com">HZ</a></div>
  748. </body>
  749. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement