Webdesign Template REXX anpassen

Geändert am Wed, 19 Sep 2018 um 03:59 PM

Inhaltsverzeichnis

  1. Entfernen der Pfeiltasten beim Slider
  2. Slider bei Mouseover nicht anhalten
  3. Login & Registrierung entfernen
  4. Link "Newsletter abonnieren" entfernen
  5. Unterseiten bei der mobilen Navigation nicht anzeigen
  6. Individuelles Headerbild pro Inhaltsseite
  7. Anpassen der Geschwindigkeit des Sliders
  8. Sprachnavigation entfernen
  9. Aufzählungszeichen ändern

Bestimmte Layout- und Design-Elemente des Webdesign Templates REXX können über den Template Editor angepasst werden. Für die Anpassung von Elementen, welche nicht als Option im Template Editor verfügbar sind, werden HTML/CSS/JavaScript Kenntnisse benötigt. Nachfolgend sind einige Anleitungen aufgeführt, welche die Anpassung solcher Elemente auch ohne die benötigten Kenntnisse ermöglichen sollen.


Entfernen der Pfeiltasten beim Slider

Die Pfeiltasten (gemäß Markierung auf dem folgenden Screenshot) beim Slider auf der Homepage können wie folgt entfernt werden:


  1. Öffnen Sie den Template Manager (Administration > Layout > Template Manager)
  2. Wählen Sie das Template REXX aus
  3. Öffnen Sie die Datei home.html im Editor
  4. Suchen Sie den folgenden Code und löschen Sie diesen:
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>


  5. Speichern Sie die Anpassung um die Änderung wirksam zu machen


Slider bei Mouseover nicht anhalten

Solange sich der Mousecursor über dem Slider befindet findet kein Wechseln zum nächsten Silder-Bild statt. Dieses Verhalten kann wie folgt geändert werden, so dass in jedem Fall zum nächsten Slider-Bild gewechselt wird:

  1. Öffnen Sie den Template Manager (Administration > Layout > Template Manager)
  2. Wählen Sie das Template REXX aus
  3. Öffnen Sie die Datei javascript.js im Editor
  4. Suchen Sie den folgenden Code:
    $('.carousel').carousel({
        interval: 2000
    });

    und ersetzen Sie diesen mit folgendem Code:

    $('.carousel').carousel({
        interval: 2000,
        pause: false
    });
  5. Speichern Sie die Anpassung um die Änderung wirksam zu machen


Login & Registrierung entfernen

Links zu Login & Registrierung werden wie folgt entfernt:



  1. Öffnen Sie den Template Manager (Administration > Layout > Template Manager)
  2. Wählen Sie das Template REXX aus
  3. Öffnen Sie die Datei index.html im Editor
  4. Suchen Sie den folgenden Code und löschen Sie diesen:
    <!-- BEGIN access_logged_out -->
    <button class="open" data-toggle="modal" data-target="#myModal">Login</button>
    <a href="[[NODE_ACCESS_SIGNUP]]">Registrieren</a>
    <!-- END access_logged_out -->


  5. Suchen Sie den folgenden Code und löschen Sie diesen auch:
    <a class="mobile-reg" href="[[NODE_ACCESS_SIGNUP]]"></a>
    <a class="mobile-login" href="[[NODE_LOGIN]]"></a>


  6. Speichern Sie die Anpassung um die Änderung wirksam zu machen


Link "Newsletter abonnieren" entfernen

Der Link "Newsletter abonnieren" auf der Detailansicht eines News-Artikels wird wie folgt entfernt:

  1. Öffnen Sie den Template Manager (Administration > Layout > Template Manager)
  2. Wählen Sie das Template REXX aus
  3. Öffnen Sie die Datei core_modules > News > Details.html im Editor

    Falls die Datei nicht vorhanden ist, finden Sie diese im Reitter Anwendungsvorlagen

  4. Suchen Sie den folgenden Code:
    <li><a href="index.php?section=Recommend">Per E-Mail versenden</a></li>
    <li class="last"><a href="index.php?section=Newsletter">Newsletter abonnieren</a></li>

    und ersetzen Sie diesen mit folgendem Code:

    <li class="last"><a href="index.php?section=Recommend">Per E-Mail versenden</a></li>


  5. Speichern Sie die Anpassung um die Änderung wirksam zu machen


Unterseiten bei der mobilen Navigation nicht anzeigen

Falls bei der mobilen Navigation nur die Hauptseiten angezeigt werden sollen, können die Unterseiten gemäß folgender Anleitung ausgeblendet werden. Die mobile Navigation wird über die Template-Datei navbar2.html eingebunden.

  1. Öffnen Sie den Template Manager (Administration > Layout > Template Manager)
  2. Wählen Sie das Template REXX aus
  3. Öffnen Sie die Datei navbar2.html im Editor
  4. Suchen Sie den folgenden Code:
    <!-- BEGIN level_2 -->
    <li class="level-2 [[STYLE]] [[CSS_NAME]]">
        <a class="[[STYLE]] [[CSS_NAME]]" href="[[URL]]" target="[[TARGET]]" title="[[NAME]]">[[NAME]]</a>[[SUB_MENU]]
    </li>
    <!-- END level_2 -->
    <!-- BEGIN level_3 -->
    <li class="level-3 [[STYLE]] [[CSS_NAME]]">
        <a class="[[STYLE]] [[CSS_NAME]]" href="[[URL]]" target="[[TARGET]]" title="[[NAME]]">[[NAME]]</a>[[SUB_MENU]]
    </li>
    <!-- END level_3 -->

    und löschen Sie diesen


  5. Speichern Sie die Anpassung um die Änderung wirksam zu machen


