Die Style-Portalseite

Ein neues Topic anlegen oder ein vorhandenes Topic öffnen.

Wählen Sie den oberen Abschnitt (siehe: Menü „Elementstruktur“) und anschließend Gehe zu Element.

Fügen Sie hier das Attribut Rolle hinzu: Panel „Elementattribute“.

Fügen Sie den Wert Startseite hinzu.

Drücken Sie Speichern.

Wählen Sie im oberen Menü Layout aus.

Paligo zeigt eine Liste von Layouts an. Die Liste ist leer, wenn keine benutzerdefinierten Layouts in Ihrer Paligo-Instanz vorhanden sind.

Wählen Sie das Layout, das Sie aktualisieren möchten, oder Ein Layout erstellen aus.

Wählen Sie Allgemein aus.

Scrollen Sie nach unten, um die Startseite anhand der Rolle für das HTML5-Helpcenter auszuwählen.

Wählen im Menü die Option Aktiviert.

Drücken Sie Speichern.

Verwenden Sie einen Code- oder Texteditor eines Drittanbieters, um eine CSS-Datei zu erstellen oder zu aktualisieren.

Zum Beispiel mystyles.css.

Fügen Sie den folgenden Code zu Ihrer CSS-Datei hinzu:

.portal-header h1 {
color: #ff8c00;
}

Dabei ist #ff8c00 der HTML-Code für die Farbe, die Sie verwenden möchten. In diesem Beispiel haben wir den Code für Dunkelorange verwendet.

Speichern Sie Ihre CSS-Datei.

Hochladen benutzerdefinierter CSS

Verwenden Sie einen Code- oder Texteditor eines Drittanbieters, um eine CSS-Datei zu erstellen oder zu aktualisieren.

Zum Beispiel mystyles.css.

Fügen Sie den folgenden Code zu Ihrer CSS-Datei hinzu:

.portal-header h1 {
font-family:"Times New Roman", Times, serif;
}

Im Falle von „Times New Roman“, ist „Times, serif“ die Definition für die Schriftart, die Sie verwenden. In diesem Beispiel haben wir uns für Times New Roman entschieden (wobei Times verwendet wird, wenn Times New Roman nicht verfügbar ist) und für eine Serifen-Schriftart als Notfall-Option.

Speichern Sie Ihre CSS-Datei.

Hochladen benutzerdefinierter CSS.

Verwenden Sie einen Code- oder Texteditor eines Drittanbieters, um eine CSS-Datei zu erstellen oder zu aktualisieren.

Zum Beispiel mystyles.css.

Fügen Sie den folgenden Code zu Ihrer CSS-Datei hinzu:

@media (min-width: 768px).portal-header h1 {
font-size: 60px;
}

.portal-header h1 {
font-size: 30px;
}

Die erste CSS-Klasse verwendet eine Medienabfrage. Wenn der Inhalt in diesem Fall auf einem Display mit 768 Pixeln oder mehr angezeigt wird, verwendet Portalüberschrift h1 eine Schriftgröße von 60 Pixeln.

Die zweite CSS-Klasse definiert die Größe der Klasse der Portalüberschrift h1, wenn die Seite auf einem Display mit weniger als 768 Pixeln angezeigt wird. In diesem Fall wird eine Schriftgröße von 30 px verwendet.

Ersetzen Sie die Werte für die Schriftgröße durch die gewünschten Größen.

Speichern Sie Ihre CSS-Datei.

Hochladen benutzerdefinierter CSS.

Wählen Sie im oberen Menü Layout aus.

Paligo zeigt eine Liste von Layouts an. Die Liste ist leer, wenn keine benutzerdefinierten Layouts in Ihrer Paligo-Instanz vorhanden sind.

Wählen Sie das Layout, das Sie aktualisieren möchten, oder Ein Layout erstellen aus.

Wählen Sie CSS, JS, Logos und andere Assets in der Seitenleiste aus.

Wählen Sie Upload in Helpcenter-Portalseite Hintergrundbild.

