=== TRIS Theme ===

Contributors: Tim Reeves
Author URI: https://timreeves.de/
Theme URI: https://timreeves.de/
Tags: minimalistic, translation-ready
Copyright: 2021 - 2026 Tim Reeves
Requires at least: 5.0
Tested up to: 7.0
Stable tag: 1.47

== Description ==

TRIS Theme is an *extremely* minimalistic theme, which supports customization only via PHP and CSS.
Its layout is: Header, Navi bar, Content + right sidebar, Footer. Navi bar becomes fixed on scroll.
Custom HTML can be injected into the header. The menu, searchbox and sidebar can all be turned off.
The standard footer content (Copyright, one menu intended for disclaimer, data privacy etc.) can
be replaced with custom content (e.g. a widget area) via a PHP file.

The theme has a fully responsive design for mobile devices (fixed at <=768px in theme css).
On mobiles, the main menu mutates to a dropdown menu actioned by a hamburger icon;
and the sidebar is offscreen right, and slides in when the Plus icon is tapped.
WordPress commenting is fully supported using standard WordPress functions.
The commenters IP addresses are stored anonymized (last parts masked to 0).
Commenters avatars will be shown if that feature is enabled in WordPress settings.

The theme only uses one very short JavaScript file (native JS, no jQuery).
Pre-minified JS and CSS files are not provided, on the assumption a caching plugin will do that.
Caching: HTML pages can always be minified including stripping of comment.
Remember not to cache HTML pages if you have content which may change (e.g. latest posts).

The sidebar, if not deselected, shows a dynamic_sidebar('Primary Sidebar').
The Navi bar displays a main menu called 'TRIS Menu', which must be present.
The default footer displays a (small) menu 'TRIS Footer', which can contain e.g. Disclaimer, Data Privacy.

Depending on viewport width, when the sidebar is hidden, the width of the main content area is often larger
than when the sidebar is shown. This cannot be easily accounted for in CSS media width queries, which only
work on viewport width, not the width of a particular container. To allow you to design CSS for the width
of the main content area, the themes JS sets classes on #content on DOMReady and resize events as follows:

o if (contentWidth >= 700) { content.classList.add('ge700'); } else { content.classList.add('lt700'); }
o if (contentWidth >= 650) { content.classList.add('ge650'); } else { content.classList.add('lt650'); }
o if (contentWidth >= 600) { content.classList.add('ge600'); } else { content.classList.add('lt600'); }
o if (contentWidth >= 550) { content.classList.add('ge550'); } else { content.classList.add('lt550'); }
o if (contentWidth >= 500) { content.classList.add('ge500'); } else { content.classList.add('lt500'); }
o if (contentWidth >= 450) { content.classList.add('ge450'); } else { content.classList.add('lt450'); }
o if (contentWidth >= 400) { content.classList.add('ge400'); } else { content.classList.add('lt400'); }

TRIS theme provides the following template files - for more info on what WordPress expects and looks for
to display a particular page type, see https://developer.wordpress.org/themes/basics/template-files/ and
https://developer.wordpress.org/themes/basics/template-hierarchy/ and help/WordPress-Template-Hierarchy.png
also https://wpmudev.com/blog/the-ultimate-guide-to-theme-template-files-in-wordpress/

o 404.php         used by WP when no page found at the requested URL. Default action: redirects to home_url().
                  If $GLOBALS['404-action'] is NOT '301' then an own 404 page is displayed.
                  Use 'search' to have the page include a search form.
o attachment.php  redirects to the image / video etc. parent page to avoid SEO problems
o author.php      redirects to home_url() to avoid SEO problems
o comments.php    displays comments including navigation therein
o index.php       fallback for a page of post excerpts (e.g. recent articles, tag, category) OR search results
o page.php        a single PAGE with featured image, comments and pagination within the one page
o single.php      a single POST with featured image, comments, pagination within the page, prev / next navigation

Note that individual archive pages like category.php or tag.php are not offered (excepting author.php) -
they fall through to index.php, which allows sharing common code. Currently only for tags and categories,
all other taxonomies (e.g. date, month, day) are redirected to home_url() (for SEO).
SO with TRIS theme no need to worry about date archives!

Optional: Add a website-specific home.php if a special layout is required for the home page.

TRIS Theme supports 'Featured image' (FI) for posts AND pages. On the page itself the FI is shown directly
under the headline and in full #content width. The media size 'post-thumbnail' is used, lightbox-linked to
the original image. On archive pages the media 'thumbnail' size is used, floated left with the excerpt on
its right. For pages, you may also need to activate the display in the WP 'Screen Options'.

Theme config also offers options to manage media sizes, including set_post_thumbnail_size and
remove_extra_image_sizes.

TRIS Theme includes some CSS to style the WP Featherlight lightbox plugin, and also to allow adding
caption text which is hidden onpage but displayed in the lightbox - search style.css for "featherlight".

Source Maps: are special files that connect that final output file the browser is actually using with the
authored files that you actually work with and write code in on your file system. So, these source maps are
for developers. So DON'T provide them in production.

