API tools faq
paste
Advertisement
cornetespoir

Base Code without instructions

cornetespoir
Feb 1st, 2017
2,130
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.80 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. // Base code by espoirthemes //
  4.  
  5. + feel free to edit this as much as you want! It's a base code for a reason
  6. + if you're heavily editing this feel free to remove the credit or replace it with your own!
  7. + you may release this as your own theme after!
  8. + you don't HAVE to give me credit for this base code, but it'd be really nice if you did! If you barely edited it, please leave credit.
  9.  
  10. + show me what you made! I'd love to see how people transformed this base code into their own creations!!
  11.  
  12. -->
  13.  
  14.  
  15. <!DOCTYPE html>
  16. <html>
  17. <head>
  18.  
  19. <title>{Title}</title>
  20. <link rel="shortcut icon" href="{Favicon}">
  21.  
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23. {block:Description}
  24. <meta name="description" content="{MetaDescription}" />
  25. {/block:Description}
  26.  
  27. <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
  28.  
  29. <meta name="image:background" content="" />
  30.  
  31.  
  32.  
  33. <meta name="color:background" content="#f7f7f7" />
  34. <meta name="color:posts" content="#fff" />
  35. <meta name="color:border" content="#eee" />
  36. <meta name="color:text" content="#222" />
  37.  
  38. <meta name="color:links" content="{AccentColor}" />
  39. <meta name="color:link underline" content="#ddd" />
  40. <meta name="color:link hover" content="#eee" />
  41. <meta name="color:scrollbar" content="{AccentColor}" />
  42.  
  43. <meta name="select:blockquote border style" content="solid" title="solid" />
  44. <meta name="select:blockquote border style" content="dotted" title="dotted" />
  45. <meta name="select:blockquote border style" content="dashed" title="dashed" />
  46.  
  47. <meta name="if:full background" content="" />
  48. <meta name="if:hover tags" content="" />
  49. <meta name="text:post width" content="400" />
  50.  
  51. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  52. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  53.  
  54. <script type="text/javascript" src="https://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
  55.  
  56. <!-- I wrote so that the video posts will always be the same size as the container!
  57. (shythemes has a fancier script for this and this one is very specific to this base)
  58. -->
  59. {block:indexpage}
  60. <script>
  61. $(document).ready(function(){
  62. $('.tumblr_video_iframe, .embed_iframe, .tumblr_video_container ').css('width', '{text:post width}px');
  63. });
  64. </script>
  65. {/block:indexpage}
  66.  
  67.  
  68. </head>
  69.  
  70. <style type="text/css">
  71.  
  72. /*scrollbar styling */
  73.  
  74. ::-webkit-scrollbar {
  75. width: 12px;
  76. height:6px;
  77.  
  78.  
  79. }
  80. ::-webkit-scrollbar-button {
  81. width: 0px;
  82. height: 0px;
  83. }
  84. ::-webkit-scrollbar-thumb {
  85. background: {color:scrollbar};
  86. border:4px solid {color:background};
  87. border-top:4px solid {color:background};
  88. border-bottom:4px solid {color:background};
  89. cursor:pointer;
  90. border-radius: 8px;
  91. }
  92. ::-webkit-scrollbar-track {
  93. background:#aaa;
  94. border: 5px solid {color:background};
  95. border-top:12px solid {color:background};
  96. border-bottom:12px solid {color:background};
  97.  
  98.  
  99. }
  100.  
  101.  
  102. /*body*/
  103.  
  104. body{
  105. margin: 0;
  106. font-family: Roboto, sans-serif;
  107. background: {color:background} url({image:background})
  108. {block:iffullbackground} no-repeat center center fixed;
  109. -webkit-background-size: cover;
  110. -moz-background-size: cover;
  111. -o-background-size: cover;
  112. background-size: cover; {/block:iffullbackground};
  113. background-attachment: fixed;
  114. word-wrap: break-word;
  115. font-size: 16px;
  116. color: {color:text};
  117. }
  118.  
  119. /*Links */
  120.  
  121. a{
  122. color: {color:links};
  123. text-decoration: none;
  124. border-bottom: 1px solid {color:link underline};
  125. transition: .6s;
  126. }
  127.  
  128.  
  129. a:hover {
  130. color: {color:link hover};
  131. transition: .6s;
  132. }
  133.  
  134. /*Blockquotes */
  135.  
  136. blockquote{
  137.  
  138. border-left: 1px {select:blockquote border style} {color:border};
  139. padding-left: 4px;
  140.  
  141. }
  142.  
  143. /*prevents the blockquote images from going off of the post */
  144. blockquote img{
  145. max-width: 100%;}
  146.  
  147. /* Header */
  148.  
  149. header {
  150. position:relative;
  151. width:{text:post width}px;
  152. margin:100px auto;
  153. }
  154.  
  155.  
  156. .avatar-square img{ background:#ffffff; border-radius:4px; }
  157.  
  158. .avatar-circle img{ background:#ffffff; border-radius: 100%; }
  159.  
  160. .title {
  161. font-size:1.2em;
  162. border:none;
  163. margin-top:4px;
  164. font-family:{TitleFont};
  165. color:{TitleColor};
  166.  
  167. }
  168.  
  169. .description {
  170. padding:20px;
  171. margin-top:-22px;
  172. }
  173. .links a {
  174. border:none;
  175. margin:10px;
  176.  
  177. }
  178.  
  179. /* Sidebar */
  180.  
  181. /* if you wanted a sidebar, here's a vERY simple sidebar (just the shape) to get you started
  182.  
  183. #sidebar {
  184. width:240px;
  185.  
  186. if you want a 100% tall sidebar, set the height to 100vh (will adjust for every screen to be 100% tall)
  187. height:auto;
  188.  
  189. padding:10px;
  190. position:fixed;
  191.  
  192. i made the color the same as the posts so it can match, but if you'd rather it have its own color, you can change it/set it in the meta tags
  193. background:{color:posts};
  194. border:1px solid {color:border};
  195. left:100px;
  196. top:100px;
  197.  
  198. } */
  199.  
  200. /*Container and Posts*/
  201.  
  202. #container {
  203. width:500px;
  204. position:relative;
  205. margin:10px auto ;
  206. }
  207.  
  208.  
  209. .posts{
  210. position:relative;
  211. margin: /*this is the top*/ 100px /*right*/ auto /*bottom*/ 100px /*and left */auto;
  212. width: {text:post width}px;
  213. background-color:{color:posts};
  214. border:1px solid {color:border};
  215. font-size:1em;
  216. min-width:250px;
  217. {block:permalinkpage}
  218. width:500px;
  219. {/block:permalinkpage}
  220. }
  221.  
  222.  
  223. /* headings, with h1 being the biggest/first heading */
  224.  
  225. h1{
  226. padding:20px;
  227. font-size:1.4em;
  228. text-align:center;
  229. border-bottom:1px solid {color:border};
  230.  
  231. }
  232.  
  233. h2 {
  234. font-size:1.3em;
  235. }
  236.  
  237. .posts img {
  238. display:block;
  239. max-width:100%;
  240.  
  241. }
  242.  
  243. /* Post Captions */
  244. .caption {
  245. padding:10px;
  246. }
  247.  
  248. /*Ask Posts */
  249.  
  250. /*styling for the speech bubble */
  251.  
  252. .speechbubble {
  253.  
  254. width:calc({text:post width}px - 150px);
  255. position: relative;
  256. left:80px;
  257. margin: 0;
  258. padding:16px;
  259. height: auto;
  260. background: #fff;
  261. border: {color:border} solid 1px;
  262. {block:permalinkpage}
  263. width:360px;
  264. {/block:permalinkpage}
  265. }
  266.  
  267. /* the before and after are the triangle part of the speech bubble */
  268. .speechbubble:after
  269. {
  270. content: '';
  271. position: absolute;
  272. border-style: solid;
  273. border-width: 12px 17px 12px 0;
  274. border-color: transparent #fff; /* keep same color as bubble */
  275. display: block;
  276. width: 0;
  277. z-index: 1;
  278. left: -16px;
  279. top: 10px;
  280. }
  281. .speechbubble:before
  282. {
  283.  
  284. content: '';
  285. position: absolute;
  286. border-style: solid;
  287. border-width: 12px 17px 12px 0;
  288. border-color: transparent {color:border}; /*keep same color as border */
  289. display: block;
  290. width: 0;
  291. z-index: 0;
  292. left: -17px;
  293. top: 10px;
  294. }
  295.  
  296. /* Chat Posts */
  297.  
  298. .chat {
  299. padding:5px;
  300. line-height:150%;
  301. }
  302.  
  303.  
  304. .chat:nth-of-type(odd) {
  305. background:{color:text};
  306. color:{color:posts};
  307. -webkit-transition:.5s;
  308. transition:.5s; }
  309.  
  310. .chat:nth-of-type(odd) b {
  311. color:{color:posts};
  312. -webkit-transition:.5s;
  313. transition:.5s; }
  314.  
  315. .chat:nth-of-type(even) {
  316. background:{color:posts};
  317. color:{color:text};
  318. -webkit-transition:.5s;
  319. transition:.5s; }
  320. .chat:nth-of-type(even) b{
  321. color:{color:text};
  322. -webkit-transition:.5s;
  323. transition:.5s; }
  324.  
  325. /* Audio Posts */
  326.  
  327.  
  328. #albumart{
  329. z-index:2;
  330. float:left;
  331. border-radius:100%;
  332. height:100px;
  333. border:1px solid {color:info border};
  334. width:100px;
  335.  
  336.  
  337.  
  338. }
  339.  
  340. /* circle inside the album art to make it look like a CD */
  341.  
  342. .playerbox {
  343. float:left;
  344. padding:6px;
  345. }
  346.  
  347.  
  348. .posts #albumart img{
  349.  
  350.  
  351. float:left;
  352. border-radius:100%;
  353. width:100px;
  354. height:100px;
  355. border-width:0px; transition:.6s;
  356.  
  357. }
  358.  
  359. .playerbox:hover #albumart img{
  360. transition:0.6s;
  361. transform:rotate(300deg); }
  362.  
  363. .player {
  364. width:20px;
  365. overflow:hidden;
  366. height:40px;
  367. transform:scale(1.2);
  368. border-radius:100%;
  369. top:8px;
  370. bottom:10px;
  371. left:4px;
  372.  
  373. padding:8px;
  374. padding-top:6px;
  375. padding-left:10px;
  376. padding-bottom:0px;
  377. border-radius:100%;
  378. position:absolute;
  379.  
  380. }
  381.  
  382.  
  383. .playercon {
  384. width:56px;
  385. height:56px;
  386. border-radius:100%;
  387. left:0px;
  388. background:white;
  389. top:22px;
  390. position:relative;
  391. border:1px solid {color:info border};
  392. -webkit-transition-duration:500ms;
  393. -moz-transition-duration:500ms;
  394. -o-transition-duration:500ms;
  395. -ms-transition-duration:500ms;
  396. }
  397. {/block:permalinkpage}
  398. .infobox {
  399. float:left top;
  400. margin-left:120px;
  401. background-color:transparent;
  402. padding:14px;
  403. padding-left:4px;
  404. max-height:140px;
  405. text-align:left;
  406. color:{color:text};
  407. }
  408.  
  409. .trackname {
  410.  
  411. letter-spacing:2px;
  412. padding:2px;
  413. font-size:1em;
  414. font-weight:300;
  415. color:#333;
  416. border-bottom:1px solid {color:border};
  417.  
  418.  
  419. }
  420. .artist {
  421. letter-spacing:2px;
  422. padding:2px;
  423. border-bottom:1px solid {color:border};
  424. }
  425.  
  426. .album {
  427. padding:2px;
  428. border-bottom:1px solid {color:border};
  429. }
  430.  
  431.  
  432.  
  433.  
  434. #audiopost {
  435. width:{text:post width}px;
  436. {block:permalinkpage}
  437. width:500px;
  438. {/block:permalinkpage}
  439.  
  440.  
  441. }
  442.  
  443.  
  444. /* post info */
  445. .info {
  446. position:relative;
  447. border-top:1px solid {color:border};
  448. padding:10px;
  449.  
  450. }
  451.  
  452. .info a {
  453. border:none;
  454. }
  455.  
  456.  
  457. /* Tags */
  458.  
  459. .tags {
  460. position:absolute;
  461. right:-250px;
  462. width:230px;
  463. {block:ifhovertags}
  464. opacity:0;
  465. transform:translate(100px /*x axis*/, 0px /* y axis */);
  466. transition:.6s;
  467. {/block:ifhovertags}
  468.  
  469. }
  470.  
  471. {block:ifhovertags}
  472. .posts:hover .tags{
  473. opacity:1;
  474. transform:translate(0,0); /* moves tags back to original spot */
  475. transition:.6s;
  476. }
  477.  
  478. {/block:ifhovertags}
  479. .tags a {
  480. border:none;
  481. }
  482.  
  483.  
  484. /* PostNotes */
  485.  
  486.  
  487.  
  488. ol.notes {
  489. margin:auto;
  490. position:relative;
  491. width:{text:post width}px;
  492. min-width:250px;
  493. list-style:none; /* removes bullet points */
  494. padding:none;
  495.  
  496.  
  497. }
  498.  
  499. ol.notes li {
  500. list-style:none;
  501. padding:10px;
  502. border:1px solid {color:border};
  503. padding-left:none;
  504. width:calc({text:post width}px - 20px);
  505. background:{color:posts};
  506. margin:10px 0px;
  507. transform:translate(-20px, 0px);
  508.  
  509. }
  510.  
  511. ol.notes img {
  512. transform:translate(-4px,4px);
  513. border-radius:4px;
  514. float:left;
  515. }
  516.  
  517.  
  518. /* Pagination */
  519.  
  520. #pagination a {color:{AccentColor}}
  521. #pagination { text-align:center; font-size:.9em; margin:100px auto; position:relative;}
  522.  
  523. /* the next buttons */
  524. .jump_page {
  525. padding: 4px 6px;
  526. border:1px solid {color:info border};
  527. margin:2px;
  528. background:{color:posts};
  529. text-decoration:none;
  530. border-radius:4px;
  531. }
  532.  
  533. .jump_page a {
  534. border:none;
  535.  
  536. }
  537. /* current page */
  538. .current_page {
  539. padding: 4px 6px;
  540. border:1px solid {AccentColor};
  541. background:{AccentColor};
  542. opacity:.8;
  543. color:white;
  544. transition:.6s;
  545. border-radius:4px;
  546. margin:2px;
  547. text-decoration:none;
  548. }
  549.  
  550. .current_page:hover {
  551. opacity:1;
  552. transition:.6s;
  553. }
  554. /* Credit */
  555.  
  556. /* since this is a base code, I didn't include my usual css egg credit. You can style it however you want, but I'll keep the common recetangular shape */
  557.  
  558. #credit {
  559. position:fixed;
  560. right: 10px;
  561. bottom: 10px;
  562. font-size:1.2em;
  563. background:white;
  564. border:1px solid {color:border};
  565. padding:4px;
  566. }
  567.  
  568.  
  569. {CustomCSS}
  570. </style>
  571. <body>
  572.  
  573. <header>
  574. <center>
  575. {block:ShowAvatar} <div class="avatar-{AvatarShape}">
  576. <img src="{PortraitUrl-64}">
  577. </div>{/block:ShowAvatar}
  578.  
  579.  
  580. <a href="/"><h2 class="title">{Title}</h2></a>
  581. <div class="description">
  582. {Description}
  583. </div>
  584.  
  585. <div class="links">
  586.  
  587. <a href="/">{lang:Home}</a>
  588.  
  589. {block:AskEnabled}
  590. <a href="/ask">{AskLabel}</a>
  591. {/block:AskEnabled}
  592. {block:SubmissionsEnabled}
  593. <a href="/submit">{SubmitLabel}</a>
  594. {/block:SubmissionsEnabled}
  595. <a href="/archive">{lang:Archive}</a>
  596.  
  597. <div style="margin-top:6px">
  598. {block:HasPages} {block:Pages}<a href="{URL}">{label}</a> {/block:Pages} {/block:HasPages}
  599. </div>
  600. </div>
  601. </center>
  602. </header>
  603.  
  604. <!-- here is the credit! if you're editing this base code for release, feel free to replace the url with your own! -->
  605. <div id="credit">
  606. <a href="http://espoirthemes.com" style="border:none;">
  607. <span class="fa fa-code"></span>
  608. </a></div>
  609.  
  610. <!-- container start -->
  611. <div id="container">
  612.  
  613.  
  614.  
  615.  
  616. {block:Posts}<div class="posts">
  617.  
  618. <!-- {block:NoRebloggedFrom}
  619. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  620. {/block:NoRebloggedFrom} -->
  621. {block:ContentSource}
  622. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  623. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  624. {/block:SourceLogo}
  625. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  626. {/block:ContentSource}
  627.  
  628. <!-- text post start -->
  629. {block:Text}
  630.  
  631. {block:Title}
  632. <h1><a href="{Permalink}">{Title}</a></h1>
  633. {/block:Title}
  634.  
  635. <div class="caption">{Body}</div>
  636.  
  637. {/block:Text} <!-- text post end -->
  638.  
  639. <!-- photo posts -->
  640. {block:Photo}
  641. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  642. {block:Caption}
  643. <div class="caption">{Caption}</div>
  644. {/block:Caption}
  645.  
  646. {/block:Photo}<!-- end photo posts -->
  647.  
  648. {block:Panorama}
  649. {LinkOpenTag}
  650. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  651. {LinkCloseTag}
  652.  
  653. {block:Caption}
  654. <div class="caption">{Caption}</div>
  655. {/block:Caption}
  656.  
  657. {/block:Panorama}
  658.  
  659. <!-- photoset posts -->
  660. {block:Photoset}
  661. {Photoset}
  662.  
  663. {block:Caption}
  664. <div class="caption">{Caption}</div>
  665. {/block:Caption}
  666.  
  667. {/block:Photoset}<!-- end photoset -->
  668.  
  669. <!-- quote posts -->
  670. {block:Quote}
  671. <div class="caption">
  672. "{Quote}"
  673.  
  674. {block:Source}
  675. <br> -{Source}
  676. {/block:Source}
  677. </div>
  678. {/block:Quote} <!-- end quote posts -->
  679.  
  680. <!-- link posts --> {block:Link}
  681.  
  682. <h1> <a href="{URL}" style="border:none" class="link" {Target}>{Name}</a></h1>
  683.  
  684. {block:Description}
  685. <div class="caption">{Description}</div>
  686. {/block:Description}
  687.  
  688. {/block:Link}
  689. <!-- end link posts -->
  690.  
  691. {block:Chat}
  692.  
  693.  
  694. <div class="caption">
  695. {block:Title}<a href="{Permalink}" style="background:transparent; padding:0;"><h1>{title}</h1></a>{/block:Title}
  696. {block:Lines} <div class="chat">{block:Label}<b>{Label}</b>{/block:Label} {Line}<br/></div>{/block:Lines}
  697.  
  698. </div>
  699.  
  700. {/block:Chat}{block:Video}
  701.  
  702. {Video-500}{block:Caption}
  703. <div class="caption">{Caption}</div>
  704. {/block:Caption}
  705.  
  706. {/block:Video}{block:Audio}
  707.  
  708. <div id="audiopost">
  709. <div class="playerbox">
  710. <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  711.  
  712. <center><div class="playercon"><div class="player">{AudioPlayerWhite}</div></div></center></div>
  713. <div class="infobox">
  714. <div class="trackname"> {block:TrackName}
  715. Track: {TrackName}
  716. {/block:TrackName} </div>
  717.  
  718.  
  719. <div class="artist">
  720. {block:Artist}
  721.  
  722. Artist: {Artist}
  723. {/block:Artist} </div>
  724.  
  725. <div class="album">
  726. {block:Album}
  727. Album: {Album}
  728. {/block:Album}
  729. </div>
  730.  
  731. </div></div> <br> {block:Caption}
  732. <div class="caption">{Caption}</div>
  733. {/block:Caption}
  734.  
  735. {/block:Audio}
  736.  
  737.  
  738.  
  739. {block:Answer}
  740. <div class="caption">
  741. <br>
  742. <div class="askerportrait"><img style="position:absolute; margin-left:10px" src="{AskerPortraitURL-40}" align="left" /></div><div class="speechbubble">{Asker} said: {Question}</div> {answer}
  743.  
  744. </div>
  745. {/block:Answer}
  746.  
  747. {block:HasTags} <div class="tags"> {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</div> {/block:HasTags}
  748.  
  749. {block:Date}
  750. <div class="info">
  751.  
  752. <a href="{permalink}" style="float:right;">{NoteCount}</a>
  753. <a href="/day/{year}/{monthnumberwithzero}/{dayofmonthwithzero}" title="at {12hour}:{minutes}{AmPM}" >{ShortMonth} {dayofmonth}, {Year}</a>
  754. {block:permalinkpage}
  755. {block:RebloggedFrom}<br> {lang:via} <a href="{ReblogParentURL}"> {ReblogParentName}</a> {lang:source} <a href="{ReblogRootURL}"> {ReblogRootName}</a>
  756. {/block:RebloggedFrom} {/block:permalinkpage}
  757. </div> <!-- end info -->
  758.  
  759. {/block:Date}
  760.  
  761.  
  762.  
  763. </div><!--posts end-->
  764. <div id="pagination"><!-- navigation for next post and previous post -->
  765. {block:PermalinkPagination}
  766. {block:PreviousPost}
  767. <a href="{PreviousPost}" class="jump_page">Previous Post</a>
  768. {/block:PreviousPost}
  769.  
  770. {block:NextPost}
  771. <a href="{NextPost}" class="jump_page">Next Post</a>
  772. {/block:NextPost}
  773. {/block:PermalinkPagination}
  774. </div>
  775.  
  776.  
  777. {block:PostNotes} {PostNotes-16} {/block:PostNotes} {/block:Posts}
  778.  
  779. <!-- pagination -->
  780. <div id="pagination">
  781.  
  782.  
  783. <!-- navigation for next day -->
  784. {block:DayPagination}{block:PreviousDayPage}
  785. <a href="{PreviousDayPage}" class="jump_page">
  786. &#171; {ShortMonth} {DayOfMonth}
  787. </a>
  788. {/block:PreviousDayPage}{block:NextDayPage}
  789. <a href="{NextDayPage}" class="jump_page">
  790. {ShortMonth} {DayOfMonth} &#187;
  791. </a>
  792. {/block:NextDayPage}{/block:DayPagination}
  793.  
  794. {block:PreviousPage}
  795. <a href="{PreviousPage}" class="jump_page">&#171; Previous</a>
  796. {/block:PreviousPage}{block:NextPage}
  797. <a href="{NextPage}" class="jump_page">Next &#187;</a>
  798. {/block:NextPage}
  799. </div><!-- pagination end -->
  800.  
  801. </div><!--container end-->
  802.  
  803.  
  804. </body>
  805. </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!