API tools faq
paste
Advertisement
SeoulChan

Basics (Base Code)

SeoulChan
Jul 17th, 2014
6,691
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Lua 12.45 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. base code by kaiguk (Ani)
  3. This base code was made for personal use or to make themes with.
  4. If you made little to no changes to it, please leave the credit,
  5. BUT if you want to build an actual theme with it, remove it and make it
  6. your own.
  7.  
  8. If you're having trouble:
  9.  
  10. here are some nice websites for you to go to for help
  11.  
  12. For html & css help:
  13.  
  14. http://www.w3schools.com/
  15.  
  16. https://www.tumblr.com/docs/en/custom_themes
  17.  
  18. http://theme-hunter.tumblr.com/ (they have good tutorials)
  19.  
  20. For colors:
  21.  
  22. http://www.degraeve.com/color-palette/
  23.  
  24. http://www.w3schools.com/tags/ref_colorpicker.asp
  25.  
  26. For pixels & backgrounds :
  27.  
  28. http://pixel-diary.tumblr.com/
  29.  
  30. http://engrampixel.co.vu/
  31.  
  32. http://whimsical.heartette.net/
  33.  
  34. Have Fun!!!
  35.  
  36. -->
  37.  
  38. <!DOCTYPE html>
  39.  
  40. <head>
  41.  
  42. <title>{Title}</title>
  43.  
  44. <!--This is your Favicon,  (short for favorite icon). You can put any icon that is 16x16, which is the common size for tumblr. If its any bigger or smaller, it won't look right and it will be ugly. -->
  45.  
  46. <link rel="shortcut icon" href="{Favicon}">
  47.  
  48. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  49.  
  50. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  51.  
  52. <!--These are the colors for the theme -->
  53.  
  54. <meta name="color:bold" content="#ccdd66"/>
  55. <meta name="color:italic" content="#dfea98"/>
  56. <meta name="color:underline" content="#cccccc"/>
  57. <meta name="color:background" content="#ffffff"/>
  58. <meta name="color:text" content="#aaaaaa"/>
  59. <meta name="color:link" content="#ccdd66"/>
  60. <meta name="color:hover" content="#ebf1c2"/>
  61. <meta name="color:border" content="#3bb5bb"/>
  62. <meta name="color:ask bubble" content="#ebf1c2"/>
  63. <meta name="color:scrollbar" content="#ecf2c1">
  64. <meta name="color:linktitlebg" content="#eeeeee"/>
  65. <meta name="color:linktitletext" content="#888888"/>
  66. <meta name="color:selection text" content="#888888"/>
  67. <meta name="color:selection bg" content="#eeeeee"/>
  68.  
  69. <!--These are the image that will be displayed on the theme -->
  70.  
  71. <meta name="image:sidebar img" content=""/>
  72. <meta name="image:bg" content=""/>
  73. <meta name="image:to top" content=""/>
  74.  
  75. <!--These are your links that will go on the theme too -->
  76.  
  77. <meta name="text:Link 1 URL" content="" />
  78. <meta name="text:Link 1" content="" />
  79. <meta name="text:Link 2 URL" content="" />
  80. <meta name="text:Link 2" content="" />
  81. <meta name="text:Link 3 URL" content="" />
  82. <meta name="text:Link 3" content="" />
  83. <meta name="text:Link 4 URL" content="" />
  84. <meta name="text:Link 4" content="" />
  85. <meta name="text:Link 5 URL" content="" />
  86. <meta name="text:Link 5" content="" />
  87.  
  88.  
  89. <!--This is for you hover titles (When you hover over a link) -->
  90.    
  91.  
  92. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  93. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  94. <script>
  95.     (function($){
  96.         $(document).ready(function(){
  97.             $("[title]").style_my_tooltips();
  98.         });
  99.     })(jQuery);
  100. </script>
  101.  
  102. <!--This is the theme making really begins, so put your theme making cap on and get started!-->
  103.  
  104.  
  105. <style type="text/css">
  106.  
  107. /* this is for the scrollbar */
  108.  
  109. ::-webkit-scrollbar{height: 9px; width: 9px; -webkit-border-radius: 0px; background:{color:background};
  110. }
  111.  
  112. ::-webkit-scrollbar-thumb{background:{color:scrollbar};}
  113. ::-webkit-scrollbar-track{background:{color:bg};
  114.  }
  115.  
  116. /* If you want a certain font, background color, your text color, font color,  etc. for the theme.  General stuff.*/
  117.  
  118. body {
  119. background:{color:background};
  120. background-image:url('{image:bg}');
  121. background-attachment:fixed;
  122. color:{color:text};
  123. font-family:arial;
  124. font-size:11px;
  125. text-align:justify;
  126. margin:0;
  127. line-height:16px;
  128. }
  129.  
  130. /* blockquote */
  131.  
  132. blockquote {
  133. padding:5px 0 5px 30px;
  134. border-left:1px solid {color:border};
  135. margin-left:30px;
  136. background:#fafafa;
  137. }
  138.  
  139. /* bold (b), italic (i,em), and underlined (u)  */
  140.  
  141. b,strong{
  142. color:{color:bold};
  143. }
  144.  
  145.  
  146. i,em{
  147. color:{color:italic};
  148. }
  149.  
  150.  
  151. u{
  152. color:{color:underline};
  153. }
  154.  
  155.  
  156. /* Links & hovers  */
  157.  
  158.  
  159. a {
  160. color:{color:link};
  161. text-decoration:none;
  162. -moz-transition-duration:1s;
  163. -webkit-transition-duration:1s;
  164. -o-transition-duration:1s;
  165. }
  166.  
  167.  
  168. a:hover {
  169. color:{color:hover};
  170. /* transition of the image when you hover on it */
  171. -moz-transition-duration:1s;
  172. -webkit-transition-duration:1s;
  173. -o-transition-duration:1s;
  174. }
  175.  
  176. /* Your sidebar, image, description and links  */
  177.  
  178.  
  179. #sidebar {
  180. padding:6px;
  181. text-align:right;
  182. position:fixed;
  183. margin-left:-180px;
  184. margin-top:200px;
  185. width:125px;
  186. }
  187.  
  188.  
  189. #sideimg img {
  190. width:100px;
  191. border-radius:80px;
  192. padding:8px;
  193. -moz-transition-duration:1s;
  194. -webkit-transition-duration:1s;
  195. -o-transition-duration:1s;
  196. }
  197.  
  198.  
  199. #sideimg img:hover {
  200. border-radius:0px;
  201. /* transition of the image when you hover on it */
  202. -moz-transition-duration:1s;
  203. -webkit-transition-duration:1s;
  204. -o-transition-duration:1s;
  205. }
  206.  
  207.  
  208. #links {
  209. width:150px;
  210. text-transform:lowercase;
  211. word-spacing:3px;
  212. text-align:justify;
  213. margin-left:18px;
  214. }
  215.  
  216.  
  217. #links a {
  218. margin-top:5px;
  219. display:inline-block;
  220. margin-bottom:5px;
  221. }
  222.  
  223.  
  224. #desc {
  225. width:100px;
  226. margin-left:18px;
  227. text-align:justify;
  228. font-size:11px;
  229. }
  230.  
  231.  
  232. #theme {
  233. left:50%;
  234. margin-left:-250px;
  235. position:absolute;
  236. }
  237.  
  238.  
  239. /* Your post  */
  240.  
  241.  
  242. #entries {
  243. margin-top:75px;
  244. width:500px;
  245.  
  246. }
  247.  
  248.  
  249. #posts {
  250. background:#fff;
  251. width:500px;
  252. margin-left:50px;
  253. margin-bottom:75px;
  254. border:5px solid {color:border};
  255. padding:20px;
  256. }
  257.  
  258.  
  259. #posts img {
  260. max-width:500px;
  261. }
  262.  
  263.  
  264. /* Quote & Source  */
  265.  
  266. #quote{
  267. text-align:left;
  268. font-size:14px;
  269. line-height:18px;
  270. font-weight:bold;
  271. }
  272.  
  273.  
  274. #source {
  275. margin-top:15px;
  276. text-align:right;
  277. }
  278.  
  279.  
  280. /* Audio  */
  281.  
  282.  
  283. .player {
  284. width:25px;
  285. height:25px;
  286. overflow:hidden;
  287. position:absolute;
  288. background:white;
  289. }
  290.  
  291.  
  292. .audioinfo {
  293. margin-left:50px;
  294. line-height:120%;
  295. }
  296.  
  297.    
  298. /* Speech Bubble for Question  */
  299.  
  300.  
  301. .bubble {
  302. width:400px;
  303. position: relative;
  304. background:{color:ask bubble};
  305. left:60px;
  306. margin: 0;
  307. padding:10px;
  308. text-align:center;
  309. -moz-border-radius:10px;
  310. -webkit-border-radius:10px;
  311. -webkit-box-shadow: 0px 0 1px rgba(0,0,0,0);
  312. -moz-box-shadow: 0px 0 1px rgba(0,0,0,0);
  313. box-shadow: 0px 0 1px rgba(0,0,0,0);
  314. }
  315.  
  316.  
  317. .bubble:after {
  318. position: absolute;
  319. display: block;
  320. content: "";
  321. border-color: {color:ask bubble} transparent transparent transparent;
  322. border-style: solid;
  323. border-width: 15px 15px 0px;
  324. height:0;
  325. width:0;
  326. position:absolute;
  327. left:-15px;
  328. top:10px;
  329. }
  330.  
  331.  
  332. /* Chats  */
  333.  
  334.  
  335. .chat ol {
  336. padding:0;
  337. list-style:none;
  338. }
  339.  
  340.  
  341. .line {
  342. list-style:none;
  343. padding:5px 0;
  344. }
  345.  
  346.  
  347. .label {
  348. text-decoration:bold;
  349. }
  350.  
  351.  
  352. /* Permalink & Info  */
  353.  
  354.  
  355. #info {
  356. width:474px;
  357. text-align:justify;
  358. line-height:15px;
  359. margin-top:10px;
  360. height:auto;
  361. background:#fafafa;
  362. padding:10px;
  363. }
  364.  
  365.  
  366. #perma {
  367. margin-top:10px;
  368. padding:5px;
  369. font-size:9px;
  370. color:{color:link};
  371. text-transform:normal;
  372. font-style:normal;
  373. letter-spacing:2px;
  374. text-align:center;
  375. }
  376.  
  377.  
  378. /* Notes */
  379.  
  380.  
  381. .note li {
  382. list-style-type:none;
  383. padding:10px 25px 10px 25px;
  384. text-align:left;
  385. margin:0px;
  386. border-bottom:1px solid {color:border};
  387. line-height:140%;
  388. -moz-transition-duration:0.5s;
  389. -webkit-transition-duration:0.5s;
  390. -o-transition-duration:0.5s;
  391. }
  392.  
  393.  
  394. .notes img {
  395. display:none!important;
  396. }
  397.  
  398.  
  399. /* For Hovering Over Links*/
  400.  
  401.  
  402. #s-m-t-tooltip {
  403. z-index: 9999;
  404. background: {color:LinkTitleBG};
  405. font-size: 10px;
  406. line-height: 11px;
  407. font-family: arial;
  408. letter-spacing: 1px;
  409. text-transform: normal;
  410. color: {color:LinkTitleText};
  411. max-width: 150px;
  412. word-wrap: break-word;
  413. padding: 2px 5px 2px 6px;
  414. display: block;
  415. margin: 24px 14px 7px 12px;
  416. -webkit-box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.10);
  417. -moz-box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.10);
  418. box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.10);
  419. }
  420.  
  421.  
  422. /* Selection Text & BG (instead of having that blue background when you highlight something) */
  423.  
  424.  
  425. ::selection {
  426. background:{color:selection bg};
  427. color:{color:selection text};
  428. }
  429.  
  430.  
  431. /* Scroll to Top button*/
  432.  
  433.    
  434. #scrollToTop:link, #scrollToTop:visited {
  435. display:none;
  436. position:fixed;
  437. bottom: 10px;
  438. right:10px;
  439. }
  440.  
  441. {CustomCSS}
  442.  
  443. </style>
  444.  
  445.  
  446. <!-- This is for infinite scroll -->
  447.  
  448. <script type="text/javascript" src="http://static.tumblr.com/q0etgkr/EIBmz7s0p/infinitescrolling.js"></script>
  449.  
  450. <!-- Your scroll to top button  -->
  451.  
  452.  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  453.  <script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  454.  <a href="javascript:;" id="scrollToTop"  title="top"><img src="{image:To Top}"></a></a>
  455.  
  456.  
  457. </head>
  458.  
  459. <!-- This is where you place you put your theme together and make it look all nice -->
  460.  
  461. <body>
  462.  
  463.  
  464. <div id="theme">
  465.  
  466. <div id="sidebar">
  467.  
  468. <div id="sideimg"><img src="{image:Sidebar img}"></div>
  469.  
  470. <div id="links">
  471.  
  472. {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
  473.  
  474. {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}
  475.  
  476. {block:ifLink3}<a href="{text:Link 3 URL}" >{text:Link 3}</a>{/block:ifLink3}
  477.  
  478. {block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifLink4}
  479.  
  480. {block:ifLink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:ifLink5}
  481. </div>
  482.  
  483. <div id="desc">{Description}</div>
  484.  
  485.  
  486. </div>
  487.  
  488. <div id="entries">
  489.  
  490. <!-- for your infinite scroll to work -->
  491.  
  492. <div class="autopagerize_page_element">
  493.  
  494. <!--This is where you fix all your post (your quotes post, text post, photo post, audio post, etc. -->
  495.  
  496. {block:Posts}
  497.  
  498. <div id="posts">
  499.  
  500. {block:Quote}
  501. <div id="quote">“{Quote}”</div>
  502. {block:Source}<div id="source">— {Source}</div>{/block:Source}
  503. {/block:Quote}
  504.  
  505.  
  506. {block:Text}
  507. {block:Title}
  508. <div id="title"><div style="font-size:17px; text-align:left;">{Title}</div></div>{/block:Title}
  509. {Body}
  510. {/block:Text}
  511.  
  512. {block:Link}
  513. <div id="title">
  514. <div style="font-size:17px; text-align:left;"><a href="{URL}">{Name} »</a></div></div>
  515. {block:Description}{Description}{/block:Description}
  516. {/block:Link}
  517.  
  518. {block:Chat}
  519. {block:Title}
  520. <h1>{Title}</h1>
  521. {/block:Title}
  522. <div class="chat">
  523. <ol>{block:Lines}
  524. <li class="line {Alt}">
  525. {block:Label}
  526. <span class="label">
  527. <b>{Label}</b></span>
  528. {/block:Label}{Line}</li>
  529. {/block:Lines}
  530. </ol></div>
  531. {/block:Chat}
  532.  
  533. {block:Photo}
  534. {LinkOpenTag}<center><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></center>
  535. {LinkCloseTag}
  536. {/block:Photo}
  537.  
  538. {block:Photoset}
  539. <center>{Photoset-500}</center>
  540. {/block:Photoset}
  541.  
  542. {block:Video}
  543. {Video-500}
  544. {/block:Video}
  545.  
  546. {block:Audio}<div class="player">{AudioPlayerWhite}</div><div class="audioinfo">{block:TrackName}{TrackName}{/block:TrackName}{block:Artist}<br> by {Artist}{/block:Artist}</div>
  547. {/block:Audio}
  548.  
  549.  
  550. {block:Answer}
  551. <div class="post"><br>
  552. <div class="askerportrait"><img style="border-radius:50px;" src="{AskerPortraitURL-40}" align="left"  /></div><div class="bubble">{Asker} asked: {Question}</div><br>
  553. <div style="margin-left:200px;">{Answer}</div>
  554. </div>
  555. {/block:Answer}
  556.  
  557. {block:IndexPage}
  558. <div id="perma">
  559. <img src="http://static.tumblr.com/3yblkz0/qSLn46s92/eee.png">
  560. <a href="{Permalink}">Posted {block:Date}{TimeAgo}{/block:Date} with {NoteCountWithLabel}</a> <img src="http://static.tumblr.com/3yblkz0/qSLn46s92/eee.png"></div>
  561. {block:IndexPage}
  562.  
  563. {block:PermalinkPage}
  564. {block:Date}
  565. <div id="info">
  566. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}<br>
  567. <b>Date:</b> {ShortMonth} {DayOfMonthWithZero}, {Year}<br>
  568. {block:NoteCount}
  569. <b>Notes:</b> {NoteCount}<br>
  570. {/block:NoteCount}
  571. {block:RebloggedFrom}
  572. <b>Via:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
  573. {/block:RebloggedFrom}
  574. {block:ContentSource}
  575. <b>Source:</b> <a href="{SourceURL}">{SourceTitle}</a><br>
  576. {/block:ContentSource}
  577. {block:HasTags}
  578. <b>Tagged:</b>
  579. {block:Tags}
  580. <a href="{TagURL}">#{Tag}</a>
  581. {/block:Tags}
  582. {/block:HasTags}
  583. </div>
  584. {/block:Date}
  585. {/block:PermalinkPage}
  586.  
  587. <div class="note">{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  588.  
  589. </div>
  590.  
  591. {/block:Posts}
  592.  
  593. <!-- Congratsss!!! This is the end of the theme, if you didn't change the theme at all, please keep the credit...and if you did..you know what to do already so I really don't need to tell you anymore...:PPP -->
  594.   <div style="position:fixed;bottom:3px; right:3px; font-size:11px; letter-spacing:1px; font-family:arial;"><a href="http://kaiguk.tumblr.com/" title="theme by Ani">KG</a>
  595. </div>
  596.  
  597. </div>
  598.  
  599. </div>
  600.  
  601. </body></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!