Veröffentlicht am 10.04.2013 von Christian Seel: MODX Manager für Kunden anpassen

Vor einigen Tagen habe ich ein Foto meines MODX Dashboards via Twitter geteilt und viele User schienen die Idee zu mögen. Also gibt es hier nun ein kleines Tutorial dafür:

Quickstart Buttons für's Dashboard

Als erstes musst Du zur Dahsboard Konfiguration gehen und den "Widgets" Tab auswählen. Lege hier ein neues Widget mit dem Namen "Manager Quickstart" an und setze die Widget-Größe auf "full" und den Widget-Typ auf "HTML". Anschließend fügst du den folgenden Code in das Inhaltsfeld ein:

<link rel="stylesheet" type="text/css" href="[[++manager_url]]assets/managerbuttons/buttons.css">
<div id="managerbuttons">
<ul>
    <li>
        <a href="?a=55" title="New Resource">
            <span class="icon" style="background-image:url('[[++manager_url]]assets/managerbuttons/icon.png')"></span>
            <span class="headline">New Resource</span>
            <span class="subline">Create a new Document</span>
        </a>
    </li>
    <li>
        <a href="?a=55&parent=2&template=2" title="New Blog Post">
            <span class="icon" style="background-image:url('[[++manager_url]]assets/managerbuttons/icon.png')"></span>
            <span class="headline">New Blog Post</span>
            <span class="subline">Write a new Blog Post</span>
        </a>
    </li>
    <li>
        <a href="?a=70" title="Edit system settings">
            <span class="icon" style="background-image:url('[[++manager_url]]assets/managerbuttons/icon.png')"></span>
            <span class="headline">Configation</span>
            <span class="subline">Edit System Settings</span>
        </a>
    </li>
</ul>
</div>

Diesen HTML Code solltest du individuell bearbeiten: Verwende eigene Icons (24x24px), bearbeite die Links und füge weitere Buttons hinzu indem Du die <li> Tags duplizierst.

Als nächstes musst Du eine CSS-Datei erstellen. Öffne den Ordner /manager/assets/ und erstelle einen neuen Ordner "managerbuttons". Erstelle eine Datei mit dem Namen "button.css" und füge folgenden Code ein:

#managerbuttons {
	width: 100%;
	overflow: hidden;	
}
#managerbuttons ul:before,
#managerbuttons ul:after {
    content: " ";
    display: table;
}
#managerbuttons ul:after {
    clear: both;
}
#managerbuttons ul {
    width: 102%;
    margin: -1% 0 0 -1%;
    /* clearfix */
    *zoom: 1;
}
#managerbuttons ul li {
    display: table;
    position: relative;
    float: left;
    width: 33%;
    margin: 0;
    padding: 1% 0 0 1%;
}
#managerbuttons ul li a {
    display: table-cell;
    height: 65px;
    width: 100%;
    position: relative;
    padding: 0px 15px 0px 52px;
    text-decoration: none;
    vertical-align: middle;
    /* MODX 2.x.x Manager Button Styles */
    font: bold 11px tahoma, verdana, helvetica, sans-serif;
    color: #53595f;
    background: url(../images/modx-theme/form/button-bg.svg) repeat-x scroll 0 bottom rgba(222,222,222,1);
    background:-moz-linear-gradient(center bottom,#dedede 0%,#ffffff 100%) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(100%,#dedede));
    background:-webkit-linear-gradient(center bottom,#dedede 0%,#ffffff 100%);
    background:-o-linear-gradient(center bottom,#dedede 0%,#ffffff 100%);
    background:-ms-linear-gradient(center bottom,#dedede 0%,#ffffff 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#dedede,GradientType=0);
    background:linear-gradient(center bottom,#dedede 0%,#ffffff 100%);
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    -khtml-border-radius:3px;
    border-radius:3px;
    border: 1px solid gray;
    border-color: #CACACA #C0C0C0 #AAA;
    -moz-box-shadow:rgba(0,0,0,0.2) 0 0 1px;
    -webkit-box-shadow:rgba(0,0,0,0.2) 0 0 1px;
    -o-box-shadow:rgba(0,0,0,0.2) 0 0 1px;
    box-shadow:rgba(0,0,0,0.2) 0 0 1px;
}
#managerbuttons ul li a:hover {
	background:-moz-linear-gradient(center bottom,#cecece 0%,#ffffff 100%) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(100%,#cecece));
    background:-webkit-linear-gradient(center bottom,#cecece 0%,#ffffff 100%);
    background:-o-linear-gradient(center bottom,#cecece 0%,#ffffff 100%);
    background:-ms-linear-gradient(center bottom,#cecece 0%,#ffffff 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#cecece,GradientType=0);
    background:linear-gradient(center bottom,#cecece 0%,#ffffff 100%);
}
#managerbuttons ul li a span {
    display: block;
    line-height: 1.4;
}
#managerbuttons ul li a span.headline {
    font-size: 12px;
}
#managerbuttons ul li a span.subline {
    font-weight: normal;
}
#managerbuttons ul li a span.icon {
    display: block;
    width: 52px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent center center no-repeat;
}

Als Letztes musst Du noch das Widget zum Dashboard hinzufügen. Öffne dafür noch einmal die Dashboard Konfiguration und wähle dieses Mal den "Dashboards" Tab.

Es empfiehlt sich das Standard-Dashboard zu duplizieren, da MODX dieses bei einem Update überschreibt. Wenn du es duplizierst, musst du bei den Usergroups (z.B. "Administrator") das Dashboard auf dein eigenes ändern!

Mit einem Rechtsklick auf dein Dashboard und "Dashboard bearbeiten" kommst du zur Widget-Übersicht. Dort klickst du den Button "Widget platzieren" und wählst das Quickstart Widget aus. Nun nur noch speichern und fertig!

Fragen?

Wenn Du Fragen hast oder Vorschläge zur Verbesserung schreib in die Kommentare!



Kommentare (0)

  1. Noch keine Kommentare vorhanden.

lockedDieser Artikel ist schon älter, daher wurde die Kommentarfunktion deaktiviert.