Forum - Präsentationskalender - Darstellung interessanter Themen - Teil 1+2

<style>
.calenderTitel {color:#383838 !important; text-shadow: 0 0 0.05em #aaaaaa, 0 0 0.1em #222222; border:1px solid #aaaaaa; display:inline-block !important; padding:5px 20px; border-radius: 5px;background:#eeeeee; margin-bottom:10px; font-size:25px; font-weight:bold; }
.calender {background: #eeeeee; color:#383838; border:1px solid #aaaaaa; margin: auto; padding: 30px 20px; border-radius: 5px; height:100%; display:flex; flex-direction: row; flex-wrap: wrap !important; justify-content: center; }
 
.myFensterModal {background:#cccccc; min-width:100px; width:9vw; height:200px; padding:30px 30px; margin:10px; overflow:hidden; text-align:left; cursor:pointer; border-radius:5px; filter: drop-shadow(-0.1em -0.1em 0.1em rgba(255, 255, 255,1)) drop-shadow(0.1em 0.1em 0.1em rgba(0,0,0,1)) drop-shadow(0 0 0.5em rgba(100, 100, 100,.5)); display: inline-block; }
.mobileview .myFensterModal {width:250px;  float:none;}
.myFensterModal:hover {background:#aaaaaa;}
.myFensterModal img {object-fit: contain; object-position: center top; width:100%; margin:auto; display:flex;}
.myFensterModal h3 {background:#bbbbbb; font-size: 14px; border-radius: 5px; padding: 2px 10px !important; border: 1px solid #aaaaaa; text-transform: none !important; text-align: left  !important;}
.myFensterNr {display:none; position:absolute; padding:0px 8px; border-radius:50%; left:5px; top:5px;}
.myFensterModal:hover .myFensterNr {display:inline-block; background:#ffffff;border:1px solid #aaaaaa;}
 
.closeFenster {position: absolute; top: 0px; right: 15px; color: #f1f1f1; font-family: "Arial", sans-serif; font-size: 40px; font-weight: bold; padding:20px; cursor: pointer;}
.closeFenster:hover {color: #aaaaaa;}
 
#myKalenderModal  {display: none; position: fixed; z-index: 999999; padding-top: 10px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); }
 
#FensterAll {background: #cccccc !important; color:#000000 !important; cursor:pointer; padding:20px; margin:50px 20px 20px 20px; border:5px solid #ffffff; border-radius:5px; box-sizing: border-box; display:inline-block; font-weight:normal; text-align:left; }
#FensterAll h3 {background:#bbbbcc; font-size: 14px; border-radius: 5px; padding: 3px 15px !important; border: 1px solid #aaaaaa; text-transform: none !important; text-align: left  !important;}
#FensterAll img {object-fit: contain; height:auto; max-height:40vh; width:auto; max-width:50vw; margin:auto; display:flex;}
.mobileview #FensterAll {height:auto;}
#FensterAll a { color: #333333;}
 
.myFensterText {display:none; box-sizing: border-box;}
.calender audio {max-width:280px;}
#breadcrumbs, .col-xl-4 {display:none;}
.col {flex: none; max-width: 100%;}
</style>
 
<div id="myKalenderModal">
<div class="closeFenster" title="Schließen!">×</div>
<center>
<div id="FensterAll"></div>
</center>
</div>
 
<center>
<div class="calenderTitel">Interessante Themen aus dem Forum</div><br>
 
<div class="calender">
 
<!-- ### 1. Fenster - Anfang ### -->
<div class="myFensterModal"><div class="myFensterNr">1</div>
 
 
<h3>Zeit - Zeitsteuerung!</h3>
<img width="600px" height="400px" title="Zeit - Zeitsteuerung!" src="https://files.homepagemodules.de/b104774/a_496_da19023e.png">
 
<br>
Mit dem folgenden Beitrag ist es möglich, Laufschriften, Bilder, Texte oder auch kleine HTML-Dokumente zeitlich begrenzt ein- und auszublenden.
Es stehen 5 Skripte zur Verfügung, mit dem ein Vorgang zu einer bestimmten Zeit gestartet, beendet oder in einem Zeitraum ausgeführt werden kann.
 
<br><br>
<b>Hier geht es zum Beitrag:</b>
<a href="https://www.hilfe-tricks-tipps.de/t484f31-Zeit-Zeitpunkt-Zeitraum-Zeitsteuerung-zeitlich-zeitgesteuert-vorgegebene-Zeit.html#msg1030">Zeitgesteuert - Laufschriften, Bilder, Texte, HTML!</span></a>
 
 
</div>
<!-- ### 1. Fenster - Ende ### -->
 
<!-- ### 2. Fenster - Anfang ### -->
<div class="myFensterModal"><div class="myFensterNr">2</div>
 
 
<h3>Text to Speech (TTS)!</h3>
<img width="600px" height="400px" title="Text to Speech (TTS)!" src="//files.homepagemodules.de/b104774/a_504_a1f9b795.png">
 
<br>
Texte sich vorlesen lassen ist eine faszinierende und praktikable Idee!
 
<br>
Mit einfachsten Mitteln lassen sich überall im Forum Hilfetexte, Hinweise oder Warnungen mit Sprachausgabe platzieren, ohne extra eine MP3-Datei erstellen zu müssen!
 
<br><br>
<b>Hier geht es zum Beitrag:</b>
<a href="https://www.hilfe-tricks-tipps.de/t1790f31-Text-to-Speech-TTS-Feste-Textbloecke-in-Sprache-umwandeln-Teil.html#msg5029">Text to Speech (TTS) -Text in Sprache umwandeln!</span></a>
 
 
</div>
<!-- ### 2. Fenster - Ende ### -->
 
<!-- ### 3. Fenster - Anfang ### -->
<div class="myFensterModal"><div class="myFensterNr">3</div>
 
 
<h3>Sound beim Eintreffen einer Email!</h3>
<img width="600px" height="400px" title="Sie haben Post - Sound beim Eintreffen einer Email!" src="https://files.homepagemodules.de/b541474/a_748_001a7aea.png">
 
<br>
Wer gerne eine akustische Benachrichtigung für die "privaten Mails" ins Forum einbauen möchte, findet hier eine Möglichkeit!
 
<br>
Trifft eine "private Mail" ein, kann man das am blinkenden Symbol im User-Menü, oben recht sehen, allerdings nicht so gut!
 
<br>
Im folgenden Beitrag wird zusätzlich zum Sound eine relativ große Grafik eingeblendet, die nicht zu übersehen ist!
 
<br>
Durch ein Mausklick kommt man direkt zum Posteingang!
 
<br>
Falls die Grafik im Wege steht und man nicht sofort zum Postfach eilen will, kann die Grafik frei verschoben werden!
 
<br><br>
<b>Mögliche Soundwiedergabe für die Ankunft einer Mail:</b>
 
<br>
Text: <i>Sie haben Post</i>
 
<br><br>
<audio controls="controls">
<source src="track.ogg" type="audio/ogg" />
<source src="https://files.homepagemodules.de/b135428/f199t55470p407552n2.mp3" />
Ihr Browser unterstützt nicht die Audio-Wiedergabe
</audio><br><br>
 
 
<br><br>
<b>Hier geht es zum Beitrag:</b>
<a href="https://www.hilfe-tricks-tipps.de//t842f31-quot-Sie-haben-Post-quot-Sound-Grafik-beim-Eintreffen-einer-Email.html#msg1851">Sie haben Post - Sound beim Eintreffen einer Email!</span></a>
 
 
</div>
<!-- ### 3. Fenster - Ende ### -->
 
<!-- ### 4. Fenster - Anfang ### -->
<div class="myFensterModal"><div class="myFensterNr">4</div>
 
 
<h3>Xobor Plugins erstellen, versenden und bearbeiten!</h3>
<br>
<img width="600px" height="400px" title="Xobor Plugins erstellen, versenden und bearbeiten!" src="//files.homepagemodules.de/b104774/a_506_37b8bee4.jpg">
 
<br>
Möchte man sein Forum mit Effekten und Funktionen erweitern, helfen hier Plugins weiter! Sie haben den Vorteil, dass sie die "Xobor-Templates" nicht verändern!
 
<br><br>
<b>Wie erstelle ich ein Plugin:</b>
 
<br>
Um ein Plugin zu erstellen, müssen Grundeinstellungen erfolgen und ein "Template Element" angelegt werden!
 
<br><br>
<b>Template Element anlegen:</b>
 
<br>
Will man ein JavaScript, ein jQuery-Script oder HTML-Script unterbringen, dass auf das ganze Forum wirkt, empfiehlt sich ein Eintrag im "bottom_header oder im "foben_footer"!
 
<br><br>
<b>Plugin versenden:</b>
 
<br>
Um ein Plugin zu versenden und anderen Administratoren zur Verfügung zu stellen, wird im nachfolgenden Beitrag gezeigt!
 
<br><br>
<b>Plugin annehmen und bearbeiten:</b>
 
<br>
Um ein Plugin anzunehmen und zu bearbeiten, wird im nachfolgenden Beitrag gezeigt!
 
<br>
Dafür wird ein freier Plugin-Platz benötigt.
 
 
<br><br>
<b>Hier geht es zum Beitrag:</b>
<a href="https://www.hilfe-tricks-tipps.de/t1418f31-Xobor-Plugins-erstellen-versenden-und-bearbeiten.html">Xobor Plugins erstellen, versenden und bearbeiten!</span></a>
 
 
</div>
<!-- ### 4. Fenster - Ende ### -->
 
<!-- ### 5. Fenster - Anfang ### -->
<div class="myFensterModal"><div class="myFensterNr">5</div>
 
 
<h3>Überschrift für Thema 5!</h3>
<br>
<img width="600px" height="400px" title="Beschreibung zu Thema 5!" src="//files.homepagemodules.de/b104774/a_428_70b9ee5c.jpg">
 
<br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text !
 
 
<br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text !
 
 
<br><br>
<b>Hier geht es zum Beitrag:</b>
<a href="#">Beitrag Thema 5!</span></a>
 
 
</div>
<!-- ### 5. Fenster - Ende ### -->
 
<!-- ### 6. Fenster - Anfang ### -->
<div class="myFensterModal"><div class="myFensterNr">6</div>
 
 
<h3>Überschrift für Thema 6!</h3>
<br>
<img width="600px" height="400px" title="Beschreibung zu Thema 6!" src="//files.homepagemodules.de/b104774/a_428_70b9ee5c.jpg">
 
<br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text !
 
 
<br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text !
 
 
<br><br>
<b>Hier geht es zum Beitrag:</b>
<a href="#">Beitrag Thema 6!</span></a>
 
 
</div>
<!-- ### 6. Fenster - Ende ### -->
 
<!-- ### 7. Fenster - Anfang ### -->
<div class="myFensterModal"><div class="myFensterNr">7</div>
 
 
<h3>Überschrift für Thema 7!</h3>
<br>
<img width="600px" height="400px" title="Beschreibung zu Thema 7!" src="//files.homepagemodules.de/b104774/a_428_70b9ee5c.jpg">
 
<br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text !
 
 
<br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text !
 
 
<br><br>
<b>Hier geht es zum Beitrag:</b>
<a href="#">Beitrag Thema 7!</span></a>
 
 
</div>
<!-- ### 7. Fenster - Ende ### -->
 
<!-- ### 8. Fenster - Anfang ### -->
<div class="myFensterModal"><div class="myFensterNr">5</div>
 
 
<h3>Überschrift für Thema 8!</h3>
<br>
<img width="600px" height="400px" title="Beschreibung zu Thema 5!" src="//files.homepagemodules.de/b104774/a_428_70b9ee5c.jpg">
 
<br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text !
 
 
<br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text !
 
 
<br><br>
<b>Hier geht es zum Beitrag:</b>
<a href="#">Beitrag Thema 8!</span></a>
 
 
</div>
<!-- ### 8. Fenster - Ende ### -->
 
<!-- ### 9. Fenster - Anfang ### -->
<div class="myFensterModal"><div class="myFensterNr">9</div>
 
 
<h3>Überschrift für Thema 9!</h3>
<br>
<img width="600px" height="400px" title="Beschreibung zu Thema 9!" src="//files.homepagemodules.de/b104774/a_428_70b9ee5c.jpg">
 
<br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text !
 
 
<br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text !
 
 
<br><br>
<b>Hier geht es zum Beitrag:</b>
<a href="#">Beitrag Thema 9!</span></a>
 
 
</div>
<!-- ### 9. Fenster - Ende ### -->
 
<!-- ### 10. Fenster - Anfang ### -->
<div class="myFensterModal"><div class="myFensterNr">10</div>
 
 
<h3>Überschrift für Thema 10!</h3>
<br>
<img width="600px" height="400px" title="Beschreibung zu Thema 10!" src="//files.homepagemodules.de/b104774/a_428_70b9ee5c.jpg">
 
<br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text !
 
 
<br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text !
 
 
<br><br>
<b>Hier geht es zum Beitrag:</b>
<a href="#">Beitrag Thema 10!</span></a>
 
 
</div>
<!-- ### 10. Fenster - Ende ### -->
 
</div>
 
<div><a href="https://www.hilfe-tricks-tipps.de/" style="float:right; background:#dddddd; border-radius: 5px; color:#383838; padding:2px 10px; margin:5px 0; text-transform: none !important; text-decoration:none; display:inline-block;">Präsentationskalender © Hilfe, Tricks & Tipps</a></div>
<br /><br />
 
</center>
 
 
<script>
window.addEventListener('load', function(){
 
  $('.myFensterModal').on('click',function(){
 
    $('body').css('overflow','hidden');
 
    $('.myFensterText',this).show();
    $('#myKalenderModal').fadeIn(500).on('click',function(){
      $(this).hide();
      $('body').css('overflow','auto');
    });
 
    $('#FensterAll').html($(this).html());
  });
 
});
</script>