TYPO3 development

Home  AF

The ILL's Typo3 template erases styles and most of the html tags, then a workaround is to use :

     Normal: texte with small font size
     Small: _{texte with small font size}
     Smaller: ^{_{texte with small font size}}

     Option 1: _{texte with small font size}
     Option 1: ^{_{texte with small font size}}

The eMagineurs template forces titles to uppercase.
Here a solution to regain lowercase characters when necessary.

    N<span style="text-transform:lowercase">eutron electric dipole moment</span> (EDM) <span style="text-transform:lowercase">experiment</span>

    N<span style="text-transform:capitalize">eutron electric dipole moment (EDM) experiment</span>

text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;

The words to be associated with a definition dialogue are placed between <u></u> tags:

<p>No one should <u class="openDLOG1">practice</u> any work if he derives <u class="openDLOG2>no benefit</u> from it.</p>

These lines only if buttons are required.

<button onclick="$('#dialog_1').dialog('open')">
  Title 1
</button>
<button onclick="$('#dialog_2').dialog('open')">
  Title 2
</button>
 

The following applies to all the blocks of the page and set links to the words surrounded by <u class="openXXX"></u> tags.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<style>
.ui-dialog-titlebar-close {
    padding:0 !important;
}

.ui-dialog-titlebar-close:after {
    content: '';
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url('

cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/images/ui-icons_444444_256x240.png');  &nbsp; background-position: -96px -128px;    background-repeat: no-repeat;}   u.open_dlog1:hover,  u.open_dlog2:hover {    color: #00F;    cursor: pointer;  }

  #dialog_1 {                         <-- to assign a color to this specific dialogue
    background-color:#ddf;
  }
  /*
  div:has(#dialog_1 ) {              <-- to assign a shadow to this specific dialogue
    box-shadow: 2px 2px 10px #888;
  }
  */
  .ui-dialog {                           <-- to assign a shadow to all the dialogues
    box-shadow: 2px 2px 10px #888;
  }

</style>

<script>
  $( function() {
    $( "#dialog_1" ).dialog({
      autoOpen: false
    });
    $( "#dialog_2" ).dialog({
      autoOpen: false
    });
    
    $(".open_dlog1").click(function() {
      $('#dialog_1').dialog('open')
    });
    $(".open_dlog2").click(function() {
      $('#dialog_2').dialog('open')
    });
  } );
</script>

<div id="dialog_1" title="Title 1">
  <p>Content of the first dialogue.
  </p>
</div>
<div id="dialog_2" title="Title 2">
  <p>Content of the second dialogue.
  </p>
</div>

A dialogue (see above) can be attached to an image .
WARNING:  if "Click to enlarge" is activated, both the image zoom and the dialogue display will be active simultaneously.

In the Typo3 interface add an attribute alt="myimage1" to the image:

Typo3: Media -> "Set element specific value (No default)" -> Set it to: myimage1

In the HTML block described above add the blue lines below in the function:

<script>
  $( function() {
 
  /* see above for a list of code lines */
 
    $("[alt|='myimage1']").click(function() {
      $('#dialog_1').dialog('open')
    });
  } );
</script>

Virtual Visit 2024         <-- version en cours de développement

Short cuts
      <https://www.ill.eu/current-visit>       Version currently deployed    
      <https://www.ill.eu/virtual-visit>          Home page