Personalización de marca del portal webBranding the web portal

SE APLICA A:APPLIES TO: SQL Server 2016 Reporting Services y versiones posteriores Power BI Report Server SQL Server 2016 Reporting Services y versiones posteriores Power BI Report Server

Puede modificar la apariencia del portal web personalizándolo con la marca de su empresa.You can alter the appearance of the web portal by branding it to your business. Esto se realiza mediante un paquete de marca.This is done through a brand package. El paquete de marca se ha diseñado de forma que no deba estar muy familiarizado con las hojas de estilo CSS para crearlo.The brand package is designed so you don't need deep cascading style sheet (CSS) knowledge to create it.

Creación del paquete de marcaCreating the brand package

Un paquete de marca para Reporting Services se compone de tres elementos y se empaqueta como archivo ZIP.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 (opcional)logo.png (optional)

Los archivos deben tener los nombres especificados arriba.The files must have the names listed above. Sin embargo, el archivo ZIP puede tener el nombre que quiera.The zip file can be named however you like.

metadata.xmlmetadata.xml

El archivo metadata.xml permite establecer el nombre del paquete de marca y presenta una entrada de referencia para los archivos colors.json y logo.png.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.

Para modificar el nombre del paquete de marca, cambie el valor del atributo name del elemento SystemResourcePackage .To change the name of your brand package, change the name attribute of the SystemResourcePackage element.

    name="Multicolored example brand"  

También puede incluir una imagen de logotipo en el paquete de marca.You can optionally include a logo picture in your brand package. Este elemento aparecerá dentro de Contents.This item would be listed within the Contents element.

Ejemplo sin un archivo de logotipo.Example without a logo file.

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

Ejemplo con un archivo de logotipo.Example with a logo file.

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

colors.jsonColors.json

Cuando se carga el paquete de marca, el servidor extrae los pares nombre-valor del archivo colors.json y los combina con la hoja de estilos LESS maestra, 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. Después, este archivo LESS se procesa y el archivo CSS resultante se envía al cliente.This LESS file is then processed and the resulting CSS file is served to the client. Todos los colores de la hoja de estilos siguen la representación hexadecimal de seis caracteres de un color.All colors in the stylesheet follow the six-character hexadecimal representation of a color.

La hoja de estilos LESS contiene bloques que hacen referencia a algunas variables LESS predefinidas, como las siguientes:The LESS stylesheet contains blocks that reference some predefined LESS variables like the following.

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

Aunque se parece a la sintaxis CSS, los valores de color, que llevan @symbol como prefijo, son exclusivos de LESS.While this resembles CSS syntax, the color values, prefixed with the @symbol, are unique to LESS. Se trata de variables cuyo valor lo establece el archivo JSON.They are variables whose values are set by the json file.

Por ejemplo, si el archivo colors.json tiene los siguientes valores:For example, if the colors.json file had the following values.

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

La salida procesada buscaría la variable de LESS @primaryButtonBg y vería que está asignada a una propiedad de JSON llamada primary , que en este ejemplo es #009900.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. Por lo tanto, generaría el CSS correcto.It would therefore output the proper CSS.

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

Todos los botones principales se representarían en verde oscuro con el texto en blanco.All of the primary buttons would be rendered dark green with white text.

Para Reporting Services, el archivo colors.json tiene dos categorías principales en las que se agrupan los elementos.The colors.json file, for Reporting Services, has two main categories which items are grouped.

  • interface : incluye los elementos específicos del portal web de Reporting Services.Interface : includes items that are specific to the Reporting Services web portal.
  • theme : incluye los elementos específicos de los informes móviles que cree.Theme : includes items that are specific to mobile reports that you create.

La sección interface se desglosa en las siguientes agrupaciones:The interface section is broken down into the following groupings.

SecciónSection DescripciónDescription
PrincipalPrimary Colores de los botones y de desplazamiento.Button and hover colors.
SecundarioSecondary Color de la barra de título, la barra de búsqueda, el menú izquierdo (si se muestra) y el texto.Title bar, search bar, left hand menu (if displayed) and text color for those items
neutralPrimaryNeutral Primary Fondos del área del informe y de inicio.Home and report area backgrounds.
neutralSecondaryNeutral Secondary Fondos de opciones de carpeta y cuadro de texto, así como del menú de configuración.Text box and folder options backgrounds, and the settings menu.
neutralTertiaryNeutral Tertiary Fondos de la configuración del sitio.Site settings backgrounds.
Mensajes de peligro (danger), advertencia (warning) y operación correcta (success)Danger/Warning/Success messages Colores de esos mensajes.Colors for those messages.
KPIKPI Controla los colores para KPI buenos (1), neutrales (0), neutrales (-1) y ninguno.Controls the colors for a good (1), neutral (0), neutral (-1) and none.

La primera vez que se conecte con el Publicador de informes móviles a un servidor que tenga implementado un paquete de marca, se agregará el tema a los temas disponibles en el menú de la esquina superior derecha de la aplicación.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.

Captura de pantalla del cuadro de diálogo Elegir una paleta de colores.

Después, puede usar este tema para los informes móviles que cree, aunque no estén destinados al mismo servidor donde tenga implementado el tema.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.

Si incluye un logotipo en el paquete de marca, se mostrará en el portal web en lugar del nombre establecido para aquel en el menú Configuración del sitio.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.

El archivo que incluya para el logotipo debe presentar el formato PNG.The file you include for the logo must use the PNG file format. Las dimensiones del archivo se adaptarán una vez que se cargue al servidor.The file dimensions will be scaled once uploaded to the server. Se adaptarán para que presenten unos valores de unos 290 x 60 píxeles.It should scale to around 290px x 60px.

Aplicación del paquete de la marca al portal webApplying the brand package to the web portal

Para agregar, descargar o quitar un paquete de marca, puede hacer lo siguiente:To add, download, or remove a brand package, you can do the following.

  1. Seleccione el icono de engranaje de la esquina superior derecha.Select the gear in the upper right.

  2. Seleccione Configuración del sitio.Select Site Settings.

    Captura de pantalla de la lista desplegable de configuración con la opción Configuración del sitio seleccionada.

  3. Seleccione la personalización de marca.Select Branding.

    Captura de pantalla de la página Configuración del sitio con la opción Personalización de marca seleccionada.

En Currently installed brand package (Paquete de marca instalado actualmente) se mostrará el nombre del paquete que se ha cargado o Ninguno.Currently installed brand package will either display the name of the package that has been uploaded, or it will display None.

La opción Upload brand package (Cargar paquete de marca) aplicará el paquete al portal web.Upload brand package will apply the package to the web portal. Verá que los cambios surten efecto de inmediato.You will see it take effect immediately.

También puede descargarse o quitar el paquete.You can also Download or Remove the package. Si quita el paquete, se restablecerá inmediatamente el portal web a la marca predeterminada.Removing the package will reset the web portal to the default brand immediately.

Ejemplo de metadata.xmlmetadata.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>  

Ejemplo de colors.jsonColors.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"  
    }  
}  

Pasos siguientesNext steps

¿Tiene alguna pregunta más?More questions? Puede plantear sus dudas en el foro de Reporting Services.Try asking the Reporting Services forum