Seit APEX 5.0 gibt es für das Universal Theme den neuen Theme Roller. Sie erreichen ihn, indem Sie in der Developer Toolbar unten auf Theme Roller klicken. Wenn Ihre Applikation nicht das Universal Theme oder ein anderes Theme mit Theme Roller Unterstützung verwendet, fehlt diese Auswahl.

Abbildung 1: Theme Roller in der Developer Toolbar

Der Theme Roller sieht dann in etwa wie in Abbildung 2 aus.

Abbildung 2: Oracle APEX Theme Roller

Das standardmäßig erscheinende Color Wheel ist jedoch nicht wirklich nützlich; vielmehr empfiehlt es sich, die darunter befindlichen Abschnitte aufzuklappen und an den Farbeinstellungen dort zu arbeiten.

Abbildung 3: Theme Roller in der Developer Toolbar

Schaut man sich im Theme Roller ein wenig um, so bemerkt man schnell, dass es hier wirklich vor allem um Farben geht. Und wie man die ändert, soll gerade nicht Thema dieses Community-Tipps sein - der Theme Roller ist hier fast selbsterklärend; spielen Sie einfach mal ein wenig damit herum. Im Abschnitt Layout lässt sich zwar die Breite der einen oder anderen Region einrichten; für Einstellungen wie Positionierung oder Schriftarten und -größen bietet der Theme Roller dagegen keine Unterstützung. Solche Stylings gehören jedoch oft zu den Farben dazu; und das separate Hinzufügen von CSS-Anweisungen zur APEX-Seite oder zum Template ist mühsam und aufwändig.

Genau dafür ist der letzten Abschnitt des Theme Roller vorgesehen - und um diesen geht es im Community Tipp: Custom CSS.

Abbildung 4: Custom CSS im Theme Roller

Im Bereich Custom CSS können Sie eigene CSS-Anweisungen eingeben - und das Beste ist, dass der Theme Roller diese sofort anwendet - Sie sehen also unmittelbar, ob und wie Ihre CSS-Anweisungen arbeiten. Zwar erfordert das Arbeiten mit Custom CSS zumindest einige Grundkenntnisse und Übung im Bereich CSS, aber so schwierig ist das nicht - und irgendwann muss man anfangen. Probieren wir das also gleich einmal aus. Tragen Sie in den Bereich Custom CSS die folgende CSS-Anweisung ein.

body, body * {font-family: Courier}

Unmittelbar danach sollte sich die von Ihrer Seite verwendete Schriftart ändern (Abbildung 5).

Abbildung 5: Schriftarten ändern mit dem Theme Roller

Die CSS-Anweisung ist recht einfach: Auf das HTML-Tag body selbst sowie auf dessen Untertags (beliebige Hierarchietiefe) soll die Anweisung font-family: Courier angewendet werden - das ist, kurz gesagt, die ganze Seite.

Allerdings ist das recht grob - unter Umständen möchte man nicht die ganze Seite, sondern nur den Bericht auf der linken Seite mit der Courier-Schriftart ausstatten. Dazu muss die CSS-Anweisung geändert werden; es braucht einen CSS-Selector, der alle Zellen im Bericht anspricht. Hierzu fahren Sie am besten mit der Maus über den Bereich, den Sie verändern möchten, öffnen das Kontextmenü mit der rechten Maustaste und klicken auf Inspect Element (Abbildung 6).

Abbildung 6: "Inspect Element" im Kontextmenü auswählen

Nun öffnen sich die Developer Tools im Browser - im unteren Bildschirmbereich sehen Sie typischerweise den HTML-Code, der dem Element unter der Maus entspricht. Ganz unten zeigen manche Browser Ihnen den Pfad vom "Root-Element" aus an.

Abbildung 7: "Inspect Element" in Aktion

Beim Zusammenbauen eines CSS-Selektors kann man mehr verwenden als einfache Tag-Namen. Eine Referenz zu CSS-Selektoren finden Sie auf dieser Seite; an dieser Stelle seien nur vier (von sehr vielen) beispielhaft erwähnt.

