You are here

Home » API reference » Footnotes 7.2

footnotes.css in Footnotes 7.2

Same filename and directory in other branches
  1. 5.2 footnotes.css
  2. 5 footnotes.css
  3. 6.2 footnotes.css
  4. 6 footnotes.css
  5. 7.3 footnotes.css
/*
 * CSS specific to Footnotes module.
*
* Thanks to binford2k@lug.wsu.edu for this tip and drinkypoo
* for the question leading up to it. http://drupal.org/node/80538
*/
 

/* Add empty space before footnotes and a black line on top. */
.footnotes {
  clear: both;
  margin-top: 4em;
  margin-bottom: 2em;
  border-top: 1px solid #000000;
}

/* Make footnotes appear in a smaller font */
.footnotes {
  font-size: 0.9em;
}

/* 
  Make the footnote a supertext^1
*/
.see-footnote {
  vertical-align: top;
  position: relative;
  top: -0.25em;
  font-size: 0.9em;
}

/* Hide the bullet of the UL list of footnotes*/

ul.footnotes {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
ul.footnotes li {
  margin-left: 2.5em;
  list-style-type: none;
  background: none; /* Garland theme sets a bullet via background image, this must be unset! See bug 861634 */
}


/* Move the footnote number outside of the margin for footnote text (hanging indent) */
ul.footnotes {
  /* This is apparently very needed for the "position: absolute;" below to work correctly*/
  position: relative; 
}
.footnotes .footnote-label {
  position: absolute;
  left: 0px;
  z-index: 2;
}

/* Highlight the target footnote (or ref number, if a backlink was used) when user clicks a footnote. */
.see-footnote:target,
.footnotes .footnote:target {
  background-color: #eeeeee;
}
.see-footnote:target {
  border: solid 1px #aaaaaa;
}


/* Note: This CSS has a minor bug on all versions of IE in that the footnote numbers 
are aligned with the absolute bottom of their space, thus being a couple of pixels 
lower than their corresponding line of text. IE5.5 has a serious bug in that the numbers 
are not shifted left at all, thus being garbled together with the start of their text. */

/* 
  Make the multiple backlinks a supertext^1
*/
.footnotes .footnote-multi {
  vertical-align: top;
  position: relative;
  top: -0.25em;
  font-size: 0.75em;
}


/*
 * Textile Footnotes 
 */
 /* First footnote */
 #fn1 {
   border-top: 1px solid #000000;
   margin-top: 3em;
 }
 .footnote {
   font-size: 0.9em;
 }

File

footnotes.css
View source 
  1. /*

  2.  * CSS specific to Footnotes module.

  3. *

  4. * Thanks to binford2k@lug.wsu.edu for this tip and drinkypoo

  5. * for the question leading up to it. http://drupal.org/node/80538

  6. */

  7.  

  8. 

  9. /* Add empty space before footnotes and a black line on top. */

  10. .footnotes {

  11.   clear: both;

  12.   margin-top: 4em;

  13.   margin-bottom: 2em;

  14.   border-top: 1px solid #000000;

  15. }

  16. 

  17. /* Make footnotes appear in a smaller font */

  18. .footnotes {

  19.   font-size: 0.9em;

  20. }

  21. 

  22. /* 

  23.   Make the footnote a supertext^1

  24. */

  25. .see-footnote {

  26.   vertical-align: top;

  27.   position: relative;

  28.   top: -0.25em;

  29.   font-size: 0.9em;

  30. }

  31. 

  32. /* Hide the bullet of the UL list of footnotes*/

  33. 

  34. ul.footnotes {

  35.   list-style-type: none;

  36.   margin-left: 0;

  37.   padding-left: 0;

  38. }

  39. ul.footnotes li {

  40.   margin-left: 2.5em;

  41.   list-style-type: none;

  42.   background: none; /* Garland theme sets a bullet via background image, this must be unset! See bug 861634 */

  43. }

  44. 

  45. 

  46. /* Move the footnote number outside of the margin for footnote text (hanging indent) */

  47. ul.footnotes {

  48.   /* This is apparently very needed for the "position: absolute;" below to work correctly*/

  49.   position: relative; 

  50. }

  51. .footnotes .footnote-label {

  52.   position: absolute;

  53.   left: 0px;

  54.   z-index: 2;

  55. }

  56. 

  57. /* Highlight the target footnote (or ref number, if a backlink was used) when user clicks a footnote. */

  58. .see-footnote:target,

  59. .footnotes .footnote:target {

  60.   background-color: #eeeeee;

  61. }

  62. .see-footnote:target {

  63.   border: solid 1px #aaaaaa;

  64. }

  65. 

  66. 

  67. /* Note: This CSS has a minor bug on all versions of IE in that the footnote numbers 

  68. are aligned with the absolute bottom of their space, thus being a couple of pixels 

  69. lower than their corresponding line of text. IE5.5 has a serious bug in that the numbers 

  70. are not shifted left at all, thus being garbled together with the start of their text. */

  71. 

  72. /* 

  73.   Make the multiple backlinks a supertext^1

  74. */

  75. .footnotes .footnote-multi {

  76.   vertical-align: top;

  77.   position: relative;

  78.   top: -0.25em;

  79.   font-size: 0.75em;

  80. }

  81. 

  82. 

  83. /*

  84.  * Textile Footnotes 

  85.  */

  86.  /* First footnote */

  87.  #fn1 {

  88.    border-top: 1px solid #000000;

  89.    margin-top: 3em;

  90.  }

  91.  .footnote {

  92.    font-size: 0.9em;

  93.  }

  94.