WP Featherlight:
- Official last stable version was 1.3.4 (which didn't recognise WebP pictures)
- I created a 1.3.5 from it which does recognise WebP (corrected typos, current is now 1.3.7)
  /home/tim/Zed/WordPress/Plugins/wp-featherlight/ + /home/tim/Zed/WordPress/2021-Setup/wp-featherlight.zip
- On GitHub there's a younger version 1.7.14, which still doesn't recognise WebP
- But also a master version (all latest mods) which does: https://github.com/noelboss/featherlight/tree/master
- However, 'master' is NOT a plugin structure, just the code and testing for Featherlight itself
- BUT wp-featherlight-master/{src|release}/ have the new versions which are in the plugins at /js/vendor/ Missing WebP?
- Whereby .js are copyable, but .css looks rather different - try it out.
- The new .js files add support for AMD and probably minor improvements / fixes.

- The plugin loads (when minified used) ONLY: /css/wp-featherlight.min.css + /js/wpFeatherlight.pkgd.min.js
- This is because 'pkgd' is the packaged version of
  /js/vendor/jquery.detect_swipe.js + /js/vendor/featherlight.js + /js/vendor/featherlight.gallery.js + /js/wpFeatherlight.js
- All unchanged, except watch out for "webp"
- wp-featherlight.css combines 'master' featherlight + gallery - but look rather different... keep the plugin version

- REMOVE the pre-minified versions and let W3TC do it - then we can make an exception if need be.
- CAREFUL: that would change to loading the four separate .js files, for max. compatibility.
- OK, so modify (.webp) the four extra AND the pkgd version
- Modified class-scripts.php::get_suffix() to not load minified versions

- SO: Only changes in /css/wp-featherlight{.min}.css and /js/wpFeatherlight.pkgd{.min}.js will have an effect!!!

- wp-featherlight-disabled or wp-featherlight? With elements from 'master'?
- wp-featherlight-disabled is almost identical to my 1.3.5, has also added webp. wpFeatherlight.min.js is 1 byte diff length...
- OOPS wpFeatherlight.pkgd.js (jquery.detectSwipe) also needs mod for WebP - he did, I didn't )-:
- But in js/vendor/featherlight.js he missed it and I did not - but that's irrelevant, see above.
- So I copied 'master' wpFeatherlight.pkgd.js to my Featherlight as Vn. 1.3.6
- 'disabled' does not deliver the languages available in the original - but there's nothing worth translating anyway
- SO use either mine via upload, if many pages with pictures (default with WPFL) or 'disabled' if only few with pics.

ACHTUNG: https://www.wordfence.com/threat-intel/vulnerabilities/wordpress-plugins/wp-featherlight/multiple-plugins-various-versions-authenticated-contributor-stored-dom-based-cross-site-scripting-via-featherlightjs-javascript-library

---

BIG problem with W3TC COMBINING pre-minified simple-comment-editing/dist/sce-editing.js - it's truncated to half its size!
                           Also pre-minified simple-comment-editing/dist/integrations-admin.js - which is huge
Performance > Minify > Advanced > Never minify the following JS files:
wp-content/plugins/simple-comment-editing/dist/sce-editing.js
wp-content/plugins/simple-comment-editing/dist/integrations-admin.js
OR
trip-content/plugins/simple-comment-editing/dist/sce-editing.js
trip-content/plugins/simple-comment-editing/dist/integrations-admin.js
AND JS only minify, NOT minify & combine

Plugins to vamp up Commenting:
o Comment Edit Core – Simple Comment Editing - Anonymous users can edit comments for 5 minutes.
  WP Cerber > Anti-Spam > Adjust anti-spam engine > Safe mode > ON (Allow AJAX)
o Subscribe to Comments Reloaded - enables commenters to sign up for e-mail notifications.
  It includes a full-featured subscription manager that your commenters can use to unsubscribe to certain posts or suspend all notifications.
  Don't forget: StCR > Options > Enable on post types > Posts | Pages (check the required types)

The theme uses a mix of highly efficient icons:

- The hamburger (menu) and plus (sidebar) icons are pure CSS with transformations.
- All triangles (open submenu, prev/next post links etc.) are also pure CSS constructions.
- Other icons (tags, categories, magnifier etc.) are in a css sprite image (icons/css_sprites.png).
- The icons used in the comments section are in a custom font of 20 icons created with fontello.com (*)

(*) The font is not loaded in the theme's style.css, since not needed if comments are not allowed.
Unless you like other icons in it... To see which icons it contains, doubleclick icons/fontdemo.html.
If you use them, add the credits in icons/LICENSE.txt to your website's disclaimer page.
The example files help/tris-head.html and help/tris-custom.css contain the CSS for the icons.
Note that it includes nice icons for Home and External Link, so load it if you want them
(see the code in help/tris-custom.css).

The standard theme configuration is modified by uploading up to 6 optional files to /wp-content/uploads:

- tris-theme-config.php  Various options re header, navigation bar, sidebar... + root css vars
- tris-head.html         Included near start of <head>, right after $GLOBALS['root-css-vars'],
						 and before themes/tris-theme/style.css. Put any "above the fold" stuff here,
						 inline css and js and links to such files which should be requested first.
- tris-custom.css        Any css you need to add or adjust. Put any media queries with width tests here.
- tris-header.html       The content of this file will be added at the end of (inside) <header> (which is position relative)
- tris-footerpreflex.php Included as 1st item in #sitefooter - before #footerdiv (latter is a flexbox). Add e.g. <h3> here.
- tris-footer.php        Replaces the minimal standard content (inside #footerdiv) with whatever you programm (e.g. a widget area)

If you select the "Remove Gutenberg" option in tris-theme-config.php then you do not need the "Classic Editor" plugin.

Further options allow you to:

- add the 'Formats' dropdown to TinyMCE
- remove standard WordPress Gallery CSS from the frontend
- have auto-emails from WP about plugin and theme updates suppressed (unless errors; default on)
- send a comment moderation email only to the author (and NOT to site admin)

TRIS Theme supports the 'editor-styles' feature of WordPress for its themes: A file 'editor-style.css' is
supplied with the theme and registered to be applied to TinyMCE. To allow use of the CSS :root variables in
that file, TRIS Theme writes a copy of their configured values, configured in {tris-}theme-config.php, to a
file 'tris-root.css' in the uploads directory. It loads both files to TinyMCE, so that not only the theme's
CSS, but also the editor stylesheets of the "TinyMCE Custom Styles" plugin can use them.

TODO: TinyMCE Custom Styles: Problems with Gutenberg

The theme adds a [menu] shortcode to WordPress, Use: [menu name='menuname'].
It also adds shortcode capability to the "Custom HTML" widget, for menus in widget areas.

The theme provides two shortcodes to output tags on pages:
o [alltags] (sorted by name)
o [alltagsbygroup tg='1'] (sorted by slug, for use with "Tag Groups" plugin)
The tag name (linked to tag usage page) is output as <h3>, description in a <div class="tagdesc">

It also adds tags, categories and excerpts to pages, and can optionally remove Gutenberg.

To save using extra plugins, it provides 2 shortcodes for protecting text / emails from harvester via JS ROT13:

[tris_encode do_shortcode="no" protection_text=""] ... [/tris_encode]

If do_shortcode="yes" is supplied, then other shortcodes within the text to be encoded will be executed.
If protection_text is not passed or is empty, then a standard protection text will be used for <noscript>
Example usage: [tris_encode]dummy@example.com[/tris_encode]

[tris_mailto email="" display="" extra_attrs="" protection_text=""]

display: If not empty, then this text will be displayed as the clickable link, otherwise the email.
extra_attrs: Any extra attributes for the <a> tag - excepting 'class', which is set as class="tris-mailto"
The <noscript> branch gets a standard protection text.

---

As of version 1.4, three shortcodes are provided to insert useful features into posts and pages:

= Teaser =

This is one shortcode as follows:

[tris_teaser id='teaserid' leftcontent='html' rightcontent='html' wrapstart='' wrapend='']

Both HTML content texts will each be wrapped in a div. If the HTML contains double quotes, then enclose the string in single quotes. TRIS-Theme styles background-color: var(--tris-hdlcolor) on the left div; CSS mods may be needed on individual instantiations - use the id attribute to do this in your custom CSS. Neat trick: leftcontent="&nbsp;". The two "wrap" parameters are optional and will be inserted unchanged before the opening <div> and after the closing <div>, respectively. Example: wrapstart='<a href="tel:+41413780686">' wrapend="</a>". However, note that wpautop will wrap each of the a-tag elements in p-tags if the option 'no-wpautop-in-shortcodes' is tur (default true). To get around this, (a) use it only in the sidebar in the custom html widget (which bypasses wpautop), or (b) set $GLOBALS['no-wpautop-in-shortcodes'] to false, or (c) list the ids of post and pages to suppress wpautop on in $GLOBALS['no-wpautop-on-post-ids'].

= Accordion =

This needs two shortcodes, both of the enclosing type. Note that you need to avoid any white space between the elements (including newline) if wpautop is active on the site. Here's an example:

[tris_accordion tagtype='h2' icon='chevron' autoclose='' addparatags='no' anchor="youridhere"][tris_accordelem title="Title One" initialstate="open"]<p>Content of first element</p>[/tris_accordelem][tris_accordelem title="Title Two"]<p>Content of second element</p>[/tris_accordelem][/tris_accordion]

The optional attribute "tagtype" (w/o brackets) specifies the html tag type to use for enclosing element titles, default 'div'; for SEO use e.g. 'h2' or 'h3'. The optional attribute "autoclose" (needs an empty string value) on the [tris_accordion] shortcode causes other open elements to be closed when a new one is opened. Two icons are available: 'plus-circle' (default) and 'chevron', the former positioned left before the title, the latter at the right of the title bar. If the optional attribute "addparatags" is set to 'yes' then the content will be wrapped in <p>...</p>. The optional attribute "anchor" sets an id-attribute on the whole accordion, none set if not given or empty string. This will be needed as a JS selector to call the provided function tris_openaccordall(selector) if there is more than one accordion on a page.

The tag [tris_accordelem] has these attributes:
[tris_accordelem title="My Title" anchor="youridhere" initialstate="closed"]
* title: No default
* anchor: No id-attribute set if not given or empty string
* initialstate: open | closed (default: closed)

JavaScript at page load: if there is an anchor in the URL matching an anchor accordion element anchor, then that element is opened.

Related Shortcode [tris_tags_accordion] - effectively for a glossary. Only (optional) attribute is tagtype, assumes autoclose and chevron.
This creates an alphabetically sorted accordion of all tags registered on the website. See https://timreeves.de/internet-glossar/
Use on an existing page if few tags, or an own page if many. SEOPress edit tags descriptions in HTML editor.
This is useful if we do the work of making nice tag descriptions but make the tag archive pages "noindex" (as we should)

= Multi-fader / -slider =

This paints 2, 3 or 4 selector boxes in a row, each with icon, title and text. Note that the selector boxes remain adjacent, even on Handys - so no long titles! A click on one of these makes the respective content visible in the area below the boxes. The display area is as high as the highest of the individual contents (i.e. it doesn't hop up and down when changing selection). Shorter contents are vertically centered.

The new content can be brought into view in one of two ways:
	fade:  When click on a selector-box then the new current content is faded in
	slide: When click on a selector-box then the new current content is slidden into view

This needs four shortcodes of the enclosing type, and one non-enclosing. Note that you need to avoid any white space between the elements (including newline) if wpautop is active on the site. Here's an example:

[tris_multifader domid="myfader" elements="3" curr="0"]
[tris_fader_headers titletag="h5" texttag="p"]
[tris_fader_head title="Element One Title"   text="More text for 1st element" icon="url-to-pic" alt=""]
[tris_fader_head title="Element Two Title"   text="More text for 2nd element" icon="url-to-pic" alt=""]
[tris_fader_head title="Element Three Title" text="More text for 3rd element" icon="url-to-pic" alt=""]
[/tris_fader_headers]
[tris_fader_bodies type="slide"]
[tris_fader_body]
<p>Here content one</p>
[/tris_fader_body]
[tris_fader_body]
<p>Here content two</p>
[/tris_fader_body]
[tris_fader_body]
<p>Here content three</p>
[/tris_fader_body]
[/tris_fader_bodies]
[/tris_multifader]

The triangle is always present - but transparent except for the selected element.
The big div has the height of the largest body: all bodies are in one flex element
which is 2, 3 or 4 times the available width (gets slidden to make selected visible).

Shortcode-Options:

[tris_multifader domid="myfader" elements="3" curr="0"]

Required attribute: domid    - an html id which will be unique on the page
Required attribute: elements - "3" or "4"
Required attribute: curr     - which element will be selected on page load (0 - 3)

[tris_fader_headers titletag="h5" texttag="p"]

Optional attribute: titletag - html tag type for title element in all headers, default 'h5'
Optional attribute: texttag  - html tag type for descriptive text element in all headers, default 'p'

Note: These optioms may be important for SEO, e.g. use 'h2' and 'h3', or 'h3' and 'p', depending on context.
Theme's style.css already contains styling for: (h5 + p), (h2 + h3), (h3 + p).

[tris_fader_head title="Element One Title" text="More text for 1st element" icon="url-to-pic" alt=""]

Required attribute: title
Required attribute: text
Optional attribute: icon  If not set or empty string no icon will be used
Optional attribute: alt   For icon - will be ignored if no icon set

[tris_fader_bodies type="slide"]

Optional attribute: type - "slide" or "fade"

---

https://www.svgrepo.com/

Generated HTML:

<div id="myfader" class="tris_multifader trismf3">
  <div class="tris_fader_headers">
    <div class="tris_faderhead tris_curr_head"><img src="..." alt="" />
    <h5>Element One Title</h5>
    <p>More text for 1st element</p>
    <div class="tris_fader_triangle"></div>
    </div>
    <div class="tris_faderhead"><img src="..." alt="" />
    <h5>Element Two Title</h5>
    <p>More text for 2nd element</p>
    <div class="tris_fader_triangle"></div>
    </div>
	<div class="tris_faderhead"><img src="..." alt="" />
    <h5>Element Three Title</h5>
    <p>More text for 3rd element</p>
    <div class="tris_fader_triangle"></div>
    </div>
  </div>
  <div class="tris_fader_bodies tris_fader_slide">
	<div class="tris_fader_float tris_fader_pos0">
		<div class="tris_faderbody tris_curr_body">
		<p>Here content one/p>
		</div>
		<div class="tris_faderbody">
		<p>Here content two</p>
		</div>
		<div class="tris_faderbody">
		<p>Here content three</p>
		</div>
	</div>
  </div>
</div>

---

As of version 1.45, a variant shortcode of [tris_multifader] is provided: [tris_multilink]

1. It re-uses the basic code and optics of the 2, 3 or 4 action boxes of [tris_multifader].
2. It can be used at the top of a page, to scroll the page to a given anchor link on the page.
3. Alternatively, it can be used anywhere and the links can lead to other pages of the website, or even be external links.

There is no current element, so there are also no triangles to indicate a current element.

If no target or an empty string is specified, then the <a> will not get a target attribute.
If a target value is given, it will be copied across 1:1.

[tris_multilink domid="mylinker" elements="3"]
[tris_link_headers]
[tris_link_head title="Element One Title"   link="#link1"                 text="More text for 1st element" icon="url-to-pic" alt=""]
[tris_link_head title="Element Two Title"   link="#link2" target="_blank" text="More text for 2nd element" icon="url-to-pic" alt=""]
[tris_link_head title="Element Three Title" link="#link3" target="mywind" text="More text for 3rd element" icon="url-to-pic" alt=""]
[/tris_link_headers]
[/tris_multilink]

Generated HTML:

<div id="mylinker" class="tris_multilink trismf3">
  <div class="tris_fader_headers">
    <a href="#link1" class="tris_faderhead"><img src="..." alt="" />
    <h5>Element One Title</h5>
    <p>More text for 1st element</p>
    </a>
    <a href="#link2" target="_blank" class="tris_faderhead"><img src="..." alt="" />
    <h5>Element Two Title</h5>
    <p>More text for 2nd element</p>
    </a>
	<a href="#link3" target="mywind" class="tris_faderhead"><img src="..." alt="" />
    <h5>Element Three Title</h5>
    <p>More text for 3rd element</p>
    </a>
  </div>
</div>

---

As of version 1.45, five further shortcodes are provided to insert various features into posts and pages:


1. IMG-SEPARATOR  A picture-based horizontal rule with optional linear gradient overlay

[tris_img_separator img="separator1.webp" imgpath="/wp-content/uploads/images/" width="747" height="70"]

Required: img - the image file name
Optional: imgpath - default '/wp-content/uploads/images/'
Optional: width - default 747
Optional: height - default 70
Optional: showmask - default no - if yes then output "<div></div>", otherwise not
Optional: addclass - default "" - if present will be added to class of outermost div

Generated HTML:

<div class="separator asparagraph"><img src="/wp-content/uploads/images/separator3.webp" alt="" width="747" height="70" /><div></div></div>

Uses .asparagraph to get the same styling as a paragraph

div.separator div in style.css has (overwrite 3rd colour in custom css):
background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(245, 249, 231, 1) 70%);


2. FLOATED IMAGE  fixed size image gets floated next to text, with optional linear gradient overlay.

Image is not linked to anything (so no lightbox). Text can contain shortcodes.

[tris_floated_img img="vertical1.webp" float="right" imgpath="/wp-content/uploads/images/" width="200" height="400" showmask="no"]Text hier[/tris_floated_img]

Required: img - the image file name
Optional: float - default 'right', otherwise use 'left'
Optional: imgpath - default '/wp-content/uploads/images/'
Optional: width - default 200
Optional: height - default 400
Optional: showmask - default no - if yes then output "<div></div>", otherwise not
Optional: clearfix - default yes - if yes then "clearfix" will be added to class of outermost div
Optional: addclass - default "" - if present will be added to class of outermost div

Generated HTML:

<div class="asparagraph">
  <div class="picfloatleft">   OR picfloatright
    <div class="pf-relative">
      <img src="/wp-content/uploads/images/vertical1.webp" alt="floated image" width=200 height=400 />
      <div></div>
    </div>
  </div>Text hier.</div>

Uses .asparagraph to get the same styling as a paragraph

div.pf-relative div in style.css has (overwrite 3rd colour in custom css):
background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(245, 249, 231, 1) 70%);


3. QUOTATION (has an opening quote SVG at the left)

[tris_svgquote html="<p>Your quote here</p>" color="#909090" attrib="Some One"]

Required: html   - include <h3> and/or <p> in the value
Optional: color  - color of the quote sign, default '#909090'
Optional: attrib - if set "<p class="attribution">...</p> is appended, if empty no attribution
Optional: addclass - default "" - if present will be added to class of div AND p

Generated HTML:

<div class="svgquote">
<svg xmlns="http://www.w3.org/2000/svg" fill="#909090" viewBox="0 0 512 512" aria-hidden="true" width="32" height="32"><path d="M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"></path></svg>
<div><p>Your quote here</p></div>
</div>
<p class="attribution">Some One</p>

As of version 1.4.7, a variant is provided to avoid users having to write html tags:

[tris_svgcite cite="Your quote here" author="Some One" tagtype="h3" color="#909090"]

Required: cite - The text to cite
Optional: author - The person to attribute it to, if empty no attribution
Optional: tagtype (w/o brackets) The html tag type to use for enclosing the citation, default 'h3' (for SEO, otherwise use 'p')
Optional: color  - color of the quote sign, default '#909090'
Optional: addclass - default "" - if present will be added to class of div AND p


4. TRISTIMONIAL (for testimonials, with mandatory image)

[tris_timonial text="Your testimonial text here." svgtype="star" attrib="Some One"]
[tris_timonial text="Your testimonial text here." icon="quote-grey.svg" img="tristimonial1.webp" attrib="Some One"]

Required attribute: text - will be wrapped in a <p>, can include own html tags
Optional attribute: img - the image file name - none used if not given
Optional attribute: width - default 150
Optional attribute: height - default 150
Optional attribute: imgpath - default '/wp-content/uploads/images/'
Options for an icon:
EITHER an <img> tag with this URL will be generated:
Optional attribute: icon - the icon file name (none if empty)
Optional attribute: iconpath - default '/wp-content/uploads/images/'
OR     an <svg> of the given type ('quote' or 'star') will be inserted inline with the given color
Optional attribute: svgtype - default '', otherwise: 'quote' or 'star'
Optional attribute: color - default '#909090' - 'fill' attribute for the svg
--- If neither of the above is given, no icon will preceed the testimonial text
Optional attribute: attrib - if set "<p class="wp-caption-text">...</p> is appended, if empty no attribution
Optional attribute: addclass - default "" - if present will be added to class of outer div

Generated HTML:

<div class="tristimonial">
<div class="text"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" aria-hidden="true" width="32" height="32"><path fill="#909090" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg><p>Your testimonial text here</p><p class="wp-caption-text">Some One</p></div>
<div class="pict"><img href="' . $imgpath . '" alt="" /></div>
</div>


5. TRISEVENT (for events, using same deco images as TRISTIMONIAL - but very flexible, other uses possible)
This works in conjunction with the JS function tris_setopt() by setting classes trisopt + trisopt{opttype} on <body>
Layout: flex with 2 items: text [ date, details (title, placename, placelink, address, descript, moretext, morelink) ] + pict (Deco-Image)

[tris_event opttype="BU GFK" date="06.06.25" title="Bla Bla" placename="12345 Berlin" descript="Your description here" img="tristimonial1.webp"]

Optional: opttype (see script.js) (separate more than one type with spaces)
Optional: date (string - one date or date range) (if not given then no <div class="date">
Optional: type (e.g. Fortbildung / Bildungsurlaub) If present then put before placename
Optional: title (<h4>; if not given then no <h4>)
Optional: placename (if not given then no <p class="placename"> generated)
Optional: placelink (gets target="_blank")
Optional: address
Optional: descript
Optional: moretext (Mehr erfahren)
Optional: morelink (required if moretext set; if starts "http" will get target="_blank")
Required: img - the image file name
Optional: width - default 150
Optional: height - default 150
Optional: imgpath - default '/wp-content/uploads/images/'
If an image file of the same name preceded by a 'b' is present, it will be added as a second img -
style them using .lt600 .trisevent .pict img:first-child and .lt600 .trisevent .pict img:last-child

Suggest opttype of 2 components: Format, Subject

Generated HTML:

<div class="trisevent trisopt trisoptBU trisoptGFK">
<div class="text"><div class="date"> $date </div><div class="details"> $details </div></div>
<div class="pict"><img href="' . $imgpath . '" alt="" /></div>
</div>

The JS function tris_setopt is required for [tris_event] - but can be used for other things.
Before doing so and assuming it will be called via <button>s onclick(), the clicked button is added a current class.

function tris_setopt(caller, opttype) {
	// 1. Assuming selection is via buttons styled class="tris-setoptbut tris-currbut", remove old current and set new
	const listButtons = document.querySelectorAll(".tris-setoptbut");
	for (var a = 0; a < listButtons.length; a++) {
		b = listButtons[a];
		if (b.classList.contains("tris-currbut")) { b.classList.remove("tris-currbut"); }
	}
	caller.classList.add("tris-currbut");
	// 2. Remove all trisopt* classes
	let body = document.body;
	body.className = body.className.replace(/\btrisopt.*\b/g, '').trim();
	if (opttype === '') return;
	// 3. Add classes trisoptsel and trisopt{opttype}
	body.classList.add("trisoptsel");
	body.classList.add("trisopt" + opttype);
}

Furthermore, an option parameter in the URL to the page can be set to preselect a particular option

window.addEventListener("load", (event) => {
	// This is only for pages like /meine-angebote/termine/?opt=Bildungsurlaub etc.
	// So do nothing if the page has no trisopt buttons or the url no 'opt' parameter
	const listButtons = document.querySelectorAll(".tris-setoptbut");
	if (listButtons.length === 0) return;
	const urlParams = new URLSearchParams(window.location.search);
	const hasOpt = urlParams.has('opt');
	if (hasOpt === false) return;
	// Also do nothing if no button with a parameter value match
	const optVal = urlParams.get('opt');
	// <button type="button" class="tris-setoptbut" onclick="tris_setopt(this,'BU')">Bildungsurlaub</button>
	for (var a = 0; a < listButtons.length; a++) {
		b = listButtons[a];
		if (b.innerText === optVal) { b.click(); break; }
	}
});

---

As of version 1.47, further shortcodes are provided to insert new features into posts and pages:

1. GRAPHIC SEPARATOR

With this you can insert what is effectively a nicer horizontal rule, using a small centered image

[tris_graphic_separator img="separator.png" imgpath="/wp-content/uploads/images/" width="118" height="72" addclass="" /]
[tris_graphic_separator anchor="dazwischen" /]

<div class="separator clearfix">
  <img src="/wp-content/uploads/images/vertical1.webp" alt="Dekoratives Bild schwebend neben Text" width="118" height="72" />
</div>

Optional: img - the image file name. Default: separator.png
Optional: imgpath - default '/wp-content/uploads/images/'
Optional: width   - default 118
Optional: height  - default 72
TODO Optional: csswidth - as style on img - default none (use e.g. 4.5vw)
Optional: addclass - default "" - if present will be added to class of outermost div
Optional: anchor - No id-attribute set if not given or empty string

---

2. PAPERFRAME - upper border is like a torn off paper, rest is a flex of two columns collapsing to one on mobiles

This needs two shortcodes, both of the enclosing type. Note that you need to avoid any white space between the elements (including newline) if wpautop is active on the site. Here's an example:

[tris_paperframe tagtype='h3' bgimage="/wp-content/uploads/images/papertop.png" width="774" height="48" anchor="youridhere"][tris_paperelem title="Title One"]<p>Content of first element</p>[/tris_paperelem][tris_paperelem title="Title Two"]<p>Content of second element</p>[/tris_paperelem][/tris_paperframe]

Re background color of the whole element: TRIS theme css sets:
.paperframe .flexwrap { padding: 0 0.5rem; background-color: var(--tris-barbkgrd); }

You can override this in custom css like this:
#youridhere.paperframe .flexwrap { padding: 0 0.7rem; background-color: #0f0f0f; }

The tag [tris_paperframe] has these attributes:
Optional: tagtype (w/o brackets) The html tag type to use for enclosing element titles, default 'h3'. For SEO use e.g. 'h2' or 'h3'.
Optional: bgimage Path to wide, short background image for the top of the frame, looking like torn off paper.
          Default: /wp-content/uploads/images/papertop.png
Optional: width  Width of bg image, default: 774
Optional: height Height of bg image, default: 48
Optional: anchor No id-attribute set if not given or empty string

The tag [tris_paperelem] has these attributes:
[tris_paperelem title="My Title"]
Optional: title  (if none given, none will be output)

Generated HTML
<div id="youridhere" class="paperframe">
<div class="papertop"><img src="/wp-content/uploads/images/papertop.png" width="774" height="48" alt=""></div>
<div class="flexwrap">
	<div class="htmltext">
	<h3>Title One</h3>
	<p>bla bla</p>
	</div>
	<div class="htmltext">
	<h3>Title Two</h3>
	<p>bla bla</p>
	</div>
</div>
</div>

---

3. IMAGE SLIDER

Based on code from No Bullshit Image Slider, uses ONLY CSS (animations) - absolutely minimalistic. All images must have same size!

NOTE: The media library is not used per se - the image in the slider is exactly the same file in the lightbox. So use "tiny" (stripped) images.

If you use the WP Featherlight plugin for a lightbox, it will pick up the slides automatically.

This needs two shortcodes, the first of the enclosing type. Note that you need to avoid any white space between the elements
(including newline) if wpautop is active on the site. Here's an example:

[tris_slider slug="zbs-fantasialand" elements="4" imgwidth="1800" imgheight="1200" duration="5" transition="1.25" showcounter="yes|no|cap" lazy="no"] [tris_slide url="/wp-content/uploads/...1.webp" cap="Image Title one" copyright="Owner name one" usecondshow="yes"]
[tris_slide url="/wp-content/uploads/...2.webp" cap="Image Title two" copyright="Owner name two" usecondshow="yes"]
[/tris_slider]

The tag [tris_slider] has these attributes:
Required: slug			Will be appended to "tris-slider-" and used in various inline styles and HTML (as aria-label)
Required: elements		The number of images in the slider (The shortcodes would otherwise need to buffer output)
						Value "1" is accepted and strips everything to do with animation. This allows the
						same frame to be used when there is only one image, to achieve indentical positioning.
Optional: imgwidth		Width  of ALL images, default: 1800
Optional: imgheight		Height of ALL images, default: 1200
Optional: duration  	How long one image stays in place before the next is slid in; default 5
Optional: transition	Transition duration from one slide to the next; default 1.25
Optional: showcounter	'yes' at top middle of the slide frame, 'no' no counter display, 'cap' at the start of the caption; default: cap

The total "animation-duration" in CSS is then elements x duration

NOTE: In Theme Version 1.47 'showcounter' is fixed at 'cap' and 'lazy' is not implemented!

The tag [tris_slide] has these attributes:
[tris_slide url="/wp-content/uploads/...1.webp" cap="Image Title one" copyright="Owner name one" usecondshow="yes"]
Required: url	Path to an image of size imgwidth x imgheight
Required: cap	Caption text
Optional: copyright	Name of copyright owner, none output if not set; if set then appended to caption, prepended with " © "
Optional: usecondshow	If "yes" then append the copyright to the caption wrapped in <span class="condshow"> owner</span>
						TRIS theme includes CSS to have it only show in the featherlight lightbox. Defaut: "yes"

Generated HTML

NOTE: Each slide gets two keyframes: A stationary keyframe for the slide itself, and an intermediate transition keyframe to the next slide.
	  The 'transition' duration is used in calculating the % value for the transition keyframe

<style>
#tris-slider-zbs-fantasialand {--slide-count:4}
#tris-slider-zbs-fantasialand .scrollpane { animation-name: tris-slider-zbs-fantasialand-keyframes; animation-duration: 20s; }
@keyframes tris-slider-zbs-fantasialand-keyframes {
	0.00%{transform:translateX(-0%)}
	18.75%{transform:translateX(-0%)}
	25.00%{transform:translateX(-100%)}
	43.75%{transform:translateX(-100%)}
	50.00%{transform:translateX(-200%)}
	68.75%{transform:translateX(-200%)}
	75.00%{transform:translateX(-300%)}
	93.75%{transform:translateX(-300%)}
	100%{transform:translateX(0%)}}
</style>
<div id="tris-slider-zbs-fantasialand" class="tris-slider" aria-role="region" aria-roledescription="carousel" aria-label="zbs-fantasialand">
<div class="scrollpane gallery" aria-live="off">
	<figure class="tris-slide gallery-tris" role="group" aria-roledescription="slide" aria-label="1 / 4">
	<a href="/wp-content/uploads/export/images/fantasialand-zb1.webp"><!-- --></a>
	<img fetchpriority="high" decoding="async" width="1800" height="1200" src="/wp-content/uploads/export/images/fantasialand-zb1.webp" class="attachment-full size-full wp-post-image" alt="" />
	<figcaption>1 / 4: Fantasialand ist ein Ort, der im Herzen liegt<span class="condshow"> © Biblische Reisen GmbH</span></figcaption>
	</figure>
</div>
</div>


---

4. COVERED LINKED IMAGE

With this you can float a text over an image and still link it to the full-size image for a lightbox view

[tris_covered_linked_image showurl="..." width="..." height="..." linkurl="..."
						   covertext="..." textcolor="..." textsize="..." textweight="..."
						   title="..." copyright="..." usecondshow="..." addclass="..." anchor="..."]

Required: showurl	URL (hopefully local) to a **medium-sized** image to display directly
Optional: width		Width  of showimg	Only optional when a local file in "/wp-content" is given as showurl
Optional: height	Height of showimg	Only optional when a local file in "/wp-content" is given as showurl
Optional: linkurl - lightbox size to link to
          If not given then the display size is linked - to allow display of title and copyright in lightbox
Optional: covertext  - no text if not set. The shortcode is still useful for title and copyright in lightbox
Optional: textcolor  - default #fff
Optional: textsize   - default 200%
Optional: textweight - default bold
Required: title      - image title NOTE shows only in lightbox
Optional: copyright	 - Name of copyright owner, none output if not set; if set then appended to title, prepended with ' © '
Optional: usecondshow - If "yes" then append the copyright to the caption wrapped in <span class="condshow"> owner</span>
						TRIS theme includes CSS to have it only show in the featherlight lightbox.
						Default: "yes" (<p> only shows in lightbox, but then we get smaller font size)
Optional: addclass - if present will be added to class of outer div
Optional: anchor   - No id-attribute set if not given or empty string

<div class="tris-cover-outer">
<a class="tris-cover-hylnk" href="/wp-content/uploads/2026/05/Studienreise-Heiliges-Land-Israel-Palaestina-Menschen-begegnen.avif" data-featherlight="image">
<img src="/wp-content/uploads/2026/05/Studienreise-Heiliges-Land-Israel-Palaestina-Menschen-begegnen-575x383.avif" width="575" height="383" alt="Studienreise Heiliges-Land Israel Palaestina" fetchpriority="high">
<div class="tris-cover-flxtx">
<div style="color:#fff; font-size:200%; font-weight: bold;">Menschen begegnen</div>
</div>
</a>
</div>

===

Tip: TRIS Theme now does pretty much everything which Webcraftic Clearfy offered, and other options. See theme-config.php.

---

TRIS-Theme includes some aria labels in the HTML, but mostly no markup for schema.org, to avoid clashing with SEO plugins.
Exceptions: Schema.org for comments and footer; class "mainContentOfPage" set on <article> can be used as Speakable CSS Selector.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemscope
https://schema.org/WebPage
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html

And to a certain extent, also microformats:
https://microformats.org/wiki/Main_Page
https://developers.google.com/custom-search/docs/structured_data#microformats
https://developers.google.com/search/docs/guides/intro-structured-data

https://json-ld.org/
Note: All major SEO-Plugins generate a JSON-LD section in the <head>, in their free versions. So TRIS-Theme does not.

To help you understand and use the possibilities, some informative files are provided in the themes' "help" directory:

- custom-snippets.txt (self-explanatory)
- HTML-Structure-and-Pages.txt (self-explanatory)
- tris-custom.css - a template for you to modify and upload to /wp-content/uploads (see above)
- tris-footer.php - ditto
- tris-theme-config.php - ditto

TRIS Theme comes translation-ready and includes a German translation.
https://premium.wpmudev.org/blog/translating-wordpress-plugins/

DEBUGGING

o If the whole <body> is missing, then you need to deactivate plugins like "WP Mailto Links".
  It's more efficient to use the themes' inbuilt email encoding shortcodes anyway.

o A tip for WordPress admins: /wp-admin/options.php lets you see and edit all stored option values.

Opening multiple tabs / windows - don't
---------------------------------------

JS function to open a specified window (create or focus)
https://developer.mozilla.org/en-US/docs/Web/API/Window/open  (and read it all)
https://developer.mozilla.org/en-US/docs/Web/API/Window/name
const otherTab = window.open("url1", "_blank"); if (otherTab) otherTab.name = "other-tab";
Note: a href target"..." is deprecated for frames, see https://html.com/attributes/a-target/
However I find nothing on the web that using names in window.open is deprecated - so go for it.
window.open: If the browser successfully opens the new browsing context, a WindowProxy object is returned.
The returned reference can be used to access properties and methods of the new context as long as it complies
with the same-origin policy security requirements.
https://developer.mozilla.org/en-US/docs/Glossary/WindowProxy
https://stackoverflow.com/questions/8135188/focus-tab-or-window
https://stackoverflow.com/questions/75531092/how-to-open-a-url-in-new-tab-and-switch-focus-to-that-tab
Fazit: I tried using .focus() on returned window proxy but it does not work (it is not possible - due to security concerns)
Arianes' website: Always name the first tab "brenatabone", and the second will be "brenatabtwo".
So on both Methoden and Angebote at entry (or always), check window.name and save the OTHER name as window.myotherwindow.
Methoden AND Angebote use an own JS function, attached to a <button>, which just does window.open("other-url#anchor", window.myotherwindow)
Don't worry about the previous content of the other window (which may have changed), just reload what we need now.
AND the focus topic: MDN on window.open() explicitly shows an example using windowObjectReference.focus() - try on various browsers!
AND as noted, don't check if it exists, just (re)load the 'other' page and let the documentReady? event run the "accordionAnchor" code.
HOWEVER MDN advises to avoid window.open, as we can't know how the user has configured her browser!
Would need to try the idea out in the real world - with different browsers, configured differently, then tablets and smartphones.

So, nope. Stay on one tab, the browser has the "other" page in its' local cache anyway. At the end of each Method, ID-links to each Format
where the Method is offered. And after each Format, the ID-links to the Methods available in that Format. Technically, one could
offer a link to where we were before (JavaScript: history.back()) but this is unneccessary, as that link (*if* we came here that way)
will be offered anyway. This way, the user can proceed how he/she wants, going back to where they were, or on to something else.


== TODOS ==

1) Identify the CSS needed for "above the fold" display and move it to the HTML files (head).

2) Add PHP setting to suppress categories / tags columns in Admin lists of posts / pages
   https://awhitepixel.com/modify-add-custom-columns-post-list-wordpress-admin/
   Til' then: https://wordpress.org/plugins/codepress-admin-columns/ (allows setting col widths)
   /home/tim/Zed/WordPress/Plugins/codepress-admin-columns.4.6.1.zip (can't find it at "Add plugin")

== Licenses ==

* License: GNU General Public License v3 or later
* License URI: //www.gnu.org/licenses/gpl-3.0.html

== Acknowledgements ==

Quite a few ideas in this theme were inspired by various articles (and plugins) on the internet.

== Changelog ==

Note: A new version (in style.css) is required on changes to get an upload prompt from WP Cerber Scanner

= Version 1.47 =
* TRIS-Theme now itself loads the stylesheet of a child, if active
* /help now includes a minimal child theme and some notes about child themes
* Loading stylesheets moved from header.php to functions.php
* Improved how heartbeat setting works, see theme-config.php
* If $GLOBALS['remove-gutenberg-from-frontend'] is false then a lot of Gutenberg-Stuff is added:
  - add_theme_support('wp-block-styles') is called
  - $GLOBALS['curate-gutenberg-blocks-offered'] allows to curate which blocks are offered
  - OpenVerse is disabled, see https://openverse.org/
  - The Block Directory is removed, see https://wordpress.org/plugins/browse/block/
  - The Template Editor is disabled for Posts and Pages
  - The theme's own 'block-editor-style.css' is enqueued via 'enqueue_block_assets' (i.e. to back- and frontend)
  - TODO We may need a feature to include site specific css to the block editor, tris-custom.css (currently) only to frontend
  - Shortcode Block Creation when Pasting in Plain Text Blocks is disabled
* Added config option:
  $GLOBALS['begin-header-logo-title-tagline'] (false) Display Logo, Title & Tagline in a div#lotita above any 'header-image'
* Added config option: $GLOBALS['disable-wpautop-classic-editor'] (false)
  Suppress wpautop on all non Gutenberg posts/pages, but obey 'no-wpautop-in-shortcodes' on posts/pages with Gutenberg
* Added config option: $GLOBALS['pop-last-plugin-added-tinymce-buttons']
  Option to remove unwanted buttons from end of tinymce toolbar added by plugins
* Extended [tris_multifader] and [tris_multilink] to accept only two elements (prev. only 3 or 4)
* Extended [tris_accordion] shortcode with optional anchor (id), to give an accordion a unique selector for tris_openaccordall(selector)
* Added shortcode: [tris_graphic_separator anchor="dazwischen" /]
* Added shortcodes [tris_paperframe] and [tris_paperelem]
* Added shortcodes [tris_slider] and [tris_slide]
* Added shortcode: [tris_svgcite cite="Your quote here" author="Some One" tagtype="h3" color="#909090"]
* Added shortcode: [tris_covered_linked_image showurl="..." title="..." copyright="..."]
* Added error messages to frontend to all shortcodes
* Improved attributes of comment form fields
* In styles.css all duplicate statements with fixed values rather than CSS variables removed.
  Nowadays all major browsers support variables except Opera Mini,
  which has a 1.9% global market share, mainly in India & Africa where bandwidth is often very limited

* If config values 'show-featured-images' and 'featured-images-for-pages' are both true, then featured image
  support will be added for all post types, i.e. also for custom post types used by plugins such as No BS Slider.
* [tris_floated_img] got new optional attribute 'clearfix' - default yes - not backwards-compatible!

* Added shortcode to include a widget on a page: [tris_widget widget_name="my_widget"]
  This is of very limited use - no parameters can be passed to the widget.
  If you need that, create an auxiliary widget area, configure the fancy widget in it,
  and then include the widget area into a page via a custom shortcode.
  See the plugin "Widgets on Pages"

= Version 1.46 =
* 404.php now checks if $GLOBALS['404-action'] is '301' (default) - if yes redirects to home_url().
  Anything else displays a 404 page.

= Version 1.45 =
* A variant shortcode of [tris_multifader] is provided: [tris_multilink]
* New shortcodes [tris_timonial] and [tris_event] are offered, and the JS function tris_setopt()
* A second level of sub-menus is now supported in the main menu
* The config option $GLOBALS['no-wpautop-on-post-ids'] now supports the values 'pages' and 'posts'
  This means either all pages or all posts (irrespective of ids) - using 'pages' client can edit blog posts visually :)
