API tools faq
paste
Advertisement
Guest User

Verses Page Base - Canariis

a guest
Aug 4th, 2015
236
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 36.05 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.   "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4.     <head>
  5.         <title>Verses</title>
  6.         <link href='http://fonts.googleapis.com/css?family=Poiret+One|Josefin+Slab:400,300' rel='stylesheet' type='text/css'>
  7.         <style type="text/css">
  8.             /*
  9.             This holds the whole kit and caboodle for verse-related info.
  10.             That weird filter stuff is to provide the grayscale information.
  11.             If you do not want grayscale, remove the last 3 properties (filter: url,
  12.             filter: gray, and -webkit-filter:grayscale)
  13.             */
  14.             .verse{
  15.                 -webkit-transition: all 0.3s ease;
  16.                 -moz-transition: all 0.3s ease;
  17.                 -ms-transition: all 0.3s ease;
  18.                 -o-transition: all 0.3s ease;
  19.                 transition: all 0.3s ease;
  20.                 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  21.                 filter: gray; /* IE6-9 */
  22.                 -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  23.             }
  24.  
  25.             /*
  26.             This prevents the verse information from being displayed.
  27.             Do. Not. Remove.
  28.             */
  29.             .verse-description{
  30.                 display: none;
  31.             }
  32.  
  33.             /*
  34.             The total container. Be very careful manipulating size values.
  35.             If you would like the container to be differently sized, make sure
  36.             that you adjust the height across all relevant pieces (container,
  37.             sidebar, window) and that the width is equal to sidebar+window.
  38.             margin-left/right:auto causes the box to be centered.
  39.             margin-top offsets it from the top. this is a preference and can
  40.             be removed.
  41.             color defines the text color; background-color defines the bg color.
  42.  
  43.             TO MAKE IT MOVABLE (NOT CENTERED):
  44.             change position to fixed
  45.             remove anything with "margin"
  46.             use top: [number]px; and left: [number]px;
  47.             these will set the position of the box
  48.             this allows you to use the "contained theme" style images
  49.             if you use one and want some consistency
  50.             */
  51.             #container{
  52.                 position:relative;
  53.                 background-color: #EEE;
  54.                 color:#000;
  55.                 width: 753px;
  56.                 height: 450px;
  57.                 margin-top: 25px;
  58.                 margin-left: auto;
  59.                 margin-right:auto;
  60.                 border: 1px dotted #fff;
  61.                 font-family: "Josefin Slab", serif;
  62.             }
  63.  
  64.             /*
  65.             This is where your images go.
  66.             The background color only really matters if you have fewer than 5
  67.             verses.
  68.             Width is 250+the width of the scrollbar
  69.             float:left forces it to stay to the left
  70.             overflow-y allows for scrolling (recommended NOT to change)
  71.             */
  72.             #sidebar{
  73.                 background-color:rgb(0.333,0.333,0.333);
  74.                 width:253px;
  75.                 height:450px;
  76.                 float:left;
  77.                 overflow-y: scroll;
  78.             }
  79.  
  80.             /*
  81.             This is where the information for the verses will show up.
  82.             Width is whatever you want it to be - 2*padding
  83.             Make sure to update container accordingly
  84.             padding gives a buffer between the text and the walls of
  85.             the window
  86.             overflow allows for scrolling
  87.             float-left keeps everything in a line rather than the sidebar
  88.             being above the window
  89.             font-size is self explanatory
  90.             font-weight is a stylistic choice, feel free to change
  91.             */
  92.             #window{
  93.                 width:490px;
  94.                 height:440px;
  95.                 float:left;
  96.                 overflow-y: scroll;
  97.                 padding: 5px;
  98.                 font-size:0.8em;
  99.                 font-weight: lighter;
  100.  
  101.             }
  102.  
  103.             /*
  104.             This affects everything outside of the container.
  105.             Set a background image or something here if you'd like.
  106.             */
  107.             body{
  108.                 background-color: #999;
  109.                 color: #FFF;
  110.             }
  111.  
  112.             /*
  113.             These two control the linkbar at the top of the page.
  114.             the only new ones here are font-variant, and
  115.             letter-spacing; variant provides small caps while letter
  116.             spacing spaces out the letters; both are preferences.
  117.             You can change most of this however you'd like.
  118.             text-decoration none keeps the lines from showing under the links.
  119.             */
  120.             #linkbar{
  121.                 font-size: 1.2em;
  122.                 color: #FFF;
  123.                 font-weight: lighter;
  124.                 font-variant: small-caps;
  125.                 letter-spacing: 5px;
  126.                 margin-left: auto;
  127.                 margin-right: auto;
  128.                 text-align: center;
  129.                 text-decoration: none;
  130.             }
  131.             /*
  132.             This makes it fade to white on hover. Preference.
  133.             */
  134.             #linkbar a{
  135.                 -webkit-transition: all 0.3s ease;
  136.                 -moz-transition: all 0.3s ease;
  137.                 -ms-transition: all 0.3s ease;
  138.                 -o-transition: all 0.3s ease;
  139.                 transition: all 0.3s ease;
  140.                 color: #FF3333;
  141.                 text-decoration: none;
  142.             }
  143.             #linkbar a:hover{
  144.                 color: #FFF;
  145.                 border-bottom: 1px solid #FFF;
  146.             }
  147.  
  148.             /*
  149.             This forces the images to display at 250x100px as
  150.             well as have no gaps between them. If you want gaps,
  151.             remove the display:block line.
  152.             */
  153.             .verse-image{
  154.                 width:250px;
  155.                 height:100px;
  156.                 margin:0px;
  157.                 display:block;
  158.  
  159.             }
  160.  
  161.             /*
  162.             This removes the grayscale on hover. If  you don't
  163.             want grayscale, you can remove this entirely.
  164.             */
  165.             .verse:hover{
  166.                 filter: none;
  167.                 -webkit-filter: grayscale(0%);
  168.             }
  169.  
  170.             /*
  171.             This highlights the currently-visible verse's image
  172.             so that it is not grayed out.
  173.             */
  174.             .verse-active{
  175.                 filter: none;
  176.                 -webkit-filter: grayscale(0%);
  177.             }
  178.  
  179.             /*
  180.             Styles for the main title line. You can adjust as needed.
  181.             All of this stuff has been seen before.
  182.             */
  183.             .title-line{
  184.                 text-align: center;
  185.                 display:block;
  186.                 margin-right: auto;
  187.                 margin-left: auto;
  188.                 font-size:2em;
  189.                 font-weight: lighter;
  190.                 font-variant: small-caps;
  191.                 color: #FF3333;
  192.                 font-family: "Poiret One", "sans-serif";
  193.             }
  194.  
  195.             /*
  196.             Styles for the sub heading line. You can adjust as needed.
  197.             All of this stuff has been seen before.
  198.             */
  199.             .sub-heading{
  200.                 text-align: center;
  201.                 display:block;
  202.                 margin-right: auto;
  203.                 margin-left: auto;
  204.                 font-size:1.5em;
  205.                 color: #FF7E7E;
  206.                 font-family: "Poiret One", "sans-serif";
  207.             }
  208.  
  209.             /*
  210.             Sets italics (em) and bold(strong) to different colors.
  211.             This is a preference- feel free to remove.
  212.             */
  213.             #window em{
  214.                 color: #FF7E7E;
  215.             }
  216.             #window strong{
  217.                 color: #FF3333;
  218.             }
  219.  
  220.             /*
  221.             Special note, to anyone who wants to use centered icons/banners
  222.             inside of the window, uncomment (remove the slash-asterisk at the top and bottom of this block):
  223.             #window img{
  224.                 display:block;
  225.                 margin-right: auto;
  226.                 margin-left: auto;
  227.             }
  228.             */
  229.  
  230.  
  231.             /*
  232.             Scrollbar stuff- If you want to change, I recommend
  233.             generating a new one. You can toy around with these values,
  234.             but it's good to have a generator handy if you break something.
  235.             */
  236.             ::-webkit-scrollbar {
  237.               width: 3px;
  238.               height: 3px;
  239.             }
  240.             ::-webkit-scrollbar-button {
  241.               width: 0px;
  242.               height: 0px;
  243.             }
  244.             ::-webkit-scrollbar-thumb {
  245.               background: #e1e1e1;
  246.               border: 0px none #ffffff;
  247.               border-radius: 50px;
  248.             }
  249.             ::-webkit-scrollbar-thumb:hover {
  250.               background: #ffffff;
  251.             }
  252.             ::-webkit-scrollbar-thumb:active {
  253.               background: #000000;
  254.             }
  255.             ::-webkit-scrollbar-track {
  256.               background: #666666;
  257.               border: 0px none #ffffff;
  258.               border-radius: 6px;
  259.             }
  260.             ::-webkit-scrollbar-track:hover {
  261.               background: #666666;
  262.             }
  263.             ::-webkit-scrollbar-track:active {
  264.               background: #333333;
  265.             }
  266.             ::-webkit-scrollbar-corner {
  267.               background: transparent;
  268.             }
  269.  
  270.             /*
  271.             This class is for the credit link. Don't remove. Please. Just. Don't.
  272.             */
  273.             .credit{
  274.                 position:fixed;
  275.                 bottom:2px;
  276.                 right:2px;
  277.                 color: #FFF;
  278.                 font-size: 0.5em;
  279.             }
  280.         </style>
  281.     </head>
  282.     <body>
  283.         <div id="linkbar"><a href="/">HOME</a> | <a href="/rules">RULES</a> | <a href="http://tumblr.com/dashboard">DASH</a></div>
  284.         <div id="container">
  285.             <div id="sidebar">
  286.  
  287.                 <!-- General layout of divs:
  288.                 Verse: ultimate container for the information. Don't touch.
  289.                     ** IF YOU START WITH A DEFAULT VERSE IN THE WINDOW **
  290.                         verse-active : set the verse div to also have verse-active as a class
  291.                                         this will start this image out without grayscale
  292.                                         example visible on 3rd verse div here.
  293.                 Verse-image: replace the source with a 250x100 pixel image/banner for the verse.
  294.                              You will need to host these yourself. I recommend making a permanent draft that you
  295.                              just edit with new images and copy the image urls from that.
  296.                 Verse-description: This is where all of the html pertaining to your verse
  297.                                    will go. Write this out like you would any other time.
  298.                                    I've included a few fancier classes you can use.
  299.  
  300.                 class: title-line: USE WITH A SPAN. This provides a title. You can use it at any point in the window,
  301.                                     but I think it looks best at just the top.
  302.                 class: sub-heading: Use as a sub heading (also with a span) and intersperse int through the text.
  303.                                     Maybe for important quotes, section breaks, etc. Your call here.
  304.  
  305.                 I have styled em and strong elements, but no others. If you wish to style h1/h2/h3/etc,
  306.                 add a block up in styles with #window [element]{color: [hex code];} or whatever else you need.
  307.                 You can also contact me for help.-->
  308.  
  309.                 <!-- BEGIN COPY HERE -->
  310.                 <div class="verse">
  311.                     <img src="http://dummyimage.com/250x100/FF7E7E.png" class="verse-image" />
  312.                     <div class="verse-description">
  313.                         <span class="title-line">
  314.                             THIS IS A TITLE LINE FOR YOUR VERSE
  315.                         </span>
  316.                         <span class="sub-heading">
  317.                             other important things can use this one
  318.                         </span>
  319.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p>
  320.                         <strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></strong>
  321.                         <em><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></em>
  322.                         <span class="sub-heading">
  323.                             you can use these between paragraphs to denote important things
  324.                         </span>
  325.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p>
  326.                         <strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></strong>
  327.                         <em><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></em>
  328.                     </div>
  329.                 </div>
  330.                 <!-- END COPY HERE -->
  331.                 <!-- BEGIN COPY HERE -->
  332.                 <div class="verse">
  333.                     <img src="http://dummyimage.com/250x100/FF7E7E.png" class="verse-image" />
  334.                     <div class="verse-description">
  335.                         <span class="title-line">
  336.                             THIS IS A TITLE LINE FOR YOUR VERSE
  337.                         </span>
  338.                         <span class="sub-heading">
  339.                             other important things can use this one
  340.                         </span>
  341.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p>
  342.                         <strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></strong>
  343.                         <em><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></em>
  344.                         <span class="sub-heading">
  345.                             you can use these between paragraphs to denote important things
  346.                         </span>
  347.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p>
  348.                         <strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></strong>
  349.                         <em><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></em>
  350.                     </div>
  351.                 </div>
  352.                 <!-- END COPY HERE -->
  353.                 <!-- BEGIN COPY HERE -->
  354.                 <div class="verse verse-active">
  355.                     <img src="http://dummyimage.com/250x100/FF7E7E.png" class="verse-image" />
  356.                     <div class="verse-description">
  357.                         <span class="title-line">
  358.                             THIS IS A TITLE LINE FOR YOUR VERSE
  359.                         </span>
  360.                         <span class="sub-heading">
  361.                             other important things can use this one
  362.                         </span>
  363.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p>
  364.                         <strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></strong>
  365.                         <em><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></em>
  366.                         <span class="sub-heading">
  367.                             you can use these between paragraphs to denote important things
  368.                         </span>
  369.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p>
  370.                         <strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></strong>
  371.                         <em><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></em>
  372.                     </div>
  373.                 </div>
  374.                 <!-- END COPY HERE -->
  375.                 <!-- BEGIN COPY HERE -->
  376.                 <div class="verse">
  377.                     <img src="http://dummyimage.com/250x100/FF7E7E.png" class="verse-image" />
  378.                     <div class="verse-description">
  379.                         <span class="title-line">
  380.                             THIS IS A TITLE LINE FOR YOUR VERSE
  381.                         </span>
  382.                         <span class="sub-heading">
  383.                             other important things can use this one
  384.                         </span>
  385.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p>
  386.                         <strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></strong>
  387.                         <em><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></em>
  388.                         <span class="sub-heading">
  389.                             you can use these between paragraphs to denote important things
  390.                         </span>
  391.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p>
  392.                         <strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></strong>
  393.                         <em><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></em>
  394.                     </div>
  395.                 </div>
  396.                 <!-- END COPY HERE -->
  397.                 <!-- BEGIN COPY HERE -->
  398.                 <div class="verse">
  399.                     <img src="http://dummyimage.com/250x100/FF7E7E.png" class="verse-image" />
  400.                     <div class="verse-description">
  401.                         <span class="title-line">
  402.                             THIS IS A TITLE LINE FOR YOUR VERSE
  403.                         </span>
  404.                         <span class="sub-heading">
  405.                             other important things can use this one
  406.                         </span>
  407.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p>
  408.                         <strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></strong>
  409.                         <em><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></em>
  410.                         <span class="sub-heading">
  411.                             you can use these between paragraphs to denote important things
  412.                         </span>
  413.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p>
  414.                         <strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></strong>
  415.                         <em><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nibh sed lacus tincidunt tristique. Nunc consequat, leo a aliquet bibendum, orci urna aliquet eros, nec ullamcorper augue urna vel lorem. Pellentesque ut porta massa, eget imperdiet ipsum. Morbi vestibulum at neque sed finibus. Mauris viverra vestibulum orci in accumsan. Curabitur et augue congue, posuere lacus sit amet, vulputate nibh. Suspendisse potenti. Integer vehicula eget eros sit amet fermentum. Etiam nisl ligula, pulvinar sit amet ultrices non, ultricies et quam. Nullam quis velit semper, facilisis libero nec, aliquam urna. Donec eget augue egestas, rutrum urna id, cursus elit. Vivamus ultricies accumsan lacus at gravida.</p></em>
  416.                     </div>
  417.                 </div>
  418.                 <!-- END COPY HERE -->
  419.             </div>
  420.             <div id="window">
  421.                 <p>
  422.                     Please note: any html  you put in here will disappear on the first click of a verse. It will be unavailable until the user refreshes. You can use this to include a quick guide on how to navigate (click a picture to begin or a similar message) or put the html of your default verse in here. Just remember that it won't be visible again until the user refreshes. Using a default verse here would benefit you the most, as the information would still be available to the users by simply clicking to another verse and then back to the default one. No information would actually be lost in this process.
  423.                 </p>
  424.                 <p>
  425.                     If you are invested in doing very serious editing to this code, I recommend getting a text editor designed to edit these types of documents. The two I recommend most are Notepad++ and Sublime Text Editor. Both are free, although Sublime will yell at you to pay for it every couple dozen saves. These provide syntax coloring and collapsible sections, extremely useful in a document this big. (It's over 450 lines long.) Sublime also offers a code map to help you jump straight to a section of code. (N++ might too, but I have yet to find it)
  426.                 </p>
  427.             </div>
  428.         </div>
  429.         <!-- CREDIT!! DON'T REMOVE!! LOOK HOW SMALL AND OUT OF THE WAY IT IS JUST DON'T TOUCH IT!! -->
  430.         <a href="http://ariicelis.tumblr.com" class="credit">AC</a>
  431.         <!-- If you must edit the jquery/javascript please be very careful. The most I would recommend if you don't know
  432.         what you're doing is to change the times for the transitions (the numbers in fadeIn and fadeOut). The values are in milliseconds.
  433.         1/4 of a second: 250
  434.         1/3 of a second: 333
  435.         1/2 of a second: 500
  436.         1 second: 1000
  437.         Those are good starting points. -->
  438.         <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  439.         <script type="text/javascript">
  440.         var main=function(){
  441.             $('.verse').click(function(){
  442.                 $('#sidebar').children('.verse-active').removeClass('verse-active');
  443.                 $(this).addClass('verse-active');
  444.                 var curr = $(this).children('.verse-description').html();
  445.                 //WHEN YOU USE THIS PAGE, UNCOMMENT THE LINES BELOW
  446.                 //BY REMOVING THE // AT THE START
  447.                 //AND DELETE THE LINES AT THE BOTTOM
  448.                 //THIS IS PURELY TO DISPLAY THE FADING PROCESS
  449.                 //THE LINES BELOW ARE TO KEEP YOU FROM FADING
  450.                 //BETWEEN THE SAME TEXT (IE CLICKED THE SAME VERSE AGAIN)
  451.  
  452.                 // if($('#window').html()!==curr){
  453.                 //  $('#window').fadeOut(333, function(){
  454.                 //  $('#window').hide().html(curr).fadeIn(500);
  455.                 //  });
  456.                 // }
  457.  
  458.                 //These are the lines to delete
  459.                 //These are in place for display purposes only             
  460.                 $('#window').fadeOut(333, function(){
  461.                     $('#window').hide().html(curr).fadeIn(500);
  462.                     });
  463.             });
  464.         };
  465.  
  466.         $(document).ready(main);
  467.         </script>
  468.     </body>
  469. </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!