Individuelles Headerbild pro Inhaltsseite

Standardmässig wir auf jeder Inhaltsseite das gleiche Header-Bild angezeigt. Mit der folgenden Anleitung kann das Header-Bild individuell pro Inhaltsseite gesetzt werden.

  1. Öffnen Sie den Template Manager (Administration > Layout > Template Manager)
  2. Wählen Sie das Template REXX aus
  3. Öffnen Sie die Datei content.html im Editor
  4. Fügen Sie am Anfang der Datei den folgenden Code ein:
    <script type="text/javascript">
    jQuery(document).ready(function(){
        var backgroundImg = '[[CSS_NAME]]';
        if (backgroundImg == '') {
            return;
        }
        jQuery('.bannerImage').css('background-image', 'url(' + backgroundImg + ')');
    });
    </script>


  5. Speichern Sie die Anpassung um die Änderung wirksam zu machen
  6. Bei jeder Inhaltsseite kann über die Option Zusätzliche CSS-Klasse im Reiter Mehr nun bei Bedarf der Pfad zu einem individuellen Header-Bild hinterlegt werden. Beispiel:


Anpassen der Geschwindigkeit des Sliders

Die Geschwindigkeit des Sliders auf der Startseite kann wie folgt angepasst werden:

  1. Öffnen Sie den Template Manager (Administration > Layout > Template Manager)
  2. Wählen Sie das Template REXX aus
  3. Öffnen Sie die Datei javascript.js im Editor
  4. Suchen Sie den folgenden Code:
    $('.carousel').carousel({
        interval: 2000
    });

    Der Wert 2000 bestimmt die Zeit (in Milisekunden) bis der Slider zum nächsten Bild wechselt. Ändern Sie den Wert 2000 in die neue gewünschte Zeit. Damit z.B. nach bereits einer Sekunde der Slider zum nächsten Bild wechselt, ersetzen Sie den Wert 2000 mit 1000.


  5. Speichern Sie die Anpassung um die Änderung wirksam zu machen


Sprachnavigation entfernen

Die Sprachnavigation kann wie folgt entfernt werden:

  1. Öffnen Sie den Template Manager (Administration > Layout > Template Manager)
  2. Wählen Sie das Template REXX aus
  3. Öffnen Sie die Datei index.html im Editor
  4. Suchen Sie den folgenden Code:
    <li id="select-language">[[LANGUAGE_NAVBAR_SHORT]]</li>

    und löschen Sie diesen.


  5. Suchen Sie den folgenden Code:
    <ul id="lang-bar"><li>[[LANGUAGE_NAVBAR_SHORT]]</li></ul>

    und löschen Sie diesen.


  6. Speichern Sie die Anpassung um die Änderung wirksam zu machen


Aufzählungszeichen ändern

Das Aufzählungszeichen kann wie folgt geändert werden:

  1. Öffnen Sie den Template Manager (Administration > Layout > Template Manager)
  2. Wählen Sie das Template REXX aus
  3. Öffnen Sie die Datei layout.css im Editor
  4. Suchen Sie den folgenden Code:
    .content ul li {
        padding: 0 0 5px 20px;
        background: url('images/marker.gif') no-repeat 2px 8px;
    }

    und ändern Sie diesen wie folgt ab: 

    .content ul li {
        padding: 0 0 5px 20px;
        list-style-type: disc;
    }


    Hinweis: Die obige Anpassung bewirkt die Darstellung der Aufzählungszeichen als Punkte (). Die Darstellung wird durch den Wert disc definiert. Um ein anderes Zeichen als Aufzählungszeichen zu definieren, muss der Wert disc ausgetauscht werden. Die verschiedenen Möglichkeiten sind auf der folgenden Website beschrieben: https://www.w3.org/wiki/CSS/Properties/list-style-type


    Tipp: Alternativ zu obiger Code-Anpassung, kann auch ein Bild mit dem gewünschten Aufzählungszeichen unter /themes/rexx/images/marker.gif abgelegt werden.


  5. Speichern Sie die Anpassung um die Änderung wirksam zu machen

War dieser Artikel hilfreich?

Das ist großartig!

Vielen Dank für das Feedback

Leider konnten wir nicht helfen

Vielen Dank für das Feedback

Wie können wir diesen Artikel verbessern?

Wählen Sie wenigstens einen der Gründe aus

Feedback gesendet

Wir wissen Ihre Bemühungen zu schätzen und werden versuchen, den Artikel zu korrigieren