Paligo wird die Bilddatei hochladen und einen Dateinamen vergeben.

Ziehen Sie die Bilddatei, die Sie verwenden möchten, mit dem Cursor in den Dialog.

Drücken Sie Speichern.

Verwenden Sie einen Code- oder Texteditor eines Drittanbieters, um eine CSS-Datei zu erstellen oder zu aktualisieren.

Zum Beispiel mystyles.css.

Fügen Sie den folgenden Code zu Ihrer CSS-Datei hinzu:

.portal-header::before {
  background-color: #555; 
}

Ersetzen Sie #555 durch den HTML-Code der Farbe, die Sie verwenden möchten.

Wenn Sie einen Gradienten verwenden möchten, ist auch dies möglich. Verwenden Sie in diesem Fall jedoch „Hintergrund“ anstelle von „Hintergrundfarbe“:

.portal-header::before {
   background: linear-gradient(to right , rgb(0, 104, 191) 8% , rgb(33, 150, 243) 50% , rgb(100, 66, 255) 95%);
}

Sie können den Gradienten-Code problemlos mit einem Online-Generator erstellen, beispielsweise mit diesem.

Speichern Sie Ihre CSS-Datei.

Hochladen benutzerdefinierter CSS.

Verwenden Sie einen Code- oder Texteditor eines Drittanbieters, um eine CSS-Datei zu erstellen oder zu aktualisieren.

Zum Beispiel mystyles.css.

Fügen Sie den folgenden Code zu Ihrer CSS-Datei hinzu:

.portal-header::after{
  background: none;
}

Speichern Sie Ihre CSS-Datei.

Hochladen benutzerdefinierter CSS.

Mit Das Browser-Inspektionstool können Sie den Klassennamen des Kategoriebereichs finden, den Sie ändern möchten.

Jedes Kategorie-Panel hat einen eigenen Klassennamen, den Paligo anhand der Reihenfolge der Panels vergibt. Zum Beispiel hat das erste Kategorie-Panel den Klassennamen .cat-panel-1.

Verwenden Sie einen Code- oder Texteditor eines Drittanbieters, um eine CSS-Datei zu erstellen oder zu aktualisieren.

Zum Beispiel mystyles.css.

Fügen Sie den folgenden Code zu Ihrer CSS-Datei hinzu:

.cat-panel-1:before{
    content: "\f29a"; 
}

Ändern Sie .cat-panel-1 in den Klassennamen, den Sie in Schritt 1 entdeckt haben, z. B. .cat-panel-5:before.

Ersetzen Sie "\f29a" durch den Symbolcode aus Font Awesome 4.6.3.

"\f29a" ist ein Symbolcode von Font Awesome.

Speichern Sie Ihre CSS-Datei.

Hochladen benutzerdefinierter CSS.

Verwenden Sie einen Code- oder Texteditor eines Drittanbieters, um eine CSS-Datei zu erstellen oder zu aktualisieren.

Zum Beispiel mystyles.css.

Fügen Sie den folgenden Code zu Ihrer CSS-Datei hinzu:

.portal-single-publication a {    
    color: #DC143C;
    background-color: #C0C0C0;
}

.portal-single-publication .publication-icon {
    background-color: #DC143C;
}

Ersetzen Sie die Farbwerte durch diejenigen Farben, die Sie verwenden möchten.

Speichern Sie Ihre CSS-Datei.

Hochladen benutzerdefinierter CSS.

Verwenden Sie einen Code oder Texteditor eines Drittanbieters, um eine JavaScript-Datei (JS) zu erstellen oder zu aktualisieren.

Zum Beispiel mycustomscript.js.

Fügen Sie der JavaScript-Datei den folgenden Code hinzu:

$(document).ready(function() {

var icon1 = "url of image 1";
var icon2 = "url of image 2";
var icon3 = "url of image 3";

$(".cat-panel-1").closest("a").prepend("<img src='" + icon1 + "'></img>");
$(".cat-panel-2").closest("a").prepend("<img src='" + icon2 + "'></img>");
$(".cat-panel-3").closest("a").prepend("<img src='" + icon3 + "'></img>");

$(".publication-icon").remove();

});

Ersetzen Sie den Text in den Anführungszeichen durch die URL Ihres Bildes.

Das Skript deklariert die Variablen icon1, icon2 und icon3. Jede Variable ist ein Verweis auf die Bild-URL.

Wenn Sie mehr hinzufügen möchten, fügen Sie eine neue Zeile mit derselben Syntax hinzu. Wenn Sie beispielsweise vier Bilder wünschen, fügen Sie var icon4 = "url of image 4"; hinzu, wobei die URL die tatsächliche Adresse der Bilddatei ist.

Wenn Sie weitere Bildvariablen hinzugefügt haben, müssen Sie auch zusätzliche „Cat-Panel”-Referenzen hinzufügen. Für jede Variable sollte es eine Option geben, die wie folgt aussieht:

 $(".cat-panel-1").closest("a").prepend("<img src='" + icon1 + "'></img>");

In der HTML-Struktur der „Portalseite“ des Helpcenters ist jedes Kategoriebild in einem „cat-panel“-Abschnitt enthalten; diese Abschnitte sind nummeriert. Die obige Zeile funktioniert also, indem man den Browser anweist, zuerst das „Cat-Panel” für Kategorie 1 und anschließend den davorgelegenen Anker zu finden.

Wenn der Anker gefunden wird, fügt der Browser ein Bildelement hinzu, das auf die Variable icon1 verweist, welche die Position des Bildes definiert.

Fügen Sie für jede Variable, die Sie dem Skript hinzugefügt haben, eine neue Anweisungszeile hinzu. Wenn Sie beispielsweise vier Variablen haben, fügen Sie die folgende Zeile für die vierte Variable hinzu:

 $(".cat-panel-4").closest("a").prepend("<img src='" + icon4 + "'></img>");

Speichern Sie Ihre JavaScript-Datei.

Hochladen eines benutzerdefinierten JavaScripts.

Wählen Sie das Topic oder die Komponente im Content Manager aus, um es/sie im Editor zu öffnen.

Alternativ können Sie Topics erstellen und dieses bearbeiten.

Wählen Sie das section-Element im Menü „Elementstruktur“ aus.

Wählen Sie Zu Element wechseln aus.

Fügen Sie das Rollenattribut hinzu und geben Sie ihm den Wert: portal-category in der Panel „Elementattribute“

Drücken Sie Speichern.

Wiederholen Sie die Schritte 1 bis 4 für jedes Topic, das Sie als Kategorie-Panel aufnehmen möchten.

Verwenden Sie einen Code- oder Texteditor eines Drittanbieters, um eine CSS-Datei zu erstellen oder zu aktualisieren.

Zum Beispiel mystyles.css.

Fügen Sie den folgenden Code zu Ihrer CSS-Datei hinzu:

.portal-publications .inner-row {    
    display:none;
}

.show-all-category {
    display:none;
}

Speichern Sie Ihre CSS-Datei.

Hochladen benutzerdefinierter CSS.

Fügen Sie Folgendes zu Ihrer JavaScript-Datei hinzu:

$(document).ready(function(){
// Panel position
var position = 0;
// Icon/image url
var cloneIcon = "";
// Link url
var cloneLink = "";
// Title text
var cloneTitle = "";


var $original = $('.portal-single-publication').eq(position);
var $clone = $original.clone();


$clone.children('a').first().attr('href', cloneLink);
$clone.find('.cat-panel').first()
.removeClass()
.addClass('fa cat-panel')
.closest('a')
.prepend("<img src='" + cloneIcon + "'></img>")
.find('.publication-icon')
.remove();


$clone.find('h3').text(cloneTitle);
$original.after($clone);
});