• Das Zeichen # legt fest, dass ein HTML-Element über sein Attribut "id" angesprochen wird. #MEIN_REPORT spricht also das HTML-Element mit dem Attribut id="MEIN_REPORT" an. Eine solche Ansprache ist typischerweise eindeutig. Diese Angabe kann auch mit einem HTML-Tagnamen kombiniert werden - div#MEIN_REPORT meint das Tag <div> mit id="MEIN_REPORT".
• Wenn der Name mit einem Punkt beginnt, ist eine CSS-Klasse gemeint. .important spricht also alle HTML-Elemente mit dem Attribut class="important" an - hier können durchaus mehrere Elemente zurückgeliefert werden. Die CSS-Klasse kann auch hier mit einem Elementnamen kombiniert werden: div.important meint also alle HTML-Tags <div> mit der CSS-Klasse important.
• Werden, durch Leerzeichen getrennt, zwei Angaben gemacht, so muss die zweite in der Hierarchie unterhalb der ersten stehen - aber nicht zwingend ein direktes Child-Element sein. #MEIN_REPORT td meint also, dass alle HTML-Tags <td> unterhalb des HTML-Elements mit dem Attribut id="MEIN_REPORT" gemeint sind.
• Werden, durch ein ">" getrennt, zwei Angaben gemacht, so muss die zweite ein unmittelbares Child des ersten sein. table > tr meint also das HTML-Tag <tr> als unmittelbares Child von <table> .
• In einer Liste von Elementen kann mit dem Selektor nth-child() gearbeitet werden: #MEIN_REPORT tr:nth-child(2) meint also, dass, unterhalb des HTML-Elements mit dem Attribut id="MEIN_REPORT", das zweite HTML-Tag <tr> gemeint ist.

Generell ist es so, dass der spezifischere Selektor dem weniger spezifischen im Konfliktfall vorgeht. Liegen also für das HTML-Tag <div class="important"> CSS-Anweisungen mit den Selektoren .important und div.important vor, so wird der Browser die letztere nehmen, denn die ist spezifischer.

Um also nur die Schriftart des Berichts auf Courier zu ändern, tragen Sie den folgende CSS-Anweisung in den Bereich Custom CSS des Theme Roller ein.

#R5245744824176631 tr>td:nth-child(1) {
  font-family: Consolas, Monospace;
  font-weight: bold;
  color: darkred;
}

Mit #R5245744824176631 wird die APEX-Region mit dem Bericht angesprochen. Da wir nach dem Inspect Element nun wissen, dass ein APEX-Bericht als HTML-Tabelle aufgebaut ist, können wir mit dem CSS-Selector alle <tr>-Elemente, also alle Zeilen ansprechen. Mit nth-child zielen wir darin auf das erste <td>-Tag; wir sprechen so also per CSS die erste Spalte des Berichts an. Für diese werden Schriftart und Farbe umgestellt (Abbildung 8).

Abbildung 8: Die CSS-Anweisungen zielen auf die erste Berichtsspalte

Die Ansprache der Berichtsregion mit #R5245744824176631 ist nicht unbedingt glücklich - die CSS-Anweisung ist so eher unleserlich. Besser wäre es, dem Bericht eine statische ID zu geben - navigieren Sie dazu in den Page Designer, klicken Sie im Strukturbaum links Ihre Berichtsregion an und suchen Sie dann im Property-Editor rechts die Eigenschaft Static ID (im Bereich Advanced). Tragen Sie dort eine statische ID Ihrer Wahl ein - diese sollte auf der gleichen Seite aber nicht wiederverwendet werden.

Abbildung 9: Static ID für eine Region verwenden

Speichern Sie die Änderungen ab und rufen Sie die Seite erneut auf; die Änderungen im Theme Roller brauchen Sie nicht zu speichern; er merkt sich das von sich aus. Nachdem Sie Seite erneut geladen haben (F5), machen Sie erneut ein Inspect Element auf der Berichtsregion - nun verwendet APEX Ihre Angabe als Regions-ID.

Abbildung 10: HTML-Code mit Static ID

