Advertisement
shutupstrax

Theme 4 by shutupstrax

Nov 9th, 2013
962
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.44 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!---- THEME 4 BY SHUTUPSTRAX PLEASE DO NOT REMOVE THE CREDIT OR CLAIM AS YOUR OWN AND DON'T USE AS A BASE ANY QUESTIONS JUST ASK ME AND EDIT AS YOU WISH (...)--->
  4.  
  5.  
  6. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  7. <head><title>{Title}</title>
  8. <link rel="shortcut icon" href="{Favicon}">
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  10. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  11. <link href='http://fonts.googleapis.com/css?family=Andika|Gentium+Basic|Arapey|Metrophobic' rel='stylesheet' type='text/css'>
  12.  
  13. <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
  14.  
  15. <link href='http://fonts.googleapis.com/css?family=Anaheim' rel='stylesheet' type='text/css'>
  16.  
  17. <link href='http://fonts.googleapis.com/css?family=Arapey' rel='stylesheet' type='text/css'>
  18.  
  19. <link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
  20.  
  21.  
  22.  
  23. <meta name="color:next" content="#b8b8b8"/>
  24. <meta name="color:Background" content="#ffffff"/>
  25. <meta name="color:Sidebar" content="#ffffff"/>
  26. <meta name="color:Text" content="#a8a8a8"/>
  27. <meta name="color:Link" content="#b8b8b8"/>
  28. <meta name="color:Tags" content="f0f0f0"/>
  29. <meta name="color:Hover" content="#f2f2f2"/>
  30. <meta name="color:linkhover" content="#f2f2f2"/>
  31. <meta name="color:titlecolor" content="#f2f2f2"/>
  32. <meta name="color:linkbackground" content="#f2f2f2"/>
  33. <meta name="color:discription" content="#f2f2f2"/>
  34. <meta name="color:titlebackground" content="#f2f2f2"/>
  35. <meta name="color:title" content="#f2f2f2"/>
  36. <meta name="color:Line" content="#f2f2f2"/>
  37. <meta name="color:Border" content="#e4e4e4"/>
  38. <meta name="color:Post" content="#ffffff"/>
  39. <meta name="color:Answer" content="#f8f8f8"/>
  40. <meta name="color:linkbackground" content="#f8f8f8"/>
  41. <meta name="color:links" content="#f8f8f8"/>
  42. <meta name="image:sidebar" content=""/>
  43. <meta name="image:sidebar2" content=""/>
  44. <meta name="image:sidebar3" content=""/>
  45. <meta name="image:sidebar4" content=""/>
  46. <meta name="image:Background" content=""/>
  47. <meta name="text:Link 1" content="" />
  48. <meta name="text:Link 1 Text" content="" />
  49. <meta name="text:Link 2" content="" />
  50. <meta name="text:Link 2 Text" content="" />
  51. <meta name="text:Link 3" content="" />
  52. <meta name="text:Link 3 Text" content="" />
  53.  
  54.  
  55.  
  56.  
  57. <meta name="if:Show Link 1" content="1" />
  58. <meta name="if:Show Link 2" content="1" />
  59. <meta name="if:Show Link 3" content="1" />
  60.  
  61.  
  62. <meta name="color:scrollbarbg" content="ffffff"/>
  63.  
  64.  
  65. <style type="text/css">
  66.  
  67. /* --- SCROLLBAR ---*/
  68.  
  69. ::-webkit-scrollbar {
  70. width: 5px;height: 5px;}
  71. ::-webkit-scrollbar-button:start:decrement,
  72. ::-webkit-scrollbar-button:end:increment {
  73. height: 6px;display: block;background-color: {color:white};}
  74. ::-webkit-scrollbar-track-piece {
  75. background-color: {color:scrollbarbg};}
  76. ::-webkit-scrollbar-thumb:vertical {
  77. height: 9px;background-color: {color:scrollbarbg};border-top:1px solid {color:scrollbarbg};border-bottom:1px solid {color:scrollbarbg};}
  78.  
  79.  
  80. /* --- BODY ---*/
  81.  
  82. body { background:{color:background};
  83. background-attachment:fixed;
  84. background-image: url('{image:Background}');
  85. background-repeat:no-repeat;
  86.  
  87. margin:0px;
  88. color:{color:text};
  89. font-family:Calibri;
  90. font-size:9px;
  91. line-height:100%;
  92. }
  93.  
  94. a {
  95. text-decoration:none;
  96. outline:none;
  97. -moz-outline-style:none;
  98. color:{color:link};
  99. }
  100.  
  101. img {
  102. border:none;
  103. }
  104.  
  105. blockquote {
  106. padding-left:5px;
  107. border-left:2px solid;
  108. }
  109.  
  110. blockquote blockquote {
  111. padding-left:5px;
  112. border-left:2px solid;
  113. }
  114.  
  115. h1 {
  116. font-size:9px;
  117. text-transform:uppercase;
  118. }
  119.  
  120. a:hover {
  121. opacity:10;
  122. color:{color:hover};
  123. -webkit-transition: all 0.7s ease;
  124. -moz-transition: all 0.7s ease;
  125. -o-transition: all 0.7s ease
  126. }
  127.  
  128. /* --- POST ENTRIES ---*/
  129.  
  130.  
  131. #entries {
  132. padding:10px;
  133. width:500px;
  134. margin-left:450px;
  135. margin-top:40px;
  136. font-size:10px;
  137. overflow:hidden;
  138. }
  139.  
  140. /* --- BODY: POSTS ---*/
  141.  
  142.  
  143. #post {
  144. width:500px;
  145. padding-bottom:20px;
  146. padding:10px;
  147. margin-top:35px;
  148. background-color:{color:Post};
  149. border-bottom:1px solid {color:Line}
  150. }
  151.  
  152.  
  153.  
  154.  
  155. /* --- SIDEBAR IMAGE ---*/
  156.  
  157.  
  158. #sidebar { position:absolute;
  159. position:fixed;
  160. height:320px;
  161. width:150px;
  162. left:260px;
  163. top:150px;
  164. }
  165.  
  166. #sidebarimage {
  167. width 100px;
  168.  
  169. }
  170.  
  171. #sidebar img{
  172. width:70px;
  173. height:70px;
  174. margin-top:7px;
  175. margin-left:-4px;
  176. margin-bottom:1px;
  177. padding:4px;
  178. border-color: {color:border};
  179. background-color:{color:Sidebar};
  180. border: 1px solid {color:border};
  181.  
  182. }
  183.  
  184. #sidebarimage2 img{
  185. -moz-transition-duration:1s;
  186. -webkit-transition-duration:1s;
  187. -o-transition-duration:1s;}
  188.  
  189. #sidebar:hover #sidebarimage2 img { width:100px;height:100px;
  190. margin-left:-200px; -moz-transition-duration:1s;
  191. -webkit-transition-duration:1s;
  192. -o-transition-duration:1s;}
  193.  
  194. #sidebarimage img{
  195. -moz-transition-duration:2s;
  196. -webkit-transition-duration:2s;
  197. -o-transition-duration:2s;}
  198.  
  199. #sidebar:hover #sidebarimage img { opacity:0; -moz-transition-duration:1s;
  200. -webkit-transition-duration:1s;
  201. -o-transition-duration:1s;}
  202.  
  203. #sidebarimage3 img{
  204. -moz-transition-duration:2s;
  205. -webkit-transition-duration:2s;
  206. -o-transition-duration:2s;}
  207.  
  208. #sidebar:hover #sidebarimage3 img { opacity:0; -moz-transition-duration:1s;
  209. -webkit-transition-duration:1s;
  210. -o-transition-duration:1s;}
  211.  
  212. #sidebarimage4 img{
  213. -moz-transition-duration:2s;
  214. -webkit-transition-duration:2s;
  215. -o-transition-duration:2s;}
  216.  
  217. #sidebar:hover #sidebarimage4 img { opacity:0; -moz-transition-duration:1s;
  218. -webkit-transition-duration:1s;
  219. -o-transition-duration:1s;}
  220.  
  221. /* --- SIDEBAR LINKS ---*/
  222.  
  223.  
  224.  
  225. /* --- SIDEBAR LINKS ---*/
  226.  
  227. .links {padding-bottom:10px;
  228. padding-top:10px;
  229. padding-left:20px;
  230. opacity:0;
  231. position:absolute;
  232. position:fixed;
  233. font-family:cambria;
  234. width:250px;
  235. display:inline-block;
  236. margin-top:-205px;
  237. margin-left:-120px;
  238. font-size:8px;
  239. text-transform:lowercase;
  240. text-align:center;
  241. -moz-transition-duration:1s;
  242. -webkit-transition-duration:1s;
  243. -o-transition-duration:1s;
  244. }
  245. .links a{
  246. display:inline-block;
  247.  
  248. width:40px;
  249. letter-spacing:1px;
  250. line-height:200%;
  251. margin-top:4px;
  252. margin-left:3px;
  253. color:{color:links}
  254.  
  255. text-decoration:none;
  256. -webkit-transition: all .7s ease-in-out;
  257. -moz-transition: all .7s ease-in-out;
  258. -ms-transition: all .7s ease-in-out;
  259. -o-transition: all .7s ease-in-out;
  260. transition: all .7s ease-in-out;
  261. background-color:{color:linkbackground};
  262.  
  263. }
  264.  
  265.  
  266.  
  267.  
  268.  
  269.  
  270. .links :hover { -webkit-transition: all .7s ease-in-out;
  271. -moz-transition: all .7s ease-in-out;
  272. -ms-transition: all .7s ease-in-out;
  273. -o-transition: all .7s ease-in-out;
  274. transition: all .7s ease-in-out;
  275. background-color:{color:linkhover}
  276.  
  277. }
  278.  
  279.  
  280. .links a:hover {
  281. color:{color:Hover}
  282. }
  283.  
  284. #sidebar:hover .links { -moz-transform: scale(1) rotate(360deg );
  285. -webkit-transform: scale(1) rotate(360deg ) ;
  286. -o-transform: scale(1) rotate(360deg);
  287. -ms-transform: scale(1) rotate(360deg);
  288. transform: scale(1) rotate(360deg );
  289. opacity:1;
  290.  
  291.  
  292.  
  293. -moz-transition-duration:1s;
  294. -webkit-transition-duration:1s;
  295. -o-transition-duration:1s;
  296.  
  297. }
  298.  
  299.  
  300.  
  301.  
  302. /* --- DESCRIPTION ---*/
  303.  
  304. #description {
  305.  
  306. position:fixed;
  307. font-family: 'Arapey', serif;
  308. line-height:90%;
  309. font-size:9px;
  310. font-style:italic;
  311. width:190px;
  312. height:40px;
  313. padding:8px;
  314. margin-left:130px;
  315. text-align:justify;
  316. color:{color:discription};
  317.  
  318. ;
  319. -moz-transition-duration:1s;
  320. -webkit-transition-duration:1s;
  321. -o-transition-duration:1s;
  322. }
  323.  
  324. #sidebar #description {
  325. border-style:solid;
  326. border-right-width:1px;
  327. margin-left:90px;
  328. margin-top:-250px;
  329. padding:2px;
  330. -moz-transition-duration:1s;
  331. -webkit-transition-duration:1s;
  332. -o-transition-duration:1s;
  333. border-style:solid;
  334. border-right-width:0px;
  335. border-top-width:0px;
  336. border-left-width:2px;
  337. border-bottom-width:0px;
  338. opacity:0;
  339. padding-top:20px;
  340. padding-bottom:20px;
  341. }
  342.  
  343.  
  344.  
  345.  
  346.  
  347.  
  348. #sidebar:hover #description {opacity:1;
  349.  
  350. margin-left:-80px;
  351. margin-top:-280px;
  352.  
  353. -moz-transition-duration:1s;
  354. -webkit-transition-duration:1s;
  355. -o-transition-duration:1s;
  356.  
  357. }
  358.  
  359. #description a {
  360. -moz-transition-duration:0.4s;
  361. -webkit-transition-duration:0.4s; -o-transition-duration:0.4s;}
  362.  
  363. /* --- PAGINATION---*/
  364. #sidebar:hover #next {opacity:1; -moz-transition-duration:0.6s;
  365. -webkit-transition-duration:0.6s; -o-transition-duration:0.6s;}
  366. #sidebar:hover #pagination {opacity:1; -moz-transition-duration:0.6s;
  367. -webkit-transition-duration:0.6s; -o-transition-duration:0.6s;}
  368.  
  369. #sidebar #pagination{
  370. position:fixed;
  371. color:{color:next};
  372. width:10px;
  373. font-size:20px;
  374. text-align:center;
  375. margin-top:-170px;
  376. margin-left:95px;
  377.  
  378. position:fixed;
  379. font-family:consolas;
  380. letter-spacing:0px;
  381. -moz-transition-duration:0.6s;
  382. -webkit-transition-duration:0.6s; -o-transition-duration:0.6s;
  383. }
  384.  
  385. #next{opacity:0;}
  386.  
  387.  
  388. #pagination{opacity:0;}
  389.  
  390.  
  391.  
  392. #sidebar #next{opacity:0; padding-top:10px;
  393. padding-bottom:10px;
  394. position:fixed;
  395. color:{color:next};
  396. width:10px;
  397. font-size:20px;
  398. text-align:center;
  399. margin-top:-180px;
  400. margin-left:115px;
  401.  
  402. position:fixed;
  403. font-family:consolas;
  404. letter-spacing:0px;
  405. -moz-transition-duration:0.6s;
  406. -webkit-transition-duration:0.6s; -o-transition-duration:0.6s;
  407. }
  408.  
  409.  
  410.  
  411.  
  412.  
  413.  
  414.  
  415.  
  416.  
  417.  
  418. /* --- POST INFO ---*/
  419.  
  420.  
  421.  
  422. #info { font-family: 'Arapey', serif;
  423.  
  424. font-size:9px;
  425. text-align:center;
  426. opacity:0;
  427. margin-top:-10px;
  428. -webkit-transition-duration:1s;
  429. -moz-transition-duration:1s;
  430. -o-transition-duration:1s;}
  431.  
  432. #post:hover #info {
  433. margin-top:0px;
  434. opacity:1;
  435. -webkit-transition-duration:1s;
  436. -moz-transition-duration:1s;
  437. -o-transition-duration:1s;
  438. }
  439.  
  440. #info a{ -webkit-transition-duration:1s;
  441. -moz-transition-duration:1s;
  442. -o-transition-duration:1s;}
  443.  
  444.  
  445.  
  446. /* --- POST TAGS---*/
  447.  
  448.  
  449. #tags {
  450. font-family: 'Arapey', serif;
  451. letter-spacing:0px;
  452. text-transform:lowercase;
  453. font-size:10px;
  454.  
  455. margin-top:3px;
  456.  
  457. text-align:center;
  458. }
  459.  
  460. #tags
  461. a {display:inline;background-color:{color:Tags};padding:-3px;text-align:left;
  462. -webkit-transition: all 0.6s ease-in-out;
  463. -moz-transition: all 0.6s ease-in-out;
  464. -o-transition: all 0.6s ease-in-out;
  465. -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out;}
  466.  
  467.  
  468. /* --- QUESTIONS ---*/
  469.  
  470. #asker {
  471. padding:5px;
  472. font-family:cambria;
  473. letter-spacing:1px;
  474. text-align:left;
  475. font-style:italic;
  476. margin-left:10px;
  477. border-left:3px #eee solid;
  478. background-color:{color:background}
  479. }
  480.  
  481.  
  482. .title {
  483.  
  484. text-align:center;
  485. font-family: 'Arapey', serif;
  486. line-height:70%;
  487. font-size:19px;
  488.  
  489. position:absolute;
  490. position:fixed;
  491. margin-top:0px;
  492. width:70px
  493.  
  494.  
  495. }
  496.  
  497. #sidebar:hover .title {
  498. margin-left:-195px;
  499. margin-top:140px;
  500. -moz-transition-duration:1s;
  501. -webkit-transition-duration:1s;
  502. -o-transition-duration:1s;
  503. opacity:0.9;
  504. width:96px
  505.  
  506. }
  507.  
  508. #sidebar .title { color:{color:title};
  509. opacity:0;
  510. margin-left:0px;
  511. margin-top:140px;
  512. padding:2px;
  513. -moz-transition-duration:1s;
  514. -webkit-transition-duration:1s;
  515. -o-transition-duration:1s; background-color:{color:titlebackground}
  516. }
  517.  
  518.  
  519.  
  520.  
  521. /* --- CREDIT DO NOT REMOVE ---*/
  522. #cred{color:#5882FA;
  523. position:fixed;bottom:3px; right:3px; font-size:8px;letter-spacing :1px; font-family:cambria;
  524. -webkit-transition-duration:1s;
  525. -moz-transition-duration:1s;
  526. -o-transition-duration:1s;
  527. }
  528.  
  529. #cred a {color:#817d7d;
  530. -webkit-transition-duration:1.5s;
  531. -moz-transition-duration:1.5s;
  532. -o-transition-duration:1.5s;
  533.  
  534. }
  535.  
  536. #cred a:hover {font-size:15px;
  537. -webkit-transition-duration:1s;
  538. -moz-transition-duration:1s;
  539. -o-transition-duration:1s;
  540. opacity:1;
  541. color:#0080FF;
  542.  
  543. }
  544.  
  545.  
  546. {CustomCSS}</style></head><body>
  547.  
  548. <!--
  549. CREDIT DO NOT REMOVE
  550. -->
  551.  
  552. <div id="cred"><a href="http://shutupstrax.tumblr.com/">☂ SUS ☂</a></center></div>
  553. <!-- -->
  554.  
  555. <div id="sidebar">
  556. <div class="title">{Title}</div>
  557.  
  558.  
  559. <div id="sidebarimage"><img src="{image:sidebar}"></div>
  560. <div id="sidebarimage2"><img src="{image:sidebar2}"></div>
  561. <div id="sidebarimage3"><img src="{image:sidebar3}"></div>
  562. <div id="sidebarimage4"><img src="{image:sidebar4}"></div>
  563.  
  564.  
  565. <div id="description">
  566. {Description}
  567. </div>
  568. <div id="pagination"> {block:Pagination}
  569. {block:PreviousPage}<a href="{PreviousPage}"> ←</a> {/block:PreviousPage}
  570. </div>
  571.  
  572.  
  573. <div id="next">
  574. {block:NextPage}<a href="{NextPage}">→ </a>{/block:NextPage}{/block:Pagination}
  575. </div>
  576.  
  577. <div class="links">
  578. <a href="/">home</a>
  579. <a href="/ask">ask</a>
  580. {block:IfShowLink1}<a href="{text:Link 1}">{text:Link 1 Text}</a>{/block:IfShowLink1}
  581. {block:IfShowLink2}<a href="{text:Link 2}">{text:Link 2 Text}</a>{/block:IfShowLink2}
  582. {block:IfShowLink3}<a href="{text:Link 3}">{text:Link 3 Text}</a>{/block:IfShowLink3}
  583.  
  584.  
  585.  
  586. </div>
  587. </div></div>
  588.  
  589.  
  590.  
  591.  
  592. </div>
  593.  
  594. <div id="entries">{block:Posts}<div id="post">
  595.  
  596. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  597.  
  598. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  599.  
  600. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  601.  
  602. {block:Quote}{Quote}{/block:Quote}
  603.  
  604. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  605.  
  606. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  607.  
  608. {block:Audio}<left>{block:AlbumArt}<img src="{AlbumArtURL}" width="80px" height="80px" align="left" style="margin-right:10px" />{/block:AlbumArt}<span class="audio">{AudioPlayerWhite}</left></span>
  609. <br>{block:TrackName}<b>Title:</b> {TrackName}<br />{/block:TrackName}
  610. <br>{block:Artist}<b>Artist:</b> {Artist}<br />{/block:Artist}
  611. {/block:ExternalAudio}<br><b>Played:</b> {PlayCount} times
  612. {/block:Audio}
  613.  
  614. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  615.  
  616.  
  617.  
  618.  
  619.  
  620.  
  621. {block:Answer}<div id="asker"><img src="{AskerPortraitURL-30}" style="margin-right:6px;border-radius:50%;padding:2px;border:1px solid #E6E6E6;"> {Asker}:{Question}</center></div><left><font face="cambria">{Answer}</font>{/block:Answer}
  622.  
  623. <div id="info">
  624.  
  625.  
  626. <br>★ <a href="{Permalink}">{TimeAgo}</a>
  627.  
  628.  
  629.  
  630.  
  631. {/block:Date} ★ <a href="{Permalink}">{NoteCountWithLabel}</a>
  632.  
  633. <a href="{ReblogURL}" target="_blank" class="details">★ Reblog </a>
  634.  
  635. {block:RebloggedFrom} ★ <a href="{ReblogParentURL}"> via ★</a> {/block:RebloggedFrom}
  636.  
  637.  
  638.  
  639. {block:ContentSource} <a href="{SourceURL}"> ♥ ★ {/block:ContentSource}{/block:RebloggedFrom}<div id="tags">
  640. {block:HasTags}{block:Tags} <small> # </small> <a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}</div></div></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement