API tools faq
paste
AntagonistChan

Antag02 - Bliss

AntagonistChan
May 2nd, 2019 (edited)
281
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.36 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <hmtl>
  3. <!--MESSAGE FROM THE CREATOR:
  4. Hey, I'm Emily/"Antagonist". I do a lot of art (and also gaming), and HTML is one of my art forms. I'm currently working on getting commissions set up, and doing HTML projects is one of my goals.
  5. This theme is filled with little tips to make creating Tumblr themes easier. Partially so people who download my themes can learn from me, but also partially because when I decided to make a second theme (three years after creating my first, RIP), I realized I had forgotten most of the weird little tricks to making a Tumblr theme, and while I still remembered how to do general HTML, I needed to re-learn how to apply that knowledge to Tumblr. I didn't want to go through that again, so I decided to annotate it. My advice is tailored around the idea that you already know HTML, though.
  6.  
  7. Things to keep in mind with Tumblr themes, unique from general HTML knowledge:
  8.  
  9. VARIABLES: Things that aren't hard-coded in the theme, but rather, chosen by the user on the "Customize Appearance" page. They're represented with swirly brackets. For instance, instead of typing:
  10. <h1>Welcome to my blog!</h1>
  11. you'd type
  12. <h1>{Title}</h1>
  13. and then the blog's title as determined by the user would fill that spot. Variables are basically what make Tumblr function.
  14.  
  15. BLOCKS: Blocks reduce redundancy in the code (by avoiding forcing you to type the same thing over and over) and on the blog's page (by avoiding leaving around buttons that don't currently do anything). They make sure that something that applies to one thing also applies to all similar things, and that something that isn't necessary doesn't appear. They're special types of variables, and are thus still represented with swirly brackets, except with "block:" at the beginning. So, to determine that you want [x] to appear in all posts, you'd type:
  16. {block:Posts}[x]{/block:Posts}
  17. and to determine that you want [y] to only appear when your blog has pages, you'd type:
  18. {block:HasPages}[y]{/block:HasPages}
  19.  
  20. LOCALIZATION: Another special type of variable. This one is significantly less important- you *can* make a perfectly functional Tumblr theme without localization, but it'll be less optimized. There are certain phrases that Tumblr is coded to specifically know, and if you use these phrases as Localization, then Tumblr will specifically know to translate them to other languages based on the user's language settings. So, an English-speaking user would see "Yes" while a Spanish-speaking one would see "Si", etc. They're represented with swirly brackets, as usual for Variables, but have "lang" at the beginning. So, to ensure that your "About" page will translate, you'd type:
  21. {lang:About}
  22. A full list of the Localization words is here: https://www.tumblr.com/docs/en/localizing_themes
  23.  
  24. META CUSTOMIZATION: Finally, there's META. Tumblr allows us theme creators to let our users quickly customize our themes with no HTML knowledge required. We do this with the blog's metadata, because Tumblr is... friggin' weird. All of the variables we want users to be able to change should be under <head> in this format:
  25. <meta name="color:IgnoreThisOne" content="#f4fbfa" />
  26. The name then becomes a usable Variable, and the content is its default value. In this example, we've given users the ability to customize a color, and set a default value of #f4fbfa. In addition to color, we can also make META variables of image, font, if (a binary variable), and text.
  27.  
  28. -->
  29. <head>
  30. <meta charset="utf-8">
  31. <title>{Title}{block:TagPage} | {Tag}{/block:TagPage}{block:PostSummary} | {PostSummary}{/block:PostSummary}</title><!--This makes it so that the title of the page that appears in the tab and on search results lists the tag query/post title following the blog's title-->
  32. {block:Description}<!--This puts the blog description in search results-->
  33. <meta name="description" content="{MetaDescription}" />
  34. {/block:Description}
  35. <meta name="viewport" content="width=device-width, initial-scale=1">
  36. <link rel="shortcut icon" href="{Favicon}"/>
  37. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  38. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  39. <!--All that stuff is for RSS readers and Apple users-->
  40.  
  41. <!--Background-->
  42. <meta name="color:Background Color" content="#ffffff"/>
  43. <meta name="image:Background" content="https://static.tumblr.com/lq337zo/QLwpqpt1m/bliss.jpeg"/>
  44.  
  45. <!--General-->
  46. <meta name="color:Text Color" content="#000000"/>
  47. <meta name="color:Link Color" content="#6285d1"/>
  48. <meta name="color:Hover Link" content="#0e3079"/>
  49.  
  50.  
  51. <!--Posts-->
  52. <meta name="color:Border Color" content="#000000"/>
  53. <meta name="color:Post Background" content="#ffffff"/>
  54.  
  55. <!--Detail-->
  56. <meta name="image:Sidebar Image" content="https://static.tumblr.com/lq337zo/HBnpqpvz1/sayo.png"/>
  57. <meta name="color:Button Color" content="#901d2a"/>
  58.  
  59. <style>
  60. body {
  61. background-color: {color:Background Color};
  62. background-image: url("{image:Background}");
  63. background-repeat: no-repeat;
  64. background-attachment: fixed;
  65. background-size: cover;
  66. color: {color:Text Color};
  67. }
  68.  
  69. a {
  70. text-decoration: none;
  71. color: {color:Link Color};
  72. transition:all 0.5s ease-in-out;
  73. }
  74.  
  75. a:hover {
  76. color: {color:Hover Link};
  77. }
  78.  
  79. #center {
  80. position: absolute;
  81. top: 25px;
  82. left: 290px;
  83. }
  84.  
  85. #l-sidebar {
  86. position: fixed;
  87. width: 250px;
  88. top: 0px;
  89. left: 0px;
  90. }
  91.  
  92. #r-sidebar {
  93. position: fixed;
  94. width: 270px;
  95. top: 0px;
  96. right: 0px;
  97. }
  98.  
  99. #b-sidebar {
  100. position: fixed;
  101. width: 270px;
  102. bottom: 0px;
  103. right: 0px;
  104. text-align: center;
  105. }
  106.  
  107. #c-sidebar {
  108. position: fixed;
  109. bottom: 0px;
  110. left: 0px;
  111. text-align: center;
  112. }
  113.  
  114. .sidebar {
  115. border: 5px ridge {color:Border Color};
  116. }
  117.  
  118. .info {
  119. background-color: {color:Post Background};
  120. padding: 10px;
  121. }
  122.  
  123. .entry {
  124. width: 500px;
  125. border-left: 5px ridge {color:Border Color};
  126. border-right: 5px ridge {color:Border Color};
  127. }
  128.  
  129. .post {
  130. border-top: 5px ridge {color:Border Color};
  131. }
  132.  
  133. .answers {
  134. border-left: 3px solid grey;
  135. padding-left: 15px;
  136. margin: 10px;
  137. }
  138.  
  139. .secondarypost {
  140. background-color: #a1a1a1;
  141. text-align: center;
  142. border: 2px dotted #000000;
  143. padding: 5px;
  144. margin: 5px;
  145. overflow-x: auto;
  146. }
  147.  
  148. .post-footer {
  149. border-bottom: 5px ridge {color:Border Color};
  150. border-top: 2px dotted {color:Border Color};
  151. margin-bottom: 10px;
  152. text-align: center;
  153. }
  154.  
  155. .post blockquote {
  156. border-left: 3px solid grey;
  157. padding-left: 15px;
  158. margin: 10px;
  159. }
  160.  
  161. .minibutton {
  162. position: absolute;
  163. right: 235px;
  164. height: 35px;
  165. width: 35px;
  166. margin: 5px;
  167. }
  168.  
  169. .button {
  170. background-color: {color:Button Color};
  171. border: 3px solid {color:Border Color};
  172. text-align: center;
  173. }
  174.  
  175. .bigbutton {
  176. position: relative;
  177. height: 20px;
  178. width: 270px;
  179. margin: auto;
  180. margin-bottom: 5px;
  181. right: 3px;
  182. }
  183.  
  184. .bigbutton a {
  185. color: #ffffff;
  186. }
  187.  
  188. #backbutton {
  189. position: absolute;
  190. top: 187px;
  191. }
  192.  
  193. #nextbutton {
  194. position: absolute;
  195. top: 7px;
  196. }
  197.  
  198. #messagebutton {
  199. position: absolute;
  200. top: 142px;
  201. }
  202.  
  203. #homebutton {
  204. position: absolute;
  205. top: 97px;
  206. }
  207.  
  208. #archivebutton {
  209. position: absolute;
  210. top: 52px;
  211. }
  212.  
  213. #butpic {
  214. position: relative;
  215. top: 3px;
  216. }
  217.  
  218. #title a {
  219. color: {color:Text Color};
  220. }
  221.  
  222. #sidebar-img {
  223. width: 220px;
  224. height: 220px;
  225. border: 2px solid {color:Border Color};
  226. position: relative;
  227. left: 45px;
  228. }
  229.  
  230. #c-sidebar a {
  231. color: {color:Text Color};
  232. }
  233.  
  234. {CustomCSS}
  235. </style>
  236. <!--That {CustomCSS} variable lets users add their own custom CSS without having to edit the theme's whole HTML.-->
  237. </head>
  238. <body>
  239. <!--The bottom sidebar, containing the Pages-->
  240. <div id="b-sidebar" class="info sidebar">
  241. <h2>Pages</h2>
  242. <div>
  243. {block:HasPages}
  244. {block:Pages}
  245. <div class="button bigbutton">
  246. <a href="{URL}">{Label}</a>
  247. </div>
  248. {/block:Pages}
  249. {/block:HasPages}
  250. </div>
  251. </div>
  252.  
  253. <!--The Corner/Credit sidebar, containing a theme credit link. Remove this and I will end you.-->
  254. <div id="c-sidebar" class="info sidebar">
  255. <a href="https://antagonistchanthemes.tumblr.com/">Theme Credit</a>
  256. </div>
  257.  
  258. <!--The left sidebar, containing the title and description-->
  259. <div id="l-sidebar" class="info sidebar">
  260. {block:ShowTitle}<h2 id="title"><a href="/">{Title}</a></h2>{/block:ShowTitle}
  261. {block:ShowDescription}{block:Description}<p>{Description}</p>{/block:Description}{/block:ShowDescription}
  262. </div>
  263.  
  264. <!--The right sidebar, containing the avatar, buttons, and pagination.-->
  265. <div id="r-sidebar" class="info sidebar">
  266. {block:ShowAvatar}<img id="sidebar-img" src="{image:Sidebar Image}"/>{/block:ShowAvatar}
  267. <div id="basicbuttons">
  268. {block:PreviousPage}
  269. <div id="backbutton" class="button minibutton">
  270. <a href="{PreviousPage}"><img id="butpic" src="https://static.tumblr.com/lq337zo/laHpqpxy8/back.png"></a>
  271. </div>
  272. {/block:PreviousPage}
  273. <div id="messagebutton" class="button minibutton">
  274. <a href="/message"><img id="butpic" src="https://static.tumblr.com/lq337zo/yWGpqpxyk/inbox.png"></a>
  275. </div>
  276. <div id="homebutton" class="button minibutton">
  277. <a href="/"><img id="butpic" src="https://static.tumblr.com/lq337zo/feEpqpxyh/home.png"></a>
  278. </div>
  279. <div id="archivebutton" class="button minibutton">
  280. <a href="/archive"><img id="butpic" src="https://static.tumblr.com/lq337zo/u36pqpxyd/archive.png"></a>
  281. </div>
  282. {block:NextPage}
  283. <div id="nextbutton" class="button minibutton">
  284. <a href="{NextPage}"><img id="butpic" src="https://static.tumblr.com/lq337zo/JLGpqpxys/next.png"></a>
  285. </div>
  286. {/block:NextPage}
  287. </div>
  288. </div>
  289.  
  290. <!--The main body of the theme, containing posts and page content-->
  291. <main role="main"> <div id="center">
  292. {block:Posts}
  293. {block:Text}
  294. <div class="post info entry text">
  295. {block:Title}
  296. <h3><a href="{Permalink}">{Title}</a></h3>
  297. {/block:Title}{Body}
  298. </div>
  299. {/block:Text}
  300.  
  301. {block:blockquote}{/block:blockquote}
  302.  
  303. {block:Photo}
  304. <div class="post info entry photo">
  305. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  306.  
  307. {block:Caption}
  308. <div class="caption">{Caption}</div>
  309. {/block:Caption}
  310. </div>
  311. {/block:Photo}
  312. {block:Panorama}
  313. <div class="post info entry panorama">
  314. {LinkOpenTag}
  315. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  316. {LinkCloseTag}{block:Caption}
  317. <div class="caption">{Caption}</div>
  318. {/block:Caption}
  319. </div>
  320. {/block:Panorama}
  321. {block:Photoset}
  322. <div class="post info entry photoset">
  323. {Photoset-500}{block:Caption}
  324. <div class="caption">{Caption}</div>
  325. {/block:Caption}
  326. </div>
  327. {/block:Photoset}
  328. {block:Quote}
  329. <div class="post info entry quote">
  330. <div class="secondarypost">
  331. "{Quote}"
  332. </div>
  333. {block:Source}
  334. <div class="source">{Source}</div>
  335. {/block:Source}
  336. </div>
  337. {/block:Quote}
  338. {block:Link}
  339. <div class="post info entry link">
  340. <a href="{URL}" class="link" {Target}>{Name}</a>
  341.  
  342. {block:Description}
  343. <div class="description">{Description}</div>
  344. {/block:Description}
  345. </div>
  346. {/block:Link}
  347. {block:Chat}
  348. <div class="post info entry chat">
  349. {block:Title}
  350. <h3><a href="{Permalink}">{Title}</a></h3>
  351. {/block:Title}
  352.  
  353. <ul class="chat">
  354. {block:Lines}
  355. <li class="{Alt} user_{UserNumber}">
  356. {block:Label}
  357. <span class="label">{Label}</span>
  358. {/block:Label}{Line}
  359. </li>
  360. {/block:Lines}
  361. </ul>
  362. </div>
  363. {/block:Chat}
  364. {block:Video}
  365. <div class="post info entry video">
  366. {Video-500}{block:Caption}
  367. <div class="caption">{Caption}</div>
  368. {/block:Caption}
  369. </div>
  370. {/block:Video}
  371. {block:Audio}
  372. <div class="post info entry audio">
  373. {AudioEmbed}{block:Caption}
  374. <div class="caption">{Caption}</div>
  375. {/block:Caption}
  376. </div>
  377. {/block:Audio}
  378. {block:Answer}
  379. <div class="post info entry answer">
  380. <div class="question secondarypost">
  381. <p>
  382. {Asker}: {Question}
  383. </p>
  384. </div>
  385.  
  386. {block:Answerer}
  387. <div class="answer">
  388.  
  389. <div class="caption">
  390. {Answerer}: <div class="answers">{Answer}</div>
  391. </div>
  392. </div>
  393. {/block:Answerer}
  394.  
  395. <div class="replies">
  396. {Replies}
  397. </div>
  398. </div>
  399. {/block:Answer}
  400.  
  401. <div class="post-footer info entry">
  402. + {block:Date}
  403. <a class="note-count" href="{Permalink}#notes">{TimeAgo}</a> +
  404. {/block:Date}
  405. {block:NoteCount}
  406. <a class="note-count" href="{Permalink}#notes">
  407. {NoteCountWithLabel}
  408. </a> +
  409. {/block:NoteCount}
  410. {block:RebloggedFrom}
  411. <a href="{ReblogParentURL}">via</a> +
  412. {/block:RebloggedFrom}
  413. {block:ContentSource}
  414. <a href="{SourceURL}">source</a> +
  415. {/block:ContentSource}
  416. <p id="tag">
  417. {block:HasTags}
  418. {block:Tags}
  419. <a href="{TagURL}">#{Tag},</a>
  420. {/block:Tags}
  421. {/block:HasTags}
  422. </p>
  423. </div>
  424. {block:PostNotes}
  425. <div class="info entry">
  426. {PostNotes}
  427. </div>
  428. {/block:PostNotes}
  429.  
  430. {block:Posts}
  431. </div></main>
  432. </body>
  433. </hmtl>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!