* Added option $GLOBALS['remove-medium-large-size'] (default false to maintain consistency with previous theme versions)
* Added optional include file tris-footerpreflex.php
* Added JavaScript function tris_doClickId(elemId, firstChild = false, taxoPath = '')
* Support for 'both' webp and jpeg header images removed - supplying two image files to srcset would need different descriptors
* Bugfix: $GLOBALS['no-wpautop-on-post-ids'] now correctly preempts $GLOBALS['no-wpautop-in-shortcodes']
  - then no wpautop either before or after shortcode actions
* Bugfix: $GLOBALS['header-image-per-page'] now delivers predefined results for taxonomies and search results
* schema.org MicroData removed from search results in index.php (version with them copied to /help) because
  search results should in general not be indexed anyway - SEOPress blocks it in the virtual robots.txt.

= Version 1.44 =
* Added more options around $GLOBALS['header-image'] and also new feature $GLOBALS['header-image-per-page']

= Version 1.43 =
* Various improvements in CSS
* Added JS to open a closed accordion element specified in the #fragment of the url

= Version 1.42 =
* Added optional attribute "tagtype" to accordion shortcode, with corresponding fixes in CSS

= Version 1.41 =
* Added option $GLOBALS['no-wpautop-on-post-ids'] to allow fully supressing wpautop only on certain pages
  Note that this option currently bites with 'no-wpautop-in-shortcodes' set true
