FANDOM


Quote is a module for creating stylized pull quotes. This includes both single quotes as well as dialogue text.

Features

  • Highly customizable with classes, inline styles, and portable/modular CSS.
  • Highly performant and backwards compatible with previous incarnations of the template.
  • Uses semantic markup and modern CSS for SEO, accessibility, and mobile-friendliness.
  • Optional features such as left- and right-aligning the pull quote. The template breaks silently and elegantly when not all parameters are provided, giving it flexibility.

How to install

Module

First thing is the module itself. You don't need to copy the code. Just create a module titled Module:Mbox (or any other—just remember to adjust #invoke calls) and put this in the code

return require('Dev:Quote')

CSS

Next, add the contents of MediaWiki:Global Lua Modules/Quote.css to your Common.css or Wikia.css, or copy and paste from the following:

:root {
  --pull-quote-max-width: 80%;
  --pull-quote-text-color: rgba(0, 0, 0, .8);
  --pull-quote-mark-color: rgba(0, 0, 0, .15);
  --pull-quote-mark-font: "Times New Roman", serif;
  --pull-quote-hyphens: auto;
  --pull-quote-frame-color: #bbb;
}
 
/* .WikiaPage added as a parent selector to the following in order to override default blockquote styles. */
 
.WikiaPage .pull-quote {
  display: flex;
  flex-wrap: wrap;
  max-width: var(--pull-quote-max-width);
  margin: 1em auto;
  font-size: 1em;
  line-height: 1.8;
}
 
.WikiaPage .pull-quote__text {
  flex-basis: 100%;
  position: relative;
  padding: 0 2em;
  hyphens: var(--pull-quote-hyphens);
  color: var(--pull-quote-text-color);
}
 
.WikiaPage .pull-quote__text::before, .WikiaPage .pull-quote__text::after {
  position: absolute;
  font-size: 3em;
  font-family: var(--pull-quote-mark-font);
  font-weight: 700;
  color: var(--pull-quote-mark-color);
}
 
.WikiaPage .pull-quote__text::before {
  content: "“";
  top: 0;
  left: 0;
  line-height: 1;
}
 
.WikiaPage .pull-quote__text::after {
  content: "”";
  bottom: 0;
  right: 0;
  line-height: 0.2;
}
 
.WikiaPage .pull-quote__source {
  margin-left: auto;
}
 
.WikiaPage .pull-quote__source::before {
  content: "—"; 
}
 
.WikiaPage .pull-quote--right, .WikiaPage .pull-quote--left {
  border: 1px solid var(--pull-quote-frame-color);
  border-left: 0;
  border-right: 0;
  padding: 1em 0;
  text-align: justify;
}
 
.WikiaPage .pull-quote--right {
  float: right;
  margin: 1em 0 1em 2em;
}
 
.WikiaPage .pull-quote--left {
  float: left;
  margin: 1em 2em 1em 0;
}

Template

The module is designed to be used as a regular template. To do that just create a template (ex: Template:Quote) with following content:

{{#invoke:Quote|quote}}

Now the template you created will accept parameters documented below.

To implement a dialogue template, the same module is used with a different parameter. Create a template (ex: Template:Dialogue) with:

{{#invoke:Quote|dialogue}}

To create a template accepting the parameters documented below.

These parameters can also be passed directly to the #invoke and will act as defaults. Their values will be overridden by same ones passed to the template.

Parameters

For examples of how to use these parameters, see #Examples.

Quote

Parameter name Description Required? Default
unnamed 1, or text, or quotetext The text to be quoted. Yes
unnamed 2, or person, or personquoted The person who stated the quoted text. No
unnamed 3, or source, or quotesource The source of the quote (e.g. the passage or title from which a person is being quoted). No

Dialogue

Parameter name Description Required? Default
odd unnamed parameter The person who stated the following quoted text. Yes
even unnamed parameter The text quoted by the person in the previous parameter. Yes
context The context in which the dialogue was stated (e.g. an event in which the dialogue was spoken). No
source The source of the dialogue (e.g. the passage or title from which a person is being quoted). No

Both

Parameter name Description Required? Default
align The alignment, either left or right, of the quote. If absent, the quote will be placed in the center of the page. If present, a new block-style will be used to separate it from the content, and it will be floated appropriately. No center
width The width of the quote in pixels. This only applies to left or right quotes, for determining how much it squeezes the content on either side, though the default value is generally appropriate for most circumstances. No 300px

Design

Some communities may wish to customize the appearance of the quotes. The source stylesheet is written with this in mind, exposing many appearance options as custom properties, or variables. To modify them, change their values in the :root selector of the stylesheet. They are as follows:

:root {
  /* The maximum width of center-aligned quotes. */
  --pull-quote-max-width: ;
 
  /* The color of the quote text. */
  --pull-quote-text-color: ;
 
  /* The color of the " marks. */
  --pull-quote-mark-color: ;
 
  /* The font of the " marks; serif works best for curly " marks. */
  --pull-quote-mark-font: ;
 
  /* Determines how lines are broken; the default value is to use hyphens. */
  --pull-quote-hyphens: ;
 
  /* For right and left-aligned quotes, the color of the top and bottom borders. */
  --pull-quote-frame-color: ;
}

To customize other elements of the design, you may edit the original stylesheet.

Examples

Basic

{{quote
|text   = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|person = John Doe
|source = ''A New Hope''
}}

Produces:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

John Doe, A New Hope

Left-aligned

{{quote
|text   = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|person = John Doe
|source = ''A New Hope''
|align  = left
}}

Produces:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

John Doe, A New Hope

Right-aligned

{{quote
|text   = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|person = John Doe
|source = ''A New Hope''
|align  = right
}}

Produces:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

John Doe, A New Hope

Dialogue

{{dialogue
|Vossler
|Listen to me, Basch. Your cage may have no bars, but it is a cage. The eyes of the Resistance watch unblinking.
|Basch
|Let them watch. I know something of cages.
|context = Vossler and Basch
|source  = ''Final Fantasy XII''
}}

Produces:

Vossler: Listen to me, Basch. Your cage may have no bars, but it is a cage. The eyes of the Resistance watch unblinking.
Basch: Let them watch. I know something of cages.
Vossler and Basch, Final Fantasy XII
Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+