API tools faq
paste
Advertisement
codyanderson

CODE: THEME BASE.

codyanderson
Jul 15th, 2014
242
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.21 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. ★ THEME BASE CODE by Laven @ lesheathers.tumblr.com
  3.  
  4. This code is primarily meant for aspiring theme makers or just those who want to learn how a theme works. If you only lightly edit this theme, do not remove the credit link. This is the only theme code you're allowed to move the credit to a different location, as long as you make the link visible and clickable for others. However, if you heavily edit this code, you may remove the credit and use it for your own themes. Do not release this base as your own base, please.
  5.  
  6. P.S. If you're using this code for your themes, be sure to remove the notes I included beforehand.
  7.  
  8. Enjoy.
  9. -->
  10.  
  11.  
  12.  
  13. <!-- THIS IS THE START OF YOUR HEAD PORTION OF THE THEME CODE. -->
  14. <head>
  15.  
  16.  
  17. <!-- TITLE - This is the title of your blog. On some themes, the title will show up on your blog and on a tab at the top of your browser. On this theme, it only shows up on a tab instead. -->
  18. <title>{Title}</title>
  19.  
  20.  
  21. <!-- FAVICON - A favicon is a little icon that appears next to the text on a tab at the top of your browser. Some themes give you the option to upload your own favicon, but on this theme, you'll have to include one yourself. -->
  22. <link rel="shortcut icon" href="{Favicon}">
  23.  
  24.  
  25. <!-- RSS - Tumblr uses an RSS feed to export all your posts to an external feed reader, such as Google Reader or FeedDemon. Some themes have an RSS button, others don't. This theme doesn't have an RSS button, so you'll have to include one yourself.-->
  26. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  27.  
  28.  
  29. <!-- IMAGE TAGS - These meta tags enable you to upload images on your theme. This theme lets you upload a background and sidebar image. The 'content' part of the tags are just the default images used on the theme. If the content has urls in them, they'll most likely show up when you first install the theme on your blog. If they're blank, the images you used on a previous theme might show up instead. -->
  30. <meta name="image:background img" content="" />
  31. <meta name="image:sidebar img" content="http://static.tumblr.com/6069ba9e73e2f2ce5567d974eeaeb4b0/n4ofsjl/4Ran8obpc/tumblr_static_alddprd9xag404sog4c4cokk8.png" />
  32.  
  33.  
  34. <!-- COLOR TAGS - These meta tags enable you to change the colors on your theme. This theme lets you change the colors on a lot of things, actually. The 'content' part of the tags are just the default colors used on the theme. If the content has hex codes like #000000 in them, they'll most likely show up when you first install the theme on your blog. If they're blank, the colors you used on a previous theme might show up instead. -->
  35. <meta name="color:background" content="#ffa58f" />
  36. <meta name="color:text" content="#000000" />
  37. <meta name="color:bold" content="#c64728" />
  38. <meta name="color:link" content="#000000" />
  39. <meta name="color:link hover" content="#c64728" />
  40. <meta name="color:nav bg" content="#c64728" />
  41. <meta name="color:nav text" content="#c64728" />
  42. <meta name="color:nav bg hover" content="#000000" />
  43. <meta name="color:nav text hover" content="#ffffff" />
  44. <meta name="color:sidebar bg" content="#ffffff" />
  45. <meta name="color:post title" content="#c64728" />
  46. <meta name="color:post bg" content="#ffffff" />
  47. <meta name="color:info bg" content="#c64728" />
  48. <meta name="color:tags" content="#000000" />
  49.  
  50.  
  51. <!-- TEXT TAGS - These meta tags enable you to change the text on your theme. This theme lets you change the text on a navigation. The 'content' part of the tags is just the default text used on the theme. If the content has text in them, they'll most likely show up when you first install the theme on your blog. If they're blank, the text you used on a previous theme might show up instead depending on the theme. -->
  52. <meta name="text:link 1 url" content="/" />
  53. <meta name="text:link 1" content="link 1" />
  54.  
  55.  
  56.  
  57. <!-- THIS IS THE START OF YOUR STYLE/CSS PORTION OF THE THEME CODE. -->
  58. <style type="text/css">
  59.  
  60.  
  61. /* BODY - This is where you edit the background image/colors and general text size/font/colors. These features show up on every page on your blog unless you install codes for specific pages. */
  62. body {
  63. background-color:{color:background};
  64. background-image:url('{image:background img}');
  65. background-repeat:repeat;
  66. background-attachment:fixed;
  67. margin:0;
  68. padding:0;
  69. font-family:arial;
  70. font-size:11px;
  71. color:{color:Text};
  72. }
  73.  
  74.  
  75. /* H1 - Headers are decorations for titles such as post titles, sidebar titles, and page titles, just to name a few examples. There are six known header codes: h1, h2, h3, h4, h5, and h6. For this theme, I used h1 for the post titles. This is where you edit the appearance/effects of Header 1 (h1). */
  76. h1 {
  77. margin:3px;
  78. font-family:georgia;
  79. font-size:16px;
  80. color:{color:post title};
  81. text-transform:uppercase;
  82. }
  83.  
  84.  
  85. /* BOLD - Bold text is a type of text that emphasizes certain words to stand out from other words. This is where you edit the appearance/effects of bold/strong text. */
  86. b, strong {
  87. color:{color:bold};
  88. }
  89.  
  90.  
  91. /* ITALIC - Italic text is a type of text that slopes to the right. This is where you edit the appearance/effects of italic/em text. */
  92. i, em {
  93. color:{color:text};
  94. }
  95.  
  96.  
  97. /* LINKS - Links are a type of text where they take you to different pages if you click on them. This is where you edit the appearance/effects of your post and sidebar links minus the navigation links. The a:hover part gives you a special effect if you point your cursor over the linked text without clicking it. */
  98. a:link, a:active, a:visited {
  99. font-family:georgia;
  100. font-size:9px;
  101. color:{color:link};
  102. text-decoration:none;
  103. -webkit-transition: all 0.2s ease-in-out;
  104. -moz-transition: all 0.2s ease-in-out;
  105. -o-transition: all 0.2s ease-in-out;
  106. }
  107.  
  108. a:hover {
  109. color:{color:link hover};
  110. text-decoration:none;
  111. -webkit-transition: all 0.2s ease-in-out;
  112. -moz-transition: all 0.2s ease-in-out;
  113. -o-transition: all 0.2s ease-in-out;
  114. }
  115.  
  116.  
  117. /* SIDEBAR - The sidebar is a div box that's located on the left side of this theme. This holds the #sidebarimg, #navigation, #description, and #pagination div boxes together. You can edit the appearance and use the margins to move the box around. */
  118. #sidebar {
  119. position:fixed;
  120. margin-top:50px;
  121. margin-left:199px;
  122. background-color:transparent;
  123. }
  124.  
  125.  
  126. /* SIDEBAR IMAGE - The sidebar image is just an image that shows up on every page of your blog (Unless you use a code where you have a different sidebar image every time you refresh the page). Some themes have more than one sidebar image, but this theme has one image to keep things simple. This is where you edit appearance/effects of your sidebar image. */
  127. #sidebarimg {
  128. width:290px;
  129. max-width:300px;
  130. height:auto;
  131. padding-top:5px;
  132. padding-left:5px;
  133. padding-right:5px;
  134. padding-bottom:2px;
  135. background-color:{color:sidebar bg};
  136. }
  137.  
  138.  
  139. /* NAVIGATION - The navigation are a collection of links that take you to specific pages on your blog such as your askbox or your archive. This div holds the navigation links (nav) together. You can edit the appearance and move the box outside of the sidebar div. */
  140. #navigation {
  141. width:290px;
  142. height:auto;
  143. text-align:center;
  144. background-color:transparent;
  145. }
  146.  
  147.  
  148. /* NAVIGATION LINKS - This is where you edit the appearance/effects of your navigation links. The a.nav:hover part gives you a special effect if you point your cursor over the navigation boxes without clicking them. */
  149. a.nav:link, a.nav:active, a.nav:visited {
  150. margin-right:2px;
  151. width:50px;
  152. height:25px;
  153. padding:1px 5px 1px 5px;
  154. display:inline-block;
  155. background-color:{color:nav bg};
  156. font-size:8px;
  157. color:{color:nav text};
  158. line-height:25px;
  159. text-align:center;
  160. text-transform:uppercase;
  161. -webkit-transition: all 0.2s ease-in-out;
  162. -moz-transition: all 0.2s ease-in-out;
  163. -o-transition: all 0.2s ease-in-out;
  164. }
  165.  
  166. a.nav:hover {
  167. display:inline-block;
  168. padding:1px 5px 1px 5px;
  169. background-color:{color:nav bg hover};
  170. color:{color:nav text hover};
  171. text-transform:uppercase;
  172. text-align:center;
  173. -webkit-transition: all 0.2s ease-in-out;
  174. -moz-transition: all 0.2s ease-in-out;
  175. -o-transition: all 0.2s ease-in-out;
  176. }
  177.  
  178.  
  179. /* DESCRIPTION - The description is a box you can fill quick, shorter info about your blog, kind of like a mini 'about me'. This is where you edit the appearance/effects of your sidebar description. */
  180. #description {
  181. margin-top:5px;
  182. width:290px;
  183. height:auto;
  184. padding-top:5px;
  185. padding-left:5px;
  186. padding-right:5px;
  187. padding-bottom:1px;
  188. background-color:{color:sidebar bg};
  189. color:{color:Text};
  190. text-align:justify;
  191. }
  192.  
  193.  
  194. /* PAGINATION - Pagination are a set of links that take you to certain pages on your blog. Some people use numbers, arrows, or words for their pagination but this theme has both numbers and arrows. This div holds your pagination links inside one div box. */
  195. #pagination {
  196. position:fixed;
  197. margin-top:5px;
  198. width:297px;
  199. height:21px;
  200. padding:2px;
  201. background-color:{color:sidebar bg};
  202. line-height:21px;
  203. text-align:center;
  204. }
  205.  
  206.  
  207. /* PAGINATION LINKS - This is where you edit the appearance/effects of your pagination links. The a.pagination part gives you a special effect if you point your cursor over the linked text without clicking it. */
  208. #pagination a.pagination:link, a.pagination:active, a.pagination:visited {
  209. font-size:13px;
  210. color:{color:link};
  211. text-decoration:none;
  212. -webkit-transition: all 0.2s ease-in-out;
  213. -moz-transition: all 0.2s ease-in-out;
  214. -o-transition: all 0.2s ease-in-out;
  215. }
  216.  
  217. #pagination a.pagination:hover {
  218. color:{color:bold};
  219. text-decoration:none;
  220. -webkit-transition: all 0.2s ease-in-out;
  221. -moz-transition: all 0.2s ease-in-out;
  222. -o-transition: all 0.2s ease-in-out;
  223. }
  224.  
  225.  
  226. /* ENTRIES - The entry box is a div that's located on the right side of this theme. This holds the #post, #info, #tags div boxes together. You can edit the appearance and use the margins to move the box around. */
  227. #entry {
  228. margin-top:30px;
  229. margin-left:536px;
  230. width:500px;
  231. }
  232.  
  233.  
  234. /* POSTS - The posts boxes hold the content that you post or reblog. Post boxes are around 250px, 400px, or 500px in width, but this theme has 500px wide posts. This is where you edit the appearance/effects of your posts. */
  235. #post {
  236. margin-bottom:30px;
  237. padding:5px;
  238. width:500px;
  239. background-color:{color:post bg};
  240. color:{color:text};
  241. text-align:justify;
  242. }
  243.  
  244.  
  245. /* INFO - The info box tells you the date a post is published on your blog. It also tells you how many notes a post has and sometimes who you reblogged it if you reblogged it. This is where you edit the appearance/effects of your post information box. */
  246. #info {
  247. margin-top:5px;
  248. width:490px;
  249. padding:5px;
  250. background-color:{color:info bg};
  251. font-size:8px;
  252. color:{color:text};
  253. text-align:center;
  254. text-transform:uppercase;
  255. }
  256.  
  257.  
  258. /* TAGS - The tag box tells you what you have tagged for each post. Tags help organize your posts, and can help people blacklist certain content they don't want to see. Some themes have the tags appear on posts, others don't. This is where you edit the appearance/effects of your post tags. */
  259. #tags {
  260. margin-top:3px;
  261. width:392px;
  262. font-size:8px;
  263. color:{color:text};
  264. text-transform:uppercase;
  265. }
  266.  
  267.  
  268. /* PERMALINK - The permalink box shows you the notes on a post and who liked and/or reblogged it. This is where you edit the appearance/effects of your permalink box (when you're not on the customization page, click on the date on a post and there should be a box below the post if the post has notes. */
  269. #permalink {
  270. margin-top:0px;
  271. margin-bottom:20px;
  272. width:500px;
  273. background-color:{color:post bg};
  274. color:{color:text};
  275. }
  276.  
  277.  
  278. {CustomCSS}
  279. </style>
  280. </head>
  281. <!-- THIS IS THE END OF YOUR STYLE/CSS PORTION OF THE THEME CODE. -->
  282. <!-- THIS IS THE END OF YOUR HEAD PORTION OF THE THEME CODE. -->
  283.  
  284.  
  285. <!-- THIS IS THE START OF YOUR DIV/HTML/BODY PORTION OF THE THEME CODE. -->
  286. <body>
  287.  
  288.  
  289. <!-- SIDEBAR - Your sidebar box begins here. This is where you edit the structure of your sidebar box. This div corresponds with #sidebar. -->
  290. <div id="sidebar">
  291.  
  292.  
  293. <!-- SIDEBAR IMAGE - This is where you edit the structure of your sidebar image box. This div corresponds with #sidebarimg. -->
  294. <div id="sidebarimg"><a href="/"><img src="{image:sidebar img}" width="290" /></a></div>
  295.  
  296.  
  297. <!-- DESCRIPTION & NAVIGATION - This is where you edit the structure of your description and navigation boxes. These two divs correspond with #description and #navigation. -->
  298. <div id="description">
  299. <div id="navigation">
  300. <a class="nav" href="/">Home</a>
  301. <a class="nav" href="/ask">Ask</a>
  302. <a class="nav" href="{text:link 1 url}">{text:link 1}</a>
  303. <a class="nav" href="http://lesheathers.tumblr.com">Credit</a></div><br>
  304. {block:Description}{Description}{/block:Description}</div>
  305.  
  306.  
  307. <!-- PAGINATION - This is where you edit the structure of your pagination box. This div corresponds with #pagination.-->
  308. <div id="pagination">
  309. {block:Pagination}{block:PreviousPage}<a class="pagination" href="{PreviousPage}">«</a>{/block:PreviousPage} {CurrentPage} / {TotalPages} {block:NextPage}<a class="pagination" href="{NextPage}">»</a>{/block:NextPage}{/block:Pagination}</div></div>
  310.  
  311.  
  312. <!-- SIDEBAR - Your sidebar box ends here.-->
  313.  
  314.  
  315. <!-- ENTRIES - Your entry box starts here. This is where you edit the structure of your entry box. This div corresponds with #entry.-->
  316. <div id="entry">
  317.  
  318.  
  319. <!-- POSTS - This is where you edit the structure of your post box. This div corresponds with #post. -->
  320. {block:Posts}<div id="post">{block:Text}<center><h1>{Title}</h1></center>{Body}{/block:Text}
  321.  
  322.  
  323. <!-- QUOTES - Quotes are a type post where quotes appear on your blog. This is where you edit the structure of quotes on posts. This section doesn't have a div box, so you'll have to include one yourself if you want to. -->
  324. {block:Quote}“{Quote}”<p align="right"><quotesource>— {Source}</quotesource></p>{/block:Quote}
  325.  
  326.  
  327. <!-- LINK POSTS - Link posts are a type of post where a link appears as a title rather than a small group of text. This is where you edit the structure of link posts. This section doesn't have a div box, so you'll have to include one yourself if you want to. -->
  328. {block:Link}<a href="{URL}" class="link" {Target}> <h2>{Name}</h2></a>
  329. {block:Description}<P>{Description}</p>{/block:Description}{/block:Link}
  330.  
  331.  
  332. <!-- PHOTO POSTS - Photo posts are a type of post where it eanbles you to post a photo/gif neatly. This is where you edit the structure of photo posts. This section doesn't have a div box, so you'll have to include one yourself if you want to. -->
  333. {block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  334.  
  335.  
  336. <!-- PHOTO SET POSTS - Photo set posts are a type of post where it enables you to post multiple photos/gifs neatly. This is where you edit the structure of photo sets on posts. This section doesn't have a div box, so you'll have to include one yourself if you want to. -->
  337. {block:Photoset}<center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  338.  
  339.  
  340. <!-- CHAT POSTS - Chat posts are a type of post where you publish text in script form. This is where you edit the structure of chat posts. This section doesn't have a div box, so you'll have to include one yourself if you want to. -->
  341. {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}
  342.  
  343.  
  344. <!-- VIDEO POSTS - Video posts are a type of post where videos appear on your blog. This is where you edit the structure of videos on posts. This section doesn't have a div box, so you'll have to include one yourself if you want to. -->
  345. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  346.  
  347.  
  348. <!-- QUESTION POSTS - Asks are a type of post where answered questions are published onto your blog. This is where you edit the structure of the asks on posts. This section doesn't have a div box, so you'll have to include one yourself if you want to. -->
  349. {block:Answer}<div class="question"><b>{Asker}</b> asked:<br>{Question}</div>{Answer}{/block:Answer}
  350.  
  351.  
  352. <!-- AUDIO POSTS - This is where you edit the structure of audio players on posts. This is where you edit the structure of the music on posts. This section doesn't have a div box, so you'll have to include one yourself if you want to . -->
  353. {block:Audio}<div class="player">{AudioPlayerGrey}</div>{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  354.  
  355.  
  356. <!-- INFO ON POSTS - This is where you edit the structure of your info box. This div corresponds with #info. -->
  357. <div id="info">posted <a class="infolink" href="{Permalink}">{TimeAgo}</a>{/block:Date}{block:NoteCount} - <a class="infolink" href="{Permalink}">{NoteCount}</a> notes{/block:NoteCount}{block:RebloggedFrom} - <a class="infolink" href="{ReblogParentURL}">via {ReblogParentName}</a>{/block:RebloggedFrom}</div>
  358.  
  359.  
  360. <!-- TAGS ON POSTS - This is where you edit the structure of your tags box. This div corresponds with #tags. -->
  361. {block:HasTags}<div id="tags">
  362. {block:Tags}#<a class="tags" href="{TagURL}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}</div>{/block:Posts}
  363.  
  364.  
  365. <!-- ENTRIES - Your entry box ends here.-->
  366.  
  367.  
  368. <!-- PERMALINK ON POSTS - This is where you edit the structure of your permalink box. This div corresponds with #permalink. -->
  369. {block:PostNotes}<div id="permalink">{PostNotes}</div>{/block:PostNotes}</div>
  370.  
  371.  
  372. </body></html>
  373. <!-- THIS IS THE END OF YOUR DIV/HTML/BODY PORTION OF THE THEME CODE. -->
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!