Ändern Sie die folgenden Variablen in den ersten Paarzeilen des Codes: position=””, cloneIcon=””, cloneLine=”” und cloneTitle=”” .

Beispiel:

var position = "3";
var cloneIcon = "https://mycustomsite.com/icon.png";
var cloneLink = "https://google.com";
var cloneTitle = "Google Link";

Wenn Sie möchten, dass das neue Kategorie-Panel immer als letztes in der Liste erscheint, können Sie die Positionsvariablenzeile (Zeile 3) entfernen und Zeile 11 ändern in:

var $original = $('.portal-single-publication').last();

Speichern Sie Ihre JavaScript-Datei.

Hochladen eines benutzerdefinierten JavaScripts.

Verwenden Sie zum Erstellen (oder Aktualisieren) der JavaScript-Datei einen Text- oder Code-Editor.

Verwenden Sie folgendes Skript als Ausgangspunkt:

const consentTranslations = new Map([
    ["en-GB", "Here, have some cookies"],
    ["en-US", "Howdy, have some cookies"],
    ["de-DE", "Hier, nimm einige Kekse"]
  ]);

let $consentLang = portalLanguage || $('html').attr('xml:lang')

var consentOverride = {
    content : {
        message: consentTranslations.get($consentLang)
    }
}

Bearbeiten Sie den Text und seine Übersetzungen nach Bedarf.

Speichern Sie Ihre JavaScript-Datei mit der Dateierweiterung .js.

Hochladen eines benutzerdefinierten JavaScripts.

Verwenden Sie einen Code- oder Texteditor eines Drittanbieters, um eine CSS-Datei zu erstellen oder zu aktualisieren.

Zum Beispiel mystyles.css.

Um die Farbe der Überschrift „Featured Content“ zu ändern, fügen Sie Folgendes hinzu:

h5.featured-content-label {    
    color: #DC143C;
}

Um die Farbe der nummerierten Topic-Überschriften und der aufgelisteten Topics zu ändern, fügen Sie Folgendes hinzu:

.publication-contents a {
    background-color: #DC143C;
}

Um die Farbe des Icons neben den aufgelisteten Topics zu ändern, fügen Sie Folgendes hinzu:

.publication-contents li::before {
    color: #DC143C;
}

Speichern Sie Ihre CSS-Datei.

Hochladen benutzerdefinierter CSS.

Verwenden Sie einen Code- oder Texteditor eines Drittanbieters, um eine CSS-Datei zu erstellen oder zu aktualisieren.

Zum Beispiel mystyles.css.

Fügen Sie den folgenden Code zu Ihrer CSS-Datei hinzu:

.featured-content-label {
    display:none;
}

.portal-contents featured-content {
    display:none;
}

.portal-contents .inner {
    display:none;
}

Speichern Sie Ihre CSS-Datei.

Hochladen benutzerdefinierter CSS.

Wählen Sie im oberen Menü Layout aus.

Paligo zeigt eine Liste von Layouts an. Die Liste ist leer, wenn keine benutzerdefinierten Layouts in Ihrer Paligo-Instanz vorhanden sind.

Wählen Sie das Layout, das Sie aktualisieren möchten, oder Ein Layout erstellen aus.

Wählen Sie Feedback in der Seitenleiste.

Wählen Sie aus im Bereich Abstimmungs-Panel verwenden aus, ob das Abstimmungs-Panel (Ja- und Nein-Buttons) einbezogen oder ausgeschlossen werden soll.

Legen Sie fest, ob Sie Ihren Nutzern die Möglichkeit geben möchten, ein Feedback zu hinterlassen (Änderungen vorschlagen).

Verwenden Sie die Option für das Umschalten der Feedback-Optionen für das Abstimmungs-Panel, um festzulegen, wann der E-Mail-Feedback-Link angezeigt wird.

Geben Sie unter E-Mail für Feedback die E-Mail-Adresse ein, an die von Ihren Lesern stammende Feedback-E-Mails versendet werden sollen.

Drücken Sie Speichern.