33

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?

SamS
  • 1,561
  • 2
  • 15
  • 22

7 Answers7

38

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!

SamS
  • 1,561
  • 2
  • 15
  • 22
23
<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.

Oddmund
  • 1,324
  • 12
  • 21
20

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 }}
scubasteve
  • 2,718
  • 4
  • 38
  • 49
  • Just to explain the #1 in the braces, it means the first variable of possible several. Example "The quick {{{1}}} fox {{{2}}}." Then, we can fill the template as {{quote|brown|jumps}}, which translates to "The quick brown fox jumps." ('quote' being the name of the template). – tony Apr 10 '18 at 16:19
4

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.

Steve K
  • 19,408
  • 6
  • 52
  • 50
4

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>
Jeff Albrecht
  • 3,723
  • 1
  • 17
  • 22
1

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.

Johnny Baloney
  • 3,409
  • 1
  • 33
  • 37
0

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

<pre width="80%">
Genteel
  • 11