How to Add Infobox Module in MediaWiki

Home » Knowledge Base » Design Tools » MediaWiki » How to Add Infobox Module in MediaWiki

The Infobox in MediaWiki is a handy tool for presenting content and key information in a structured and visually pleasing way. Infoboxes are useful for any kind of MediaWiki project and can provide your readers with a quick snapshot of important data and details.

In this guide, we share how to add an infobox module in MediaWiki.

 

How to Add Infobox Module in MediaWiki

The process of adding infoboxes to MediaWiki is comprised of two main steps:

  1. Lua Modules. Lua is a scripting language integrated into MediaWiki. Lua modules can handle data from the infobox and process information from the template’s parameters.
  2. Template Syntax. The structure of each infobox is defined in MediaWiki’s wikitext, where you can specify holders for the data and the specific formatting of the content.

A simple process to add an infobox to MediaWiki looks like this:

First, you create a Lua module and define the logic to gather and display data. For example, you can add parameters such as “Name” and “Date of Birth”.

Then, you should build the design of your infobox by blending HTML and MediaWiki template syntax. An example can look like this:

{{#invoke:Infobox|show
| name = Albert Einstein
| image = Einstein.jpg
| birth_date = 14 March 1879
| birth_place = Ulm, Kingdom of Württemberg, German Empire
}}

Once you have finished the designing process, it is time ton embed the infobox to your MediaWiki pages and articles, so to display the structured summary to your visitors.

 

Improve the Design with MediaWiki Common.css

The MediaWiki common.css is a cascading style sheet that acts as a global stylesheet for your MediaWiki project. You can use this file to customize the appearance of your infoboxes and other elements. You can find it in the root directory of your active MediaWiki skin.

Once you open the file, you can start modifying your infobox. For example, you can set dimensions and borders. Here’s a sample script for that:

.infobox {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
background-color: #f9f9f9;
}

Also, you can align images and text groups like this:

.infobox img {
max-width: 100%;
height: auto;
}
.infobox td {
vertical-align: top;
}

In short, if you want to customize the design of your MediaWiki pages, the common.css is your go-to file.

 

Conclusion

Adding infobox modules to MediaWiki is quite an easy process. The flexibility of infoboxes allows you to create visually appealing designs, and distribute your data in a way that is easily digestible by your readers. Furthermore, you can couple the modules with tools like common.css styling, so you elevate the design of your MediaWiki pages to the next level.

Read also:

Was this post helpful?

i

Relevant tags:

Connect

Latest posts:

How to Add Charts to the Sidebar in SuiteCRM

Àlthough SuiteCRM doesn't support adding charts directly to the sidebar, there is a simple method that you can use to achieve the effect. In this guide, we share how to do so.   How to Add Charts to the Sidebar in SuiteCRM The process is comprised of a few...

How to Add Subpanel Filters in SuiteCRM

SuiteCRM's subpanels can be very useful in various situations, such as showing related records (like contacts under an account). However, as your database grows, so does the scrolling time through unfiltered subpanels. Fortunately, you can add filters to subpanels, so...

How to Display Fields in Different Modes in SuiteCRM

SuiteCRM allows for various customisations of fields. Such are the Detail View, Edit View and List View. Understanding how to customise these is important for tailoring your SuiteCRM project to your preferences. Whether you are streaming data entries or are trying to...

How to Add Grouped Fields to the Record View in SuiteCRM

SuiteCRM offers great versatility when it comes to customising modules, including how fields are displayed on record views. One powerful feature is grouping fields within sections for better layout and user experience. In this article, we share how to group fields in...

How to Back Up Your SuiteCRM Project

Making regular backups of your SuiteCRM project is crucial. Backups help keep any kind of data safe, and also provide a quick recovery after a crash, hacking attack, or any user error. Because of how important backups are for your SuiteCRM website, in this article, we...



Create a website for free!


Free forever

Our Support Team is Here to Help

 

If you need any questions answered, don't hesitate and contact us. Click the button below and follow the instructions. You can expect an answer within an hour.

 

Contact AwardSpace

 

iNewest knowledge base articles

How to Add Charts to the Sidebar in SuiteCRM

Àlthough SuiteCRM doesn't support adding charts directly to the sidebar, there is a simple method that you can use to achieve the effect. In this guide, we share how to do so.   How to Add Charts to the Sidebar in SuiteCRM The process is comprised of a few...

How to Add Subpanel Filters in SuiteCRM

SuiteCRM's subpanels can be very useful in various situations, such as showing related records (like contacts under an account). However, as your database grows, so does the scrolling time through unfiltered subpanels. Fortunately, you can add filters to subpanels, so...

How to Display Fields in Different Modes in SuiteCRM

SuiteCRM allows for various customisations of fields. Such are the Detail View, Edit View and List View. Understanding how to customise these is important for tailoring your SuiteCRM project to your preferences. Whether you are streaming data entries or are trying to...

How to Add Grouped Fields to the Record View in SuiteCRM

SuiteCRM offers great versatility when it comes to customising modules, including how fields are displayed on record views. One powerful feature is grouping fields within sections for better layout and user experience. In this article, we share how to group fields in...

How to Back Up Your SuiteCRM Project

Making regular backups of your SuiteCRM project is crucial. Backups help keep any kind of data safe, and also provide a quick recovery after a crash, hacking attack, or any user error. Because of how important backups are for your SuiteCRM website, in this article, we...

How to Install Themes in Zenphoto

Zenphoto allows you to customize the look of your online gallery by incorporating various themes. If you are interested in learning how to install themes in Zenphoto, then this article will guide you through the entire process - from browsing and downloading, through...

Even more web tutorials

Check out our web hosting knowledge base and the WordPress tutorials to learn more, and be better prepared for your website creation and maintenance journey.