API tools faq
paste
Advertisement
ErisNotEros

Tutorial: Part08

ErisNotEros
Apr 13th, 2012
17,020
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.38 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--Notes are written like this. So long as they are enclosed in tags like these, your browser will not read them.-->
  6.  
  7. <!--Customisation Options (part 2)-->
  8.  
  9. <meta name="color:Background" content="#cccccc" />
  10. <meta name="color:Primary Colour" content="#03999b" />
  11. <meta name="color:Secondary Colour" content="#4cc3c5" />
  12.  
  13. <meta name="font:Body" content="Georgia" />
  14.  
  15. <meta name="image:Background" content="http://i41.tinypic.com/wvztsk.png" />
  16. <meta name="image:Sidebar" content="" />
  17.  
  18. <meta name="if:Infinite Scroll" content="0">
  19.  
  20. <!--Things that go in the tab (part 1)-->
  21.  
  22. <title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  23. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  24. <link rel="shortcut icon" href="{Favicon}" />
  25.  
  26. <!--Custom font (part 4)-->
  27.  
  28. <link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
  29.  
  30.  
  31.  
  32. <style type="text/css">
  33.  
  34. /*Notes in CSS look like this. If you use <!--these--> it will not work*/
  35.  
  36. /*The Background (part 3)*/
  37.  
  38. body {
  39. background-color: {color:Background};
  40. font-family: {font:Body};
  41. background-image: url({image:Background});
  42. background-attachment: fixed;
  43. margin: 0;
  44. word-wrap: break-word;
  45. }
  46.  
  47. /*The Sidebar (part 4)*/
  48.  
  49. #sidebar {
  50. background-color: white;
  51. width: 260px;
  52. position: fixed;
  53. top: 150px;
  54. left: 100px;
  55. }
  56.  
  57. /*The Sidebar: Title*/
  58.  
  59. #sidebar .title {
  60. font-family: 'Great Vibes', cursive;
  61. font-size: 30px;
  62. text-align: center;
  63. padding: 10px;
  64. }
  65.  
  66. #sidebar .title a {
  67. color: {color:Primary Colour};
  68. text-decoration: none;
  69. }
  70.  
  71. #sidebar .title a:hover {
  72. color: {color:Secondary Colour};
  73. }
  74.  
  75. /*The Sidebar: Image*/
  76.  
  77. #sidebar .image {
  78. width: 260px;
  79. height: auto;
  80. }
  81.  
  82. /*The Sidebar: Description*/
  83.  
  84. #sidebar .description {
  85. color: black;
  86. font-size: 11px;
  87. text-align: justify;
  88. padding:10px;
  89. line-height:100%;
  90. }
  91.  
  92. #sidebar .description a {
  93. color: {color:Primary Colour};
  94. text-decoration: none;
  95. }
  96.  
  97. #sidebar .description a:hover {
  98. color: {color:Secondary Colour};
  99. }
  100.  
  101. /*The Sidebar: Links*/
  102.  
  103. #sidebar .links {
  104. background-color: {color:Primary Colour};
  105. color: white;
  106. font-size: 11px;
  107. text-align: center;
  108. padding: 3px 5px;
  109. margin: 2px;
  110. float: left;
  111. width: 116px;
  112. }
  113.  
  114. #sidebar .links a {
  115. text-decoration:none;
  116. }
  117.  
  118. #sidebar .links:hover {
  119. background-color: {color:Secondary Colour};
  120. }
  121.  
  122. /*The Sidebar: Pagination (part 8)*/
  123.  
  124. #sidebar .pagination {
  125. width: 260px;
  126. text-align: center;
  127. padding: 3px 0;
  128. }
  129.  
  130. #sidebar .pagination a {
  131. color: {color:Primary Colour};
  132. text-decoration: none;
  133. }
  134.  
  135. #sidebar .pagination a:hover {
  136. color: {color:Secondary Colour};
  137. }
  138.  
  139.  
  140. /***************************/
  141.  
  142. /*The Main Content (Part 6)*/
  143.  
  144. #content {
  145. width: 560px;
  146. background-color: rgba(255, 255, 255, 0.4);
  147. margin: 60px 0 60px 460px;
  148. padding: 20px 0;
  149. color: black;
  150. }
  151.  
  152. #content a {
  153. color: {color:Primary Colour};
  154. text-decoration: none;
  155. }
  156.  
  157. #content a:hover {
  158. color: {color:Secondary Colour};
  159. }
  160.  
  161. #content blockquote {
  162. border-left: solid 2px black;
  163. margin: 0;
  164. padding-left: 10px;
  165. }
  166.  
  167. img {
  168. border: 0;
  169. max-width: 100%;
  170. }
  171.  
  172. #content #posts {
  173. background-color: white;
  174. width: 500px;
  175. margin: 0 auto 20px;
  176. padding:10px;
  177. }
  178.  
  179. #content #posts .title {
  180. font-size: 22px;
  181. }
  182.  
  183. #content #posts .text {
  184. font-size:11px;
  185. }
  186.  
  187. /***************************/
  188.  
  189. /*The Permalink and Tags (part 7)*/
  190.  
  191. #content #posts #permalink {
  192. font-size:9px;
  193. margin-top:10px;
  194. }
  195.  
  196. #content #posts #tags {
  197. font-size:9px;
  198. }
  199.  
  200. #content #posts #tags .comma:last-child {
  201. display: none;
  202. }
  203.  
  204. /*Note Container (part 7)*/
  205.  
  206. #content #notecontainer {
  207. margin: 20px auto;
  208. width: 500px;
  209. font-size: 11px;
  210. }
  211.  
  212. #content #notecontainer ol.notes {
  213. list-style-type: none;
  214. margin: 0;
  215. padding: 0;
  216. }
  217.  
  218. #content #notecontainer img.avatar {
  219. margin-right: 10px;
  220. width: 16px;
  221. height: 16px;
  222. }
  223.  
  224. /*Custom CSS (part 8)*/
  225.  
  226. {CustomCSS}
  227.  
  228. </style>
  229.  
  230. <!--Infinite Scroll (part 8)-->
  231.  
  232. {block:IfInfiniteScroll}
  233. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  234. {/block:IfInfiniteScroll}
  235.  
  236. </head>
  237. <body>
  238.  
  239. <!--The Sidebar (part 4)-->
  240.  
  241. <div id="sidebar">
  242. <div class="title"><a href="/">{Title}</a></div>
  243. <img class="image" src="{image:Sidebar}" />
  244. <div class="description">{Description}</div>
  245.  
  246. {block:AskEnabled}<a href="/ask"><div class="links">{AskLabel}</div></a>{/block:AskEnabled}
  247. {block:SubmissionsEnabled}<a href="/submit"><div class="links">{SubmitLabel}</div></a>{/block:SubmissionsEnabled}
  248. {block:HasPages}{block:Pages}<a href="{url}"><div class="links">{Label}</div></a>{/block:Pages}{/block:HasPages}
  249.  
  250. <!--Pagination (part 8)-->
  251.  
  252. {block:IfNotInfiniteScroll}
  253. <div class="pagination">
  254. {block:PreviousPage}<a href="{PreviousPage}">« </a>{/block:PreviousPage}
  255. {block:NextPage}<a href="{NextPage}"> »</a>{/block:NextPage}
  256. </div>
  257. {/block:IfNotInfiniteScroll}
  258.  
  259. </div> <!--sidebar-->
  260. <!--I like to label my closing divs like I did above to make the code easier to read. It is not compulsary.-->
  261.  
  262. <!--------------------------->
  263.  
  264. <!--The Main Content (part 5 & 6)-->
  265.  
  266. <div id="content">
  267. <div class="autopagerize_page_element">
  268. {block:Posts}
  269. <div id="posts">
  270.  
  271. {block:Photo}
  272. {LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
  273. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  274. {/block:Photo}
  275.  
  276. {block:Photoset}
  277. {Photoset-500}
  278. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  279. {/block:Photoset}
  280.  
  281. {block:Video}
  282. {Video-500}
  283. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  284. {/block:Video}
  285.  
  286. {block:Audio}
  287. {AudioPlayerBlack}
  288. <div class="text">~ {PlayCountWithLabel}</div>
  289. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  290. {/block:Audio}
  291.  
  292. {block:Quote}
  293. <div class="title">“{Quote}”</div>
  294. {block:Source}<div class="text"><br>~ {Source}</div>{/block:Source}
  295. {/block:Quote}
  296.  
  297. {block:Text}
  298. {block:Title}<div class="title">{Title}</div>{/block:Title}
  299. <div class="text">{Body}</div>
  300. {/block:Text}
  301.  
  302. {block:Answer}
  303. <div class="title">{Question}</div>
  304. <div class="text">~ {Asker}</div>
  305. <div class="text">{Answer}</div>
  306. {block:Answer}
  307.  
  308. {block:Chat}
  309. {block:Title}<div class="title">{Title}</div>{/block:Title}
  310. <div class="text">
  311. {block:Lines}
  312. {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
  313. {/block:Lines}
  314. </div> <!--text-->
  315. {/block:Chat}
  316.  
  317. {block:Link}
  318. <div class="title"><a href="{URL}">{Name}</a></div>
  319. {block:Description}
  320. <div class="text">{Description}</div>
  321. {/block:Description}
  322. {/block:Link}
  323.  
  324. <!--------------------------->
  325.  
  326. <!--The Permalink (Part 7)-->
  327.  
  328. <div id="permalink">
  329. <a href="{Permalink}">
  330. {block:Date}{lang:Posted TimeAgo}{/block:Date}
  331. {block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount}
  332. </a>
  333. </div> <!--permalink-->
  334.  
  335. <!--The Tags (Part 7)-->
  336.  
  337. {block:HasTags}<div id="tags">
  338. {block:Tags}<a href="{TagURL}">{Tag}</a><span class="comma">, </span>{/block:Tags}.
  339. </div> <!--tags-->
  340. {/block:HasTags}
  341.  
  342. </div> <!--posts-->
  343.  
  344. <!--Note Container (Part 7)-->
  345.  
  346. {block:PostNotes}
  347. <div id="notecontainer">{PostNotes}</div>
  348. {/block:PostNotes}
  349.  
  350.  
  351. {/block:Posts}
  352. </div> <!--autopagerize_page_element-->
  353. </div> <!--content-->
  354.  
  355. </body>
  356. </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!