* Added trim()s on content to code of shortcodes to allow better layout of html in text tab
* In functions.php now ALL function names contain "tris_"
* Minor improvements to CSS

= Version 1.40 - a major update =
* Added options for five HTTP security headers, see theme-config.php (preset to what I normally need)
* Added code to include an optional file uploads/tris-head.html near start of <head>
* Added shortcodes: [tris_teaser] and [tris_accordion] + [tris_accordelem], see above
* Added related shortcode [tris_tags_accordion] - effectively for a glossary.
* Added shortcodes for multi-fader / -slider, see above
  Achieved mainly with CSS, and minimal JavaScript to select accordion and fader elements
* Added three theme config options to handle problems with wpautop (default: 'no-wpautop-in-shortcodes')
* Added option 'wraplink-title-tagline' to add an <a> wrapper around title and tagline.
* Added function to convert [br] in page/post title to <br>
* Renamed template file image.php to attachment.php (to catch all page/post attachments)
* Added various options to do things which previously Webcraftic Clearfy did, see theme-config.php
* Major improvements to Microdata for SERPs (especially for comments)
* Bugfix: Unclosed div.article-content in single.php fixed

= Version 1.32 =
* Fixed a PHP bug in index.php
* Some files had Windows-Newlines, now all Unix

= Version 1.31 =
* Added config option comment-moderation-mail-only-to-these-emails (array, default empty)
  If you use this then set comment_moderation_post_author_only to false (default is true)

