Forex Symbole Png Cognos

IBM Cognos Proven Practices: Markieren der IBM Cognos 10.1.1 Business Insight-Benutzeroberfläche Einführung Dieses Dokument enthält einen Überblick über die Konzepte, Farbschemata und Dateien, die für das Skinning in IBM Cognos Business Insight verwendet werden. Es erklärt auch die Dojo Thema-basierte Skinning-Methode für die Standard-Haut des Produkts verwendet. Informationen darüber, wie Sie Texte und Logos ersetzen können, erhalten Sie, um die Benutzeroberfläche (User Interface) weiter anzupassen. Ein Beispiel wird gegeben, um alle Änderungen zu veranschaulichen, die erforderlich sind, um IBM Cognos Business Insight für ein imaginäres Unternehmen zu rebrandieren. Anwendbarkeit Die in diesem Dokument beschriebene Skinierungsmethode gilt nur für IBM Cognos Business Insight Version 10.1.1. Jegliche Entwürfe, die für diese Version getan werden, müssen möglicherweise für zukünftige Versionen erneut durchgeführt werden. Ausnahmen und Ausnahmen In diesem Dokument wird davon ausgegangen, dass der Leser über Kenntnisse in HTML, DOM und IBM Cognos 10 verfügt. Eine gute Kenntnis der CSS-Eigenschaften und Regeln Prioritäten wird auch angenommen. Hintergrund Die Benutzeroberfläche von IBM Cognos Business Insight wurde mit Dojo Toolkit entwickelt. Daher ist ein grundlegendes Verständnis von Dojo-Themen und CSS-Klassen sehr hilfreich bei der Entwöhnung. In diesem Abschnitt wird eine grundlegende Einführung in diese Konzepte gegeben. Dojo-Themen Die Dojo-Bibliotheken unterstützen vier Themen aus der Box: Claro, Tundra, Soria und Nihilo. Ein Dojo-basierte Anwendung kann wählen, um eines der Themen wie für seine Haut zu verwenden, oder sie können eine der vorgegebenen Themen anpassen, oder sie können ihre eigene Haut von Grund auf neu entwickeln. IBM Cognos Business Insight verwendet eine benutzerdefinierte Version des Claro-Themas. Dies geschieht, indem das Klassenattribut des ltbodygt-HTML-Elements auf claro gesetzt wird, wie in Abbildung 1 dargestellt. Abbildung 1. HTML-Code mit dem Klassenattribut des ltbodygt-Elements auf claro CSS-Vererbung Dojo verwendet CSS-Vererbung, um seine UI-Komponenten zu skalieren Dijit-Komponenten). Da IBM Cognos Business Insight Dojo-UI-Komponenten verwendet, müssen Sie die CSS-Vererbung verstehen, um die Stile und die Haut von IBM Cognos Business Insight anzupassen. Die folgenden Beispiele veranschaulichen, wie CSS-Vererbung funktioniert. Die Klasse claro. dijitDialogTitleBar definiert die Hintergrundfarbe der Dialoxtitel im Claro-Theme. Beachten Sie die Reihenfolge der Klassennamen, die. dijitDialogTitleBar hinter. claro steht. Dies bedeutet, dass die Hintergrundfarbe ABD6FF auf jeden DOM-Knoten mit der Klasse. dijitDialogTitleBar angewendet wird und der Abkömmling eines anderen DOM-Knotens mit der Klasse. claro ist. In dem in Abbildung 2 unten dargestellten HTML-Fragment wird dieser Hintergrundfarbstil auf eine ltdivgt-Klasse angewendet, indem dijitDialogTitleBar als Wert für das Klassenattribut angegeben wird. Beachten Sie, dass die ltdivgt-Klasse ein Abkömmling von ltbodygt ist, der claro-Klasse verwendet. Abbildung 2. HTML-Code mit einer div-Klasse hervorgehoben In IBM Cognos Business Insight bedeutet diese spezielle Definition, dass jeder DOM-Knoten auf der Seite, die dijitDialogTitleBar-Klasse verwendet, ABD6FF als Hintergrundfarbe verwendet, da die Klasse für ihr ltbodygt - Element claro ist. Dieses Beispiel definiert auch CSS-Hintergrundfarbe für Dialogtitel, funktioniert aber nur, wenn das Tundra-Design für eine Anwendung verwendet wird. Mit anderen Worten, es gilt nur für Knoten mit der Klasse. dijitDialogTitleBar, wenn seine Vorfahren einen Knoten enthalten, der die. tundra-Klasse verwendet. Dojo-Vorgaben überschreiben Dojo lädt die CSS-Dateien und Klassen, die für das angegebene Design standardmäßig erforderlich sind, auf. In IBM Cognos Business Insight werden die benutzerdefinierten CSS-Dateien auf die Standard-Dojo-CSS-Dateien geladen, um die Standardstildefinitionen für das Design zu überschreiben. Um eine Standardregel zu überschreiben, müssen Sie die Regel in einer benutzerdefinierten CSS-Datei duplizieren und ihre Werte ändern. Das folgende Beispiel zeigt, wie dies geschieht. Der in Abbildung 3 dargestellte DOM-Baum zeigt eine Seite, ltBody Klasse clarogt. Die in zwei Abschnitte, links und rechts, unter Verwendung von ltdivgt-Elementen, ltdiv-Klasse leftgt und ltdiv-Klasse rightgt unterteilt ist. Von dort definieren die linken und rechten Abschnitte dann andere Knotenklassen. In diesem Beispiel definieren sowohl der linke als auch der rechte Abschnitt den Knoten ltspan class dijitButtongt, der wiederum den Knoten ltspan Class dijitButtonNodegt definiert. Abbildung 3. Ein DOM-Baum, der aus zwei Abschnitten besteht, die eigene Knoten enthalten Um die Hintergrundfarbe aller Schaltflächen auf der Seite zu ändern, finden Sie die Standard-CSS-Klasse, mit der die Hintergrundfarbe der Schaltflächen festgelegt wird. In diesem Fall ist es. claro. dijitButton. dijitButtonNode. Duplizieren Sie die Klasse und fügen Sie der benutzerdefinierten CSS-Datei den neuen Wert 2D5C3D hinzu. Duplizieren Sie die folgende Klasse, und ändern Sie die benutzerdefinierte CSS-Datei mit dem neuen Wert 2D5C3D, um die Hintergrundfarbe der Schaltflächen auf der linken Seite zu ändern. Beachten Sie, dass die Reihenfolge der Klassennamen in den beiden obigen Beispielen in der gleichen Reihenfolge wie die Knoten in der DOM-Baumhierarchie liegt. Dies ist wichtig, um sicherzustellen, dass die Stile richtig angewendet oder überschrieben werden. Tipps und Techniken In diesem Abschnitt werden die Dateien beschrieben, die für das Skinning von IBM Cognos Business Insight, die Namenskonvention für die Dateinamen und den Speicherort dieser Dateien, verwendet werden. Diese Dateien enthalten CSS, Bilder und String-Dateien. IBM Cognos Business Insight wird mit dem IBM Cognos 10 BI-Server installiert. Alle zum Branding benötigten Dateien finden Sie in ltC10 installgtwebcontenticd. In der folgenden Tabelle werden die im Skinning verwendeten Dateiformate, ihre Standorte im Dateisystem und die Kurzbezeichnung, die im weiteren Verlauf dieses Dokuments verwendet werden sollen, auf die verschiedenen Speicherorte verweisen. Dateistellen ltUI strings locationgt Allgemeine CSS-Dateien Informationen Alle CSS-Dateien im ltCSS-Verzeichnis wurden in eine Datei, bux. css, komprimiert. Wenn Sie eine kleine Änderung an der Haut und Stile (wie das Ändern oder Hinzufügen ein paar Regeln), können Sie bux. css direkt ändern. Wenn Sie das Erscheinungsbild von IBM Cognos Business Insight ändern, müssen Sie andere CSS-Dateien ändern und dann ein neues bux. css generieren. Siehe die Abschnitte "Generate optimized CSS und Addieren Sie Ihre eigenen CSS-Dateien für Informationen, wie dies zu tun. Die folgende Tabelle beschreibt die Dateien im ltCSS-Verzeichnis und wofür sie verwendet werden. Dateinamenformat Dateien mit diesem Namensformat enthalten die hautbezogenen CSS-Regeln wie Farben, Hintergrundbilder und Stile. Dateien mit diesem Namensformat enthalten die CSS-Regeln für den Hochkontrastmodus für Sehbehinderte. Es gibt keine Notwendigkeit, diese Dateien zu ändern, wenn Sie nur ändern Bilder und Farben sind. Dateien mit diesem Namensformat enthalten die CSS-Regeln, die für die Positionierung und Größenanpassung der Benutzeroberflächensteuerelemente verwendet werden. Es wird dringend empfohlen, die Dateien nicht mit diesem Format zu bearbeiten. Sie riskieren, die Benutzeroberfläche unbrauchbar zu machen, indem Sie diese Dateien ändern. Um herauszufinden, welche Datei Sie benötigen, um die Änderungen vorzunehmen, müssen Sie, Identifizieren Sie die Komponente, die Sie wollen, um Haut. Suchen Sie nach einer entsprechenden CSS-Datei mit dem oben genannten Dateinamenformat. Um die Dialog-Skins zu ändern, ist die zu ändernde Datei buxdialogskinclaro. css. Ändern Sie die Datei buxbannerskinclaro. css, um die Bannerhaut zu ändern. Vor dem Starten des Skinning-Prozesses Es wird dringend empfohlen, den Ordner ltCSS zu speichern, bevor Sie mit dem Ändern der CSS-Dateien beginnen. Dies ist im Fall, dass Sie Probleme beim Skinning und müssen die ursprünglichen Dateien wiederherzustellen. Generieren von optimiertem CSS In IBM Cognos Business Insight werden alle CSS-Dateien in eine Datei mit dem Namen bux. css komprimiert, um den HTTP-Verkehr zu minimieren. Wenn Sie CSS-Dateien geändert haben, müssen Sie bux. css regenerieren. In diesem Abschnitt wird beschrieben, wie dies geschieht. Wenn die Plattform Windows ist, gehen Sie in einem Eingabeaufforderungsfenster zum Ordner ltCSS locationgt. Geben Sie den Befehl copy dojo. css bux. css bux. css ein. Wenn die Plattform LinuxUnix, In einer Shell-Eingabeaufforderung ist, gehen Sie zum Ordner ltCSS locationgt. Geben Sie den Befehl cat dojo. css bux. css gt bux. css ein. Eigene CSS-Dateien hinzufügen Es ist einfacher, Ihre Anpassung zu verwalten, wenn Sie Ihre eigenen CSS-Dateien erstellen und die Dateien auf die CSS-Regel von IBM Cognos Business Insights anwenden. Um dies zu tun, müssen Sie sicherstellen, dass diese Dateien an das Ende von bux. css angehängt sind. Um zum Beispiel mybank. css oder eine Reihe von Dateien wie mybankdialog. css hinzuzufügen. Mybankbutton. css an das Ende von bux. css, Wenn die Plattform Windows ist, gehen Sie in einem Eingabeaufforderungsfenster zum Ordner ltCSS locationgt. Geben Sie den Befehl copy dojo. css bux. css mybank. css bux. css ein. Wenn die Plattform LinuxUnix, In einer Shell-Eingabeaufforderung ist, gehen Sie zum Ordner ltCSS locationgt. Geben Sie den Befehl cat dojo. css bux. css mybank. css gt bux. css ein. IBM Cognos Business Insight IBM Cognos Business Insight IBM Cognos Business Insight Standard-Hautfarben Die folgende Tabelle zeigt alle Standardfarben, die für die Haut von IBM Cognos Business Insight verwendet werden. Die Verwendung von begrenzten Satz von Farben in der Haut war absichtlich, so dass die Benutzeroberfläche sauber und übersichtlich. Die Tabelle zeigt außerdem die Zuordnung der Standardfarben zu denjenigen, die in den benutzerdefinierten Skin-Beispielen in den folgenden Abschnitten verwendet werden. Tipp: Wenn Sie durch die Skinning-Praxis gehen, ist es eine gute Idee, die Mapping-Tabelle zwischen den Standardfarben und den Zielfarben zu erstellen. Dies wird Ihnen helfen, die gleichen Design-Prinzipien folgen, um die Benutzeroberfläche sauber zu halten. Dies hilft, die Farben in Übereinstimmung mit den Unternehmensfarben zu machen und hilft auch, die für die Haut verwendeten Farben zu vereinfachen. Navigationsfensterhintergrund für das Inhaltsfenster und das Dialogfeld "Öffnen" Im folgenden Abschnitt werden die Bilddateien ersetzt, die dieselbe Datei sind, außer dass sie geändert wurden, um eine grünere Farbe zu erhalten. Die Dateien wurden dann mit dem Präfix mb gespeichert. Die Präfix-mb-Dateien sind im Produkt nicht vorhanden. Seite "Erste Schritte" In diesem Abschnitt werden die Schritte zur Neugestaltung der Seite "Erste Schritte" beschrieben. Die Standard-Seite "Erste Schritte" ist in Abbildung 4 dargestellt. Abbildung 4. Die standardmäßige IBM Cognos Business Insight-Seite Erste Schritte Nach dem Rebranding ändert sich der Farbton der gesamten Seite von blau nach grün und der Text IBM Cognos Business Insight wird angepasst, um gelesen zu werden Meine Bank Business Insight. Abbildung 5: Eine modifizierte IBM Cognos Business Insight-Startseite, die benutzerdefinierten Text und einen grünen Farbton verwendet In diesem Dokument prefix wir alle Original-Bildnamen mit mb, wenn wir die Bilder ändern, weil der Name unserer imaginären Firma ist My Bank. Wir werden nicht diskutieren, wie die Bilder in den Beispielen verwendet werden. Es wird davon ausgegangen, dass die Bilder bereit sind, in den CSS-Regeln verwendet zu werden. Erste Schritte Hintergrundfarbe In diesem Abschnitt wird gezeigt, wie die Seite "Erste Schritte" mit der neuen Hintergrundfarbe und dem Bild geändert werden kann. Dies ist der Hintergrund hinter dem Arbeitsbereich. Die zu ändernde. CSS-Datei ltCSS locationgtbuxguidancePageskinclaro. css Der Selektor, der geändert werden soll, lautet:.bux-guidancePageContainer-outer Ändern Sie das folgende aus diesem Bild: Erste Schritte Hintergrundbild In diesem Abschnitt wird gezeigt, wie das Hintergrundbild von Getting Started geändert wird . Abbildung 6. Das Standard-Hintergrundbild auf der Seite "Erste Schritte" Die zu modifizierende. CSS-Datei ltCSS locationgtbuxguidancePageskinclaro. css Der Selektor, der geändert werden soll, lautet:.bux-guidancePage Ändern Sie folgendes in diesem Beispiel: In diesem Beispiel haben wir einen Überlagern Sie Farbe auf das Bild, aber Sie können Ihr eigenes Bild oder einen einfachen Hintergrund ohne jedes Bild verwenden. Neue und vorhandene Schaltflächen erstellen In diesem Abschnitt wird gezeigt, wie Sie die Schaltflächenfarbe und Schaltflächenbeschriftung der Schaltflächen Neu erstellen und Vorhandene öffnen auf der Seite Erste Schritte ändern können. Abbildung 7. Große Schaltflächen für die Funktionen "Neue erstellen und öffnen" Die zu ändernde. CSS-Datei ltCSS locationgtbuxguidancePageskinclaro. css Folgende Selektoren müssen geändert werden: Für die Schaltflächenfarbe -.claro. dijitButton. dijitButtonNode Für die Schaltflächenbeschriftungsfarbe -.icdGettingStartedLargeButton. dijitButtonText Um die Farbe der beiden Schaltflächen zu ändern, fügen Sie am unteren Rand der Datei die folgende neue Regel hinzu: buxguidancePageskinclaro. cssDie Schaltflächen Create New und Open Existing verwenden den Standard-Dojo-Stil zum Definieren der Schaltflächenfarbe. Wenn Sie den Standardstil ändern möchten, werden alle Schaltflächen, die diesen Standardstil verwenden, ebenfalls geändert. Um den Stil nur dieser beiden Schaltflächen zu ändern, müssen Sie die Überschreibungsregel einschränken, indem Sie eine Klasse angeben, die nur auf dem Container dieser beiden Schaltflächen angezeigt wird. In diesem Fall ist der Container. cligo. bux-guidancePage-createDashboard-button-container. dijitButton. Um die Farbe der beiden Tastenbeschriftungen zu ändern, aktualisieren Sie die folgende Klasse aus diesem Abschnitt: In diesem Abschnitt wird gezeigt, wie Sie die Schaltfläche Erste Schritte ändern ändern. Abbildung 8. Schaltfläche Weitere Schaltfläche auf der Seite Erste Schritte Die zu ändernde. CSS-Datei ltCSS locationgtbuxguidancePageskinclaro. css Der zu ändernde Selektor lautet:.bux-guidancePage-more-icon Ändern Sie den folgenden Abschnitt in diesem Abschnitt Zeigen, wie der Name der Anwendung von IBM Cognos Business Insight zu My Bank Business Insight geändert werden kann. Es gibt keine. CSS zu ändern. Stattdessen ist die zu ändernde JavaScript-Datei ltUI Strings Locationgtbuxuimsgen. js Suchen Sie in der Datei buxuimsg. js nach IDSGENAPPLICATIONNAME: IBM Cognos Business Insight und ändern Sie es in IDSGENAPPLICATIONNAME: Meine Bank Business Insight Diese Änderung ist nur für englische Sprache möglich. Wenn Sie den Anwendungsnamen für andere Sprachen ändern möchten, müssen Sie die Änderungen in den für diese Sprachen spezifischen Dateien vornehmen. Das Format des Dateinamens lautet buxuimsgltlanggt. js. Wenn Sie also den Anwendungsnamen für Französisch ändern möchten, müssen Sie die Zeichenfolge in buxuimsgfr. js ändern. Es ist wichtig, dass Sie das Format der JS-Datei nicht ändern. Andernfalls kann die Anwendung nicht geladen werden. Um sicher zu sein, erstellen Sie eine Sicherungskopie der. js-Datei, die Sie ändern möchten. In diesem Abschnitt wird gezeigt, wie Sie die border - Eigenschaft der Favoritendetails ändern können. Abbildung 9. Element-Miniaturansicht Die zu ändernde. CSS-Datei ltCSS locationgtbuxguidancePageskinclaro. css Der Selektor, der geändert werden soll, lautet:.bux-guidancePage-thumbnail-span. bux-thumbnail-frame Der Rahmen einer Favoriten-Miniaturansicht verwendet Bilder , So dass Sie die Anzeige des vorhandenen Bildes auf keine setzen müssen, indem Sie am unteren Rand der Datei Folgendes hinzufügen: Sie haben zwei Möglichkeiten, eigene benutzerdefinierte Rahmen hinzuzufügen. Die erste Option verwendet Bilder und die zweite Option verwendet CSS-Rahmen und CSS3-Eigenschaften, um abgerundete Rahmen zu erstellen. Wenn Sie die zweite Option verwenden, werden die abgerundeten Ecken nicht in Internet Explorer-Browsern angezeigt. Option 1 In diesem Abschnitt wird gezeigt, wie die Getting Started-Fenster Favorite und How-To Video-Titelfarben geändert werden. Die zu ändernde. CSS-Datei ltCSS locationgtbuxguidancePageskinclaro. css Folgende Selektoren müssen geändert werden: Für den Favoriten-Titel -.bux-guidancePage-section-title Für den Titel "How-to Videos" -.bux-guidancePage-CBT - Item-title Ändert folgendes von diesem Beispiel: Anwendungsleiste In diesem Abschnitt werden die Schritte beschrieben, die zum Re-Branding der Anwendungsleiste getroffen wurden. Die Standard-Anwendungsleiste ist in Abbildung 10 dargestellt. Abbildung 10. Die standardmäßige Anwendungsleiste in IBM Cognos Business Insight Nach dem Re-Branding hat die Anwendungsleiste den neuen grünen Farbton wie in Abbildung 11 gezeigt. Abbildung 11. Die Anwendungsleiste , Die geändert wurde, um das neue grüne Format zu verwenden. Die CSS-Dateien, die für diese Änderung benötigt werden, sind: ltCSS locationgtbuxbannerskinclaro. css ltCSS locationgtbuxcontrolsskinclaro. css Die Speicherorte der Bilddateien ltUI image locationgtbanner ltUI image locationgticons Dieser Abschnitt zeigt, wie Um das Hintergrundbild für die Anwendungsleiste zu ändern. Anstelle von mehreren kleinen Bilddateien sind alle Bilder in einer Bilddatei enthalten (siehe Abbildung 12) und durch Koordinaten referenziert. Abbildung 12. Hintergrundbilder für die Standard-Anwendungsleiste Die zu ändernde. CSS-Datei ltCSS locationgtbuxbannerskinclaro. css Der Selektor, der geändert werden soll, lautet:.buxBannerbar. buxBannerSection. Ändern Sie die folgenden Punkte: In diesem Abschnitt wird gezeigt, wie Sie die Symbole für die Anwendungsleiste ändern können. Alle Symbole beziehen sich auf das gleiche Bild-Sprite. Jedes Symbol hat seine eigene Klasse definiert, weil sie unterschiedliche Hintergrund-Positionswerte benötigen. Hier wird nur das Bild Sprite aktualisiert, so müssen Sie sicherstellen, dass Sie die gleichen Positionen und Größen halten, wenn Sie ein anderes Bild Sprite. Abbildung 13. Die Symbole für die Standard-Anwendungsleiste Die zu modifizierende. CSS-Datei ltCSS locationgtbuxerskclock. css Um die in der Anwendungsleiste verwendeten Symbole zu ändern, muss die für jedes der Symbole spezifische CSS-Klasse aktualisiert werden. Dieses Update kann für alle Klassen auf einmal durchgeführt werden, wie unten gezeigt. Ändern Sie das folgende aus diesem Abschnitt: In diesem Abschnitt wird gezeigt, wie die Farbe der Steuerelementbeschriftungen wie Layout und Style geändert werden kann. Abbildung 14. Das Layout - und Style-Steuerelement Die zu ändernde. CSS-Datei ltCSS locationgtbuxbannerskinclaro. css Dieses Update kann für alle CSS-Klassen auf einmal durchgeführt werden, indem die unten aufgeführte Regel verwendet wird. Ändern Sie folgendes von diesem: Dropdown-Menü-Indikatoren In diesem Abschnitt wird gezeigt, wie Sie die Dropdown-Menü-Anzeigen auf der Anwendungsleiste ändern können. Es ist wichtig zu beachten, dass diese Änderung alle Dropdown-Menü-Indikatoren in IBM Cognos Business Insight aktualisiert. Abbildung 15. Dropdown-Menü-Anzeige Die zu ändernde. CSS-Datei ltCSS locationgtbuxcontrolskinclaro. css Der zu ändernde Selektor ist:.claro. dijitArrowButtonInner Ändern Sie hierzu den folgenden Inhalt: Inhalt Bereich In diesem Abschnitt werden die Schritte beschrieben, Markieren Sie den Inhaltsbereich. Der Standard-Inhaltsbereich wird in Abbildung 16 angezeigt. Abbildung 16. Der standardmäßige Inhaltsbereich Nach dem Durchführen des Neu-Branding-Vorgangs wird das Inhaltsfenster mit dem neuen grünen Farbton wie in Abbildung 17 dargestellt angezeigt Neue grüne Farbtöne Die. CSS-Dateien, die für diese Änderung benötigt werden, sind: ltCSS locationgtbuxcontentPaneskinclaro. css ltCSS locationgtbuxbordercontainerskinclaro. css Die Speicherorte der Bilddateien für den Inhaltsbereich sind: ltUI image locationgtimagesicons ltUI image locationgtformicons ltUI image locationgtcollapsablepane Mauszeiger und Auswahl-Highlights Dies Abschnitt wird gezeigt, wie die Hintergrundfarbe für die hervorgehobenen Elemente in der Struktur geändert wird. Abbildung 18. Das Menü Meine Ordner im Inhaltsbereich mit einem blauen Markierungsfeld Die zu ändernde. CSS-Datei ltCSS locationgtbuxtreeskinclaro. css Die zu ändernden Selektoren sind:.claro. dijitTreeRowSelected. claro. dijitTreeRowActive. claro. dijitTreeRowHover To Aktualisieren Sie die Randfarbe und die Hintergrundfarben, fügen Sie das folgende an der Unterseite der Datei hinzu. Background und Teiler Dieser Abschnitt zeigt, wie die neue Hintergrundfarbe, neue Hintergrundfarbe für den Inhalt-Teiler und neue Hintergrundfarbe für den openclose Inhalt Bereich geändert wird Taste. Die zu ändernden. CSS-Dateien sind: ltCSS locationgtbuxcontentPaneskinclaro. css ltCSS locationgtbuxbordercontainerskinclaro. css Folgende Selektoren müssen geändert werden: Für die Haupt-Hintergrundfarbe:.bux-contentpane-controls-section. icdContentpaneToolbarContainer. bux-contentpane-border-container Für den Teiler:.icdUI. dijitSplitterV. icdUI. dijitSplitterH. icdUI. dijitSplitterHHover Für die Schaltfläche openclose:.icdUI. dijitSplitterV. dijitSplitterThumb Um die Hintergrundfarbe zu aktualisieren, ändern Sie in der Datei buxcontentPaneskinclaro. css Folgendes: Aktualisieren Sie den Hintergrund des Inhaltsbereichs-Teilers in der Datei buxbordercontainerskinclaro. css ändern Sie folgendes von diesem: Um die Schaltfläche contentcontainerskinclaro. css in der Datei buxbordercontainerskinclaro. css zu aktualisieren, gehen Sie wie folgt vor: In diesem Abschnitt wird gezeigt, wie Sie die Datei ändern können Hintergrundfarbe der Registerkarten auf Maus über. Beachten Sie, dass auch die Registerkarten in den Eigenschaftsdialogen geändert werden. Abbildung 19. Menü "Tabs" Die zu ändernde. CSS-Datei ltCSS locationgtbuxcontentPaneskinclaro. css Folgende Selektoren müssen geändert werden: Für normalen Status -.claro. dijitTab. dijitTabContent Für den Mausover-Status -.claro. dijitTabHover. dijitTabContent Für aktive (Angeklickt) Zustand -.claro. DijitTabActive. dijitTabContent Um die Hintergrundfarbe für den normalen Status zu aktualisieren, fügen Sie folgendes am unteren Rand der Datei hinzu: Um die Hintergrundfarbe für den Mausover und den aktiven Status zu aktualisieren, fügen Sie folgendes am unteren Rand der Datei hinzu: In diesem Abschnitt wird gezeigt, wie Sie die Symbole für die Ansichtssteuerungen im Inhaltsbereich. Alle Symbole beziehen sich auf das gleiche Bild-Sprite. Jedes Symbol hat seine eigene Klasse definiert, weil sie unterschiedliche Hintergrund-Positionswerte benötigen. Hier aktualisieren wir nur das Bild-Sprite, so dass Sie sicherstellen müssen, dass Sie genau die gleichen Positionen und Größen beibehalten, wenn Sie ein anderes Bild-Sprite verwenden. Abbildung 20. Beispiel für Symbole im Inhaltsbereich Die zu modifizierende. CSS-Datei ltCSS locationgt buxcontentPaneskinclaro. css Um die für die View-Steuerelemente im Inhaltsfenster verwendeten Symbole zu ändern, muss die CSS-Klasse, die für jedes der Symbole spezifisch ist, sein aktualisiert. Dieses Update kann für alle Klassen auf einmal mit der unten angegebenen Regel durchgeführt werden. Ändern Sie Folgendes in diesem Abschnitt: In diesem Abschnitt wird gezeigt, wie Sie den Stil des Dropdown-Menüs im Inhaltsfenster ändern können. Abbildung 21. Dropdown-Menü im Inhaltsbereich Die zu ändernde. CSS-Datei ltCSS locationgtbuxcontentPaneskinclaro. css Der zu ändernde Selektor lautet:.icdContentpaneTabContainer. dijitDropDownButton. dijitButtonNode Um die Hintergrundfarbe und den Rahmen für die Dropdown-Menü hinzufügen, fügen Sie am Ende der Datei Folgendes hinzu. In diesem Abschnitt wird beschrieben, wie die Dialoge neu gebrannt werden. Es ändert alle Dialoge zur gleichen Zeit. Ein Standard-E-Mail-Verknüpfungsdialog ist in Abbildung 22 dargestellt. Abbildung 22. Das standardmäßige E-Mail-Verknüpfungsdialogfeld Nach dem Re-Branding wird der E-Mail-Verknüpfungsdialog den neuen grünen Farbton aufweisen und erscheint wie in Abbildung 23 dargestellt Link-Dialogfeld geändert, um den neuen grünen Farbton zu verwenden Die. CSS-Datei, die für diese Änderung benötigt wird, ist: Der Speicherort der Bilddateien für die Dialoge ltUI image locationgtdialogs Dieser Abschnitt zeigt, wie die Farbe für die Grenzlinie und geändert wird der Schatten. Beachten Sie, dass der Schatten in Internet Explorer nicht unterstützt wird. Die zu ändernde. CSS-Datei ltCSS locationgtbuxdialogskinclaro. css Folgende Selektoren müssen geändert werden:.icdUI. dijitDialog. icdBorder. icdBorderPopup Um die Randfarbe und den Schatten zu aktualisieren, fügen Sie am unteren Rand der Datei Folgendes hinzu. Beachten Sie, dass der Kastenschatten eine RGB-Farbe benötigt. Die Farbe ist die selbe wie 8BB093. Diese Änderung gilt auch für Popup-Menü-Rahmen. Titel und Dialogtext Dieser Abschnitt zeigt, wie Sie die Farbe des Titeltextes und die Farbe des Dialogtexts ändern können. Die zu ändernde. CSS-Datei ltCSS locationgtbuxdialogskinclaro. css Folgende Selektoren müssen geändert werden:.bux-InformationDialog-mainMessage. claro. dijitDialogTitle Ändere folgendes von diesem: Ändere auch folgendes von diesem: Dieser Abschnitt wird angezeigt Wie man die Hintergrundfarbe für Knöpfe, die Hintergrundfarbe für die Knöpfe auf Maus über und die Randfarbe der Knöpfe ändert. Abbildung 24. Beispiel für Schaltflächen in einem Dialog Die zu ändernde. CSS-Datei ltCSS locationgtbuxdialogskinclaro. css Der zu ändernde Selektor lautet:.claro. icdDialogButtonBar. dijitButtonNode Ändern Sie die folgenden Werte: Beachten Sie, dass die Hintergrundfarbe der Schaltflächen aktiviert ist Wird die Maus über die Eigenschaft background-image gesetzt. In diesem Abschnitt wird gezeigt, wie die Hintergrundfarbe und die Rahmenlinie für die Kopf - und Fußzeilenbereiche der Dialoge geändert werden. Die zu ändernde. CSS-Datei ltCSS locationgtbuxdialogskinclaro. css Folgende Selektoren müssen geändert werden:.claro. dijitDialogTitleBar. claro. dijitDialogPaneActionBar Um die Hintergrundfarbe und die untere Grenze für die Kopfzeile zu aktualisieren, ändern Sie die folgenden Schritte: Aktualisieren Die Hintergrundfarbe und der obere Rand für die Fußzeile ändern die folgenden von diesem: In diesem Abschnitt wird gezeigt, wie der Stil des Dialogfelds Schließen in Dialogen geändert wird. Abbildung 25. Das Dialogfeld "Schließen" in Dialogfeldern Die zu ändernde. CSS-Datei ltCSS locationgtbuxdialogskinclaro. css Der zu ändernde Selektor lautet:.claro. dijitDialogCloseIcon Ändern Sie Folgendes in diesem Abschnitt: In diesem Abschnitt werden die Schritte beschrieben, die zum Re-Branding des Systems erforderlich sind On-Demand-Symbolleiste auf der Widgets. Ein Beispiel-Standard-Widget-Kästchen ist in Abbildung 26 dargestellt. Abbildung 26. Die Standard-Widget-Box Nach dem Re-Branding wird das Widget-Feld den neuen grünen Farbton aufweisen und erscheint wie in Abbildung 27. Abbildung 27. Die Widget-Box wurde geändert Verwenden Sie das neue grüne Format Die. CSS-Datei, die für diese Änderung benötigt wird: ltCSS locationgtbuxwidget skinclaro. css Die Speicherorte der Bilddateien für die Widget-Box: ltUI image locationgtimageswidgets Dieser Abschnitt zeigt, wie die Hintergrundfarbe des On - Demand-Symbolleiste. Die zu ändernde. CSS-Datei ltCSS locationgtbuxtoolbarskinclaro. css Der Selektor, der geändert werden soll, ist:.bux-toolbar Ändern Sie das folgende aus diesem Abschnitt: In diesem Abschnitt wird gezeigt, wie das Bild für die blaue Punktmenü-Schaltfläche in Abbildung 28 geändert wird Abbildung 28. Die Standard-Dot-Menü-Taste Nach dem Re-Branding hat die Dot-Menü-Taste den neuen grünen Farbton wie in Abbildung 29 dargestellt. Abbildung 29. Die Dot-Menü-Schaltfläche im neuen grünen Farbton Die. CSS-Datei muss sein Modifiziert ist: ltCSS locationgtbuxtoolbarskinclaro. css Der Selektor, der geändert werden soll, ist:.bux-toolbar-dropdown-section. dijitArrowButtonInner Ändern Sie das Folgende von diesem: In diesem Abschnitt wird gezeigt, wie Sie die Rahmenfarbe und den Schatten ändern. Das. CSS-Datei, die geändert werden soll: ltCSS locationgtbuxwidgetskinclaro. css Folgende Selektoren müssen geändert werden:.widget-border. bux-toolbar-inner Fügen Sie dem Ende der Datei Folgendes hinzu: In diesem Abschnitt werden die Schritte zum Re-Brand beschrieben Die QuickInfos. Die E-Mail-Link-Tooltip im Standard-Blau-Farbton ist in Abbildung 30 dargestellt. Abbildung 30. Die Standard-Tooltip-Box Nach dem Re-Branding wird das Tooltip-Feld und der Text mit dem neuen grünen Farbton wie in Abbildung 31 dargestellt angezeigt Modifizierte Tooltip-Box im neuen grünen Farbton Die. CSS-Datei, die für diese Änderung benötigt wird: ltCSS locationgtbuxtooltip skinclaro. css In diesem Abschnitt wird gezeigt, wie die Hintergrundfarbe der Tooltip geändert werden kann. Die zu ändernde. CSS-Datei ltCSS locationgtbuxwidgetskinclaro. css Der Selektor, der geändert werden soll, lautet:.claro. dijitTooltip. dijitToolbar Um die Hintergrundfarbe und den unteren Rand zu aktualisieren, fügen Sie folgendes am unteren Rand der Datei hinzu: Dieser Abschnitt wird Zeigen, wie die Farbe des Tooltip-Titels und die Farbe des Beschreibungstextes geändert wird. Die zu ändernde. CSS-Datei ltCSS locationgtbuxtooltipskinclaro. css. Folgende Selektoren müssen geändert werden:.bux-tooltip-title. bux-tooltip-text Ändere folgendes von diesem: In diesem Abschnitt wird gezeigt, wie die Farbe für den Rahmen geändert werden kann. Die zu ändernde. CSS-Datei ltCSS locationgtbuxwidgetskinclaro. css Der Selektor, der geändert werden soll, lautet:.claro. dijitTooltipContainer Um die Hintergrundfarbe und die obere Randgrenze zu aktualisieren, fügen Sie folgendes am unteren Rand der Datei hinzu: In diesem Abschnitt werden die Schritte beschrieben Um die Menüs wieder zu markieren. Das Standardhauptmenü von IBM Cognos Business Insight ist in Abbildung 32 dargestellt. Abbildung 32. Das standardmäßige IBM Cognos Business Insight-Hauptmenü Nach dem erneuten Branding wird das Hauptmenü den neuen grünen Farbton aufweisen und wie in Abbildung 33 dargestellt angezeigt Das Hauptfenster von IBM Cognos Business Insight wurde geändert, um den neuen grünen Farbton zu verwenden. Die CSS-Datei, die für diese Änderung benötigt wird, lautet: Die Orte der Bilddateien für die Menüs: Menüpunkte Maus über Effekt In diesem Abschnitt wird gezeigt, Farbe der Maus über auf Menüpunkt. Die zu ändernde. CSS-Datei ltCSS locationgtbuxmenu. css Folgende Selektoren müssen geändert werden:.claro. dijitMenuActive. dijitMenuItemHover. claro. dijitMenuActive. dijitMenuItemSelected Ändern Sie das folgende aus diesem Abschnitt: In diesem Abschnitt wird gezeigt, wie Sie die Farbe von ändern Der Untermenü-Indikator Die zu ändernde. CSS-Datei ltCSS locationgtbuxmenu. css Der zu ändernde Selektor ist:.claro. dijitMenuExpandgt Ändern Sie folgendes: Anhang A - Beispiel Das in diesem Dokument verwendete Beispiel steht Ihnen zur Verfügung Als Leitlinie oder als Ausgangspunkt. Um das Beispiel zu entpacken, entpacken Sie die Dateien nach ltC10, installieren Sie locationgtwebcontent. Es sollte eine Anzahl von mb. css Dateien unter ltCSS locationgt geben und die Bilder, auf die in diesem Dokument verwiesen wird, sollten sich in ihren jeweiligen Ordnern befinden. Um die MyBank-Skin anzuwenden, müssen Sie die optimierte CSS-Datei regenerieren, wie im Abschnitt "Optimierte CSS erstellen" beschrieben. Eine einfache Möglichkeit, um loszulegen wäre, Ihre eigene Farbtabelle zu erstellen und aktualisieren Sie unsere MyBank-Beispiel, indem Sie eine Suche und ersetzen Sie die alten Farben mit den neuen Farben. Einführung Iconfinder Pro - Flatrate Premium-Vektor-Icons. Mehr erfahren. Loggen Sie sich ein Durchsuchen Designer Was bieten wir Iconfinder Pro Erhalten Sie Zugang zur weltgrößten Sammlung von Icons. Kundenspezifisches Ikonen-Design Mieten Sie die weltbesten Ikonenentwerfer für Ihr folgendes kundenspezifisches Ikonenentwurf. Extended Library Host eine Icon-Bibliothek in Ihrer eigenen Benutzeroberfläche. Empfehlungsprogramm Laden Sie Freunde zu Iconfinder ein und verdienen Sie Geld für jedes Abonnement und jede Einzahlung. API-Lösung Geben Sie Ihren Benutzern sofortigen Zugriff auf die weltweit größte Iconsammlung. Werden Sie Beitragende Schließen Sie sich der am schnellsten wachsenden Gemeinschaft professioneller Illustratoren an. Icon-Format Beliebige Free Premium Lizenztyp Keine Lizenzfilterung Keine Lizenzfilterung Lesen Sie immer die Lizenz für die Symbole, bevor Sie sie verwenden. Für kommerzielle Nutzung können Einschränkungen wie das Hinzufügen eines Links zurück zu Designer-Website enthalten. Kein Link zurück Für kommerzielle Nutzung und erfordert keine Verlinkung zurück auf die Designer-Website. Lesen Sie mehr über Lizenzen Hintergrund Forex Symbole gefunden