Branding des WebportalsBranding the web portal

GILT FÜR:APPLIES TO: SQL Server 2016 Reporting Services und höher Power BI-Berichtsserver SQL Server 2016 Reporting Services und höher Power BI-Berichtsserver

Sie können die Darstellung des Webportals ändern, indem Sie es an das eigene Unternehmen anpassen.You can alter the appearance of the web portal by branding it to your business. Dies erfolgt über ein Markenpaket.This is done through a brand package. Das Markenpaket wurde entwickelt, damit Sie keine umfassenden Kenntnisse über das Cascading Stylesheet (CSS) benötigen, um es zu erstellen.The brand package is designed so you don't need deep cascading style sheet (CSS) knowledge to create it.

Erstellen des MarkenpaketsCreating the brand package

Ein Markenpaket für Reporting Services besteht aus drei Elementen und wird als ZIP-Datei verpackt.A brand package for Reporting Services consists of three items and is packaged as a zip file.

  • colors.jsoncolors.json
  • metadata.xmlmetadata.xml
  • logo.png (optional)logo.png (optional)

Die Dateien müssen die oben aufgeführten Namen aufweisen.The files must have the names listed above. Die ZIP-Datei kann jedoch beliebig benannt werden.The zip file can be named however you like.

metadata.xmlmetadata.xml

Mit der Datei „metadata.xml“ können Sie den Namen des Markenpakets festlegen. Sie verfügt ebenso jeweils über einen Verweis auf Ihre „colors.json“- und „logo.png“-Dateien.The metadata.xml file allows you to set the name of the brand package, and has a reference entry for both your colors.json and logo.png files.

Um den Namen des Markenpakets zu ändern, ändern Sie das Attribut Name des Elements SystemResourcePackage .To change the name of your brand package, change the name attribute of the SystemResourcePackage element.

    name="Multicolored example brand"  

Sie können optional ein Logobild in Ihr Markenpaket einschließen.You can optionally include a logo picture in your brand package. Dieses Element wird innerhalb des Elements „Inhalt“ aufgelistet.This item would be listed within the Contents element.

Beispiel ohne eine Logodatei.Example without a logo file.

<Contents>  
    <Item key="colors" path="colors.json" />  
</Contents>  

Beispiel mit einer Logodatei.Example with a logo file.

<Contents>  
    <Item key="colors" path="colors.json" />  
    <Item key="logo" path="logo.png" />  
</Contents>  

Colors.jsonColors.json

Wenn das Markenpaket hochgeladen wird, extrahiert der Server die entsprechenden Name/Wert-Paare aus der „colors.json“-Datei und verbindet sie mit dem LESS-Masterstylesheet „brand.less“.When the brand package is uploaded, the server extracts the appropriate name/value pairs from the colors.json file and merges them with the master LESS stylesheet, brand.less. Diese LESS-Datei wird verarbeitet, und die resultierende CSS-Datei an den Client übermittelt.This LESS file is then processed and the resulting CSS file is served to the client. Alle Farben im Stylesheet folgen der hexadezimalen Darstellung einer Farbe mit sechs Zeichen.All colors in the stylesheet follow the six-character hexadecimal representation of a color.

Das LESS-Stylesheet enthält Blöcke, die auf einige vordefinierte LESS-Variablen wie die folgenden verweisen.The LESS stylesheet contains blocks that reference some predefined LESS variables like the following.

/* primary buttons */   
.btn-primary {   
    color:@primaryButtonColor;   
    background-color:@primaryButtonBg;   
}  

Obwohl dies der CSS-Syntax ähnelt, sind die Farbwerte, die mit dem Präfix @symbol versehen sind, für LESS eindeutig.While this resembles CSS syntax, the color values, prefixed with the @symbol, are unique to LESS. Sie sind Variablen, deren Werte von der JSON-Datei festgelegt werden.They are variables whose values are set by the json file.

Wenn beispielsweise die colors.json-Datei die folgenden Werte hätte.For example, if the colors.json file had the following values.

"primary":"#009900",   
"primaryContrast":"#ffffff"   

Die verarbeitete Ausgabe ruft die LESS-Variable @primaryButtonBg auf und stellt sicher, dass sie der JSON-Eigenschaft primary zugeordnet wird, die in diesem Beispiel #009900 ist.The processed output would look up the @primaryButtonBg LESS variable and see that it maps to the json property called primary , which in this example is #009900. Daher würde die richtige CSS ausgegeben werden.It would therefore output the proper CSS.

    .btn-primary {   
        color:#ffffff;   
        background-color:#009900;   
    }  