= Version 1.30 =
* Added --tris-backgrnd: #ffffff; to theme-config.php used only on <body> for "background", not "background-color"
  This allows gradients on <body> but leaves other background-colors untouched.
  This partial revert due to problems with gradients taking precedence over colors.
* Added a config option to suppress CF7 and CF7-Image-Captcha CSS + JS on pages without forms
* Some improvements to aria labels
* Remove any fix to custom css: #navmain { background-color: var(--tris-bgrcolor); }

= Version 1.29 =
* Added div.post-fi-thumb as wrapper for featured images in posts/pages
* Added div.article-content after featured image to allow padding on text by full-width img
* Added new config option: $GLOBALS['header-image-only-png']
* Changed css for --tris-bgrcolor from background-color to background - allows gradients
* Updated styles-rtl.css

= Version 1.28 =
* Added support for featured images on pages, and for handling media image sizes.
* Improved how FIs are displayed in archive listings and blog posts.

= Version 1.27 =
* Sanitized search input

= Version 1.26 =
* WordPress Featurd Images now supported - thumbnail displayed on Archive pages, medium linked to full at start of blogposts. In both cases the image floats left and the excerpt is displayed on its right. This means that blogposts work independ of the page builder in use.
* 'special-taxonomies' (theme-config.php) extended to allow suppression of comments in a particular taxonomy
* German translation (de_DE) duplicated to Swiss- aund Austrian-German