Die vorhin im Theme Roller eingetragene CSS-Anweisung wirkt nun nicht mehr; kein Wunder, denn es gibt nun kein HTML-Tag mehr mit dem Attribut id="R5245744824176631". Also muss die CSS-Anweisung wie folgt geändert werden.

#RPT_TOP_USERS tr>td:nth-child(1) {
  font-family: Consolas, Monospace;
  font-weight: bold;
  color: darkred;
}

Von nun an sollte die Änderung wieder sichtbar werden. Und die CSS-Anweisung ist gleich viel lesbarer.

Custom CSS im Theme Roller kann auch verwendet werden, um Berichte "responsive" zu machen. Angenommen, der Bericht soll bei breiten Bildschirmen alle drei, bei schmaleren Bildschirmen aber nur zwei Spalten anzeigen - die zweite Spalte soll dann ausgeblendet werden. Der CSS-Eintrag dafür ist wie folgt.

@media only screen and (min-width: 0px) and (max-width: 1000px) {
  // Tabellenzeilen
  #RPT_TOP_USERS tr > td:nth-child(2) {
    display: none;
  }
  // Tabellenüberschrift
  #RPT_TOP_USERS tr > th:nth-child(2) {
    display: none;
  }
}

Sobald die Bildschirmbreite unter 1000 Pixel ist, verschwindet die zweite Berichtsspalte - das können Sie mit einem "Resize" des Browserfensters einfach nachvollziehen. Mehr zum Thema Responsive Design finden Sie in diesem Community-Tipp.

Die folgende CSS-Anweisung versieht die Report-Pagination mit einem gelben Hintergrund. Abbildung 11 zeigt die Wirkung der CSS-Anweisungen.

#RPT_TOP_USERS td.pagination select * {
  background-color: yellow;
}

Abbildung 11: Der Bericht hat nun ein markiertes Pagination-Dropdown und ist Responsive

Manche stören sich an dem runden Button, der beim Universal Theme ganz unten auf der Seite ist und zurück zum Anfang der Seite führt - dieser ist immer dabei - und mit Hilfe von Custom CSS werden Sie ihn ganz einfach los. Machen Sie darauf wieder ein Inspect Element (Abbildung 11).

Abbildung 12: Inspect Element für den runden Button "Zum Seitenanfang"

Man sieht, dass der Button ein HTML-Tag <a> mit der CSS-Klasse t-Body-topButton ist. Damit kann man einen CSS-Selektor bauen.

a.t-Body-topButton {
  visibility: hidden;
}

Wenn Sie mit den CSS-Anweisungen fertig sind und die Seite so aussieht, wie es sein soll, dann speichern Sie den Style im Theme Roller mit Klick auf die Schaltfläche Save As ab. Natürlich können Sie auch zusätzlich noch Farben ändern.

Abbildung 13: Theme Roller Style abspeichern

Nach erfolgreichem Speichern können Sie den Style durch einen Klick auf Set As Current aktivieren. Damit sind Ihre CSS-Anweisungen aktiv und für alle Anwender wirksam. Sie haben das Aussehen Ihrer APEX-Anwendung nun verändert, ohne auch nur ein Template anzufassen, eine CSS-Datei hochzuladen oder ein HTML-Tag zu ändern - alles im Theme Roller.

Abbildung 14: Der neue Style ist aktiv

Fazit

Das neue Universal Theme in APEX 5.0 definiert das Arbeiten dem Layout einer APEX-Seite wirklich völlig neu. Nicht nur, dass die mitgelieferten Komponenten aus dem Stand modern aussehen und Responsive sind oder dass man die Farben mit dem Theme Roller bequem per Mausklick ändern kann - nein, auch das Hinterlegen von zusätzlichem CSS-Code wird mit dem Theme Roller so einfach wie noch nie. Es braucht kein Hochladen von Dateien, kein Anpassen von Templates und keine Änderungen am HTML-Code mehr. Im Bereich Custom CSS hinterlegte Anweisungen werden sofort wirksam und können sogar LIVE überprüft werden.

Zurück zur Community-Seite