Hier möchte ich Anleitungen und ähnliches zu SIQUANDO Pro Web 9 zeigen und anbieten. Was hier steht, habe ich probiert und ist auf dieser Seite auch im Einsatz. Auf dem Server beim Provider läuft php8.

Smilies über BBCode einfügen

Auf der Seite von Siquando-Designs gibt es eine gute Anleitung für die Nutzung von BBCode im Pro Web. Das Einbinden der Software erfolgt wie dort beschrieben. Den php-Code habe ich mir noch um die Nutzung von Smilies erweitert.

Folgende Smilies sind verfügbar:

:mrgreen: => :mrgreen: , :twisted: => :twisted: , :evil: => :evil: , :idea: => :idea: , :oops: => :oops: , :roll: => :roll: , :cry: => :cry: , :lol: => :lol: , :!: => :!: , :?: => :?: , :arrow: => :arrow: , 8) => 8), :shock: => :shock: , 8O => 8O , :( => :( , :) => :) , :? => :? , :D => :D , :P => :P , :o => :o , :x => :x , :| => :| , ;) => ;) , :zzz: => :zzz: ,

Als erstes habe ich mir im Root-Verzeichnis der Domain, also dort wo Siquando installiert ist, einen Ordner "smilies" erstellt. In diesem sind die Grafiken der einzelnen Smilies abgelegt. Die Zuweisung der Textcodes zu den Grafiken erfolgt in einem Array der Software.
Die Anzahl der Smilies und die zugewiesenen Grafiken kann jeder für sich ändern und anpassen.

Ich habe mir noch [sc] Kaptälchen [/sc]eingefügt.

Den BBCode br [br in eckigen Klammern] habe ich noch mit eingefügt um auch Zeilenumbrüche in Absätze zu machen, wo keine vorgesehen sind.

Zwischen

$message = preg_replace(array_keys($preg), array_values($preg), $message);
und
 return $message; 

ist folgender Code ein zu fügen:


if ( !isset( $smiliestrans ) ) {
$smiliestrans = array(
':mrgreen:' => 'icon_mrgreen.gif',

.....

$message = $output;

Die notwendigen Dateien, Smilies und die angepasste php-Datei, können hier heruntergeladen werden.


Schwebender "scroll-to-top" Button

Da es in den meisten Designs keinen schwebenden "scroll-to-top" Button gibt, habe ich mir selber geholfen und so etwas eingebunden.
Da ich das KARO Flex Design nutze gibt es diesen Button ja schon, so das es auf meiner Webseite zwei davon gibt. Der Runde ist der von mir eingebaute.
Über die Menüpunkte Datei -> Website-Eigenschaften öffnet man den Tab HTML. Dort wird folgender Code eingefügt:


Im <head>-Bereich

<style>
#zzNachoben {
   position: fixed;       /* bleibt beim Scrollen stehen */
   z-index: 100;          /* überlagert andere Elemente */
   right: 30px;    
   bottom: 30px;
   cursor: pointer;
  }[/pre]
#zzNachoben a {
   width: 56px;           
   height: 56px;
   display: block;        
   text-align: center;    
   font-size: 36px;        
   font-weight: bold;     
   text-decoration: none; 
   color: green;        /* Schriftgrün */
}
[pre]#zzNachoben a:hover { color: red; /* Schrift rot */ } </style>

Am Anfang des <body>-Bereichs

<p id="zzNachoben"> <a href="#top">&#11165;</a></p>

Am Ende des <body>-Bereichs

<script>
$(document).ready(function() {
    // #zzNachoben zuerst verbergen
    $("#zzNachoben").hide();
    // #zzNachoben einblenden
    $(function () {
      $(window).scroll(function () {
       // einblenden nach Scrolling down 220 px
 if ($(this).scrollTop() > 220) {
  $('#zzNachoben').fadeIn();
 } else {
  $('#zzNachoben').fadeOut();
 }
           });
      // beim Klicken Scroll nach oben zu Position 0px
      $('#zzNachoben a').click(function () {
 $('body,html').animate({
  scrollTop: 0
 }, 800);
 return false;
          });
    });
});
</script>

Update

Ich habe die Informationen bekommen, das in etlichen Browsern der Pfeil (Unicode) nicht angezeigt wir, nun gibt es hier nun noch eine Variante mit einer png-Grafik. Die Einträge Am Anfang des <body>-Bereichs und Am Ende des <body>-Bereichs bleiben die selben. Der runde Button ist der von mir.
Die Grafik habe ich bei mit direkt in das Hauptverzeichniss kopiert.

Im <head>-Bereich

<style>
#zzNachoben {
   background: url(https://domain.tld/arrow.png) no-repeat center center;
   position: fixed;       /* bleibt beim Scrollen stehen */
   z-index: 100;          /* überlagert andere Elemente */
   right: 30px;    
   bottom: 30px;
   cursor: pointer;
   }

#zzNachoben a {
   width: 40px;           /* Breite der Grafik */
   height: 40px;          /* Höhe der Grafik */
   display: block;        
   }
</style>

Hier noch die Grafik als Download.

Ich hoffe einigen hiermit etwas geholfen oder eine Idee gegeben zu haben.