= Version 1.25 =
* Register theme support for editor styles - now works with Gutenberg.
* Improved editor-style.css to only apply styles to editor content, not buttons.

= Version 1.24 =
* Allow HTML in site tagline

= Version 1.23 =
* Add missing DE translations, correct output for empty search

= Version 1.22 =
* Added a theme option 'add-html-to-navbar' to name an uploaded file of html, to include in #navmain after #navmainmenu

= Version 1.21 =
* Fixed CSS to add triangle before recent comments widget entries

= Version 1.20 =
* Added a global option to strip tags from, and truncate, title attributes of the "Tag Groups" plugin
* Added the CSS class ".sh" (SEO Headers) to visibly hide an element offscreen

= Version 1.19 =
* {next|previous}_posts_link were in some cases still output wrong way round
* Added CSS for aligned left/right images when breadth too little for text next to them

= Version 1.18 =
* Improvement in style.css for checkboxes and radios
* Option to switch the Prev and Next links around
* {next|previous}_posts_link were output wrong way round
* If a search produced more than one page of results, there were no navgation texts
* Comment box rows reduced from 10 to 5 - users can expand the box...

= Version 1.17 =
* Changed some term descriptions in theme-config.php :: $GLOBALS['special-taxonomies']

= Version 1.16 =
* Minimal improvements in CSS

