Themes_tiki_org_custom_CSS | Themes for Tiki Wiki CMS Groupware

This is the Look & Feel admin custom CSS used at this site as of the time of this writing.
To do: Page-specific CSS should be moved to the particular page (vertical timeline, for example). Other rules should be checked to see if they are still needed, etc.
Copy to clipboard
/* Change logo from black to white */
img.sitelogo {filter: invert(100%); }
/* Gitter chat sidecar */
aside.gitter-chat-embed { margin-top: 150px; } 
/*** Link color definitions for "sister" sites ***/
article a[href^="http://"]::before,
article a[href^="https://"]::before,
article a.ext:before {
color: #fff;
display: inline-block;
font-size: 75%;
border-radius: 50%;
height: 0.952381em;
overflow: hidden;
margin-right: 0.285714em;
text-indent: -10em;
transition: transform .25s;
vertical-align: middle;
width: 0.952381em;
}

article a[href^="http://"]:hover::before,
article a[href^="https://"]:hover::before {
box-shadow: 0.5em 0.5em 1em -0.5em rgba(0,0,0,.5);
width: auto;
transition: text-indent .1s;
text-indent: 0;
padding: 0.142857em 0.357143em;
height: auto;
border-radius: 9em;
top: -1em;
position: absolute;
margin-left: -0.928571em;
word-break: normal;
}

article a[href^="http://"]:hover::after,
article a[href^="https://"]:hover::after {
border-left-width: .5em;
border-left-style: solid;
border-bottom-color: transparent;
border-bottom-width: .5em;
border-bottom-style: solid;
left: .5em;
margin-top: 1.39em;
top: -1em;
position: absolute;
transform: skewX(-20deg);
}

/* rules common for all URLs we want to match */
article a[href^="http://branding.tiki"]:hover,
article a[href^="https://branding.tiki"]:hover,
article a[href^="http://community.tiki"]:hover,
article a[href^="https://community.tiki"]:hover,
article a[href^="http://dev.tiki"]:hover,
article a[href^="https://dev.tiki"]:hover,
article a[href^="http://doc.tiki"]:hover,
article a[href^="https://doc.tiki"]:hover,
article a[href^="http://tiki"]:hover,
article a[href^="https://tiki"]:hover,
article a[href^="http://profiles.tiki"]:hover,
article a[href^="https://profiles.tiki"]:hover,
article a[href^="http://suite.tiki"]:hover,
article a[href^="https://suite.tiki"]:hover,
article a[href^="http://themes.tiki"]:hover,
article a[href^="https://themes.tiki"]:hover,
article a[href^="http://tiki.org"]:hover,
article a[href^="https://tiki.org"]:hover,
article a[href^="http://tikiwiki.org"]:hover,
article a[href^="https://tikiwiki.org"]:hover,
article a[href^="http://de.wikipedia.org"]:hover,
article a[href^="https://de.wikipedia.org"]:hover,
article a[href^="http://en.wikipedia.org"]:hover,
article a[href^="https://en.wikipedia.org"]:hover,
article a[href^="https://www.wikipedia.org"]:hover,
article a[href^="http://wikisuite.org"]:hover,
article a[href^="https://wikisuite.org"]:hover,
article a.ext_page:hover {
padding-left: 0.9285714285714286em;
position: relative;
}

/* Sometimes we want to prevent these so we can wrap the content in .rawlinks class and the links will display raw */
.rawlinks a::before, .rawlinks a::after {
display: none !important;
}
.rawlinks a.btn {
padding: 6px 12px !important;
}
.rawlinks a.btn-lg, .rawlinks .btn-group-lg > .btn {
padding: 10px 16px !important;
}
.rawlinks a.list-group-item {
padding: 10px 15px !important;
}

/* Color and badge definitions for specific URLs follow */
article a[href^="http://branding.tiki"]:hover:after,
article a[href^="https://branding.tiki"]:hover:after,
article a.branding:hover:after {
border-left-color: #eb0a82;
content: "";
}

