웹 포털 브랜딩Branding the web portal

이 항목 적용 대상:THIS TOPIC APPLIES TO: 예SQL Server Reporting Services(2016 이상)SQL Server Reporting Services (2016 and later) 예Power BI 보고서 서버Power BI Report Server 예SQL Server Reporting Services(2016 이상)SQL Server Reporting Services (2016 and later) 예Power BI 보고서 서버Power BI Report Server

웹 포털을 비즈니스로 브랜딩하여 모양을 변경할 수 있습니다.You can alter the appearance of the web portal by branding it to your business. 이 작업은 브랜드 패키지를 통해 수행합니다.This is done through a brand package. 브랜드 패키지는 사용자가 CSS 스타일 시트에 대한 깊은 지식이 없어도 웹 포털을 만들 수 있도록 설계되었습니다.The brand package has been designed so you don’t need deep cascading style sheet (CSS) knowledge to create it.

브랜드 패키지 만들기Creating the brand package

Reporting Services의 브랜드 패키지는 3개 항목으로 구성되어 있으며 zip 파일로 패키지화되어 있습니다.A brand package for Reporting Services consists of three items and is packaged as a zip file.

  • color.jsoncolor.json
  • metadata.xmlmetadata.xml
  • logo.png(옵션)logo.png (optional)

파일 이름은 위와 동일해야 하며The files must have the names listed above. zip 파일은 원하는 대로 정할 수 있습니다.The zip file can be named however you like.

metadata.xmlmetadata.xml

metadata.xml 파일을 사용하면 브랜드 패키지의 이름을 설정할 수 있으며 이 파일에는 colors.json 및 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.

브랜드 패키지의 이름을 변경하려면 SystemResourcePackage 요소의 이름 특성을 변경합니다.To change the name of your brand package, change the name attribute of the SystemResourcePackage element.

name="Multicolored example brand"  

브랜드 패키지에 로고 사진을 포함할 수도 있습니다.You can optionally include a logo picture in your brand package. 이 항목은 Contents 요소 안에 나열됩니다.This item would be listed within the Contents element.

로고가 없는 예제Example without a logo file.

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

로고가 있는 예제Example with a logo file.

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

Colors.jsonColors.json

브랜드 패키지가 업로드되면 서버가 colors.json에서 적절한 이름/값 쌍을 추출하고 마스터 LESS 스타일시트인 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. 그런 다음 이 LESS 파일이 처리되고 결과 CSS 파일이 클라이언트에 제공됩니다.This LESS file is then processed and the resulting CSS file is served to the client. 스타일시트의 모든 색은 16진수의 6자 색 표현을 따릅니다.All colors in the stylesheet follow the six-character hexadecimal representation of a color.

LESS 스타일시트에는 다음과 같이 사전 정의된 LESS 변수를 참조하는 블록이 포함되어 있습니다.The LESS stylesheet contains blocks that reference some predefined LESS variables like the following.

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

색 값을 접두사로 CSS 구문과 유사이 @symbol에 있습니다.While this resembles CSS syntax, the color values, prefixed with the @symbol, are unique to LESS. 이러한 색 값은 json 파일에서 해당 값을 설정하는 변수입니다.They are variables whose values are set by the json file.

예를 들어 colors.json 파일의 값이 다음과 같은 경우For example, if the colors.json file had the following values.

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

처리된 출력은 @primaryButtonBg LESS 변수를 조회하고 primary라고 하는 json 속성(이 예제의 경우 #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. 따라서 올바른 CSS가 출력됩니다.It would therefore output the proper CSS.

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

모든 기본 단추는 어두운 녹색 바탕에 흰색 텍스트로 렌더링됩니다.All of the primary buttons would be rendered dark green with white text.

Reporting Services의 colors.json 파일에는 항목이 그룹화되는 두 가지 기본 범주가 있습니다.The colors.json file, for Reporting Services, has two main categories which items are grouped.

  • 인터페이스: Reporting Services 웹 포털에만 해당하는 항목이 포함됩니다.Interface: includes items that are specific to the Reporting Services web portal.
  • 테마: 만들고 있는 모바일 보고서에만 해당하는 항목이 포함됩니다.Theme: includes items that are specific to mobile reports that you create.

인터페이스 섹션은 다음 그룹으로 나누어집니다.The interface section is broken down into the following groupings.

섹션Section DescriptionDescription
primaryPrimary 단추 및 가리킨 항목 색Button and hover colors.
보조Secondary 제목 표시줄, 검색 표시줄, 왼쪽 메뉴(표시된 경우), 해당 항목의 텍스트 색Title bar, search bar, left hand menu (if displayed) and text color for those items
중립 기본Neutral Primary 홈 및 보고서 영역 배경Home and report area backgrounds.
중립 보조Neutral Secondary 텍스트 상자 및 폴더 옵션 배경, 설정 메뉴Text box and folder options backgrounds, and the settings menu.
중립 3차Neutral Tertiary 사이트 설정 배경Site settings backgrounds.
위험/경고/성공 메시지Danger/Warning/Success messages 이러한 메시지의 색Colors for those messages.
KPIKPI 양호(1), 중립(0), 중립(-1), 없음의 색을 관리합니다.Controls the colors for a good (1), neutral (0), neutral (-1) and none.

모바일 보고서 게시자를 사용하여 브랜드 패키지가 배포된 서버에 처음으로 연결하면 테마가 응용 프로그램의 오른쪽 위에서 사용할 수 있는 테마에 추가됩니다.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.

ssRSBrandingMobileReportPublisher

그러면 테마를 배포한 서버와 동일한 서버용이 아닐 경우에도 사용자가 작성하는 모바일 보고서에 해당 테마를 사용할 수 있습니다.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.

브랜드 패키지를 사용하여 로고를 포함할 경우 사이트 설정 메뉴에서 웹 포털에 대해 설정한 이름 위치 대신 웹 포털에 표시됩니다.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.

로고에 포함하는 파일은 PNG 파일 형식을 사용해야 합니다.The file you include for the logo must use the PNG file format. 파일을 서버에 업로드하면 크기가 조정되며The file dimensions will be scaled once uploaded to the server. 약 290px x 60px로 조정됩니다.It should scale to around 290px x 60px.

웹 포털에 브랜드 패키지 적용Applying the brand package to the web portal

브랜드 패키지를 추가, 다운로드, 제거하려면 다음을 수행할 수 있습니다.To add, download, or remove a brand package, you can do the following.

  1. 오른쪽 상단에서 기어 모양 을 선택합니다.Select the gear in the upper right.

  2. 사이트 설정을 선택합니다.Select Site Settings.

    ssRSGearMenu

  3. 브랜딩을 선택합니다.Select Branding.

    ssRSBranding

현재 설치된 브랜드 패키지 에 업로드된 패키지의 이름이 표시되거나 없음이 표시됩니다.Currently installed brand package will either display the name of the package that has been uploaded, or it will display None.

브랜드 패키지 업로드 가 웹 포털에 패키지를 적용합니다.Upload brand package will apply the package to the web portal. 즉시 적용되는 것을 확인할 수 있습니다.You will see it take effect immediately.

패키지를 다운로드 또는 제거 할 수도 있습니다.You can also Download or Remove the package. 패키지를 제거하면 웹 포털이 즉시 기본 브랜드로 재설정됩니다.Removing the package will reset the web portal to the default brand immediately.

metadata.xml 예제metadata.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 예제Colors.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"  
    }  
}  

문의:More questions? Reporting Services 포럼에서 질문Try asking the Reporting Services forum