+ <div class="codelisting_container"><div class="icon_copy_code far fa-clipboard" tabindex="
" data-clipboard-target="#codebox1" ><span class="copy_code_tooltiptext">Copy to clipboard</span></div><pre class="codelisting" data-theme="off" data-syntax="css" data-wrap="1" dir="ltr" style="white-space:pre-wrap; overflow-wrap: break-word; word-wrap: break-word;" id="codebox1" ><div class="code">/*****

- .rawlinks a::before, .rawlinks a::after,
.fancylink-card a::before, .fancylink-card a::after {

+ .rawlinks a::before, .rawlinks a::after/*,
.fancylink-card a::before, .fancylink-card a::after*/ {

+

+ <p>Maybe the best way to get a running start with parallax scrolling for Tiki is to download and install (in a Tiki 15 or newer site) the Shapely theme.

+

+

- <div class="codelisting_container"><div class="icon_copy_code far fa-clipboard" tabindex="
" data-clipboard-target="#codebox6" ><span class="copy_code_tooltiptext">Copy to clipboard</span></div><pre class="codelisting" data-theme="off" data-wrap="1" dir="ltr" style="white-space:pre-wrap; overflow-wrap: break-word; word-wrap: break-word;" id="codebox6" ><div class="code">&lt;!-- Lulu Parallax --&gt;

+ <div class="codelisting_container"><div class="icon_copy_code far fa-clipboard" tabindex="
" data-clipboard-target="#codebox3" ><span class="copy_code_tooltiptext">Copy to clipboard</span></div><pre class="codelisting" data-theme="off" data-wrap="1" dir="ltr" style="white-space:pre-wrap; overflow-wrap: break-word; word-wrap: break-word;" id="codebox3" ><div class="code">&lt;!-- Lulu Parallax --&gt;

- <div class="codelisting_container"><div class="icon_copy_code far fa-clipboard" tabindex="
" data-clipboard-target="#codebox7" ><span class="copy_code_tooltiptext">Copy to clipboard</span></div><pre class="codelisting" data-theme="off" data-wrap="1" dir="ltr" style="white-space:pre-wrap; overflow-wrap: break-word; word-wrap: break-word;" id="codebox7" ><div class="code">&lt;div class=&quot;parallax-group group-a group-a1&quot;&gt;

+ <div class="codelisting_container"><div class="icon_copy_code far fa-clipboard" tabindex="
" data-clipboard-target="#codebox4" ><span class="copy_code_tooltiptext">Copy to clipboard</span></div><pre class="codelisting" data-theme="off" data-wrap="1" dir="ltr" style="white-space:pre-wrap; overflow-wrap: break-word; word-wrap: break-word;" id="codebox4" ><div class="code">&lt;div class=&quot;parallax-group group-a group-a1&quot;&gt;

- <div class="codelisting_container"><div class="icon_copy_code far fa-clipboard" tabindex="
" data-clipboard-target="#codebox8" ><span class="copy_code_tooltiptext">Copy to clipboard</span></div><pre class="codelisting" data-theme="off" data-wrap="1" dir="ltr" style="white-space:pre-wrap; overflow-wrap: break-word; word-wrap: break-word;" id="codebox8" ><div class="code">.parallax-group { height: 45vw; }

+ <div class="codelisting_container"><div class="icon_copy_code far fa-clipboard" tabindex="
" data-clipboard-target="#codebox5" ><span class="copy_code_tooltiptext">Copy to clipboard</span></div><pre class="codelisting" data-theme="off" data-wrap="1" dir="ltr" style="white-space:pre-wrap; overflow-wrap: break-word; word-wrap: break-word;" id="codebox5" ><div class="code">.parallax-group { height: 45vw; }

+ <style>.key-info .box-last_blog_posts ol {list-style-type: disc;} .key-info .box-last_blog_posts .date {display: none;} </style><div class='card module mb-3 key-info'><div class='row g-
'><div class='col-md-6 text-center'> <img src="dl418?display&format=png&quality=75" loading="lazy" width="6

" height="793" class="regImage pluginImg418 img-fluid " data-src="dl418?display&format=png&quality=75" alt="Image" /><br /><div style="position:relative" class='my-3'><button type="button" class="btn btn-primary"><a href="Included themes" class="text-white">Included theme - See all</a></button></div></div><div class='col-md-6'><div class='card-body'>

- <div id="module_wikiplugin_6" style=""

+ <div id="module_wikiplugin_5" style=""

- <div id="mod-last_blog_posts_wp_6">

+ <div id="mod-last_blog_posts_wp_5">

+ <div class="codelisting_container"><div class="icon_copy_code far fa-clipboard" tabindex="
" data-clipboard-target="#codebox9" ><span class="copy_code_tooltiptext">Copy to clipboard</span></div><pre class="codelisting" data-theme="off" data-wrap="1" dir="ltr" style="white-space:pre-wrap; overflow-wrap: break-word; word-wrap: break-word;" id="codebox9" ><div class="code">/***** Please update Themes_tiki_org_custom_CSS when this code is updated *****/
.box-switch_theme .card-body::after { content: &quot;If the theme doesn&#
39;t switch, do a hard refresh (on Windows: Press Ctrl + F5 or Shift + F5; on Mac: Press Command + Shift + R) to reload the page.&quot;}

.card.module .card-title a {
color: var(--bs-link-color);
}

+ .navbar-brand {color: var(--tiki-top-color); }

+ .navbar-brand:hover {color: var(--tiki-top-hover-color); }

+

+ /* :root,

- --tiki-site-subtitle-color: var(--tiki-top-color); }

+ --tiki-site-subtitle-color: var(--tiki-top-color);
--bs-navbar-brand-color: var(--tiki-top-color); }

- --tiki-site-subtitle-color: var(--tiki-top-color); }

+ --tiki-site-subtitle-color: var(--tiki-top-color); } */

- header.fixed-top .container-fluid {--bs-gutter-x:
; }nav#top_modules { flex-wrap: wrap; } #module_93 {width: 1

%; background: #


; margin-top: -.5rem; } #module_93 .navbar-nav.me-auto { margin-left: auto; margin-right: auto; } #module_93 .nav-link {padding-top:
; padding-bottom:
; color: #fff; } #middle_outer { margin-top: 12px; }</div></pre></div>

+ header.fixed-top .container-fluid {--bs-gutter-x:
; }nav#top_modules { flex-wrap: wrap; } #module_93 {width: 1

%; background: #


; margin-top: -.5rem; } #module_93 .navbar-nav.me-auto { margin-left: auto; margin-right: auto; } #module_93 .nav-link {padding-top:
; padding-bottom:
; color: #fff; } #middle_outer { margin-top: 2
px; }