article a[href^="http://branding.tiki"]:before,
article a[href^="https://branding.tiki"]:before,
article a.branding:before {
background-color: #eb0a82;
content: "branding:";
}

article a[href^="http://tiki.org"]:hover:after,
article a[href^="https://tiki.org"]:hover:after,
article a[href^="http://tikiwiki.org"]:hover:after,
article a[href^="https://tikiwiki.org"]:hover:after,
article a[href^="http://info.tiki"]:hover:after,
article a[href^="https://info.tiki"]:hover:after,
article a.info:hover:after {
border-left-color: #117485;
content: "";
}

article a[href^="http://tiki.org"]:before,
article a[href^="https://tiki.org"]:before,
article a[href^="http://tikiwiki.org"]:before,
article a[href^="https://tikiwiki.org"]:before,
article a[href^="http://info.tiki"]:before,
article a[href^="https://info.tiki"]:before,
article a.info:before {
background-color: #117485;
content: "info:";
}

/* orange for community ext wiki links */
article a[href^="http://community.tiki"]:hover:after,
article a[href^="https://community.tiki"]:hover:after,
article a.tw:hover:after {
border-left-color: #ec6223;
content: "";
}

article a[href^="http://community.tiki"]:before,
article a[href^="https://community.tiki"]:before,
article a.tw:before {
background-color: #ec6223;
content: "community:";
}

article a[href^="http://dev.tiki"]:hover:after,
article a[href^="https://dev.tiki"]:hover:after,
article a.dev:hover:after {
border-left-color: #c21e3b;
content: "";
}

article a[href^="http://dev.tiki"]:before,
article a[href^="https://dev.tiki"]:before,
article a.dev:before {
background-color: #c21e3b;
content: "dev:";
}

article a[href^="http://doc.tiki"]:hover:after,
article a[href^="https://doc.tiki"]:hover:after,
article a.doc:hover:after {
border-left-color: #96a032;
content: "";
}

article a[href^="http://doc.tiki"]:before,
article a[href^="https://doc.tiki"]:before,
article a.doc:before {
background-color: #96a032;
content: "doc:";
}

article a[href^="http://profiles.tiki"]:hover:after,
article a[href^="https://profiles.tiki"]:hover:after,
article a.profiles:hover:after {
border-left-color: #ffc506;
content: "";
}

article a[href^="http://profiles.tiki"]:before,
article a[href^="https://profiles.tiki"]:before,
article a.profiles:before {
background-color: #ffc506;
content: "profiles:";
}

article a[href^="http://suite.tiki"]:hover:after,
article a[href^="https://suite.tiki"]:hover:after,
article a.suite:hover:after {
border-left-color: #7001a7;
content: "";
}

article a[href^="http://suite.tiki"]:before,
article a[href^="https://suite.tiki"]:before,
article a.suite:before {
background-color: #7001a7;
content: "suite:";
}

article a[href^="http://themes.tiki"]:hover:after,
article a[href^="https://themes.tiki"]:hover:after,
article a.themes:hover:after {
border-left-color: #8e286a;
content: "";
}

article a[href^="http://themes.tiki"]:before,
article a[href^="https://themes.tiki"]:before,
article a.themes:before {
background-color: #8e286a;
content: "themes:";
}

article a[href^="http://de.wikipedia.org"]:hover:after,
article a[href^="https://de.wikipedia.org"]:hover:after,
article a[href^="http://en.wikipedia.org"]:hover:after,
article a[href^="https://en.wikipedia.org"]:hover:after,
article a[href^="https://www.wikipedia.org"]:hover:after,
article a.wikipedia:hover:after {
border-left-color: #cedff2;
content: "";
}

article a[href^="http://de.wikipedia.org"]:before,
article a[href^="https://de.wikipedia.org"]:before,
article a[href^="http://en.wikipedia.org"]:before,
article a[href^="https://en.wikipedia.org"]:before,
article a[href^="https://www.wikipedia.org"]:before,
article a.wikipedia:before {
background-color: #cedff2;
color: #000;
content: "wikipedia:";
}