Alle primären Schaltflächen würden dunkelgrün mit weißem Text gerendert werden.All of the primary buttons would be rendered dark green with white text.

Die Datei colors.json für Reporting Services ist in zwei Hauptkategorien unterteilt, deren Elemente gruppiert sind.The colors.json file, for Reporting Services, has two main categories which items are grouped.

  • Schnittstelle : enthält Elemente, die für das Reporting Services-Webportal spezifisch sind.Interface : includes items that are specific to the Reporting Services web portal.
  • Design : enthält Elemente, die für von Ihnen erstellte mobile Berichte spezifisch sind.Theme : includes items that are specific to mobile reports that you create.

Der Schnittstellen-Abschnitt ist in folgenden Gruppierungen unterteilt.The interface section is broken down into the following groupings.

SectionSection BESCHREIBUNGDescription
PrimärPrimary Schaltflächen- und Hoverfarben.Button and hover colors.
SecondarySecondary Titelleiste, Suchleiste, linkes Menü (sofern angezeigt) und die Textfarbe für diese ElementeTitle bar, search bar, left hand menu (if displayed) and text color for those items
Neutral PrimaryNeutral Primary Hintergründe für Startseiten- und Berichtsbereich.Home and report area backgrounds.
Neutral SecondaryNeutral Secondary Hintergründe für Textfeld- und Ordneroptionen sowie das Menü „Einstellungen“.Text box and folder options backgrounds, and the settings menu.
Neutral TertiaryNeutral Tertiary Hintergründe für Siteeinstellungen.Site settings backgrounds.
Gefahr-/Warn-/ErfolgsmeldungenDanger/Warning/Success messages Farben für diese Meldungen.Colors for those messages.
KPIKPI Steuert die Farben für eine gute (1), neutrale (0), neutrale (-1) und keine.Controls the colors for a good (1), neutral (0), neutral (-1) and none.

Wenn Sie sich zum ersten Mal mit Mobile Report Publisher auf einem Server anmelden, der über ein bereitgestelltes Markenpaket verfügt, wird das Design den verfügbaren Designs zugeordnet, die Sie im oberen rechten Menü der App verwenden können.The first time you connect to a server with the Mobile Report Publisher, that has a brand package deployed, the theme will be added to the available themes you can use in the upper right-hand menu of the app.

Screenshot des Dialogfelds „Farbpalette auswählen“

Dann können Sie dieses Design für alle mobilen Berichte verwenden, die Sie erstellen, auch wenn sie nicht für den gleichen Server vorgesehen sind, auf dem Sie das Design bereitgestellt haben.You can then use that theme for any mobile reports that you create, even if they aren't for the same server that you have the theme deployed on.

Wenn Sie ein Logo mit Ihrem Markenpaket einschließen, wird es im Webportal anstelle des Namens angezeigt, den Sie für das Webportal im Menü "Einstellungen" festgelegt haben.If you include a logo with your brand package, it will appear in the web portal in place of the name you set for the web portal in the Site Settings menu.

Die Datei, die Sie für das Logo einschließen, muss im PNG-Dateiformat vorliegen.The file you include for the logo must use the PNG file format. Die Dateidimensionen werden skaliert, sobald sie auf den Server hochgeladen werden.The file dimensions will be scaled once uploaded to the server. Er sollten auf ungefähr 290px x 60px skalieren.It should scale to around 290px x 60px.

Anwenden des Markenpakets auf das WebportalApplying the brand package to the web portal

Um ein Markenpaket hinzuzufügen, herunterzuladen oder zu entfernen, können Sie Folgendes tun:To add, download, or remove a brand package, you can do the following.

  1. Wählen Sie das Zahnradsymbol in der oberen rechten Ecke aus.Select the gear in the upper right.

  2. Wählen Sie Siteeinstellungen aus.Select Site Settings.

    Screenshot der Dropdownliste „Einstellungen“ mit hervorgehobener Option „Siteeinstellungen“

  3. Wählen Sie Branding aus.Select Branding.

    Screenshot der Seite „Siteeinstellungen“ mit ausgewählter Option „Branding“

Zurzeit installiertes Markenpaket zeigt entweder den Namen des Pakets an, das hochgeladen wurde, oder es zeigt „Keines“ an.Currently installed brand package will either display the name of the package that has been uploaded, or it will display None.

