API tools faq
paste
Advertisement
Athesiel

Homestuck Trolls (Slim) Theme

Athesiel
Nov 6th, 2014
339
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 11.73 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. All credit to go to Princess-Makara AKA Athesiel, as is linked in the Evidence button! Otherwise, feel free to modify the base code to your own will!
  3. -->
  4. <!DOCTYPE html>
  5. <html>
  6.  
  7. <head>
  8.  
  9. <meta name="color:Background" content="#cccccc" />
  10. <meta name="font:Body" content="Georgia" />
  11. <meta name="image:Background" content="http://i41.tinypic.com/wvztsk.png" />
  12. <meta name="color:Primary Colour" content="#03999b" />
  13. <meta name="color:Secondary Colour" content="#4cc3c5" />
  14. <meta name="color:Post Body Colour" content="#03999b" />
  15. <meta name="color:Post Link Colour" content="#03999b" />
  16. <meta name="if:Infinite Scroll" content="0">
  17. <meta name="text:Link 1 Location" content="" />
  18. <meta name="text:Link 2 Location" content="" />
  19. <meta name="text:Link 3 Location" content="" />
  20. <meta name="text:Link 4 Location" content="" />
  21. <meta name="text:Link 5 Location" content="" />
  22. <meta name="text:Link 6 Location" content="" />
  23. <meta name="text:Link 7 Location" content="" />
  24. <meta name="text:Link 8 Location" content="" />
  25. <meta name="text:Link 9 Location" content="" />
  26.  
  27. <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
  28.  
  29. <style type="text/css">
  30.  
  31. body {
  32.     background-color: {color:Background};
  33.     background-attachment: fixed;
  34.     font-family: {font:Body};
  35.     background-image: url({image:Background});
  36.     margin: 0;
  37.     word-wrap: break-word
  38. }
  39.  
  40. #content {
  41.       width: 560px;
  42.       margin: 60px 0 60px 260px;
  43.       padding: 20px 0;
  44.       color: white;
  45. }
  46. #content a {
  47.     color: {color:Primary Colour};
  48.     text-decoration: none;
  49. }
  50. #content a:hover {
  51.     color: {color:Secondary Colour};
  52. }
  53.  
  54. #content blockquote {
  55.     border-left: solid 4px black;
  56.     margin: 0;
  57.     padding-left: 10px;
  58.     margin-left: 10px;
  59. }
  60.  
  61. #content #posts {
  62.     width: 501px;
  63.     height: 100%;
  64.     margin-bottom: 10px;
  65.     margin-left: 20px;
  66.     padding-left: 12px;
  67.     padding-right: 7px;
  68.     background-image: url(https://dl-web.dropbox.com/get/public/hstassets/postedges.png?_subject_uid=103938258&w=AACvraqza_SciU0PbzSGsSiBEkOvrYYyTW3Tio8kDEY_xw);
  69.     background-size: 520px 100%;
  70.     color: {color:Post Body Colour};
  71.     margin-top: -2px;
  72. }
  73. #content #posts a {
  74.     color: {color:Post Link Colour};
  75.     text-decoration: none;
  76. }
  77. #content #posts a:hover {
  78.     color: {color:Post Link Colour};
  79. }
  80.  
  81. #content #posts .title {
  82.     font-size: 22px;
  83. }
  84. #content #posts .text {
  85.     font-size: 11px;
  86. }
  87. #content #posts #permalink {
  88.     font-size: 9px;
  89.     margin-top: 10px;
  90. }
  91. #content #posts #tags {
  92.     font-size: 8px;
  93. }
  94. #content #posts #tags .comma:last-child {
  95.     display: none;
  96. }
  97.  
  98. #content #notecontainer {
  99.     margin: 20px auto;
  100.     width: 500px;
  101. }
  102. #content #notecontainer ol.notes {
  103.     list-style-type: none;
  104.     margin: 0;
  105.     padding: 0;
  106. }
  107. #content #notecontainer img.avatar {
  108.     margin-right: 10px;
  109.     width: 16px;
  110.     height: 16px;
  111. }
  112. #tagstag {
  113.     margin-left: 20px;
  114.     background-image: url(https://dl-web.dropbox.com/get/public/hstassets/notes_bkgd.png?_subject_uid=103938258&w=AACMh2RORTnA8sxfq85b0VMqLvyf1ci0QNmAReorOS7t3g);
  115.     background-size: 520px 100%;
  116.     background-repeat: no-repeat;
  117.     text-align: left;
  118.     font-size: 11px;
  119.     padding-top: 5px;
  120.     padding-bottom: 5px;
  121.     padding-left: 32px;
  122. }
  123. #posthead {
  124.     margin-left: 20px;
  125.     margin-bottom: -5px;
  126. }
  127. #phtitle {
  128.     margin-top: -26px;
  129.     margin-left: 73px;
  130.     margin-bottom: 5px;
  131. }
  132. #postfoot {
  133.     margin-left: 20px;
  134.     margin-top: -10px;
  135.     margin-bottom: 10px;
  136. }
  137.  
  138. #sidebar {
  139.     width: 260px;
  140.     position: fixed;
  141.     top: 100px;
  142.     left: auto;
  143. }
  144.  
  145. #sidebar .arcimage {
  146.     width: auto;
  147.     height: 650px;
  148.     position: fixed;
  149.     left: auto;
  150.     top: 10px;
  151. }
  152. #sidebarlinks {
  153.     position: fixed;
  154. }
  155.  
  156. #aries {
  157.     margin-left: 79px;
  158.     margin-top: 39px;
  159.     position: fixed;
  160. }
  161. #taurus {
  162.     margin-left: 117px;
  163.     margin-top: 104px;
  164.     position: fixed;
  165. }
  166. #gemini {
  167.     margin-left: 136px;
  168.     margin-top: 175px;
  169.     position: fixed;
  170. }
  171. #cancer {
  172.     margin-left: 136px;
  173.     margin-top: 250px;
  174.     position: fixed;
  175. }
  176. #leo {
  177.     margin-left: 117px;
  178.     margin-top: 323px;
  179.     position: fixed;
  180. }
  181. #virgo {
  182.     margin-left: 79px;
  183.     margin-top: 387px;
  184.     position: fixed;
  185. }
  186. #libra {
  187.     margin-left: 27px;
  188.     margin-top: 79px;
  189.     position: fixed;
  190. }
  191. #scorpio {
  192.     margin-left: 57px;
  193.     margin-top: 129px;
  194.     position: fixed;
  195. }
  196. #sagittarius {
  197.     margin-left: 71px;
  198.     margin-top: 185px;
  199.     position: fixed;
  200. }
  201. #capricorn {
  202.     margin-left: 71px;
  203.     margin-top: 242px;
  204.     position: fixed;
  205. }
  206. #aquarius {
  207.     margin-left: 57px;
  208.     margin-top: 298px;
  209.     position: fixed;
  210. }
  211. #pisces {
  212.     margin-left: 27px;
  213.     margin-top: 347px;
  214.     position: fixed;
  215. }
  216.  
  217. img {
  218.       border: 0;
  219.       max-width: 100%;
  220. }
  221.  
  222. button a {
  223.     color: white;
  224.     text-decoration: none;
  225. }
  226. button a:hover {
  227.     color: white;
  228. }
  229.  
  230. </style>
  231.  
  232. <title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  233. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  234. <link rel="shortcut icon" href="{Favicon}" />
  235.  
  236. {block:IfInfiniteScroll}
  237. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  238. {/block:IfInfiniteScroll}
  239.  
  240. </head>
  241.  
  242. <body>
  243.  
  244. <div id="sidebar">
  245.     <img class="arcimage" src="https://dl-web.dropbox.com/get/public/hstassets/Sidebar_bkgd.png?_subject_uid=103938258&w=AABgSjj_UYDZ7SyFeEFkhC_ru_XqmWeprdqx7vkk9JH0_A" />
  246.     <div id="sidebarlinks">
  247.         <div id="aries">
  248.             <a href="/ask">
  249.             <img src="https://dl-web.dropbox.com/get/public/hstassets/Aries_btn.png?_subject_uid=103938258&w=AABlBSr74yspLDkmaOnteEcmOyV3kKbIVr4FU3NX3Eaojw" border="0" width="45" height="45">
  250.         </a>
  251.         </div>
  252.         <div id="taurus">
  253.             <a href="/submit">
  254.             <img src="https://dl-web.dropbox.com/get/public/hstassets/Taurus_btn.png?_subject_uid=103938258&w=AABpzpBezomZGtDwG-R5_LnjlK04c6xGtu0-IGXbzlwYTw" border="0" width="45" height="45">
  255.         </a>
  256.         </div>
  257.         <div id="gemini">
  258.             <a href="/archive">
  259.             <img src="https://dl-web.dropbox.com/get/public/hstassets/Gemini_btn.png?_subject_uid=103938258&w=AABMiC6rSXZzLI-S9LL3-jwH-bVkUPPCt0zeAVShfRZ9rQ" border="0" width="45" height="45">
  260.         </a>
  261.         </div>
  262.         <div id="cancer">
  263.             <a href="{text:Link 1 Location}">
  264.             <img src="https://dl-web.dropbox.com/get/public/hstassets/Cancer_btn.png?_subject_uid=103938258&w=AAAuwcX0cVpoUI7p6Q51HELKqKuaa2BG6XzoeCyM8wnNtQ" border="0" width="45" height="45">
  265.         </a>
  266.         </div>
  267.         <div id="leo">
  268.             <a href="{text:Link 2 Location}">
  269.             <img src="https://dl-web.dropbox.com/get/public/hstassets/Leo_btn.png?_subject_uid=103938258&w=AABtn4oqDY5hDGYIBTED21_NBNwI_6nTjvMiMG5t80ovZA" border="0" width="45" height="45">
  270.         </a>
  271.         </div>
  272.         <div id="virgo">
  273.             <a href="{text:Link 3 Location}">
  274.             <img src="https://dl-web.dropbox.com/get/public/hstassets/Virgo_btn.png?_subject_uid=103938258&w=AADWS4i7ZM40GDD01eLTYXBqjfQnHHfWW3JNpRiCis6HVw" border="0" width="45" height="45">
  275.         </a>
  276.         </div>
  277.         <div id="libra">
  278.             <a href="{text:Link 4 Location}">
  279.             <img src="https://dl-web.dropbox.com/get/public/hstassets/Libra_btn.png?_subject_uid=103938258&w=AADw7FypS4EQ_VGERnTItZUdgy7xDfsyNbA_3Yej9gytCg" border="0" width="45" height="45">
  280.         </a>
  281.         </div>
  282.         <div id="scorpio">
  283.             <a href="{text:Link 5 Location}">
  284.             <img src="https://dl-web.dropbox.com/get/public/hstassets/Scorpio_btn.png?_subject_uid=103938258&w=AADXwJgJrkbwX2pMj8Tyn6Jjz8cp94-5cIpdOXV1LJxhtg" border="0" width="45" height="45">
  285.         </a>
  286.         </div>
  287.         <div id="sagittarius">
  288.             <a href="{text:Link 6 Location}">
  289.             <img src="https://dl-web.dropbox.com/get/public/hstassets/Sagittarius_btn.png?_subject_uid=103938258&w=AADk6y77c27eqaj44D9uCvlBeDGb460RWhBM3v4damMQbg" border="0" width="45" height="45">
  290.         </a>
  291.         </div>
  292.         <div id="capricorn">
  293.             <a href="{text:Link 7 Location}">
  294.             <img src="https://dl-web.dropbox.com/get/public/hstassets/Capricorn_btn.png?_subject_uid=103938258&w=AACcBVyU46ufjj1-Nv-8eFLckfpnBwbtqrkYKIqOint2qA" border="0" width="45" height="45">
  295.         </a>
  296.         </div>
  297.         <div id="aquarius">
  298.             <a href="{text:Link 8 Location}">
  299.             <img src="https://dl-web.dropbox.com/get/public/hstassets/Aquarius_btn.png?_subject_uid=103938258&w=AACwaMj7cOWyPxKDMvAUY2_oQewhYi-ZZx_wSJPoEZgc-Q" border="0" width="45" height="45">
  300.         </a>
  301.         </div>
  302.         <div id="pisces">
  303.             <a href="{text:Link 9 Location}">
  304.             <img src="https://dl-web.dropbox.com/get/public/hstassets/Pisces_btn.png?_subject_uid=103938258&w=AACSZrdL6sDtc_XA3zj9lhsRt-wCaa5IUZLVopFhRahFiA" border="0" width="45" height="45">
  305.         </a>
  306.         </div>
  307.     </div>
  308. </div>
  309.  
  310. <div id="content">
  311. <div class="autopagerize_page_element">
  312. {block:Posts}
  313. <div id="tagstag">
  314. <a href="{Permalink}">
  315. {block:Date}{lang:Posted TimeAgo}{/block:Date}
  316. </a>
  317. </div>
  318. <div id="posthead">
  319.     <img src="https://dl-web.dropbox.com/get/public/hstassets/posthead.png?_subject_uid=103938258&w=AADleq388qt7ixFjbTszwl0XDJhk99nfmFOt52Z3uyRw1g" />
  320. </div>
  321. <div id="phtitle">
  322.     <a href="/">{Title}</a>
  323. </div>
  324. <div id="posts">
  325.     {block:Photo}
  326.         {LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
  327.         {block:Caption}{Caption}{/block:Caption}
  328.     {/block:Photo}
  329.     {block:Photoset}
  330.         {Photoset-500}
  331.         {block:Caption}{Caption}{/block:Caption}
  332.     {/block:Photoset}
  333.     {block:Video}
  334.         {Video-500}
  335.         {block:Caption}{Caption}{/block:Caption}
  336.     {/block:Video}
  337.     {block:Audio}
  338.         {AudioPlayer}
  339.         <br />{PlayCountWithLabel}
  340.         {block:Caption}<br />{Caption}{/block:Caption}
  341.     {/block:Audio}
  342.     {block:Quote}
  343.         <div class="title">“{Quote}”</div>
  344.         {block:Source}<div class="text"><br>~ {Source}</div>{/block:Source}
  345.         {/block:Quote}
  346.     {block:Text}
  347.     {block:Title}<div class="title">{Title}</div>{/block:Title}
  348.         <div class="text">{Body}</div>
  349.     {/block:Text}
  350.     {block:Answer}
  351.         <div class="title">{Question}</div>
  352.         <div class="text">~ {Asker}</div>
  353.         <div class="text">{Answer}</div>
  354.     {/block:Answer}
  355.     {block:Chat}
  356.         {block:Title}{Title}<br />{/block:Title}
  357.         {block:Lines}
  358.         {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br  />
  359.         {/block:Lines}
  360.     {/block:Chat}
  361.     {block:Link}
  362.         <a href="{URL}" >{Name}</a>
  363.         {block:Description}<br />{Description}{/block:Description}
  364.     {/block:Link}
  365. </div>
  366.     {block:PostNotes}
  367.         <div id="notecontainer">{PostNotes}</div>
  368.     {/block:PostNotes}
  369.     <div id="postfoot">
  370.         <img src="https://dl-web.dropbox.com/get/public/hstassets/postfoot.png?_subject_uid=103938258&w=AACAKWQsjJfAhzPVqxHsygTM_xu_2Pw1JrsanA5x7sSM-g" />
  371.     </div>
  372. {/block:Posts}
  373. </div>
  374. </div>
  375.  
  376.  
  377. {block:Pagination}
  378. <div id="pagination">
  379.       {block:PreviousPage}
  380.             <a href="{PreviousPage}">Previous</a>
  381.       {/block:PreviousPage}
  382.  
  383.       {block:JumpPagination length="5"}
  384.             {block:CurrentPage}
  385.                   <span class="current_page">{PageNumber}</span>
  386.             {/block:CurrentPage}
  387.  
  388.             {block:JumpPage}
  389.                   <a class="jump_page" href="{URL}">{PageNumber}</a>
  390.             {/block:JumpPage}
  391.       {/block:JumpPagination}
  392.  
  393.       {block:NextPage}
  394.             <a href="{NextPage}">Next</a>
  395.       {/block:NextPage}
  396. </div>
  397. {/block:Pagination}
  398.  
  399. </body>
  400.  
  401. </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!