article a[href^="http://de.wikipedia.org"]:before,
article a[href^="https://de.wikipedia.org"]:before,
article a.wikipedia.de:before {
content: "wikipedia (german):";
}

article a[href^="http://wikisuite.org"]:before,
article a[href^="https://wikisuite.org"]:before,
article a.wikisuite:before {
background-color: #192263;
border-radius: .25rem;
content: "wikisuite:";
transform: rotate(-45deg);
}

article a[href^="http://wikisuite.org"]:hover:after, 
article a[href^="https://wikisuite.org"]:hover:after, 
article a.wikisuite:hover:after {
border-left-color: #192263;
content: "";
}

article a[href^="http://wikisuite.org"]:hover:before,
article a[href^="https://wikisuite.org"]:hover:before,
article a.wikisuite:hover:before {
transform: rotate(0deg);
}

/* To have the “bubble” stay on the same line as the link */
article a[href^="http://"],
article a[href^="https://"] {
display: inline-block;
vertical-align: top;
word-break: break-all;
}

article .rawlinks a[href^="http://"], article .rawlinks a[href^="https://"] {
display: inherit;
padding-left: 0 !important;
word-break: normal;
}

/*** END of Link color definitions for "sister" sites ***/

/*.top_modules { float: right; }*/
.topbar_modules { width: 100%; }
#module_78 .nav { background: #f8e286a !important; } /* project site dropdown background */
@media (min-width: 768px) { .top_modules { min-width: 400px; } } /* prevent collapsing top navbar items when not logged in */

#outerToc {
	top: 31px;
}
@media (max-width: 991px) {
  .navbar-brand {
    font-size: 12px; }
  }

/*#module_66 {width: auto; background: url(dl146) repeat-x; text-align: center; color: #8E286A; text-shadow:  4px 4px 0px #fff;}

@media (min-width: 768px) {
#page_1 .middle_outer {margin-top: 350px;}
#module_66 {height:330px;margin-top: -330px;  font-size: 90px;padding-top: 65px;
 }
#page_1  .content_tiki_is { margin-top: 40px; margin-bottom: 40px;background: #8e286a; color: #fff;}
#page_1 .content_tiki_is .lead {padding: 40px 0 20px;}
} */
.content_next_steps .center-block {display: table;}
.content_next_steps {margin-bottom: 40px;} 

#page_1 .pagetitle {display: none;}/* This shouldn't be needed, but the no-title option on the page edit screen doesn't seem to work. */

ul.ui-autocomplete {background: #fff;}

#page_356 #col2 { display:none; }
#page_356 #middle.container { width: 100%; }
#page_356 #col1 { width: 100%; left: 0; }
#page_356 .tiki .middle_outer { background: #28292b; }
#page_356 .top_row { background: #28292b; color: #fff; }
#page_356 .middle_row { background: #f2f2f2; color: #333; }
#page_356 .bottom_row { background: #fff; color: #333; }

/* testing menu dropdown visibility in site header */
.navbar-collapse.in { overflow: visible; }

/* Homepage parallax scrolling, etc. */
#page_1 h3#Featured_at_the_Marketplace { padding-bottom: 30px; }
#page_1 .row.site_intro { padding-bottom: 40px; }
#page_1 .row.site_intro h1 { font-size: 4.5rem; } /* updated in 21 */
#page_1 .container.middle h1 {font-size: 66px; margin-top: 60px; }
#page_1  body { background: #f9e5f2; }
#page_1  .container.middle article.wikitext { font-size: 110%; }
#page_1  .container.middle,
#page_1  .container.middle > .row > .col-md-12 { width: 100%; padding-left: 0; padding-right: 0; max-width: 100%; margin-left: 0; margin-right: 0; }
#page_1  .container.middle > .row,
#page_1 .topbar.row { margin-left: 0; margin-right: 0; } 

/*
 * Lulu Parallax v1.0
 *
 * Copyright 2016 Carlos Ruiz / carlosruiz.me
 */
.parallax-group {
  height: 25vw;
 /* float: left;*/
  margin: 20px 0 40px 0; }

.parallax-group .parallax-container.background {
  height: 50vw;
  display: table; }

.parallax-group {
	width: 100%;
	position: relative;
	overflow: hidden; }

.parallax-group .parallax-container.foreground {
  height: 15vw;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.50);
  color: #fff;
  display: table; }

