Customizing with Textile

Once, I was asked to create a custom plugin for Redmine to improve the look and feel of its start page (which can be opened by clicking on the Home link) by adding buttons, links, sections, and other similar stuff. My answer was, You don't need a plugin to do that.

Textile is very simplified HTML. Therefore, it can't be used to create full-featured HTML pages, but for some things, it may appear to be sufficient. However, to achieve the necessary results, you will most likely need to use the most advanced features of Textile. Also, like for HTML, you can't learn how to create a good look and feel with Textile—you may only understand the concept. You will need to inject your own creativity to get what you need. Therefore, in this section, we will review some interesting customization examples that should help you understand the technique.

Tip

Wiki pages as tabs in the project menu

The Wiki Extensions plugin, which was created by Haruyuki Iida, allows you to add Wiki pages to the project menu as tabs (configured per project). You can find more information about this plugin at http://www.r-labs.org/projects/r-labs/wiki/Wiki_Extensions_en.

The things that we'll discuss here will look tricky, so you may wonder why they should be preferred over writing a plugin. The answer is: because Textile formatting will survive upgrades of Redmine, whereas a plugin will most likely need to be updated.

Note

As Markdown is less powerful at the time of writing this book, many things that are discussed in this section, are not possible to implement using it. For this reason, Markdown is not reviewed here.

Styled boxes

CSS classes that are used for the Redmine interface can also be used to create information boxes inside the Wiki content. For example, check out the following code:

p(conflict). A warning message.
p(box). Rendered as a box.

It will be rendered into this:

Styled boxes

Tip

You can also add custom CSS rules to the Redmine theme, specifically to use them in the Wiki content. We'll talk about this in the Customizing the theme section.

Using icons

You can also put an icon before the text, 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 as follows:

Using icons

Here, we used icon CSS classes of the Redmine interface and the magic % marker.

Table-based layout

In modern web design, everyone prefers to build the page layout using divs instead of tables (the old-style approach). But in Textile, we don't have enough control over divs. Nevertheless, 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!:https://www.packtpub.com/application-development/mastering-redmine|
|{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!:https://www.packtpub.com/application-development/mastering-redmine|

This tricky code produces the following result:

Table-based layout

In this example, we defined the CSS style for the table (table{border:none}.) and its cells (for example, |{border:none;padding:1em}.). Also, we used the magic % marker (for example, %{color:#bbb}£49.98%).

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset