24/7 Hotline: 0800 / 08 27 638   Int.: +49 5353 / 977 99 99 Support FAQ Ankündigungen

cPanel Theme Anpassung für Reseller


Reseller

Als Reseller haben Sie die Möglichkeit die cPanel Oberfläche für Ihre Kunden individuell anzupassen. Im ersten Abschnitt legen Sie das passende Verzeichnis an.

Hierfür gehen Sie wie folgt vor:

1.) Login per FTP mit Ihrem WHM Benutzer und Ihrem ISPPanel Kennwort

2.) Erstellen Sie folgende Ordnerstruktur direkt im / Verzeichnis:

/var/cpanel/reseller/styled 


Anpassen des Designs

Damit Sie das Design bzw. die Oberfläche anpassen können, müssen Sie in das oben erstellte Verzeichnisse die Datei „styles.css“ anlegen. Diese Datei darf keinen anderen Namen bekommen.

Folgenden Sie jetzt der Anleitung:

1.) Öffnen Sie einen Texteditor und erstellen Sie eine neue Datei

2.) Fügen Sie zum Test folgenden Inhalt in diese Datei und speichern sie:

 

body {

    background-color: blue;

}

 

3.) Jetzt müssen Sie die FTP Verbindung mit Ihrem WHM Benutzer und Ihrem ISPPanel Kennwort herstellen und navigieren Sie in das vorher erstellte Verzeichnis

4.) Laden Sie die Datei „styles.css“, welche Sie in Schritt 2 erstellen haben, hoch

5.) Loggen Sie sich jetzt in Ihren cPanel Account ein und klicken oben rechts auf den Accountnamen und anschließend auf „Change Style“

6.) Wählen Sie dort Ihren Style aus und kilcken auf „Apply Style“

7.) Laden Sie jetzt Ihre cPanel Oberfläche neu

 

Wenn Ihre „styles.css“ sich an der korrekten Stelle befindet ist der Hintergrund jetzt blau.

Die Grundstruktur für das eigene Design ist sehr einfach:

 

Beispiel-Bild einfügen für die Vorschau

Das Beispiel-Bild muss zwingend „preview.png“ heißen und darf nicht kleiner als 500x500 Pixel sein, damit es korrekt angezeigt wird. 

Das Bild „preview.png“ muss ebenfalls in das oben erstellte Verzeichnis.

 

Um zu testen ob es funktioniert, müssen Sie den Bereich „Change Style“ öffnen. Dort sollte Ihr Bild aus Vorschau erscheinen.

Hintergrund Bild einfügen

Nachdem Sie den Style aktiviert haben, erstellt das System automatich einen Symlink für „current_style“ mit „/var/cpanel/styled“. Um ein Bild zu hinterlegen müssen Sie jetzt den Symlink in Ihrer „styles.css“ Datei verwenden. Hier ein Beispiel:

body {

   background-image:url("/styled/current_style/background-image.png");

}

 

Der Bereich „Change Style“ sollte jetzt ungefähr so aussehen:

  

Übersicht

Paper Lantern benutzt viele Twitter Bootstrap Elemente um den Style anzupassen. Das untere Diagramm zeigt Ihnen die Haupt-Klassen die Sie in Ihrem Style verwenden können.

 

Schreiben Sie Ihre eigene CSS

Folgende finden Sie eine Liste mit CSS Element und Ihren Style anzupassen.

 

Ändern Sie das Aussehen der Buttons

Um die Standard-Bootstrap-Buttons zu bekommen, fügen Sie folgende Beispiele in Ihre „styles.css“ Datei ein:

 

.btn {

    border-bottom:0;

    box-shadow: none;

}

 

.btn-primary {

    position: relative;

    vertical-align: top;

    color: #FFFFFF;

    text-align: center;

    cursor: pointer;

}

 

.btn-default {

    color: #333;

    background-color: #fff;

    border-color: #ccc;

}

 

Ändern Sie die Navigationsbar

Um die Navigationsbar zu „lösen“, fügen Sie folgendes Beispiel in Ihre „styles.css“ Datei ein:

 

header .navbar-fixed-top {

/* no fixed header */

    position:relative;

    top:inherit;

    width:inherit;

}

 

body {

    padding-top:0;

}

 

.navbar {

    margin-bottom:0;

}

 

Bildschirmgröße festlegen

Nutzen Sie den Befehl „@media“ um Ihren Inhalt nur bei einer bestimmten Größe anzeigen zu lassen. Die CSS Regel greift nur, wenn die Bildgröße erreicht ist.

Die folgende Regel wird dazu genutzt um die „Quick Links“ in der Navigation auszublenden wenn eine Bildschirmgröße von 768 Pixel erreicht wird:

 

@media (max-width: 767px) {

    .navbar-subnav {

display: none;

    }

    body {

background:pink;

   }

}

 

Bearbeiten Sie die .item Elemente

Das „.item“ Element deklariert wie jedes Feature Icon in der „.cellbox-body“ angezeigt wird. Wenn Sie den Namen eines Features zu dem richtigen Icon zuweisen möchten, können Sie folgenden Inhalt als Beispiel in Ihre „styles.css“ einfügen:

 

.item {

    width:200px;

}

 

.itemImageWrapper {

    width:58px;

    float:left;

}

 

.itemTextWrapper {

    text-align:left;

}

 

Ändern Sie Ihr Logo

Um das Standard-Logo auszutauschen gehen Sie wie folgt vor:

1.) Navigieren Sie in das oben erstellte Verzeichnis / var/cpanel/reseller/

2.) Legen Sie dort ein neues Verzeichnis Namens „brand“ an

3.) Laden Sie dort Ihr Logo hoch, beachten Sie aber, dass der Name der Datei „logo.png“ lautet. Die optimale Größe ist 250x50 Pixel.

© All rights reserved by VCServer Network OHG