.parallax-group .parallax-container .info {
  display: table-cell;
  vertical-align: middle; }

.parallax-group .parallax-container .info.info-a { text-align: center; }
.parallax-group .parallax-container {
	width: 100%;
	position: absolute; }

.parallax-group .parallax-container.background {
	background-repeat: no-repeat;
	background-size: cover;  }

.parallax-group .parallax-container.foreground.with,
.parallax-group .parallax-container.background.against {
	top: 0; }

.parallax-group .parallax-container.background.with,
.parallax-group .parallax-container.foreground.against {
	bottom: 0; }

.parallax-group .parallax-container.foreground {
  height: 15vw;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  display: table; }

.parallax-group .parallax-container .info {
  display: table-cell;
  vertical-align: middle;
text-align: center; }

.parallax-group.group-a .parallax-container.background { background-image: url("display181");   }

.parallax-group.group-a.theme-info_intro .parallax-container.background { background-image: url("display182");   }


/*==================================
    TIMELINE (used on https://themes.tiki.org/Simple_vertical_timeline .)
==================================*/
/*-- GENERAL STYLES
------------------------------*/
.timeline {
  line-height: 1.4em;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
 .timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6 {
  line-height: inherit; 
}

/*----- TIMELINE ITEM -----*/
.timeline-item {
  padding-left: 40px;
  position: relative;
}
.timeline-item:last-child {
  padding-bottom: 0;
}

/*----- TIMELINE INFO -----*/
.timeline-info {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px; 
  margin: 0 0 .5em 0;
  text-transform: uppercase;
  white-space: nowrap;
}

/*----- TIMELINE MARKER -----*/
.timeline-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15px;
}
.timeline-marker:before {
  background: #FF6B6B;
  border: 3px solid transparent;
  border-radius: 100%;
  content: "";
  display: block;
  height: 15px;
  position: absolute;
  top: 4px;
  left: 0;
  width: 15px;
  transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
}
.timeline-marker:after {
  content: "";
  width: 3px;
  background: #CCD5DB;
  display: block;
  position: absolute;
  top: 24px;
  bottom: 0;
  left: 6px;
}
.timeline-item:last-child .timeline-marker:after {
  content: none;
}

.timeline-item:not(.period):hover .timeline-marker:before {
  background: transparent;
  border: 3px solid #FF6B6B;
}

/*----- TIMELINE CONTENT -----*/
.timeline-content {
  padding-bottom: 40px;
}
.timeline-content p:last-child {
  margin-bottom: 0;
}

/*----- TIMELINE PERIOD -----*/
.period {
  padding: 0;
}
.period .timeline-info {
  display: none;
}
.period .timeline-marker:before {
  background: transparent;
  content: "";
  width: 15px;
  height: auto;
  border: none;
  border-radius: 0;
  top: 0;
  bottom: 30px;
  position: absolute;
  border-top: 3px solid #CCD5DB;
  border-bottom: 3px solid #CCD5DB;
}
.period .timeline-marker:after {
  content: "";
  height: 32px;
  top: auto;
}
.period .timeline-content {
  padding: 40px 0 70px;
}
.period .timeline-title {
  margin: 0;
}
/*----------------------------------------------
    MOD: TIMELINE CENTERED
----------------------------------------------*/
@media (min-width: 992px) {
  .timeline-centered,
  .timeline-centered .timeline-item,
  .timeline-centered .timeline-info,
  .timeline-centered .timeline-marker,
  .timeline-centered .timeline-content {
    display: block;
    margin: 0;
    padding: 0;
  }
  .timeline-centered .timeline-item {
    padding-bottom: 40px;
    overflow: hidden;
  }
  .timeline-centered .timeline-marker {
    position: absolute;
    left: 50%;
    margin-left: -7.5px;
  }
  .timeline-centered .timeline-info,
  .timeline-centered .timeline-content {
    width: 50%;
  }
  .timeline-centered > .timeline-item:nth-child(odd) .timeline-info {
    float: left;
    text-align: right;
    padding-right: 30px;
  }
  .timeline-centered > .timeline-item:nth-child(odd) .timeline-content {
    float: right;
    text-align: left;
    padding-left: 30px;
  }
  .timeline-centered > .timeline-item:nth-child(even) .timeline-info {
    float: right;
    text-align: left;
    padding-left: 30px;
  }
  .timeline-centered > .timeline-item:nth-child(even) .timeline-content {
    float: left;
    text-align: right;
    padding-right: 30px;
  }
  .timeline-centered > .timeline-item.period .timeline-content {
    float: none;
    padding: 0;
    width: 100%;
    text-align: center;
  }
  .timeline-centered .timeline-item.period {
    padding: 50px 0 90px;
  }
  .timeline-centered .period .timeline-marker:after {
    height: 30px;
    bottom: 0;
    top: auto;
  }
  .timeline-centered .period .timeline-title {
    left: auto;
  }
}

