打造 Web 门户的品牌

适用范围: SQL Server 2016 (13.x) Reporting Services 及更高版本 Power BI 报表服务器

你可以根据业务设置 Web 门户品牌,从而改变 Web 门户的外观。 使用品牌包可以实现此目的。 品牌包已经设计好,所以无需深入了解级联样式表 (CSS) 即可进行创建。

创建品牌包

Reporting Services 的品牌包由三项组成,被打包为一个 zip 文件。

  • colors.json
  • metadata.xml
  • logo.png(可选)

文件必须采用上述名称。 将这些文件打包为 zip 文件。 zip 文件可以根据你的喜好进行命名。

metadata.xml

metadata.xml 文件可以设置品牌包的名称,并且含有 colors.json 和 logo.png 文件的引用项。

若要更改品牌包的名称,请更改 SystemResourcePackage 元素的 name 属性。

    name="Multicolored example brand"  

你还可以选择在品牌包中包含一张徽标图片。 Contents 元素中会列出此选项。

不使用徽标文件的示例。

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

使用徽标文件的示例。

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

colors.json

上传品牌包时,服务器会从 colors.json 文件中提取相应的名称/值对,并使用主 LESS 样式表 brand.less 将其合并。 然后对此 LESS 文件进行处理,并且将生成的 CSS 文件提供给客户端。 样式表中的所有颜色都遵循六个字符的颜色十六进制表示形式。

LESS 样式表中包含了引用预定义 LESS 变量的块,如下所示。

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

此语法与 CSS 类似,带有 @symbol 前缀的颜色值对 LESS 而言是唯一的。 这些颜色值是变量,变量值由 json 文件设置。

例如,如果 colors.json 文件具有以下值。

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

经过处理的输出会查看 @primaryButtonBg LESS 变量,并确保它映射到了名为 primary的 json 属性(在此示例中是 #009900)。 这样才能输出正确的 CSS。

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

所有主要按钮将呈深绿色,而文本呈白色。

Reporting Services 的 colors.json 文件有两种主要类别,项按这两种类别分组。

  • 接口:包括特定于 Reporting Services Web 门户的项。
  • 主题:包括特定于所创建的移动报表中的项。

接口部细分为下列分组。

部分 说明
按钮和悬停颜色。
辅助副本 标题栏、搜索栏、左侧菜单(如果显示)以及这些项的文本颜色
中性第一级 主区域和报表区域背景。
中性第二级 文本框和文件夹选项背景,以及设置菜单。
中性第三级 站点设置背景。
危险/警告/成功消息 这些消息的颜色。
KPI 对好 (1),中 (0),中 (-1) 和无的颜色进行控制。

第一次使用移动报表发布服务器连接到部署了品牌包的服务器时,主题会添加到应用右上角菜单中的可用主题中。

“选择调色板”对话框的屏幕截图。

然后你就可以对所创建的任何移动报表使用该主题,即使报表不适用于已在其上部署主题的同一服务器。

如果包含了带品牌包的徽标,徽标将显示在 Web 门户中,并替代你在“站点设置”菜单中为 Web 门户设置的名称。

包含徽标的文件必须使用 PNG 文件格式。 上传到服务器后文件大小会增大。 它应缩放到大约 290 像素 x 60 像素。

将品牌包应用于 Web 门户

按照以下步骤添加、下载或删除品牌包。

  1. 选择右上角的“齿轮” 。

  2. 选择“站点设置”。

    “设置”下拉列表的屏幕截图,其中突出显示了“网站设置”选项。

  3. 选择“品牌” 。

    “网站设置”页面的屏幕截图,其中选择了“品牌打造”选项。

“当前已安装的品牌包”会显示已上传的包的名称,或者显示“无”。

“上传品牌包”会提示你从本地文件夹中选择一个 zip 文件,然后将该包应用到 Web 门户。 你将看到操作立即生效。

你还可以 下载删除 包。 删除包会立即将 Web 门户重置为默认品牌。

metadata.xml 示例

<?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 示例

{  
    "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",
        
        "itemTypeIconColor":"#ffffff",
        "reportIconBackground":"#12239e",
        "excelIconBackground":"#217346",
        "folderIconBackground":"#4668c5",
        "datasetIconBackground":"#c94f0f",
        "otherIconBackground":"#000000", 
        
        "primaryButton": "#bb2124",
        "primaryButtonHover": "#d31115",
        "primaryButtonPressed": "#3d0000", 
        
        "link": "#d31115",
        "linkHover": "#671215",
        "linkVisited": "#3d0000", 
        
        "radioButtonCheckBox": "#bb2124",
        "radioButtonCheckBoxHover": "#d31115"        
        },  
        "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"  
    }  
}  

下载示例品牌包

将示例从 GitHub 品牌打造包示例下载到本地文件夹。 有关更多信息,请参阅本文中的将品牌包应用于 Web 门户部分。

更多疑问? 请访问 Reporting Services 论坛