I use TIGER skin so this question might be better placed in that forum.

The Text Editor has nearly everything but hasn't got Tables or Accordions.

I have tried using W3 css but as soon as I put the link to the CSS in the Custom Code and Head section of TIGER it alters the alignment of the rest of the album.

 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 

Do you have plans to extend the features of the Text Editor or am I attempting something that I shouldn't try to do?

I can put a table in using HTML but I would prefer the look of striped data without borders.

Accordions would also need Custom Script.

You're not kidding. It's resetting dozens and dozens of common attributes, effectively wiping out Tiger's own CSS. Guaranteed disaster.

Thanks Rob and Jeff.

You've confirmed my suspicions but weirdly it only seemed to left align everything on my test album!

Back to the drawing board with some custom css but that may have knock on effects too. If so I'll just use the built in text editor functions.

Thank you, a truly interesting website. You really do like to travel. I think if you came to UK you would find the roads frustrating, with the potholes, roadworks and congestion, all making any journey into an ordeal.

I'm getting to that age where I want to simplify my website and I have attempted to include everything into jAlbum using add new page instead of bespoke standalone pages that I previously constructed using W3 css. The added advantage of jAlbum pages is that they get included in the Tiger site search.

This is the CSS code I've used to display tables in one of my TIGER ALBUMS.

It seems to work okay: Link: MGBreunited/Data

CSS Code:

#jds-table1 {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
 
#jds-table1 td, #jds-table1 th {
  border: 0px solid #ddd;
  padding: 5px;
}
 
#jds-table1 tr:nth-child(even){background-color: #336699;}
#jds-table1 tr:nth-child(odd){background-color: #000066;}
 
#jds-table1 tr:hover {background-color: #666666;}
 
#jds-table1 th {
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: left;
  background-color: #990033;
  color: white;
}
 
 

The CSS and HTML for ACCORDION BUTTONS

EDITED 21 08 2024 This section has been revised with my own - CSS selectors. to prevent interference with jAlbum code.

1. CSS put into TIGER > SETTINGS > ADVANCED > Custom Code > CSS

 
/* ACCORDION BUTTONS */
 
.jdsaccord {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
 
.jdsliteblue {
	background-color: #e6e6ff;
	color: #111;
}
 
.jdslitegreen {
	background-color: #e6ffee;
	color: #111;
}
 
.jdsactive, .jdsaccord:hover {
  background-color: #ccc;
}
 
.jdsaccordafter:after {
  content: '\25BC';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
 
.jdsactiveafter:after {
  content: "\25B2";
}
 
.jdspanel {
  padding: 0 18px;
  background-color: white;
	color: black;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
 

2. HTML - typed directly into the comments/description part of a New-Page.htt

WARNING: Under no circumstance press the Edit Text button in the top right hand corner, because it has the power to undo all that you have done!!!!

 
<button class="jdsaccord jdsliteblue jdsaccordafter">Your Title </button>
<div class="jdspanel">
<p>Lots of your text</p>
</div>
 

NOTE: use jdsliteblue or jdslitegreen to change the background colour of the Accordion

3. Script Added at the bottom of the HTML of New-Page.htt

 
<script>
var acc = document.getElementsByClassName("jdsaccord");
var i;
 
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("jdsactiveafter");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>
 

Edited by: John-Simpson on 15 Aug 2024, 16:48

Edited by: John-Simpson on 21 Aug 2024, 14:28

USING A BUTTON TO NAVIGATE TO ANOTHER PLACE ON YOUR PAGE

This can be done by using your own CSS and HTML.

CSS FOR BUTTON (goes in TIGER >Advanced >Custom Code >CSS)

.custom-button {
  border: none;
  color: white;
  padding: 10px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 10px;
}
 
/* CUSTOM BUTTON - adds choice of button colour*/
.cust-button-blue {background-color: #008CBA;} /* Blue */
.cust-button-green {background-color: #04AA6D;} /* Green */
 
/* CUSTOM BUTTON adds hover effect */
.custom-button:hover {
  background-color: #666666;
  color: white;
}

HTML for Button - added to your Page in jAlbum

<tr id="mac"><th colspan="4" style="text-align:left">
 <button class="custom-button cust-button-blue" onclick="document.location='#sheila' ">
Click to go to location called Sheila ↓</button>

Clicking the button will take you to the location with the named id="sheila" for example, which is elsewhere on your website.

<tr id="sheila"><th colspan="4" style="text-align:left"> Some Text </tr> 

The id name has to be unique for that page of HTML and mustn't start with a number. It could be what you want to call it - id="top" or id="bottom" or even to another lpage on your website by adding a relative link.

The id can be attached to other elements too:

<p id="sheila"> Text about Sheila.  </p>

Edited by: John-Simpson on 23 Aug 2024, 20:18 Substantially revised to show how a button is added.

Sheila is just a named tag - not sure of their proper name - maybe anchor links. See example: Link: sheila

 
<table>
<tr id="sheila">
<th colspan="4" style="text-align:left">
<button class="custom-button cust-button-blue">1936-1941 &uarr;</button> 
<button class="custom-button cust-button-blue">1957-1961 &darr;</button> 
<button class="custom-button cust-button-blue">1966-1968 &darr;</button>
</th>
</tr>
<tr>
<th colspan="4">
1943 - 1949 - TEACHERS AND STAFF (from Sheila Cornell)</th>
</tr>
</table>

NOTE:
a) the #sheila is just a Tagged link to an element id location on the same page with id="sheila" .
b) Directional arrows can be added using Unicode characters.

 DOWN & #8595;  ↓  and UP & #8593; ↑ 

(remove the space between & and # to display an arrow)

Edited by: John-Simpson on 23 Aug 2024, 18:21