This page (revision-6) was last changed on 21-Jun-2018 11:43 by bowlingb 

This page was created on 06-Jan-2014 11:13 by Juan Pablo

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Version Date Modified Size Author Changes ... Change note
6 21-Jun-2018 11:43 7 KB bowlingb to previous Minor typo correction
5 14-Mar-2017 18:01 7 KB Dirk Frederickx to previous | to last
4 29-Apr-2016 21:08 3 KB Dirk Frederickx to previous | to last removed dirt
3 31-Mar-2016 21:49 3 KB Juan Pablo to previous | to last +18556394698 windows 10 online technical support Toll free number ==> JSPWikiStyle
2 31-Mar-2016 19:07 3 KB smith to previous | to last JSPWikiStyle ==> +18556394698 windows 10 online technical support Toll free number
1 06-Jan-2014 11:13 3 KB Juan Pablo to last
Incoming links Outgoing links
Multi Columns Style
Multi Columns Style

Difference between version and

At line 1 changed one line
!!! Multi Columns
[{SET page-styles='prettify-nonum table-condensed-fit'}]
The {{{%%columns}}} %%category [style|JSPWikiStyle]/% allows to put content side by side, in columns, just like in a newspaper. You can use it to generate simple side-by-side grids. Or more complex grids by nesting columns inside other columns.
At line 3 removed 2 lines
%%tabbedSection
%%tab-Introduction
At line 6 changed one line
! Introduction
%%columns
{{{
%%columns
Content for the first column ...
----
Content for the 2nd column ...
----
Content for the 3rd column ...
/%
}}}
----
* ''Columns'' determine automatically widths and heights.
At line 8 changed 2 lines
This %%category [JSPWikiStyle]/% allows to format text side by side, like in a newspaper.
Use a horizontal rulers {{----}} to separate the columns.
* Horizontal rulers {{{----}}} separate the content of each column.\\
If you would need a horizontal ruler inside a column,
use {{%~%hr /~%}}.
/%
At line 11 changed 2 lines
Column widths are equal and automatically calculated.
Optionally, you can specify the width in pixel(px) for the columns.
%%tabs
! Layout
At line 14 changed 3 lines
{{{
%%columns-<width>
Content for the first column
By default, all columns have the same width, with the content aligned to the top. But you can change that.
* Default columns
%%columns.border.indent-1
Incredibly versatile! Auto-fill and equal height.
At line 18 changed one line
Content for the 2nd column
Incredibly versatile! Auto-fill and equal height. Just focus on your content. Have less. Do more.
At line 20 changed one line
Content for the 3rd column
Incredibly versatile! Auto-fill and equal height.
At line 22 removed one line
}}}
At line 24 changed one line
If you still want to insert a horizontal ruler in the content of a column, you can use the __%~%hr /~%__ style.
* Vertical aligned columns : {{{%%columns.vertical-align ... /%}}}
%%columns.vertical-align.border.indent-1
Incredibly versatile! Auto-fill and equal height.
----
Incredibly versatile! Auto-fill and equal height. Just focus on your content. Have less. Do more.
----
Incredibly versatile! Auto-fill and equal height.
/%
At line 46 added 5 lines
* Sidebar + Main: {{{%%columns.sm ... /%}}}
%%columns.sm.border.indent-1
Incredibly versatile! Auto-fill and equal height.
----
Incredibly versatile! Auto-fill and equal height. Just focus on your content. Have less. Do more.
At line 27 changed 2 lines
%%tab-Example
! Example
* Main + Sidebar: {{{%%columns.ms ... /%}}}
%%columns.ms.border.indent-1
Incredibly versatile! Auto-fill and equal height. Just focus on your content. Have less. Do more.
----
Incredibly versatile! Auto-fill and equal height.
/%
* Sidebar + Main + Sidebar: {{{%%columns.sms ... /%}}}
%%columns.sms.border.indent-1
Incredibly versatile! Auto-fill and equal height.
----
Incredibly versatile! Auto-fill and equal height. Just focus on your content. Have less. Do more.
----
Incredibly versatile! Auto-fill and equal height.
/%
At line 67 added 84 lines
!Multiple styles
Combine multiple styles with the {{.}} separator.
* Default
%%columns.indent-1
1st column
----
2nd column
----
3rd column
/%
* Adding a border: {{{%%columns.border ... /%}}}
%%columns.border.indent-1
1st column
----
2nd column
----
3rd column
/%
%%columns.border.indent-1
1st column
----
2nd column
----
3rd column
/%
* Adding hover effect: {{{%%columns.hover ... /*}}}
%%columns.border.hover.indent-1
1st column
----
2nd column
----
3rd column
/%
* Adding 3D raised effect: {{{%%columns.raised ... /*}}}
%%columns.raised.indent-1
1st column
----
2nd column
----
3rd column
/%
* Adding a background color: {{{%%columns.bg-success ... /%}}}
%%columns.border.bg-success.indent-1
1st column
----
2nd column
----
3rd column
/%
* Adding background color to a specific column:
%%columns.indent-1
%%bg-danger
1st column
/%
----
%%bg-maroon
2nd column
/%
----
%%bg-purple
3rd column
/%
/%
* Adding a background image:
%%columns.border.indent-1
Incredibly versatile! Auto-fill and equal height.
----
%%bg.cover.light [Image Styles/poppy-small.jpg] /%
Incredibly versatile! Auto-fill and equal height. Just focus on your content. Have less. Do more.
----
Incredibly versatile! Auto-fill and equal height.
/%
! Nested columns
At line 152 added 25 lines
This is is just some {{%~%columns }}sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
----
This is is just some sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?
%%hr /%
OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
!!Columns with borders
Use {{{%%columns.border}}}
%%columns.border
Nested columns are possible to.
----
Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
/%
OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
/%
!Example
%%columns.border
At line 57 removed one line
At line 59 removed 7 lines
%%tab-Discussion
!Discussion
/%
/%
This page (revision-6) was last changed on 21-Jun-2018 11:43 by bowlingb  Top