@media (max-width: 991px) { #middle_outer { margin-top: 37px; } }

/* Temporary until color mode code is cherry-picked to branch 26 */
#bd-theme { color: var(--tiki-top-color) !important; }

#pagetop_modules .module {width: 1

%}</div></pre></div>

+ <div class=my-3">So far at this site, these blocks are only implemented in the TikiCorp theme. Please use the Switch Theme module at the bottom of the page to change the theme to TikiCorp, and then do a hard refresh (on Windows: Press Ctrl + F5 or Shift + F5; on Mac: Press Command + Shift + R) to reload the page. </div>

+

- </li></ul><p>{DIV}
</p>

+ </li></ul></div>

The current implementation of the FiveAlive theme uses a gradient background across the entire page header.

+

+

+

The "classic" theme options, like "Akebi_classic", implement the original appearance of the FiveAlive theme's page header area, which has a white background behind the first module, typically the logo module. If the end of the site title or site subtitle text needs more space to display completely, add this CSS variable to the website's Look & Feel admin section's CSS Customization textarea:

+

+

+

Copy to clipboard

:root { --tiki-fivealive-classic-logo-module-padding-end: 20px; }

+

Replace "20px" with whatever amount of space is needed, in pixels, rems, etc. but be sure to include the unit.

+

+

---

+

+

- <div id="module_wikiplugin_11"

+ <div id="module_wikiplugin_7"

- <div id="mod-top_pages_wp_11"

+ <div id="mod-top_pages_wp_7"

- <div id="module_wikiplugin_12"

+ <div id="module_wikiplugin_8"

- <div id="mod-who_is_there_wp_12"

+ <div id="mod-who_is_there_wp_8"

- <div class="codecaption">HelloWorld in Pascal</div><div class="codelisting_container"><div class="icon_copy_code far fa-clipboard" tabindex="
" data-clipboard-target="#codebox14" ><span class="copy_code_tooltiptext">Copy to clipboard</span></div><pre class="codelisting" data-line-numbers="
" dir="ltr" id="codebox14" ><div class="code">program HelloWorld(output);

+ <div class="codecaption">HelloWorld in Pascal</div><div class="codelisting_container"><div class="icon_copy_code far fa-clipboard" tabindex="
" data-clipboard-target="#codebox12" ><span class="copy_code_tooltiptext">Copy to clipboard</span></div><pre class="codelisting" data-line-numbers="
" dir="ltr" id="codebox12" ><div class="code">program HelloWorld(output);

- <div id="wpfancytable3-div" class="table-responsive ts-wrapperdiv "> <table class="table table-striped table-hover normal" id="wpfancytable3"> <thead class=""> <tr> <th>head one</th> <th>head two</th> <th>head three</th> </tr> </thead> <tbody> <tr> <td>cell one</td> <td>cell two</td> <td>cell three</td> </tr> <tr> <td>r2 c1</td> <td> r2 c2</td> <td> r2 c3</td> </tr> </tbody></table></div><div class="alert alert-warning alert-dismissible" role="alert"><button type="button" id="btn-close" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button><div class="alert-heading h4"><span class="icon icon-warning fas fa-exclamation-triangle " ></span>&nbsp;<span class="rboxtitle">~np~Warning</span></div><div class="rboxcontent" style="display: inline">~/np~This is a warning rbox. </div></div>

