API tools faq
paste
Advertisement
cornetespoir

About Page #1

cornetespoir
May 25th, 2016
939
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.35 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. // about #1
  3.  
  4. by espoirthemes //
  5.  
  6. +don't move the egg. there's no reason to on this page.
  7. +the directions are marked by /* */ in css, and the rest of the content is under <body>
  8. +skip down to <style type="text/css"> to start the actual customization
  9.  
  10. carousel tutorial by acuite
  11. -->
  12. <html>
  13. <head>
  14. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  15. <script type="text/javascript" src="https://static.tumblr.com/lv6casp/aCNm74ixy/stepcarousel.js">
  16. /***********************************************
  17. * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
  18. * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
  19. * This notice must stay intact for legal use
  20. ***********************************************/
  21. </script>
  22.  
  23. <script type="text/javascript">
  24. stepcarousel.setup({
  25. galleryid: 'mygallery', //id of carousel DIV
  26. beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
  27. panelclass: 'panel', //class of panel DIVs each holding content
  28. autostep: {enable:false, moveby:1, pause:3000},
  29. panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
  30. defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://66.media.tumblr.com/1a53784f3e0efdba90624778161e17a3/tumblr_inline_mzhe64unBw1qfc9y0.gif', -40, 120], rightnav: ['http://66.media.tumblr.com/1daa68c7813ab37983767ae4d5fbac6d/tumblr_inline_mzhe45lYvU1qfc9y0.gif', 24, 120]},
  31. statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
  32. contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
  33. })
  34. </script>
  35.  
  36.  
  37. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
  38.  
  39. <title>About </title>
  40.  
  41. <link rel="shortcut icon" href="{Favicon}" />
  42.  
  43. </head>
  44.  
  45.  
  46.  
  47. <!-- start of CSS -->
  48. <style type="text/css">
  49.  
  50.  
  51.  
  52. /* this is just the carousel, no need to mess with this part */
  53. .stepcarousel{
  54. position:relative;
  55. width:500px;
  56. height:50vh;
  57. }
  58. .stepcarousel .belt{position:absolute;left:0px;top:0px;}
  59. .stepcarousel .panel{float:left; overflow:auto;margin:10px;width:500px; height:50vh;}
  60.  
  61.  
  62.  
  63.  
  64. /* customization starts here */
  65. body{
  66. background:#f9fafe url(''); /*background */
  67. color:#222; /*text color */
  68. font-family:helvetica;
  69. /*do not make this font small */
  70. font-size:16px;
  71. line-height:140%;
  72. }
  73.  
  74.  
  75. /*this is the styling for the title of the tags sections */
  76.  
  77. h1{
  78. background-color:#fff;
  79. padding:2px; font-size:18px;
  80. box-shadow:4px 4px #eee;
  81. border:1px solid #ddd;
  82. width:100px;
  83. }
  84.  
  85. /*links */
  86.  
  87. a{color:#aaa; /*link color */
  88. text-decoration:none;
  89. }
  90. a:hover{color:#0E2430;} /*link hover */
  91.  
  92.  
  93. /* styling of the container of everything */
  94. #container {
  95. margin:100px auto; /* making 100px bigger will move the container further down and smaller the opposite */
  96. border:1px solid #ddd;
  97. box-shadow:10px 10px rgba(50,50,50, .12); /*you can remove this line if you don't want a shadow */
  98. background:white;
  99. width:500px; /*it's best to keep the width this size, as it will mess with the panels too */
  100. padding:10px;
  101. position:relative;
  102.  
  103.  
  104. }
  105.  
  106. /*battery */
  107. #battery {
  108. position:absolute;
  109. margin-top:-30px;
  110. }
  111. #battery i{
  112. color:black; /*battery color */
  113. font-size:18px; /*battery size */
  114. }
  115.  
  116.  
  117.  
  118. /*about (speech bubble) */
  119. .description{
  120. padding:10px;
  121. position: relative;
  122. background:#eee; /*color of speech bubble */
  123. left:140px;
  124. width:300px;
  125. margin: 0;
  126. /*do not make this a small font */
  127. font-size:14px;
  128. padding:10px;
  129. z-index:2;
  130. /*erase the next 2 lines if you don't want the corners to be rounded */
  131. -moz-border-radius:10px;
  132. -webkit-border-radius:10px;
  133. box-shadow: 0px 0 1px rgba(0,0,0,0);
  134. }
  135.  
  136. /* don't touch this next part */
  137. .description:after {
  138. position: absolute;
  139. display: block;
  140. content: "";
  141. border-color: #eee transparent transparent transparent;
  142. border-style: solid;
  143. border-width: 15px 15px 0px;
  144. height:0;
  145. width:0;
  146. transform:rotate(-10deg);
  147. position:absolute;
  148. left:-16px;
  149. top:26px;
  150. }
  151.  
  152. .info {
  153. position:absolute;
  154. height:100px;
  155. width:100px;
  156. padding:6px;
  157. margin-top:110px;
  158. font-size:12px;
  159.  
  160. }
  161.  
  162.  
  163. .text {padding:10px; width:400px; border-bottom:1px solid #eee;}
  164.  
  165.  
  166. /*blacklist */
  167. .blacklist {margin-top:20px; margin-left:60px; width:360px;}
  168. .blacklist li {
  169. list-style:none;
  170. display:inline-block;
  171. margin:4px;
  172. }
  173.  
  174.  
  175. .blacklist li:before{
  176. content:'✗'; /*this is the symbol that will appear before the words of the list. make sure to put a space after the symbol, otherwise the symbol appears too close to the words */
  177. color:#B40404; /*color of the symbol */
  178. }
  179.  
  180. .spoons {margin-left:12px; margin-top:12px; }
  181. .spoons i {font-size:30px; /*spoon sizer */}
  182.  
  183. /*this is the color for how many spoons you have */
  184. .full i {color:black; float:left;}
  185.  
  186. /* color of spoons that you don't have */
  187. .empty i {color:#ddd; float:left;}
  188.  
  189.  
  190. /*editing anything past this part of the css isn't really recommended, because messing up here might throw off a lot of things.
  191.  
  192. !!! please skip down to <body> !!! */
  193.  
  194. .label {background-color:#eee; color:#222; padding:4px;}
  195.  
  196. .info li {border:1px solid #eee; list-style:none; padding:none; margin:2; width:112px; margin-left:-6px;}
  197. #mygallery-paginate {
  198. position: absolute;
  199. width: 1000px;
  200. opacity: 0.5;
  201. margin: 0px 0;
  202.  
  203. }
  204.  
  205.  
  206. #cont{
  207.  
  208. margin:10px;
  209. }
  210. .entry{
  211. width:70px;
  212. height:70px;
  213. border:4px solid #eee;
  214. padding:2px;
  215.  
  216. }
  217. .entry img{
  218.  
  219. width:70px;
  220. height:70px;
  221. }
  222.  
  223. #cont li {display:inline-block; list-style:none; margin:10px;
  224.  
  225. }
  226. #mygallery-paginate img {cursor:help;}
  227.  
  228. #egg { opacity:.8; left:10px; bottom:10px; position:fixed;bottom:4px;display:block; width: 14px; height: 18px; background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  229.  
  230. border:1px solid #222222; z-index:4;
  231.  
  232. }
  233. #egg:hover { animation-name: egg;
  234. animation-duration: 1s;
  235. animation-iteration-count: infinite;}
  236. @keyframes egg{
  237. 0%{}
  238. 10%{transform:rotate(20deg)}
  239. 80%{transform:rotate(-20deg)}
  240. 100%{}
  241. }
  242.  
  243.  
  244.  
  245. </style>
  246. <!-- end of css -->
  247.  
  248.  
  249. <body>
  250.  
  251.  
  252. <div id="container">
  253.  
  254.  
  255. <div id="battery">
  256. <!-- this is the battery that's on top of the container. the percentages are like this:
  257. after fa fa-battery- replace (or keep) quarter with:
  258. empty
  259. quarter
  260. half
  261. three-quarters
  262. full
  263. -->
  264. <i class="fa fa-battery-quarter"></i> !
  265. <!--end of battery -->
  266. </div>
  267.  
  268. <!--don't touch thiese next three divs -->
  269. <div id="mygallery" class="stepcarousel">
  270. <div class="belt">
  271. <div class="panel"> <!--start of about -->
  272.  
  273.  
  274. <!-- this image is your avatar, but you can change {portraitUrl-96} with another image url if you want! -->
  275. <img src="{portraitUrl-96}" style="float:left; position:absolute; width:96px; height:96px; border:1px solid #eee; padding:8px">
  276.  
  277. <!-- this is the little info sections under the avater -->
  278. <div class="info">
  279.  
  280. <!-- each row is in between <li> and </li> in between <span class="label"> and </span> contains the category, and in between </span> and </li> is the info -->
  281.  
  282. <li>
  283. <span class="label">
  284. age: </span> 19 </li>
  285.  
  286.  
  287. <li>
  288. <span class="label">
  289. gender:</span> ???</li>
  290.  
  291. <li>
  292. <span class="label">
  293. birthday:</span> 12/21/96</li>
  294. <li>
  295. <span class="label">
  296. status:</span> active
  297.  
  298. </li>
  299.  
  300. <!-- end of info -->
  301. <center>
  302.  
  303. <!-- here's the spoon meter! you can change the "3/5 spoons" to whatever label you want -->
  304. <a title="3/5 spoons">
  305.  
  306. <!--here's where the actual spoon meter starts. this takes a little bit more of html than the previous parts -->
  307.  
  308. <div class="spoons">
  309. <!-- the following class of "full" is where all of the spoons you actually have is. right now there are 3 spoons in the full class.
  310.  
  311. to add more spoons to this class, copy <i class="fa fa-spoon"></li> and paste it after the last spoon on the list. and just erase one if you need to remove a spoon. -->
  312.  
  313. <div class="full">
  314. <i class="fa fa-spoon"></i>
  315.  
  316. <i class="fa fa-spoon"></i>
  317.  
  318. <i class="fa fa-spoon"></i>
  319.  
  320. </div>
  321. <!-- the next class, "empty" is for the spoons you don't have. By default, there's a total of 5 spoons, so there's only 2 spoons in this class.
  322.  
  323. if you have more than 5 total spoons, add a <i class="fa fa-spoon"></li> like with the full class.
  324.  
  325. Due to the space on the about panel, having a whole lot of spoons may throw the meter off. -->
  326. <div class="empty">
  327.  
  328. <i class="fa fa-spoon"></i>
  329.  
  330. <i class="fa fa-spoon"></i>
  331.  
  332. </div>
  333.  
  334. <!--
  335. If you can't/don't want to use spoons, you can change the word spoon to the word heart for a heart meter. Or you can use any other icon fron Font Awesome.
  336.  
  337. also, if you don't want to use any meter, you can erase everything between <center> and the </center> below -->
  338.  
  339. </div></a>
  340. </center>
  341.  
  342.  
  343. <!-- end of left section of the about -->
  344. </div>
  345.  
  346.  
  347. <!-- here's the actual about! you can write as much as you want, but it will scroll after a certain point -->
  348. <div class="description">
  349.  
  350. I am an egg who tries to make themes. <br>
  351. This blog started out as a hypomanic impulse but is now a really neat hobby.
  352. <br> <br>
  353. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate a sapien sit amet condimentum Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  354.  
  355.  
  356. </div> <!-- end of about -->
  357. </div> <!-- end of about panel -->
  358.  
  359.  
  360. <!-- start of blacklist panel -->
  361. <div class="panel">
  362. <i class="fa fa-times" style="float:left; font-size:50px; padding:6px; text-shadow:2px 2px rgba(50,50,50,.2);"></i>
  363.  
  364. <!-- this is the title of this section -->
  365. <div class="text">
  366. please tag these things for me:
  367. </div>
  368.  
  369.  
  370. <!-- this is the actual blacklist part. replace words between <li> </li> with what you want people to tag for you. erase the line between <li> </li> if you want to remove one, or copy and paste it to add another one to the list -->
  371. <div class="blacklist">
  372. <li> gore</li>
  373.  
  374. <li> nsfw </li>
  375.  
  376. <li> blood</li>
  377.  
  378. <li> horror</li>
  379.  
  380. <li> emetophobia </li>
  381.  
  382. <li> suicide </li>
  383.  
  384. <li> eye strain</li>
  385.  
  386. <li> flashing gif </li>
  387.  
  388. </div> <!-- end of blacklist -->
  389. </div> <!-- end of blacklist panel -->
  390.  
  391.  
  392. <!-- tags/links/navigation panel -->
  393. <div class="panel">
  394. <div class="text">
  395.  
  396. <i class="fa fa-tags"></i> Tags</div>
  397. <center>
  398. <table cellpadding="10">
  399.  
  400. <!--section 1-->
  401. <tr><td>
  402. <h1>Name</h1><!--name of the section of links-->
  403. <!--add the name of your tag after /tagged/, and replace tag name with whatever the tag is -->
  404. <a href="/tagged/">tag name</a><br>
  405. <a href="/tagged/">tag name</a><br>
  406. <a href="/tagged/">tag name</a><br>
  407. <a href="/tagged/">tag name</a><br>
  408. </td>
  409.  
  410. <!--section 2 -->
  411. <td>
  412. <h1>Name</h1>
  413.  
  414. <a href="/tagged/">tag name</a><br>
  415. <a href="/tagged/">tag name</a><br>
  416. <a href="/tagged/">tag name</a><br>
  417. <a href="/tagged/">tag name</a><br>
  418. </td>
  419.  
  420. <!--section 3 -->
  421. <td>
  422. <h1>Name</h1>
  423.  
  424.  
  425. <a href="/tagged/">tag name</a><br>
  426. <a href="/tagged/">tag name</a><br>
  427. <a href="/tagged/">tag name</a><br>
  428. <a href="/tagged/">tag name</a><br>
  429. </td></tr>
  430.  
  431. <!--section 4 -->
  432. <tr><td>
  433. <h1>Name</h1>
  434.  
  435. <a href="/tagged/">tag name</a><br>
  436. <a href="/tagged/">tag name</a><br>
  437. <a href="/tagged/">tag name</a><br>
  438. <a href="/tagged/">tag name</a><br>
  439.  
  440. </td>
  441.  
  442. <!--section 5 -->
  443. <td>
  444. <h1>Name</h1>
  445.  
  446. <a href="/tagged/">tag name</a><br>
  447. <a href="/tagged/">tag name</a><br>
  448. <a href="/tagged/">tag name</a><br>
  449. <a href="/tagged/">tag name</a><br>
  450.  
  451. </td>
  452. <!--section 6 -->
  453.  
  454. <td>
  455. <h1>Name</h1>
  456.  
  457. <a href="/tagged/">tag name</a><br>
  458. <a href="/tagged/">tag name</a><br>
  459. <a href="/tagged/">tag name</a><br>
  460. <a href="/tagged/">tag name</a><br>
  461.  
  462. </td>
  463. </tr></table></center>
  464.  
  465.  
  466. </div><!-- end tags -->
  467.  
  468.  
  469.  
  470. <!-- this last panel can be whatever you want, but I've set it up to be a family/network/ID/kin type thing. if you want it to just be text, erase everything between <div id="cont"> and the </div> before <!--end last panel content -->
  471. <div class="panel">
  472.  
  473. <div class="text">Title of section</div>
  474. <div id="cont">
  475.  
  476.  
  477. <li>
  478. <div class="entry"> <!--first entry -->
  479.  
  480. <!-- enter the url of the image of whatever you're using this for. the title is the info/description that appears when you hover over the picture. this can be the name of the user, ID, etc.
  481.  
  482. if you want the image to become a link too:
  483. put <a href="URL"> before <img src="" title="">
  484. and </a> after the image. -->
  485.  
  486.  
  487. <img src="" title="">
  488.  
  489. </div></li> <!--end first entry -->
  490.  
  491. <!-- 2nd entry -->
  492. <li><div class="entry">
  493.  
  494. <img src="" title="">
  495.  
  496. </div></li> <!-- end of 2nd entry -->
  497.  
  498. <!--3rd entry -->
  499. <li><div class="entry">
  500.  
  501. <img src="">
  502.  
  503. </div></li> <!-- end of 3rd entry -->
  504.  
  505. <li><div class="entry"> <!-- 4th entry -->
  506.  
  507. <img src="">
  508.  
  509. </div></li> <!--end of 4th entry -->
  510.  
  511.  
  512.  
  513. </div>
  514. <!-- end last panel content -->
  515.  
  516.  
  517. </div>
  518.  
  519. <!--end last panel -->
  520. </div> <!-- end belt -->
  521. </div> <!--end slider -->
  522. </div> <!--end container -->
  523.  
  524.  
  525. <!-- and that's it! I hope I explained this clearly enough. I can try to help if something is confusing!
  526.  
  527. if you want the circle navigation icons for the slides, erase the next set of <!-- and -->
  528.  
  529.  
  530. <!--
  531. <br> <div align="center">
  532.  
  533. <p id="mygallery-paginate" style="width:230px; top:60px; line-space:10px; left:600px; z-index:100; border:1px solid transparent; border-bottom:1px solid #eee">
  534. <img src="http://www.dynamicdrive.com/dynamicindex4/opencircle.png" data-over="http://www.dynamicdrive.com/dynamicindex4/graycircle.png" data-select="http://www.dynamicdrive.com/dynamicindex4/closedcircle.png" data-moveby="1" /></p><br>
  535. </div>
  536. -->
  537.  
  538.  
  539.  
  540. <a href="http://espoirthemes.tumblr.com" title="credit"><div id="egg"></div></a>
  541. </body>
  542. </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!