Loading...
 
Features / Usability

Features / Usability


Boxes beside eachother

posts: 9 Denmark

I am trying to create boxes beside eachother on a page, like it is setup here:

http://wiki.hgg.au.dk/do/view/Workbench/WebHome

Is it possible. I have tried with the box tool, but without luck

posts: 4656 Japan

Hi Toke,

You can use the method described on this page: https://themes.tiki.org/Making columns for wiki content. This is based on the Bootstrap CSS layout grid, which is made with an HTML div that has a CSS class row that contains a div for each "box". If you want four boxes in the row, then each "box" div should have a CSS class "col-sm-3".

If it's easier than inputting all the page content by hand, you could use the box plugin if you set the "CSS" parameter in the plugin as "col-sm-3" for four boxes across, or "col-sm-4" for three boxes across, and so on. For best results, put the row of box plugins inside a div like:

Copy to clipboard
{DIV(class="row")} {BOX(align="left" class="col-sm-4")}box content{BOX} {BOX(align="left" class="col-sm-4")}box content{BOX} {BOX(align="left" class="col-sm-4")}box content{BOX} {DIV}


This will produce:

box content
box content
box content


This isn't so great because there isn't a "gutter" between the boxes. So you can put the boxes inside the grid divs like this (using the carat character or the plugin to make the boxes):

box content
box content
box content


which is produced by

Copy to clipboard
{DIV(class="row")} {DIV(class="col-sm-4")}^box content^{DIV} {DIV(class="col-sm-4")}^box content^{DIV} {DIV(class="col-sm-4")}{BOX()}box content{BOX}{DIV} {DIV}


-- Gary


posts: 9 Denmark

Hi Gary

Thank you. This works perfect. Another question, I like the layout from the page you linked to, so if I have

Copy to clipboard
{DIV(class="row")} {DIV(class="col-md-4")}{MODULE(module=random_pages)/}{DIV} {DIV(class="col-md-4")}{MODULE(module=random_pages)/}{DIV} {DIV(class="col-md-4")}{MODULE(module=random_pages)/}{DIV} {DIV}


How can I edit this so I can write content myself into the box and change the header name?

I can do this with what you wrote, but I like the header.


posts: 4656 Japan

You can use the box plugin and specify a title, like:

Copy to clipboard
{BOX(title="The Title")}The content{BOX}


which produces:

The Title
The content


-- Gary


posts: 9 Denmark

Hi

Thank you. It works perfectly.


Upcoming Events

1)  18 Apr 2024 14:00 GMT-0000
Tiki Roundtable Meeting
2)  16 May 2024 14:00 GMT-0000
Tiki Roundtable Meeting
3)  20 Jun 2024 14:00 GMT-0000
Tiki Roundtable Meeting
4)  18 Jul 2024 14:00 GMT-0000
Tiki Roundtable Meeting
5)  15 Aug 2024 14:00 GMT-0000
Tiki Roundtable Meeting
6)  19 Sep 2024 14:00 GMT-0000
Tiki Roundtable Meeting
7) 
Tiki birthday
8)  17 Oct 2024 14:00 GMT-0000
Tiki Roundtable Meeting
9)  21 Nov 2024 14:00 GMT-0000
Tiki Roundtable Meeting
10)  19 Dec 2024 14:00 GMT-0000
Tiki Roundtable Meeting