= Version 1.15 =
* Minimal improvements in CSS

= Version 1.14 =
* For WP 5.8 - Remove Gutenberg now also suppresses the Block Editor in the Widget areas

= Version 1.13 =
* Minor improvement to text to reply to an existing comment

= Version 1.12 =
* Moved test for IE from PHP to JS due to problem with W3TC prepping cache but with no or wrong user agent
* Simplified JS to not stop running in IE 11 (however, it does not work properly anyway). Now warns IE users via alert.
* Added fixed colours / fonts in CSS befaore all var()s to have them set in legacy browsers like IE which don't know var().

= Version 1.11 =
* Added a div#navwrap around div#navmain to allow background-color on navbar in full width
  BG-color on #navbar also colours div#navfoot, which messes things up.

= Version 1.10 =
* Minor tweaks to CSS and theme-config.php (for NBO)

= Version 1.9 =
* Minor tweaks to CSS

= Version 1.8 =
* Added shortcodes to output tags on a pages: [alltags] (sort by name) and [alltagsbygroup tg='1'] (sort by slug)

= Version 1.7 =
* Activate excerpts for pages - needed for tag / category results and for SEO (schema.org)

= Version 1.6 =
* Removed most schema.org elements from HTML to prevent clashing with SEO plugins

= Version 1.5 =
* Added styling for select box in comment form, as used by Subscribe to Comments Reloaded

= Version 1.4 =
* Added RTL capability
* Option to suppress automatic update emails (if all went well, default on)

= Version 1.3 =
* Corrected capability test for comment moderation emails

= Version 1.2 =
* Added option to suppress comment moderation emails to site admin (default on)

= Version 1.1 =
* Anonymised comments by truncating stored IP address

= Version 1.0 =
* First internal release, not on WP.org repository