Loading...
 

History: HomePage

Preview of version: 140

used at https://tiki.org/HomePage

“Yes, Tiki does it.”

Tiki is the Free / Libre / Open Source Web Application Platform with the most built-in features.

Whatever feature you can imagine running in a browser window, chances are Tiki does it.

About Tiki

Tiki has been downloaded over a million times by businesses, governments, non-profits and individuals worldwide to take advantage of its flexibility and customizability to deliver a broad range of web applications.

If you are looking for software that will help you deliver web experiences, whether collaborative or immersive, Tiki is a platform you should be considering.

Introduction to Tiki - Get the idea of what the Tiki project is and how it works
Overview the features - Browse through the long list of features
Check the benefits - See the top reasons to use Tiki
Review the fact sheet - Facts, figures and resources about the Tiki project at a glance
See version life cycle - Understand Tiki versions and release schedules


Try TikiNo installation or registration required

Newsletter Sign up for the Tiki Newsletter.

Get TikiDownload or use recommended and friendly hosting solutions

Comparing version 140 with version 206

Lines: 1-102Lines: 1-1317
-{HTML(wiki="
")}<style>

body


background: transparent url("tiki-download_file.php?fileId=969") center -230px no-repeat;
+{HTML(wiki=
)}

<style


/* PluginLayout equivalent CSS start


/
.container.container-std.

{
width:
100%

!important;


:
;
max
-width: 100%;
 } }
-.lead {

font-size: 2em


font-weight: 100;
+

.col1top-outer-wrapper


/*.topbar-wrapper,

/


toggle_zone,

.wikitopline


.

,
#

,
#col3 {
display
: none;
 } }
-.tikiNews .articletitle {padding: 10px 15px; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; border-left: 1px solid #ddd;border-radius:0} 
-.tikiNews .articletitle:hover {background:#f5f5f5} 
-.tikiNews .list-group-item:first-child { 
- border-top-right-radius: 0px; 
- border-top-left-radius: 0px; 
- border-bottom-right-radius: 0px; 
- border-bottom-left-radius: 0px; 
 +#col1 {
 + max-width: 100% !important;
 + width: 100% !important;
 + flex: 0 0 auto !important;
 + padding-left: 0 !important;
 + padding-right: 0 !important;
 } }
-</style>{HTML} +/* PluginLayout equivalent CSS end */

html


background: #fff url("display969") -70px -130px no-

;
}
-{img fileId="970" responsive="y" imalign="center"}

{DIV(class="lead text-center")}
“Yes, Tiki does it.” {DIV


{DIV(class="container-inpage"

}
{HTML(wiki="1")}<div class="panel panel-primary text-center"
style="background: #18a3bb; color: #fff; border: 1px solid #77d6e5;"><div class="panel-

">
!!!
Tiki is the Free / Libre / Open Source Web Application Platform with the most built

in features.
<div style="font-size: 140%;">Whatever feature you can imagine running in a browser window, chances are Tiki does it.</div></div></

>{HTML}
{DIV(class=

lead jumbotronTiki
)}
!!About TikiTiki has been downloaded over a million times by businesses,
governments, non-profits and individuals worldwide to take advantage of its flexibility and customizability to deliver a broad range of web applications.
+ body {

background: transparent


}
-If you are looking for software that will help you deliver web experiences, whether collaborative or immersive, Tiki is a platform you should be considering. + .hex-color-section {

margin-bottom: -3rem


}
-((Introduction|Introduction to Tiki)) - Get the idea of what the Tiki project is and how it works

((Features|Overview the features))
- Browse through the long list of


((Benefits|Check the benefits))
- See the top reasons to

Tiki
((Facts|Review the fact sheet)) - Facts, figures and resources about the Tiki project

a glance
((Versions|See version life cycle)) - Understand Tiki

and release schedules
{DIV
}
+ .card {

border: 2px solid rgba(
,

,

,
.35)



}
 + .card-button:hover {
 + color: #343a40;
 + }
-{DIV(class="row margin-bottom-lg" style="padding-bottom:50px;")}

{DIV(class="col-sm-3 col-sm-offset-0 text-center")


{button _role="button" _class="btn btn-primary btn-lg btn-block" href="Demo" _icon_name="desktop" _text="Try Tiki"}No installation or

required


DIV}
{DIV(class="col-sm-3 col-sm-offset-1 text
-

")}
{button _role="button" _class="btn btn-primary btn-lg btn-block" href="Newsletters" _icon_name="newspaper-o" _text="Newsletter"} ((Newsletters|Sign up))

the Tiki

.
{DIV}
{DIV(class="col-sm-3 col-sm-offset
-

text-center")}
{button _role="button" _class="btn btn-primary btn-lg btn-block" href="Download" _icon_name="download" _text="Get Tiki"}Download or use ((Hosting|recommended)) and ((Tiki Friendly

|friendly)) hosting solutions
{DIV}{DIV
}
+ /*.bordered { border: 1px solid black; }*/

h3.card-title


margin-bottom: .

;
text-align:

center;
}
-{DIV(class="row margin-bottom-lg")}

{DIV(class="col-sm-12 text-center")


{button _role="button" _class="btn btn-success btn-lg btn-block" href="Donation" _text="Donate

}


DIV}



DIV}

{DIV(class

"row")}
{DIV(class="col-sm-3 col-sm

offset-
")}
{DIV(class="list-group

)}{HTML()}
<div class="list-group-item text-center" style="background: #18a3bb; color: #fff; border:

1px solid #77d6e5;">
<h4 class="list-group-item-heading" style="color: #

;">Get Help</h4>
<p class="list-group-item-text">Already using and need some help?</p>
+ /*.intro-information, .tiki-audience-heading { color: #fff; text-shadow: #206b79 3px 3px 6px; }*/

.current-tiki-users .card-body > div


position:

;
bottom: 2

5rem;
right

1rem;



}

h1.Tiki-

-CMS-Groupware {
font

size: 3.4rem;


-height: 1.1;


font-weight: bold;


text-align: center;





-transform: uppercase;


}

span.h1-Tiki {





font-size: 300%;


}

.tiki-audience-heading

{
background-repeat:

no-repeat;


background-size:

contain;
}



tiki-audience-heading img {





-width: 120px;


height: auto;
}



.tiki-audience-heading h2 {





font-size: 2.8rem;

margin-bottom:
;

}

.section-

{



font-size:

180%;
margin

bottom: 1em



}



.card-button {
color: #000


}

a

card-button:


{


filter: drop-shadow
(0 0 10px powderblue);





color: #18a3bb;


}

.card-body {




font-size: 1

2rem;
}

a.btn

{



font-size:

1.1rem;
}



.card-horizontal {


flex-direction: row !

;
}



card-label {


position: absolute;


top: .5rem;
left

1rem;
background:

fff;



padding: 5px;


font-weight: bold;



font-size:

1.1rem;


margin-left:

-20px;




.card-horizontal .image

wrapper {


: 300px;
}
section.intro-information


position: relative;


}
.community-link {
background: #18a3bb;




: none;


border-top-right-radius:
;


border
-bottom-right-radius:
;


box-shadow: 0 0



rgba(
,
,
, .05
);

}


.community-link:hover
{
filter: drop

shadow
(0 0 10px powderblue);
color: #18a3bb;
background: #087084;
}


community
-link a { color: #fff; }
.community
-link .


,
.community-link > div:not(.siteloginbar_poppedup)

{width: 100%; }
.community-link > div

.btn-link { width: 100%; color:

fff; font-size:

.25rem;



.community-link .siteloginbar_poppedup .dropdown

menu {min-width: 12rem; }



@media (min-width:

) {
.card

horizontal .image-wrapper {


height: 100%;





}
}



.in-page-link {


text-align: center;





display: block




background-size: cover;

padding: 40px

;



font-size:

150%;
}

.in-page-

{
max-height

45px;



width:

;
}



editplugin,



.icon-edit,


icon_edit_section {
display

none;



}



.tiki-features {
/*

margin-top: -3rem; */




padding-bottom:

;
}



.anchors-section a {


color: #afd7f4;


}




.anchors-section a:hover {
color: #eff4f9;
}

.

-section {


padding-top: 60px;


background: #eafcff;
}



.anchors-section,


mission-section





background-color: #111111;


color: #f5f5f5;


}

/* Honeycomb -- Copyright (

) 2021 by ycw (https://codepen.io/ycw/pen/gdLZdN) *


ul.honeycomb {


: 455px/*70vmin*/;


height: 455px/*70vmin*/;



position: relative;
}

.honeycomb li {
/*
|a|d|a|



-------


-
|/ \| |
.5h


|\ /| ^
-------


| w |

a
=
.5h/

=
.28867513459h d =
.5h/sin60 =
.57735026919h w = a + d + a = 1

15470053838h

[zoom out]



|a|_d_| _____ _


/| \

/ \ |


ang=60_|

\__d__/ \ | h


\ / \

/ |
\_____|

| \_____/ _|


a


|
--------|




w



*/


--h:

(100% / 3);


--w: calc(1.

* var(--h));
--a

calc(
.28867513459 * var(--h));


--d:


(
.57735026919 * var(--h))



height: var(--

);
width: var(--w

;
position: absolute;
}

.honeycomb img {

display:
block;
width: 200%;


height: 200%;
/* -o-object-fit:

cover;
object-fit: cover; */
/*



[clip-path coordinates]

--A-F-


B|/ \|E coord.
|\

| A(a/w,
)
--C

D--

B(
, 50%)


C(a/w, 100%)


D(100% -

a/w, 100%)


E(100%, 50%)


F(100% - a/w,
)


where a/w
=
.24999999999



*/
/* --aw: 24.99999999999%;


-webkit-clip

path: polygon(


var(--aw)
,


0 50%,


var(--aw) 100%,


calc(100% - var(--aw)) 100%,


100% 50%,


calc(100% - var(--aw))



);


clip


path: polygon(




(--aw)
,





0 50%,


var(--aw) 100%,


calc(100%

- var(


-aw)) 100%,


100% 50%,
calc(100% - var(--aw))


); */
}

.honeycomb .feature-screenshot

{



height: 185%;


width: auto;
}

.honeycomb li:nth-of-type(1) {
left: calc(50% - var(

-a) - var(--d) *
.5);
top:
;


}



.honeycomb li:nth-of-type(2)



left: calc(50% - var(--a) * 2 - var(--d) * 1.47); /*

.5 */
top: calc(var(--h) *
.55);

*
.


*/
}

.honeycomb

:nth-of-type(3)
{
left: calc
(50% - var(--a) * 2

var(--d) * 1.77); /* 1.5 */
top:

calc(var(


-h) * 1.57); /* 1.

*/
}

.honeycomb li:nth-of-type(4)
{
left:

(50% - var(--a) - var(--d) *
.9); /*
.5


*/






top: calc

var(
--h


* 2.11);

/* 2 */
}

.honeycomb li:nth-of-type(5) {





left: calc(50% +

(--d) *

.4); /*
.5

*/
top:

(var(-


h) *

.548);

/*
.


*/




.honeycomb li:nth-of-type(6

{
left:

(50%


var(--d) *


05); /*
.56

*/
top: calc(var(

-h) * 1.

); /* 1.56

/
}


/*


style


/




ul.honeycomb
{


filter:

-shadow
(0 0 10px hsla(
,
%,
%,


.3));


}

.

li:hover {
filter: drop

shadow(0 0 10px powderblue);




z
-index:

;
}

/*


anim
*/



ul.honeycomb


{
-

-animation: r 4s forwards;


animation: r 4s forwards;
}


@-webkit

keyframes r {


from {


: rotate(180deg
)





}


to
{


transform: rotate
(
)


}


}

@keyframes r

{
from {


transform

rotate(180deg



}


to {




transform: rotate(
)


}




.honeycomb li {
-webkit-animation: ir 4s forwards;


animation: ir 4s forwards;


}

@-webkit-

ir {
from {


transform: rotate(-360deg


}



to {


transform: rotate(
)
}
}




@keyframes ir


{


from {


transform: rotate(-360deg)


}
to {


transform: rotate(
)





}


}

/* rhombus start */




* rhombis start */


.imagecontainer {




margin: auto;
display: block;

width: 130px/*20vmin*/; /

300 / 1.414 */


height: 130px/*20vmin*


;
overflow: hidden;
border-

: 26px/*4vmin*/;


: rotate(35deg);






position: relative;

/* non-essential styling */
box-shadow: 0 0 3px 3px rgba(
,
,
, .05);

}

.

img {


transform: rotate(-35deg);





position: absolute;


top: -26px/*-4vh*/;


left: -37px/

-6vw*/;
}


figcaption {


transform: rotate(35deg);


}

/*

end */
/* Rhombus

start */


@media only

and (min-width: 750px) {


.tiki-features .img-clip-row {


margin-top: -154px;


}



.tiki-features


.img-clip-row:first-of-type {


margin-top: auto;






}

/* -----

--------------

---

Tiki Features --------------------

--------------

*/
.tiki-features



wrap {
position: relative


}



tiki-features-wrap:before {


content


' ';
display: block;


position: absolute;


left:
;




top:
;


width: 100%;


height: 100%;

opacity:
.5


background-image: url('display2358');
/*

background-repeat:


no-repeat;


-position: 50%
;


background-size: cover; *





}

/* .tiki-combined-

-Trackers.tiki-features-wrap:before {


opacity:
.

;
}
.tiki

along-with-


.tiki-features-wrap:before {

opacity:
.8;


}
.tiki-and-steady-implementation-of.tiki-features

wrap:before {
opacity:
.9;

} Headings are too transparent */



.tiki-features .
list

inline
-item {
position:

relative;
margin
-right:

4rem;



}

.tiki-features .list-inline-item.

-shape a {


: relative;


display: block;
}

.

-features .imagecontainer {


width: 240px;
height: 240px





border-radius: 40px;
box-shadow: 4px

6px 3px rgba(
,
,
,

.45);
}



.tiki-features .imagecontainer img {


top: -80px;


left: -40px


}



tiki-features .feature-screenshot {


height: 140%;


width: auto;






:
.6s;
}

.tiki-features figcaption {


transform: rotate(35deg);





/* non-essential styling margin:-80px 0

-160px;
font-family

'Oswald',


Arial, Sans;
font-size:20px;


text-transform:uppercase;


letter-


:.05em;*/
/* rhombus end */


}

.tiki-features

.list-inline


item.logo-shape a {


transition:
.6s;


}

.tiki-features

.list-inline-item.logo-shape a:hover

imagecontainer {
background:

#fff;
filter:

drop-shadow(0 0 10px powderblue);







.tiki-features .list-inline-item

logo-shape a .hover-text {
display: none;
position

absolute;
transform: rotate(-35deg);

width: 260px


top: 70px;


: 10px;
text-

: center;


color: #000



transition:
.6s
;


}

.tiki

features .list-inline-item.logo-

a .hover-text.steady-implementation {

left:
;


}

.tiki-features

.hover-text


{


-size: 1.5rem;
}


.tiki-features .list

inline-item.logo-shape a:hover .

-text {


display: block;

}

.

-features .list-inline-item.logo-

a:hover img {


opacity:



.2;
}



.user-type .logo-shape {


height: 80px;


width: 80px;


padding-top:
;


margin-bottom: 40px;


margin-right: 70px;


margin-top: -15px;
}



.user-type .imagecontainer {


width: calc(80px *

.414); /* 300 / 1.414

/



height: calc(80px * 1

414);
overflow:

hidden;
border

radius
: calc


80px *
.1666);


background-color:
#cce9ff;


}

.user-type .

img
{



} /* Rhombus grid end

*/
/* Text-animation start *


.text-

-container {


overflow:

;
font-size: 35px;


line-height: 40px;
}

.text

anim-content {


font-weight: 600;


overflow: hidden;
height: 40px;
}

.text-anim-content-text

{


display: inline;
float: left


margin:
;
}

.text-

-content-
list {


margin
-top:
;


padding
-left: 110px;
text
-align: left;


list-
style:

none;
-webkit-animation-name:

;
-webkit-animation-duration: 20s;


webkit-animation-iteration-count:

infinite;
animation-name: change;


animation-duration: 20s;
animation-iteration-count:

infinite;
}


.text-anim-content-list-item {


line-height: 40px;
margin:
;


}



@-webkit-keyframes opacity {

%

100% {
opacity:
;


}


50% {


opacity: 1;
}
}

@-

-keyframes change {



%, 3.69%, 100% {

transform: translate3d(
,
,
);


}


7.69%, 11.38% {


transform: translate3d(
, -8.33%,
);

/* 100 divided by 12

/
}


15.38%, 19.07% {
transform: translate3d


, -16.666%


);
}


23.07%, 26.76% {
transform

translate3d(
, -24

999%,


);


}
30.76

, 34.45% {


transform: translate3d


, -33.332%,


;
}


38.45%,

42.14%


{


transform: translate3d(
, -41.665%,


;
}
46.14%,

49.83% {


transform: translate3d(
, -

.998%,
);
}
53.83%, 57.52% {




transform: translate3d(
, -58.331%,
)


}
61.52%, 65.21%

{


transform: translate3d(
, -66.664%,


);
}
69.21%, 72

9% {


transform: translate3d(
, -74.

%,
);
}
76.9%

80.59% {


transform: translate3d(
,

83.33%,
);
}
84

59%, 88.28%

{
transform: translate3d(

, -91.66%,
);
}


92.28%, 95

96% {
transform:

translate3d(
, -99.99%,
);
}


}

@

opacity {

%, 100%


opacity:
;
}


50

{
opacity: 1


}
}

@keyframes change {



%

3.69%, 100% {


transform: translate3d(
,
,
);
}


7

69%, 11.38% {


transform: translate3d(
, -8.33%,
); /* 100 divided by 12

*/


}
15.38%, 19

07% {
transform: translate3d(
, -16.666

,
);




}
23.07%, 26.76% {


transform: translate3d(
, -24.999%,
);
}
30.76%, 34.45% {
transform: translate3d(
, -33.332%,
);
}
38.45%, 42.14% {
transform: translate3d(
, -41.665%,
);
}
46.14%, 49.83% {
transform: translate3d(
, -49.998%,
);
}


53.83%, 57.52% {
transform: translate3d(
, -58.331%,
);
}
61.52%, 65.21% {
transform: translate3d


, -66.664%,
)





}


69.21%, 72.

% {


transform: translate3d



, -74.997%,
);
}


76.9

, 80.59% {


transform:

(
, -83.33%,
);


}
84.59%, 88.28% {


transform: translate3d(
, -91.66%,
);
}
92

28%, 95.96% {
transform: translate3d(
, -99.99%,
);
}
}
/* ----- community events, news, links start -------- */
.community-links-top .card-header { background: var(--tiki-top-light-bg); color: var(--tiki-top-light-color); margin: -.5rem -.5rem
-.5rem; padding: .5rem; } .community-links-top .box-articles li { display: flex; margin-bottom: 1rem; } .community-links-top .box-articles ol { padding-left:
; } .community-links-top .box-articles li .image { margin-right: 1rem; } .community-links-top .box-articles .linkmodule { font-size: 1.15rem; line-height: 1.15;} .community-links-top .box-articles .more { text-align: right; }
.community-links-bottom .siteloginbar_popup { width: 100%; } .community-links-bottom .siteloginbar_popup .login_link { display: block; width: 100%; } .community-links-bottom a, .community-links-bottom .btn-link {
color: #fff; } .community-links-bottom .btn {
font-size: 1.3rem; }

.line-clamp {
display: -webkit-box
;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ----- community events, news, links end -------- */
</style>
<section class="intro-information bordered
">
<div class="container-fluid">
<div class="row"
>
<div class="col text-center font-italic lead" style="font-size: 1.5rem; ">
The Open Source no-code/low-code web application framework for when a standard CMS isn't enough.
</div>
  </div>  </div>
- <a href="https://doc.tiki.org" class="list-group-item">Read the documentation</a>

<a href="Link-to-forums" class="list-group-item">Browse the forums</a


<a href="https://irc.tiki.org/" class="list-group-item">Chat online</

>
<a href="https://tiki.org/Consultants" class="list-group-item">Connect with consultants<

a>
<a href="https://tiki.org/Mailing+Lists" class="list-group-item">Read mailing lists

/a>
<a href="http://twbasics.tikiforsmarties.com" class="list-group-item">Tiki for

</a>
<a href="http://twessentials.tikiforsmarties.com/" class="list-group-item">Tiki Essentials<

a>

HTML}

{DIV}
{DIV}
{DIV( class="col-sm-3 col

sm-offset-1")}
{DIV(class="list

group")}{HTML()}
<div class="list-group-item text-center" style="background: #18a3bb; color: #fff;

: 1px solid #77d6e5;">
<h4 class="list-group-item-heading" style="color:

#ffffff;">Tiki News</h4>
<p class="list-group-item-text

>The latest news from the community!</p>


</div

{HTML}
{DIV(class="tikiNews")


{

pagination=y max

5 titleonly="y"}
{DIV}
{HTML()}
<a href="https://tiki.org/tiki-wiki_rss.php?ver=2" class="list-group-item text-center" style="background: #18a3bb; color: #fff; border: 1px solid #77d6e5;">

strong>

(

)</strong></a>{HTML}
{DIV}
{DIV}


DIV(
class="col-sm-3 col-sm-offset

1")}
{DIV(class="list-group")}{HTML()}
<div class="list-group-item text-center" style="background

#18a3bb; color: #fff; border: 1px solid #77d6e5;">
<h4 class="list

group-item-heading" style="color: #ffffff;">Join Us</h4>
<p class="list-group-item-text">Get involved and contribute!</p>
+ <div class="row my-5">

<div class="col-sm-7"


<div class="row"


<div class="col-12 col-xxl-

">
<h1 class="Tiki-Wiki-CMS-Groupware"><span class="h1-Tiki">Tiki<
/span><br><span class="h1-Wiki-CMS-Groupware"> Wiki CMS<br>Groupware</span>

/h1>
<div
class="h3 text-center mt-5">The power of Tiki is the smart interaction of its components in an all-

-one-model


</div>


</div>
<div class="col-12 col-xxl-5

-hidden p-4
">


<div>
<

class="honeycomb list-unstyled">


<li>


<div class="imagecontainer">
<img src="display2356" alt=

Feature screenshot
" class="feature-screenshot">


</div>


</li
>


<li>


<div class
="imagecontainer">
<img src="

" alt="Feature screenshot
" class="feature-screenshot">


</div>


</li
>


<li>


<div class
="imagecontainer">


img src="display2357" alt="Feature screenshot
" class="feature-screenshot">


<
/div>


</li>


<li>


<div class
="imagecontainer">


<img src="display2355" alt="Feature screenshot
" class="feature-screenshot">


</div


<

li
>
<li>


<div class
="imagecontainer">


<img src="display2353" alt="Feature screenshot" class="feature-screenshot"




<
/div>


<
/li>
<li>

<div
class="imagecontainer">


<img src="display2354" alt="Feature screenshot" class=

feature
-screenshot">


</div>


</li
>




</ul





</div>


</div>
</div>
</div>


<div
class="col-sm-5">


div class="community
-links">
<div class="community-links-top border row mb-3">


<div class="recent-news-wrapper col-12 col-xl-6 border-end p-2">


<div class="card
-header" style="background: var(--tiki-top-light-bg); color: var(--tiki-top-light-color);

>


<h4 class="card-title">Latest news</h4>


</div>
<div
class="articles-module-wrapper pt-3">{HTML}


{module module
="articles" showpubl="y" img="100px" more

"y" max="4" nobox="y"}{HTML()}


</div
>


</div>
<div class="upcoming-

-wrapper col-12 col-xl-6 border-start p-2">


div class="card-header"
>


<h4 class="card-title">Upcoming events
</h4>


</div>{HTML}


{LIST()}


{filter type
="calendaritem"}
{filter field=

calendar_id" content="7"}


{filter range="start_date" from="now" to="3 months"}


{sort mode
="start_date_nasc"}
{

wiki
="Events_PluginList_output_TPL"}
{FORMAT(name="title")}{display name=

title" format="objectlink"}{FORMAT}
{FORMAT(name="description")}{display name="description

}{FORMAT}
{

(name="start_date")}{display name ="start_date" format = "datetime"}{FORMAT}


{LIST}
{HTML()}
<div class="more text-end">


<a
class="btn btn-primary

target="" data
-role="button" data-inline="true" href="calendar"

More...</a>


</div>


/div>
</div>


<div class="community-links-bottom w-100 d-grid gap-3 d-md-flex">
<div class


"login-wrapper bg-info flex-fill"> {HTML}


{module module="login_box" mode="popup" register="y" nobox="y"}{HTML()}


</div>
<button type="button"
class="btn btn-success flex-fill"><a href="https://app.gitter.im/#/room/#tiki-org_community:

.im"

target="_blank">Chat <small><span class="icon icon-link-external fas fa-external-link-alt"></span></small></a></button>


<button type="button" class="btn btn-

flex-fill"><a href="Community">Community Site <small

<span class=
"icon icon-arrow-circle-right fas

-arrow-circle-right"

</span

</small
></a></button>


</div>



</div>


</div>
</div>
</section>
<div
class

"tiki-features-wrap tiki-web-pages">
<section id
="tiki-web-pages" class="tiki-features">
<div class=

container pt-4">
<div class="row">
<div class="col
text-right">
<h3>&mdash;Web pages edited like a wiki but with any layout
and style . . .</h3>
</div
>
  </div>  </div>
- <a href="https://doc.tiki.org" class="list-group-item">Help to improve the documentation</a>

<a href="https://tiki.org/News" class="list-group-item">Read the latest Tiki news</a


<a href="https://translation.tiki.org/" class="list-group-item">Translate to your language</

>
<a href="https://dev.tiki.org/Make+a+wish" class="list-group-item">Make wishes, report bugs, get in touch with developers<

a>
<a href="https://profiles.tiki.org" class="list-group-item">Make your solutions available using Tiki profiles

/a>
<a href="https://dev.tiki.org/3+Rules" class="list-group-item">Become a developer, contribute to Tiki

</a>
<a href="http://tiki.org/tiki-register.php?key=randomstring" class="list-group-item text-center" style="background: #18a3bb; color: #fff; border: 1px solid #77d6e5;"><strong>Register now</strong><

a>

HTML}

{DIV}
{

}
{DIV}{DIV}
+ <div class="row">

<div class="col text-right my-5"


<ul class="list-inline mx-auto px-4

>
<li class="list-inline-item logo-

">
<div class="position

relative">
<a href="Software Overview and Model#wiki-pages" title="

wiki page">
<div

="imagecontainer">
<img src="display2308" alt="Feature screenshot" class

"feature-screenshot">
<div

="hover-text">
<

>Create pages freely<
/h3>
<p>Full control

wiki
/web page appearance</p>


</div>


</div>


</a>


</div>


</li>


<li class="list-inline-item logo-shape">
<a href="

Overview and Model#media-display" title="Media plugins">


<div class="imagecontainer">
<img src=

display2296" alt="Feature screenshot" class="feature-screenshot">


<div class="hover-text">


<h3>Display the content you want</h3>


<p>Native plugins for media<br>content</p>


</div>


</div>


</a


</li>


<li class="list-inline-item logo-shape">


<a href="Software Overview and Model#website-structure-and-display" title="Responsive web design">


<div class="imagecontainer">


<img src="display2306" alt="Feature screenshot" class="feature-screenshot">


<div class="hover-text">


<h3>Bootstrap underlies layout</h3>


<p>Easily create and use custom<br>themes</p>


</

>


</div>


</a>


</li




</

>




</div>


</div>
</div>
</section>
</div


<div class="
tiki-features-wrap tiki-combined

with-Trackers">
<section id="tiki-combined-

-Trackers
" class="tiki-features"">
<

class="container pt-4">
<div class="

">
<div class="col">
<div

="col">


<h3>Combined with Tiki Trackers©

input, management, and display functions</

>


</div>
</div


</div>
<div class="row">


<div class="col my-5">


<ul
class="list-inline mx-auto px-4">
<li class

"list-inline-item logo-shape">


<a href="Software Overview and Model#trackers" title="Tracker field types">
<div class=

imagecontainer">
<img src="

" alt="Feature screenshot" class="feature-screenshot">


<div class="hover-text">
<h3>Dozens of field types

/h3>


<p>45 Tracker field types
to handle website content, functions, and<br>form interface


</p>




</div>


</div>


</a>
</li>


<li class="list-inline-item logo-shape">


<a href="Software Overview and Model#trackers" title="Wiki page as template">


<div class="imagecontainer">


<img src="display2297" alt="Feature screenshot" class="feature-screenshot">


<div class="hover-text">


<h3>Pages host data input
/output</h3>


<p>Easily use a wiki page for a form<br>

output template</p>


</div>


</div>


</a>
</li>

<li class="list-inline-item logo-shape">

<a href="Software Overview and Model#trackers" title="Native plugins">


<div class="imagecontainer">


<img src="display2309" alt="Feature screenshot" class="feature-screenshot">


<div class="hover-text">


<h3>Plug data into a wiki page</h3>




<p>Versatile native plugins for<br>many display modes</p>


<

div>


</div>







</a




</li>


</ul>


</div>


</div>
</div>
</section>


/div>
<div class="
tiki-features-wrap tiki-along-with-standard">
<section

="tiki-along-with-standard" class="tiki-features">
<div class="container pt-4">

<div class="row">


<div class="col

>


<div class="col text-right

>
<h3>

with a full set of standard CMS features<
/h3>
</

>
</div>
</div>


<div class=
"row">
<div class="col text-right my-5">


<ul
class="list-inline mx-auto px-4">


<li class="list-inline-item logo-shape">
<a

="Software Overview and Model#file-galleries" title="File galleries">


<div class="imagecontainer">
<img src

"display2299" alt="Feature screenshot" class="feature-screenshot">


<div class="hover-text steady-implementation">


<h3>For all types of files</h3>




<p>Full-featured file galleries</p>


</div>


</div>


</a>


</li>
<li class="list-inline-item logo-shape">


<a href="Software Overview and Model#articles" title="Articles">


<div class="imagecontainer">


<img src="display2303" alt="Feature screenshot" class="feature-screenshot">


<div class="hover-text steady-implementation">


<h3

For news and announcements<
/h3>


<p>Full-featured

publishing functions<
/p>


</div>
</div>


</a>


</li>
<li class="list-inline-item logo-shape">


<a href="Software Overview and Model#blogs" title="Blogs">


<div class="imagecontainer">


<img src="display2304" alt="Feature screenshot" class="feature-screenshot">


<div class="hover-text steady-

">


<h3>Legacy web communicator</h3>




<p>Industry-standard blog<br>engine</p>






</div>






<

div>


</a>


</li>


</ul>

</div>
</div>
</div>


/section>
</div>
<div class="
tiki

features-wrap tiki-and-steady-implementation-

">
<section id="tiki-and-steady-implementation

of" class="tiki-features pb-
">
<div class

"container pt-4">
<div class="row">


<div class="col">
<h3>And

technology such as Vue
.js, Rubix ML, and Web Monetization</h3>
</div>


</div>
<div class=
"row">
<

class="col my-5">
<ul
class="list-inline mx-auto px-4">


<li class="list-inline-item logo-shape">


<a href="Software Overview and Model#vuejs" title="Vue.js">


<div class="imagecontainer">
<img src

"display2312" alt="Feature screenshot" class="feature-screenshot">


<div class="hover-text steady-implementation">




<h3>Combining old and new
</h3>


<p>Increasing

of Vue.js for components</p
>
</

>
</div>


</a>
</li>


<li class="list-inline-item logo-shape">


<a href="Software Overview and Model#machine-learning" title="Machine learning">


<div class="imagecontainer">


<img src="display2301" alt="Feature screenshot" class="feature-screenshot">


<div class=

hover-text steady-implementation">


<h3>Rubix ML<

h3>


<p>A high-level machine learning and deep learning library<
/p>


<
/div>
</div>


</a>
</li>
<li class="list-inline-item

-shape">
<a href="Software Overview and Model#web-monetization"

="Web monetization">
<div class="imagecontainer" style

"background-color: #fff;">
<img src=

display2359" alt="Feature screenshot" class="feature-screenshot" style="width: 200px; height: auto; top:

20px; left:20px;">


<div class="hover-text steady-implementation">




<h3>Web Monetization</h3>






<

>Receive payments

website visitors
.

/p>




</div>


</div>

<
/a


</li>


</ul>
</div>


</div>
</div>
</section>
</div>
<section id

"anchors
" class="anchors-section pt-5">
<div class="container"


<div class="row">
<div class="col-

-12 p-t4">
<div class="text-anim-container">


<div class="text-anim-content">
<p class="text-anim-content-text

>
Hello,


</p>
<ul class="text-anim-content-
list">


<li class="text
-anim-content-list-item">New Tiki Users and Admins!</li>


<li class="text-anim-content-list-item">Current Users and Admins!</li>


<li class="text-anim-content-list-item">System Administrators!</li>


<li class="text-anim-content-list-item">Developers and Coders!</li>


<li class="text-anim-content-list-item">Graphic
, UI, and UX Designers!</li>


<li class="text-anim-content-list-item">i18n Specialists and Translators!</li>


<li class="text-anim-content-list-item">Website Companies and Consultants!</li


<li class="text-anim-content-list-item">Enterprise Consultation Firms!</li




<li class="text-anim-content-list-item">Partnering Associations, Organizations,

and Projects!</li>


<li class="text-anim-content-list-item">Software Listings and Marketplaces

</li>
<li class="text-anim-content-list-item">Software Evaluators!<

li>
<li class="text-anim-content-list-item">Philanthropic

Charitable Organizations!</li>


</ul


</div>


</div>
<h2 style="font-size: 3rem;">The Tiki Community</h2>
<div style="font-size: 1.6rem;">This is what we call the people who make Tiki and use it, who support it and promote it.



And around that community are people who may provide support for, list, describe, evaluate, or join in cooperation
with Tiki.


</div>
</div>
<div class="col-6 col-sm-2 offset-sm-2 in-page-link tiki-use">


<a href="#use-tiki"><img src="display2331" alt="Remote team using Tiki"

="img-fluid"><br>Use Tiki<br>

span class="icon icon-angle-down fas fa-angle-down " style="font-size
:300%;"></span><

a>
<
/div>
<div class="col-6 col-sm-2 in-page-link
tiki-create">
<a href="#create-tiki"><img src="display2330" alt="Creative team working on Tiki

class="img-fluid"><br>Create Tiki<

><span class="icon icon-angle-down fas fa-angle-down"


style="font-size:300%;"></span><
/a>
</div>
<div class="col-6 col-sm-2 in-page-link tiki-grow-with">


<a href="#grow-with-tiki">

img src="display2333" alt="Advancing

" class="img-

"><

>Grow with Tiki<br><span class="icon icon-angle-down fas fa-angle-

"style="font-size
:300%

"><
/span></a>


</div>


<div class="col-6 col-sm-2 in-page-link
tiki-know">


<a href="#know-tiki"><img src="display2332" alt="Tiki feature checklist"

="img-fluid"><br>Know Tiki<br><span class="icon icon-angle-down fas fa-angle-down " style="font

size:300%;"><
/span></a>
</div>


</div>
</div>
</section>
<section id="use-tiki" class="user-type use-tiki pt-
3">
<div class

"container">
<div
class="row">
<div class="col">


<div class="media pt
-5 tiki-audience-heading tiki-use-headingX">
<

class="logo-shape" style="">
<
a href="#" title="

wiki page">
<div class="imagecontainer">


<img src="display2331" alt="Feature screenshot" class="feature-screenshot img-fluid




style="top:
; left:
;">




<!-- <div class="hover-text">


<h3>Create pages freely</h3>


<p>Full control over wiki/web page appearance</p>

</div> -

>


</div>


</a>


</div




<!-- <

class="mr-3 img-fluid" src="display16" alt="Remote team using

"> -->
<div class="media-

">
<h2 class

"text-left">Get and Use Tiki</h2>
<div class="section-subtitle">

, configuring, and maintaining Tiki
</div>


</div>


</div>
</div>
</div>


div class="row">
<div class="col-

-4">
<a

="New Users and Admins" class="card-button">




<div class="card mb-4">


<img class="card-img-top" src="display2338"

="Card image cap">
<div class

"card-label">Info for new
Tiki users</div>
<div class="card-body"


<h3 class="card-title">New Users/Admins<

h3>
</div>


</div>
</a>


</div>


div class="col-md-4">


<a href="Community" class="card-button"




<div class="card current-tiki-users mb-4">


<img class="card-img-top

src="display2314" alt="Card image cap">


<div class="card-label">Thanks for being part of the Community<
/div>


<div class="card-body">


<h3 class="card-title">Current Users
/Admins</h3>


</div>
</div>


</a>


</div>
<div class=

col-md-4">


<a href="Sysadmins Information" class=

card-button">






<div class="card mb-4">




<img class="card-img-top

src="display2334" alt="Card image cap">


<div class="card-label">Info for organization sysadmins</

>
<div class="card-body

>
<h3 class="card-title"

System Administrators</h3>
</div>

</div>
</a>


/div>
</div>
</div>
</section>
<section id="create-
tiki" class="user-type create-tiki">

<div class
="container">
<div class="row">
<div class="col"


<div class="media pt
-5 tiki-audience-heading tiki-create-heading">


<div class="logo
-shape" style="">
<a href="

" title="Edit wiki page">
<div class=

imagecontainer">


<img src="display2330" alt="Remote team using Tiki" class="feature-screenshot

-fluid"


style="top
:
; left:

;">
<!-

<div class="hover-text">


<h3>Create pages freely</h3>






<p>Full control over wiki/web

appearance</p>




</div> -->


</div>


</a>
</div>


<div class="media-body">
<h2 class

"text-left">Create Tiki</h2>


<div class="section-subtitle">Developing and contributing to the project</div>
</div>


</div>


</div>
</div>


<div class="row">


<div class="col-md-

">
<a href=

Developers Information" class="card-button">


<div class="card mb-4">


<img class="card-img-top" src="display2335" alt="Card image cap">


<div class="card-label">Make software the Wiki Way</div>


<div class="card-body">


<h3 class="card-title">Developers/Coders<br><br></h3>


</div>


</div>


</a>


</div>


<div class="col-md-4">


<a href="Designers Information" class="card-button">


<div class="card mb-4">


<img class="card-img-top" src="display2336" alt="Card image cap">


<div class="card-label">Experience design freedom with Tiki</div>


<div class="card-body">


<h3 class="card-title">Graphic/UI/UX Designers</h3>


</div>


</div>


</a>

</div




<div class="col

md-4

>
<a href="Translators

" class="card-button">




<div class="card mb-4">


<img class="card-img-top" src="display2288" alt

"Card image cap">
<div class

"card-label">Add to the voices</div>


div class="card-body">


<h3 class="card-title">i18n/Translators<br><br></h3>
</div>


</div>
</a>


</div>
</div>
</div>
</section>
<section id="grow-with-tiki" class="user

type grow-with-tiki">
<div class="container">
<div class="row">


<div class="col">
<div class="media pt-5 tiki-audience-heading tiki-grow-with-heading">


<div class="logo-shape" style="">


<a href="
#" title="Edit wiki page">


<div class

"imagecontainer">


<img src="display2333" alt="Remote team using Tiki"

class="feature-screenshot img-fluid"


style="top:
; left:
;">


<!-- <

class="hover-text">






<h3>Create pages freely</h3>




<p>Full control over wiki/web page appearance</p>


<

div> -->
</div>


</a>
</div


<div class="media-body">


<h2 class="text-left">Grow with Tiki</h2>


<div class="section-subtitle"

Providing services around Tiki</div>


</div>


</div>


</div>
</div


<div class="row">
<div

="col-md-4">
<a href=

Website Companies and Consultants" class="card-button">
<div class="card mb-4">


<img class="card-img-top" src="display2340" alt=

Card image cap">
<div class

"card-label">Taking the road less traveled</div>
<div class=

card-body">


<h3 class="card-title">Website Companies and Consultants</h3




</div>


</div>


</a>
</div>


<div class="col-md-4">


<a href="Enterprise Information" class="card-button">
<div

="card mb-4">
<img class="card-img

top" src="display2284" alt="Card image cap">


<div class="card-label">Providing more complex solutions</div>


<div class="card-body">


<h3 class="card-title">Enterprise

Firms</h3>


</div>






/div>

</a>



</div>


<div class="col-md-4">


<a href="Tiki Project Collaboration" class="card-button">


<div class="card mb-4">


<img class="card-img-top" src="display2337" alt="Card image cap">

<div class="card-label">Tiki

to collaborate</div>
<div class="card-body">


<h3 class="card-title">Partnering Associations, Organizations, Projects</h3>


</div>
</div>


</a>
</div>
</div>
</div>
</section>

<section id="know-tiki" class="user-type know-tiki">
<div class="container">
<div class="row">


<div class="col">
<div class="media pt-5

-audience-heading tiki-know-heading">


<div class="logo-shape" style="">


<a href="
#" title="

wiki page">


<div class="imagecontainer">


<img src="display2332" alt="Remote team using Tiki" class="feature-screenshot img-fluid"




style="top:
; left:

;">




<!--

<div class="hover-text"
>


<h3>Create pages

</h3>


<p>Full control over wiki/web page appearance</p>


</div> -->


</div>


</
a>
</div>


<div class="media-body">


<h2>Know Tiki

/h2>


<div class="section-

">Evaluating Tiki for recommendation or possible use</div>


</div>
<

div>
</div>
</

>
<div class="row">
<div class="col-md-4">


<a href="Listing Tiki" class="card-button">


<div class="card mb-4">


<img class="card-img-top" src="display2285" alt="Card image cap">


<div class="card-label">We welcome comparisons</

>
<

class="card-body">


<h3 class="card

title">Software Listings and Marketplaces</h3>


</div


</div>


</a>
</div>


<div class="col-md-4">
<a href="Evaluating Tiki"

="card-button">
<div class="card mb-4">


<img class="card-img-top" src

"display2287" alt="Card image cap">
<div class="card-label

>Make a deeper analysis</div>


<div class="card-body">




<h3 class="card-title">Software Evaluators</

>






<br>



</div>


</div>


</a>
</div>
<

class="col-md-4">


<a href="To Philanthropic Organizations" class="card-

">
<div

="card mb-4">


<img class="card-img-top" src="display2286" alt="Card image cap">


<div class="card-label">Working together for the common good</div>
<div class="card-body">


<h3 class="card-title">Philanthropic and Charitable Organizations</h3>


</div>


</div>


</a>


</div>




/div>
</div>
</section>
<section class="mission-section">
<div class="container">
<div class="row mt-4 mb-
">
<div class="col-md-4 offset-md-1">
<img class="d-block w-100" src="display2283" alt="Card image cap">
</div>
<div class="col-md-6 px-3">
<div class="card-horizontal">
<div class="card-body">
<h3 class="card-title" style="text-align: left;">Our Mission</h3>
<p>The mission of the Tiki Software Community Association is to foster the development of the Open Source software, Tiki Wiki CMS Groupware, and to promote the free use of this software by all who can benefit....</p>
<a href="Introduction" class="btn btn-primary my-4">Tiki Project Introduction</a>
</div>
</div>
</div>
</div>
</div>
</section>
{HTML}

History

Advanced
Information Version
Gary Cunningham-Lee
Page locked
206
Current
View
Gary Cunningham-Lee Trying for better responsive layout in top section - adjusted title and animation col widths. [Rollback by chibaguy to version 203] 205
View
Gary Cunningham-Lee Trying for better responsive layout in top section. 204
View
Gary Cunningham-Lee Trying for better responsive layout in top section - adjusted title and animation col widths. 203
View
Gary Cunningham-Lee Trying for better responsive layout in top section - take 3. 202
View
Gary Cunningham-Lee Trying for better responsive layout in top section. 201
View
Gary Cunningham-Lee Page unlocked [Rollback by chibaguy to version 198] 200
View
Gary Cunningham-Lee Trying for better responsive layout in top section. 199
View
Gary Cunningham-Lee Page unlocked 198
View
Gary Cunningham-Lee Page locked 197
View
Gary Cunningham-Lee PluginLayout replaced with equivalent CSS for improved PageSpeed performance. 196
View
Gary Cunningham-Lee Page unlocked 195
View
Gary Cunningham-Lee Page locked 194
View
Gary Cunningham-Lee Removed style="margin-right: -12px;" on div.community-links to prevent horizontal scrollbar. (Actually did it this time.) 193
View
Gary Cunningham-Lee Removed style="margin-right: -12px;" on div.community-links to prevent horizontal scrollbar. 192
View
Gary Cunningham-Lee Page unlocked 191
View
Gary Cunningham-Lee Moved CSS from PluginList page to this page. 190
View
Gary Cunningham-Lee More adjustments in top section. 189
View
Gary Cunningham-Lee Reduce news image size; make anim's div overflow-hidden. 188
View
Gary Cunningham-Lee Adjusted grid classes of news and events box. 187
View
Gary Cunningham-Lee Adjusted grid classes of news and events box. 186
View
Gary Cunningham-Lee Reduced size of animated shapes. Todo: adjust bg image offsets. 185
View
Gary Cunningham-Lee Added sort block to events PluginList. Funny, the sort was correct (soonest event at top) without the sort block on my WAMP dev instance, but reversed here at tiki.org. 184
View
Gary Cunningham-Lee Removed redundant More events link. 183
View
Gary Cunningham-Lee Reduced number of articles to 4 to match height of events. 182
View
Gary Cunningham-Lee Maybe multiple calendar ids don't work? Replaced with just the community news calendar parameter. 181
View