+ <div id="wpfancytable1-div" class="table-responsive ts-wrapperdiv "> <table class="table table-striped table-hover normal" id="wpfancytable1"> <thead class=""> <tr> <th>head one</th> <th>head two</th> <th>head three</th> </tr> </thead> <tbody> <tr> <td>cell one</td> <td>cell two</td> <td>cell three</td> </tr> <tr> <td>r2 c1</td> <td> r2 c2</td> <td> r2 c3</td> </tr> </tbody></table></div><div class="alert alert-warning alert-dismissible" role="alert"><button type="button" id="btn-close" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button><div class="alert-heading h4"><span class="icon icon-warning fas fa-exclamation-triangle " ></span>&nbsp;<span class="rboxtitle">~np~Warning</span></div><div class="rboxcontent" style="display: inline">~/np~This is a warning rbox. </div></div>

- <div> <span class="wpfade-span-plain"> <a id="wpfade-3-link" class=> Click me... </a> </span> <div id="wpfade-3" class="wpfade-div-plain"> Click me and I'll quietly fade away (Fade plugin demo). </div></div>

+ <div> <span class="wpfade-span-plain"> <a id="wpfade-1-link" class=> Click me... </a> </span> <div id="wpfade-1" class="wpfade-div-plain"> Click me and I'll quietly fade away (Fade plugin demo). </div></div>

- <div id="module_wikiplugin_13"

+ <div id="module_wikiplugin_9"

- <div id="mod-top_pages_wp_13"

+ <div id="mod-top_pages_wp_9"

- <div id="module_wikiplugin_14"

+ <div id="module_wikiplugin_1
"

- <div id="mod-who_is_there_wp_14"

+ <div id="mod-who_is_there_wp_1
"

- <div class="codecaption">HelloWorld in Pascal</div><div class="codelisting_container"><div class="icon_copy_code far fa-clipboard" tabindex="
" data-clipboard-target="#codebox15" ><span class="copy_code_tooltiptext">Copy to clipboard</span></div><pre class="codelisting" data-line-numbers="
" dir="ltr" id="codebox15" ><div class="code">program HelloWorld(output);

+ <div class="codecaption">HelloWorld in Pascal</div><div class="codelisting_container"><div class="icon_copy_code far fa-clipboard" tabindex="
" data-clipboard-target="#codebox13" ><span class="copy_code_tooltiptext">Copy to clipboard</span></div><pre class="codelisting" data-line-numbers="
" dir="ltr" id="codebox13" ><div class="code">program HelloWorld(output);

- <div id="wpfancytable4-div" class="table-responsive ts-wrapperdiv "> <table class="table table-striped table-hover normal" id="wpfancytable4"> <thead class=""> <tr> <th>head one</th> <th>head two</th> <th>head three</th> </tr> </thead> <tbody> <tr> <td>cell one</td> <td>cell two</td> <td>cell three</td> </tr> <tr> <td>r2 c1</td> <td> r2 c2</td> <td> r2 c3</td> </tr> </tbody></table></div><div class="alert alert-warning alert-dismissible" role="alert"><button type="button" id="btn-close" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button><div class="alert-heading h4"><span class="icon icon-y fas fa-y " ></span>&nbsp;<span class="rboxtitle">~np~Warning</span></div><div class="rboxcontent" style="display: inline">~/np~This is a warning rbox. </div></div>

+ <div id="wpfancytable2-div" class="table-responsive ts-wrapperdiv "> <table class="table table-striped table-hover normal" id="wpfancytable2"> <thead class=""> <tr> <th>head one</th> <th>head two</th> <th>head three</th> </tr> </thead> <tbody> <tr> <td>cell one</td> <td>cell two</td> <td>cell three</td> </tr> <tr> <td>r2 c1</td> <td> r2 c2</td> <td> r2 c3</td> </tr> </tbody></table></div><div class="alert alert-warning alert-dismissible" role="alert"><button type="button" id="btn-close" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button><div class="alert-heading h4"><span class="icon icon-y fas fa-y " ></span>&nbsp;<span class="rboxtitle">~np~Warning</span></div><div class="rboxcontent" style="display: inline">~/np~This is a warning rbox. </div></div>

- <div> <span class="wpfade-span-plain"> <a id="wpfade-4-link" class=> Click me... </a> </span> <div id="wpfade-4" class="wpfade-div-plain"> Click me and I'll quietly fade away (Fade plugin demo). </div></div>

+ <div> <span class="wpfade-span-plain"> <a id="wpfade-2-link" class=> Click me... </a> </span> <div id="wpfade-2" class="wpfade-div-plain"> Click me and I'll quietly fade away (Fade plugin demo). </div></div>