API tools faq
paste
Advertisement
junkos

theme - base

junkos
May 1st, 2014
2,771
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.58 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.  
  6. <!-------------
  7. base code by lavvie@bluenaegi.tumblr.com
  8. thank you for using
  9. message me if you any issues or problems
  10.  
  11.  
  12. important information:
  13. as explained on the theme post, this is a base code. there are no customization options and you must change everything manually in the code.
  14. i've notes of here and there but i really, really suggest that you have a basic understanding of html and css before attempting to edit this code, but you can still go through this code blindly if you'd like.
  15. i tried to make this really clean and neat so it would be easy to edit, but if you still have trouble let me know and i'll do my best to help you!
  16.  
  17. important sites:
  18. http://www.tumblr.com/docs/en/custom_themes
  19. http://www.w3schools.com/css/
  20. and google.com is your best friend.
  21. --------------->
  22.  
  23. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  24. <title>{Title}</title>
  25. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  26. <link rel="shortcut icon" href="{Favicon}" />
  27. <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  28. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  29. <style type="text/css">
  30.  
  31. body {
  32. background:#fafafa;
  33. font-family: georgia;
  34. font-size:10px;
  35. line-height:16px;
  36. text-align:justify;
  37. }
  38.  
  39. #sidebar {
  40. position:fixed;
  41. top:150px;
  42. left:200px;
  43. width:140px;
  44. color:#111;
  45. padding:10px 10px;
  46. border:1px solid #f0f0f0;
  47. text-align:right;
  48. background:#fff;
  49. }
  50.  
  51. #sidebar a {
  52. color:#111;
  53. }
  54.  
  55. #sidebar a:hover {
  56. background:#ff0;
  57. }
  58.  
  59. .icon {
  60. width:120px;
  61. height:120px;
  62. padding:9px;
  63. border:1px solid #f0f0f0;
  64. background:#fafafa;
  65. }
  66.  
  67. .icon img {
  68. padding:9px;
  69. border:1px solid #f0f0f0;
  70. background:#fff;
  71. width:100px;
  72. height:100px;
  73. }
  74.  
  75. #slinks {
  76. margin-top:8px;
  77. text-align:center;
  78. }
  79.  
  80. #slinks a {
  81. text-decoration:none;
  82. font-style:italic;
  83. padding: 0px 3px;
  84. }
  85.  
  86. #slinks a:hover {
  87. text-decoration:line-through;
  88. background:transparent;
  89. }
  90.  
  91. img {
  92. max-width:100%;
  93. }
  94.  
  95. ol, ul {
  96. list-style-type:square;
  97. margin-left:12px;
  98. }
  99.  
  100. blockquote {
  101. border-left:1px solid #f0f0f0;
  102. padding:0px 6px;
  103. background:#fafafa;
  104. }
  105.  
  106. #container {
  107. position:absolute;
  108. top:0px;
  109. left:380px;
  110. }
  111.  
  112. #posts {
  113. width:400px;
  114. padding:10px;
  115. border:1px solid #f0f0f0;
  116. margin-top:20px;
  117. margin-bottom:20px;
  118. }
  119.  
  120. #posts a {
  121. text-decoration:none;
  122. font-style:italic;
  123. color:#111;
  124. }
  125.  
  126. #posts a:hover {
  127. text-decoration:line-through;
  128. background:transparent;
  129. }
  130.  
  131. #permalink a {
  132. font-style:normal;
  133. text-decoration:underline;
  134. }
  135.  
  136. #permalink a:hover {
  137. font-style:none;
  138. text-decoration:underline;
  139. background:#ff0;
  140. }
  141.  
  142. #note {
  143. margin-left:-25px;
  144. margin-top:-8px;
  145. }
  146.  
  147. #note a {
  148. font-style:normal;
  149. text-decoration:underline;
  150. }
  151.  
  152. #note a:hover {
  153. font-style:none;
  154. text-decoration:underline;
  155. background:#ff0;
  156. }
  157.  
  158. #note img {
  159. display:none;
  160. }
  161.  
  162. #titles {
  163. font-family:consolas;
  164. font-size:16px;
  165. text-align:right;
  166. }
  167.  
  168. #titles a {
  169. font-style:normal;
  170. text-decoration:underline;
  171. }
  172.  
  173. #titles a:hover {
  174. font-style:none;
  175. text-decoration:underline;
  176. background:#ff0;
  177. }
  178.  
  179. </style>
  180.  
  181. </head>
  182. <body>
  183.  
  184. <div id="container">
  185. {block:Posts}
  186. <div id="posts">
  187.  
  188. <!--- here is the html code for text posts. notice 'id=titles' wrapped around the title. this means that you can mess around with it's css properties in #titles --->
  189.  
  190. {block:Text}
  191. {block:Title}<div id="titles">{Title}</div>{/block:Title}
  192. {Body}
  193. {/block:Text}
  194.  
  195. <!--- here is the html code for quote posts. notice 'id=titles' wrapped around the quote. this means that you can mess around with it's css properties in #titles --->
  196.  
  197. {block:Quote}
  198. <div id="titles">{Quote}</div>
  199. <br />— {Source}
  200. {/block:Quote}
  201.  
  202. <!--- here is the html code for link posts. notice 'id=titles' wrapped around the main link. this means that you can mess around with it's css properties in #titles --->
  203.  
  204. {block:Link}
  205. <div id="titles"><a href="{URL}">{Name}</a></div>
  206. {block:Description}{Description}{/block:Description}
  207. {/block:Link}
  208.  
  209. <!--- here is the html code for photo posts. notice it says 'photourl-400'. post sizes are 250, 400, 500, and if you change the number here, be sure to change all other areas as well --->
  210.  
  211. {block:Photo}
  212. <center><img src="{PhotoURL-400}"/></center>
  213. {block:Caption}{Caption}{/block:Caption}
  214. {/block:Photo}
  215.  
  216. <!--- here is the html code for photoset posts. notice it says 'photoset-400'. post sizes are 250, 400, 500, and if you change the number here, be sure to change all other areas as well --->
  217.  
  218. {block:Photoset}
  219. <center>{Photoset-400}</center>
  220. {block:Caption}{Caption}{/block:Caption}
  221. {/block:Photoset}
  222.  
  223. <!--- here is the html code for the chat post. notice 'id=titles' wrapped around the title. this means that you can mess around with it's css properties in #titles --->
  224.  
  225. {block:Chat}
  226. {block:Title}<div id="titles">{Title}</div>{/block:Title}
  227. {block:Lines}
  228. {block:Label}<b>{Label}</b>{/block:Label}
  229. {Line}<br />
  230. {/block:Lines}
  231. {/block:Chat}
  232.  
  233. <!--- here is the html code for video posts. notiice it says 'video-400'. post sizes are 250, 400, 500, and if you change the number here, be sure to change all other areas as well --->
  234.  
  235. {block:Video}
  236. {Video-400}
  237. {block:Caption}{Caption}{/block:Caption}
  238. {/block:Video}
  239.  
  240. <!--- here is the html code for question posts --->
  241.  
  242. {block:Answer}
  243. {Asker} asked: {Question}<br />
  244. {Answer}
  245. {/block:Answer}
  246.  
  247. <!--- here is the html code for audio posts --->
  248.  
  249. {block:Audio}
  250. {AudioPlayerWhite}
  251. {block:Caption}{Caption}{/block:Caption}
  252. {/block:Audio}
  253.  
  254. <!--- here is the html code that deletes post sources from the post. --->
  255.  
  256. {block:ContentSource}
  257. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  258. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  259. {/block:SourceLogo}
  260. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  261. {/block:ContentSource}
  262.  
  263. <!--- here is the html code for the post tags & date.
  264. notice 'id=permalink'.
  265. this means that you can mess around with it's css properties in #permalink--->
  266.  
  267. {block:IndexPage}
  268. {block:Date}<div id="permalink">
  269. <a href="{Permalink}">{Timeago}</a>
  270. <a href="{Permalink}">{NoteCountWithLabel}</a>
  271. {block:HasTags}{block:Tags}
  272. <a href="{TagURL}">#{Tag}</a>
  273. {/block:Tags}{/block:HasTags}</div>{/block:Date}
  274. {/block:IndexPage}
  275.  
  276. <!--- here is the html code for the permalink post tags & date. notice 'id=permalink'. this means that you can mess around with it's css properties in #permalink
  277. also, you can only view these when you are viewing a seperate post--->
  278.  
  279. {block:PermalinkPage}
  280. <div id="permalink">posted: {12Hour}:{Minutes} {AmPm} on {DayOfWeek}, {Month} {DayOfMonth}, {Year} ({TimeAgo}{block:RebloggedFrom}, <a title="{ReblogParentName}" href="{ReblogParentURL}">via</a>, <a title="{ReblogRootName}" href="{ReblogRootURL}">source</a>{/block:RebloggedFrom})</div>
  281. {/block:PermalinkPage}
  282.  
  283. {block:PermalinkPage}
  284. {block:HasTags}<div id="permalink">
  285. tagged: {block:Tags}<a href="{TagURL}">#{Tag}</a>
  286. {/block:Tags}
  287. {/block:HasTags}</div>
  288. {/block:PermalinkPage}
  289.  
  290. <!--- here is the html code for the post notes. notice 'id=note'. this means that you can mess around with it's css properties in #note
  291. also, post notes only show up on permalink pages that have notes. --->
  292.  
  293. <div id="note">
  294. {block:PostNotes}
  295. {PostNotes}
  296. {/block:PostNotes}
  297. </div>
  298.  
  299. </div>
  300. {/block:Posts}
  301. </div>
  302.  
  303. <!--- here is the html code for the sidebar. notice 'id=sidebar'. this means that you can mess around with it's css properties in #sidebar --->
  304.  
  305. <div id="sidebar">
  306.  
  307. <!--- here is the html code for the sidebar icon. notice 'class=icon'. this means that you can mess around with it's css properties in .icon
  308. also, you can change the icon image url here by replacing the image url with your own --->
  309.  
  310. <div class="icon">
  311. <a href="/" title="{title}">
  312. <img src="http://static.tumblr.com/j9acwmj/yNSn4p7i6/lupita17.png">
  313. </a>
  314. </div><br />
  315.  
  316. {Description}<br />
  317.  
  318. <!--- here is the html code for the sidebar links. notice 'id=slinks'. this means that you can mess around with it's css properties in #slinks
  319. you can also add more links by copy pasting exsisting links and changing the links! it's simple. --->
  320.  
  321. <div id="slinks">
  322. <a href="/">index</a>
  323. <a href="/ask">message</a>
  324. <a href="/archive">past</a>
  325. </div>
  326.  
  327. {block:Pagination}<br />
  328. {block:PreviousPage}<a href="{PreviousPage}">&laquo;</a>{/block:PreviousPage}
  329. {CurrentPage} / {TotalPages}
  330. {block:NextPage}<a href="{NextPage}">&raquo;</a>{/block:NextPage}
  331. {/block:Pagination}
  332.  
  333. </div>
  334.  
  335.  
  336. </body>
  337. </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!