We have already reviewed the wiki formatting and Textile in Chapter 7, Text Formatting; then why are we coming back to it again? I was formerly asked to create a custom plugin to improve the layout of the Redmine start page (available through the Home link) with buttons, links, sections, and other similar stuff. My answer was, you don't need a plugin to do that.
Textile is a very simplified HTML. Of course, it can't be used to create full-featured HTML pages, but for many things it can appear to be sufficient. However, to achieve the necessary results you, most likely, will need to use the most advanced Redmine Textile features. Also, similar to HTML, you can't just learn how to create a good look and feel—you can only get the idea. You will need to inject your own creativity to get what you need. Therefore, under this topic we will review some interesting customization example, which should help you understand the technique.
Tip
Wiki pages as tabs in the project menu
The wiki Extensions plugin, created by Haruyuki Iida, allows adding wiki pages to the project menu as tabs (configured per project). You can find more information on this at http://www.r-labs.org/projects/r-labs/wiki/Wiki_Extensions_en.
Things we will discuss here will look tricky and, perhaps, you will ask, why should we prefer this technique over writing a plugin? The anwer is, Textile formatting will survive the upgrade of Redmine, while a plugin, most likely, will need to be updated.
Tip
Using HTML code in wiki pages
Arlo Carreon created the wiki HTML Util plugin, which can be used to embed HTML, CSS, or JavaScript code directly into a wiki page. You can find more information at https://github.com/mexitek/redmine_wiki_html_util.
Redmine core CSS classes can also be utilized to buil information boxes in the wiki content, for example:
p(conflict). A warning message. p(box). Rendered as a box.
This is shown as follows:
If you want to put an icon before a text, you can, for example:
You can insert "(icon icon-fav)a link with an icon":http://www.andriylesyuk.com or even %(icon icon-checked).not a link%...
This Textile code will be rendered in the following way:
Here we use Redmine icon CSS classes and utilize the Textile SPAN element (using %).
In modern web design everyone prefers building the page layout using DIVs and not old-style HTML tables. But in Textile we don't have enough control over DIVs. However, we can still use tables:
table{border:none}.
|{border:none}.eBook: %{color:#bbb}£18.99%|{border:none;padding:1em}.%{font-size:1.5em}£15.19%
save 20%|{border:none}.!http://www.packtpub.com/sites/all/themes/packt_new/images/addtocart.gif!:http://www.packtpub.com/mastering-redmine/book|
|{border:none}.Print + free eBook + free PacktLib access to the book: %{color:#bbb}£49.98%|{border:none;padding:1em}.%{font-size:1.5em}£27.89%
save 44%|{border:none}.!http://www.packtpub.com/sites/all/themes/packt_new/images/addtocart.gif!:http://www.packtpub.com/mastering-redmine/book|This tricky code produces the following result:
In this example we defined CSS styles for the table (table{border:none}.) and its cells (for example, |{border:none;padding:1em}.) and, again, utilized the HTML SPAN element (for example, %{color:#bbb}£49.98%).