Markenpaket hochladen übernimmt das Paket für das Webportal.Upload brand package will apply the package to the web portal. Sie werden sehen, dass dies sofort wirksam wird.You will see it take effect immediately.

Sie können das Paket auch Herunterladen oder Entfernen .You can also Download or Remove the package. Das Entfernen des Pakets führt zum sofortigen Zurücksetzen des Webportals auf das Standardbranding.Removing the package will reset the web portal to the default brand immediately.

metadata.xml-Beispielmetadata.xml example

<?xml version="1.0" encoding="utf-8"?>  
<SystemResourcePackage xmlns="http://schemas.microsoft.com/sqlserver/reporting/2016/01/systemresourcepackagemetadata"  
    type="UniversalBrand"  
    version="2.0.2"  
    name="Multicolored example brand"  
    >  
    <Contents>  
        <Item key="colors" path="colors.json" />  
        <Item key="logo" path="logo.png" />  
    </Contents>  
</SystemResourcePackage>  

colors.json-BeispielColors.json example

{  
    "name":"Multicolored example brand",  
    "version":"1.0",  
    "interface":{  
        "primary":"#b31e1e",  
        "primaryAlt":"#ca0806",  
        "primaryAlt2":"#621013",  
        "primaryAlt3":"#e40000",  
        "primaryAlt4":"#e14e50",  
        "primaryContrast":"#fff",  

        "secondary":"#042200",  
        "secondaryAlt":"#0f4400",  
        "secondaryAlt2":"#155500",  
        "secondaryAlt3":"#217700",  
        "secondaryContrast":"#49e63c",  

        "neutralPrimary":"#d8edff",  
        "neutralPrimaryAlt":"#c9e6ff",  
        "neutralPrimaryAlt2":"#aedaff",  
        "neutralPrimaryAlt3":"#88c8ff",  
        "neutralPrimaryContrast":"#0a2b4c",  

        "neutralSecondary":"#e9d8eb",  
        "neutralSecondaryAlt":"#d9badc",  
        "neutralSecondaryAlt2":"#b06cb5",  
        "neutralSecondaryAlt3":"#a75bac",  
        "neutralSecondaryContrast":"#250a26",  

        "neutralTertiary":"#f79220",  
        "neutralTertiaryAlt":"#f8a54b",  
        "neutralTertiaryAlt2":"#facc9b",  
        "neutralTertiaryAlt3":"#fce3c7",  
        "neutralTertiaryContrast":"#391d00",  

        "danger":"#ff0000",  
        "success":"#00ff00",  
        "warning":"#ff8800",  
        "info":"#00ff",  
        "dangerContrast":"#fff",  
        "successContrast":"#fff",  
        "warningContrast":"#fff",  
        "infoContrast":"#fff",  

        "kpiGood":"#4fb443",  
        "kpiBad":"#de061a",  
        "kpiNeutral":"#d9b42c",  
        "kpiNone":"#333",  
        "kpiGoodContrast":"#fff",  
        "kpiBadContrast":"#fff",  
        "kpiNeutralContrast":"#fff",  
        "kpiNoneContrast":"#fff"  
        },  
        "theme":{  
        "dataPoints":[  
            "#0072c6",  
            "#f68c1f",  
            "#269657",  
            "#dd5900",  
            "#5b3573",  
            "#22bdef",  
            "#b4009e",  
            "#008274",  
            "#fdc336",  
            "#ea3c00",  
            "#00188f",  
            "#9f9f9f"  
        ],  

        "good":"#85ba00",  
        "bad":"#e90000",  
        "neutral":"#edb327",  
        "none":"#333",  

        "background":"#fff",  
        "foreground":"#222",  
        "mapBase":"#00aeef",  
        "panelBackground":"#f6f6f6",  
        "panelForeground":"#222",  
        "panelAccent":"#00aeef",  
        "tableAccent":"#00aeef",  

        "altBackground":"#f6f6f6",  
        "altForeground":"#000",  
        "altMapBase":"#f68c1f",  
        "altPanelBackground":"#235378",  
        "altPanelForeground":"#fff",  
        "altPanelAccent":"#fdc336",  
        "altTableAccent":"#fdc336"  
    }  
}  

Nächste SchritteNext steps

Haben Sie dazu Fragen?More questions? Stellen Sie eine Frage im Reporting Services-ForumTry asking the Reporting Services forum