/*----------------------------------------------
    MOD: MARKER OUTLINE
----------------------------------------------*/
.marker-outline .timeline-marker:before {
  background: transparent;
  border-color: #FF6B6B;
}
.marker-outline .timeline-item:hover .timeline-marker:before {
  background: #FF6B6B; }
  
footer.help-block {  border-top: 1px solid #737373; padding: .7em 0; margin-bottom: 1.2em; }

/* New for branch 19 */
#pagebottom_modules {flex-wrap: wrap; }
#pagebottom_modules > .text-center { height: 3rem; }
#bottom_modules .icon-link-external { display: none; } 
#bottom_modules h4 { font-size: 1.25rem; }
.nav-link.dropdown-toggle { white-space: nowrap; }

/* temp fix - Gary*/
.tiki .col-lg-9 {
    flex-basis: 75%;
}
.postbody .card-header { background: #83286a; } /* May 7, 2019 */ 
,postbody .card-header a.label,
.postbody .card-header a.btn-link { color: #fff rgba(255,255,255,.75; }

/* Vertical Smartmenu experiment by Gary 2/13/2020  */

.smartmenu_vert .navbar-nav,
.smartmenu_vert .navbar-expand-lg .navbar-nav { flex-direction: column !important; }
.smartmenu_vert .navbar-nav .dropdown-menu { margin-left: 6rem !important; margin-top: -1.8rem !important; }
.smartmenu_vert .navbar, smartmenu_vert .navbar.bg-light, .smartmenu_vert .navbar.bg-dark { background: transparent !important; }
.smartmenu_vert .navbar-nav:not(.sm-collapsible) .nav-link .sub-arrow {
    margin-left: .255em;
    vertical-align: .0em;
    border-left: .3em solid;
    border-top: .3em solid transparent;
    border-bottom: .3em solid transparent; }
Information	Version
Sat 08 of Jul, 2023 17:36 GMT-0000 Gary Cunningham-Lee Tiki_org_info_links added (top of fixed-top header).	6
Fri 30 of Jun, 2023 18:32 GMT-0000 Gary Cunningham-Lee Put PluginCode back in.	5
Fri 30 of Jun, 2023 18:31 GMT-0000 Gary Cunningham-Lee CSS for previous, not-working homepage parallax scrolling removed, along with other commented out rules, etc.	4
Sun 25 of Jun, 2023 10:04 GMT-0000 Gary Cunningham-Lee Added CSS variables for site titles color in light and dark modes.	3
Fri 25 of Nov, 2022 14:22 GMT-0000 Gary Cunningham-Lee Added todo notes.	2
Fri 25 of Nov, 2022 14:20 GMT-0000 Gary Cunningham-Lee Page created and content copied and pasted from L&F admin.	1
History: Themes_tiki_org_custom_CSS

Preview of version: 2

History

Layout

Latest Changes

Subscribe to Tiki Newsletters!

Site Config

Switch Theme

About Tiki

Support

Community

Documentation

Development

Legal

Tiki Project Sites

Networks
