SamS
SamS

Reputation: 1581

What's the easiest way to add a quote box to mediawiki?

I installed mediawiki on my server as my personal knowledge base. Sometimes I copy some stuff from Web and paste to my wiki - such as tips & tricks from somebody's blog. How do I make the copied content appear in a box with border?

For example, the box at the end of this blog post looks pretty nice:
http://blog.dreamhost.com/2008/03/21/good-reminiscing-friday/

I could use the pre tag, but paragraphs in a pre tag won't wrap automatically.. Any ideas?

Upvotes: 34

Views: 29542

Answers (7)

Johnny Baloney
Johnny Baloney

Reputation: 3651

You can use index.php?title=MediaWiki:Common.css page for this purpose and set a CSS style for the <blockquote/> element there:

blockquote {
    background-color: #ddf5eb; 
    border-style: dotted;
}

In a similar fashion you can style <pre/> which is useful for code snippets etc. so that it wraps content:

pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap; 
    white-space: -pre-wrap; 
    white-space: -o-pre-wrap; 
    word-wrap: break-word;
}

For longer code snippets you may want to use <syntaxhighlight/> (or <source/>) element that comes with SyntaxHighlight extension. You can style it too.

Upvotes: 1

Jeff Albrecht
Jeff Albrecht

Reputation: 3883

I used the code from @steve k Changing light-grey to black and adding padding between the border and text. I found the light-grey nearly invisible and the text was directly adjacent to the border.

<blockquote style="
 color: black;
 border: solid thin gray;
 padding-top: 10px;
 padding-right: 10px;
 padding-bottom: 10px;
 padding-left: 10px;
 ">
{{{1}}}
</blockquote>

Upvotes: 4

Genteel
Genteel

Reputation: 11

Set a width in the pre tag, and it will wrap.

<pre width="80%">

Upvotes: 0

Oddmund
Oddmund

Reputation: 1344

<blockquote style="background-color: lightgrey; border: solid thin grey;">
Det er jeg som kjenner hemmeligheten din. Ikke et pip, gutten min.
</blockquote>

The blockquotes are better than divs because they "explain" that the text is actually a blockqoute, and not "just-some-text". Also a blockquote will most likely be properly indented, and actually look like a blockqoute.

Upvotes: 25

scubasteve
scubasteve

Reputation: 2858

To combine the two mostly valid answers, you should use a MediaWiki template that itself utilizes a blockquote.

The content of the template:

<blockquote style="color: lightgrey; border: solid thin gray;">
    {{{1}}}
</blockquote>

Usage on your WIKI page (assuming you named the template "quote"):

{{ quote | The text you want to quote }}

Upvotes: 21

SamS
SamS

Reputation: 1581

I made a template in my wiki called Template:quote, which contains the following content:

<div style="background-color: #ddf5eb; border-style: dotted;">
{{{1}}}
</div>

Then I can use the template in a page, e.g.,

{{quote|a little test}}

Works pretty well - Thanks!

Upvotes: 39

Steve K
Steve K

Reputation: 19586

Mediawiki supports the div tag. Combine the div tag with some styles:

<div style="background-color: cyan; border-style: dashed;">
A bunch of text that will wrap.
</div>

You can play around with whatever css attributes you want, but that should get you started.

Upvotes: 4

Related Questions