Tùy chỉnh chủ đề của bạn

Bạn đang xem tài liệu về Apigee Edge.
Chuyển đến tài liệu về Apigee X. thông tin

Giao diện bao gồm một trang tính kiểu chung cung cấp giao diện đồng nhất cho tất cả các trang trong cổng thông tin của bạn. Mục tiêu của giao diện là cho phép bạn thay đổi giao diện trên tất cả các trang cổng thông tin cùng một lúc.

Bạn có thể tuỳ chỉnh, xem trước và phát hành giao diện như mô tả trong các phần sau.

Khám phá trình chỉnh sửa giao diện

Tuỳ chỉnh, xem trước và xuất bản giao diện cho cổng thông tin của bạn trong trình chỉnh sửa giao diện.

Cách truy cập vào trình chỉnh sửa giao diện:

• Chọn Xuất bản > Cổng thông tin trong thanh công cụ điều hướng bên, chọn cổng thông tin của bạn rồi nhấp vào Giao diện trên trang đích.
• Khi chỉnh sửa cổng thông tin, hãy nhấp vào Giao diện trong trình đơn thả xuống trên thanh điều hướng ở trên cùng.

Như đã nêu trong hình trước, trình chỉnh sửa giao diện cho phép bạn:

• Tuỳ chỉnh nhanh các kiểu cơ bản bằng trình chỉnh sửa giao diện kiểu cơ bản, bao gồm các phần tử sau:
  • Bảng màu
  • Bộ phông chữ và kiểu phông chữ
  • Biểu trưng
• Ghi đè các biến giao diện hoặc tuỳ chỉnh các phần tử kiểu giao diện trong trình chỉnh sửa giao diện nâng cao, bao gồm (nhưng không giới hạn ở) các phần tử sau:
  • Bảng màu
  • Bộ phông chữ và kiểu phông chữ
  • Thanh công cụ điều hướng
  • Hình nền
  • Kiểu chữ
• Xem trước các thay đổi về giao diện
• Xem trước cổng thông tin trong trình duyệt
• Xuất bản giao diện lên cổng thông tin đang hoạt động

Giới thiệu về giao diện cơ sở

Phần lớn các quy tắc về kiểu giao diện cơ sở xác định giao diện của trang web đều dựa trên material design góc. Material Design cho Angular sử dụng bố cục dựa trên lưới, các thành phần và kiểu nhất quán để mang lại trải nghiệm tương tác hợp nhất.

Các quy tắc kiểu được xác định bằng Biểu định kiểu xếp chồng Sassy (SCSS). SCSS là tập hợp con của Biểu định kiểu xếp chồng (CSS), mang lại các lợi thế sau:

• Các biến toàn cục có thể được sử dụng lại trong toàn bộ trang kiểu.
• Các quy tắc lồng nhau để tiết kiệm thời gian phát triển trang tính kiểu.
• Có khả năng tạo mixin và hàm

Ví dụ:

// Variable declaration
$my-variable: 12px;

// Nested selectors
.container-selector {
  .element-selector {
    padding: $my-variable;
  }
}

// The SCSS compiler will compile the above code to:
.container-selector .element-selector {
  padding: 12px;
}

// Function declaration
@function double($x) { return $x * 2; }

// Call function
.my-selector { height: double(12px); }

// The SCSS compiler will compile the above code to:
.my-selector { height: 24px; }

SCSS được biên dịch và chuyển đổi thành CSS cũ trước khi nội dung được hiển thị trên trang web.

Tệp material theming SCSS (material-theming.scss) là tệp của một trang kiểu Material góc cạnh, được giao diện cơ sở sử dụng. Tệp này khai báo các biến, hàm và mixin có thể được ghi đè bằng các biến tuỳ chỉnh và phần SCSS, như mô tả trong phần Tuỳ chỉnh giao diện bằng trình chỉnh sửa giao diện nâng cao.

Dựa trên lựa chọn giao diện người dùng, một số biến SCSS được khai báo để xác định kiểu chữ, màu sắc và bố cục, đồng thời được sử dụng bởi tệp kiểu cơ sở. Bạn có thể ghi đè các biến được liệt kê trong thông tin tham chiếu biến giao diện.

Tuỳ chỉnh bảng màu

Tuỳ chỉnh bảng màu bằng trình chỉnh sửa kiểu cơ bản hoặc bằng cách ghi đè các biến giao diện.

Giới thiệu về các danh mục bảng màu

Các định nghĩa bảng màu cho cổng thông tin tích hợp được nhóm thành các danh mục sau đây, được xác định bằng cách sử dụng kiểu màu Material Design trong giao diện cơ sở.

Danh mục	Kiểu
Chính	Thanh công cụ điều hướng, tiêu đề, tiêu đề thẻ và nút
Cấp hai	Văn bản <pre> và <code>
Điểm nhấn	Nút điều hướng, đường liên kết và dấu nhấn trọng âm
Cảnh báo	Cảnh báo và lỗi

Tuỳ chỉnh bảng màu bằng trình chỉnh sửa kiểu cơ bản

Nhanh chóng tuỳ chỉnh bảng màu chính và nhấn bằng trình chỉnh sửa kiểu cơ bản.

Cách tuỳ chỉnh bảng màu bằng trình chỉnh sửa kiểu cơ bản:

1. Truy cập vào trình chỉnh sửa giao diện.
2. Để tuỳ chỉnh màu chính, trong trình đơn thả xuống Primary color (Màu chính), hãy chọn một màu hoặc nhấp vào Custom (Tuỳ chỉnh) rồi nhập giá trị màu tuỳ chỉnh theo hệ thập lục phân vào hộp văn bản.
3. Để tuỳ chỉnh màu nhấn, trong trình đơn thả xuống Màu nhấn, hãy chọn một màu hoặc nhấp vào Tuỳ chỉnh rồi nhập giá trị màu tuỳ chỉnh theo hệ thập lục phân vào hộp văn bản.
4. Nhấp vào Lưu để lưu các thay đổi.
5. Xem các thay đổi trong ngăn xem trước hoặc nhấp vào Xem trước để xem trước các thay đổi đối với trang web trong trình duyệt.
   Lưu ý: Bạn có thể nhấp vào các mục điều hướng trong trang tổng quan của cổng thông tin trong ngăn xem trước để xem các thay đổi trên tất cả các trang.
6. Nhấp vào Xuất bản để xuất bản giao diện. Bạn sẽ được nhắc xác nhận việc cập nhật.

Tuỳ chỉnh bảng màu bằng cách ghi đè các biến giao diện

Để tuỳ chỉnh bảng màu bằng cách ghi đè các biến giao diện, hãy truy cập vào trình chỉnh sửa giao diện nâng cao và đưa một hoặc nhiều biến sau đây có giá trị được điều chỉnh vào phần Biến để thay đổi màu chính, màu phụ, màu nhấn hoặc màu cảnh báo tương ứng. Xem bài viết Giới thiệu về các danh mục bảng màu.

$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green, 700, 100, 900);
$accent: mat-palette($mat-blue, 600, 700, 900);
$warn: mat-palette($mat-red);

Xem nội dung của tệp SCSS giao diện Material đã nhập (material-theming.scss) để xác định các biến màu được xác định trước (chẳng hạn như $mat-grey). Các giá trị số lần lượt cho biết giá trị tô bóng cho các phần tử mặc định, sáng hơn và tối hơn.

Ngoài ra, bạn có thể tạo biến màu của riêng mình. Ví dụ:

$my-color-variable: (    
    50 : #f9f0e7,    
    100 : #f0d8c2,    
    200 : #e6bf9a,    
    300 : #dba572,    
    400 : #d49153,    
    500 : #cc7e35,    
    600 : #c77630,    
    700 : #c06b28,    
    800 : #b96122,    
    900 : #ad4e16,    
    A100 : #ffebe0,     
    A200 : #ffc9ad,    
    A400 : #ffa77a,    
    A700 : #ff9661,     
    // Color to render text presented on a background of the same level       
    contrast: (    
        50 : #000000,     
        100 : #000000,     
        200 : #000000,     
        300 : #000000,    
        400 : #000000,     
        500 : #000000,    
        600 : #000000,    
        700 : #ffffff,     
        800 : #ffffff,    
        900 : #ffffff,     
        A100 : #000000,     
        A200 : #000000,     
        A400 : #000000,     
        A700 : #000000,     
    )    
);    

Sau đó, hãy sử dụng nó để thay đổi bảng màu, như trong ví dụ sau:

$primary: mat-palette($my-color-variable, 900, 200, 400);

Tuỳ chỉnh bộ phông chữ và kiểu

Tuỳ chỉnh bộ phông chữ và kiểu bằng trình chỉnh sửa kiểu cơ bản hoặc bằng cách ghi đè các biến giao diện. Bạn cũng có thể nhập phông chữ tuỳ chỉnh.

Tuỳ chỉnh bộ phông chữ và kiểu bằng trình chỉnh sửa kiểu cơ bản

Tuỳ chỉnh nhanh bộ phông chữ và kiểu bằng trình chỉnh sửa kiểu cơ bản, như minh hoạ trong hình sau.

Cách tuỳ chỉnh bộ phông chữ và kiểu bằng trình chỉnh sửa kiểu cơ bản:

1. Truy cập vào trình chỉnh sửa giao diện.
2. Để thay đổi bộ phông chữ, hãy chọn một giá trị trong trình đơn thả xuống Font (Phông chữ).
3. Để thay đổi kiểu phông chữ, hãy mở rộng mục Kiểu phông chữ và chỉnh sửa các kiểu (nếu cần), bao gồm cả cỡ chữ, chiều cao dòng và độ đậm phông chữ cho các phần tử HTML mong muốn.
4. Nhấp vào Lưu để lưu các thay đổi.
5. Xem các thay đổi trong ngăn xem trước hoặc nhấp vào Xem trước để xem trước các thay đổi đối với trang web trong trình duyệt.
   Lưu ý: Bạn có thể nhấp vào các mục điều hướng trong trang tổng quan của cổng thông tin trong ngăn xem trước để xem các thay đổi trên tất cả các trang.
6. Nhấp vào Xuất bản để xuất bản giao diện. Bạn sẽ được nhắc xác nhận việc cập nhật.

Tuỳ chỉnh bộ phông chữ và kiểu bằng cách ghi đè các biến giao diện

Để tuỳ chỉnh bộ phông chữ và kiểu chữ bằng cách ghi đè các biến giao diện, hãy truy cập vào trình chỉnh sửa giao diện nâng cao và thêm một hoặc nhiều biến bộ phông chữ và kiểu chữ có giá trị được điều chỉnh trong phần Biến.

Ví dụ: để thay đổi phông chữ mặc định thành Arial, hãy xác định biến sau:

$typography-main-font-family: 'Arial';

Nhập phông chữ tuỳ chỉnh

Nhập phông chữ của Google (không có trong bộ phông chữ mặc định) hoặc phông chữ tuỳ chỉnh của riêng bạn, sau đó tham chiếu phông chữ tuỳ chỉnh trong trang tính kiểu như mô tả bên dưới.

Nhập phông chữ Google

Để nhập phông chữ của Google, hãy truy cập vào trình chỉnh sửa giao diện nâng cao rồi nhập phông chữ trong phần Kiểu tuỳ chỉnh, như minh hoạ dưới đây:

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

Nhập phông chữ tuỳ chỉnh

Nhập phông chữ tuỳ chỉnh của riêng bạn bằng quy tắc CSS @font-face. Quy tắc @font-face hỗ trợ một số loại định dạng tệp, bao gồm cả TrueType (TTF), Định dạng phông chữ mở trên web (WOFF) và nhiều định dạng khác.

Cách nhập phông chữ tuỳ chỉnh của riêng bạn:

1. Bạn có thể tải tệp phông chữ lên trình quản lý tài sản, như mô tả trong phần Tải tệp lên.

2. Truy cập vào trình chỉnh sửa giao diện nâng cao rồi thêm quy tắc @font-face vào phần Kiểu tuỳ chỉnh, trong đó font-family chỉ định tên phông chữ, url chỉ định vị trí của tệp phông chữ (trong trường hợp này là trình quản lý tài sản), MyCustomFont.tff là tên của tệp phông chữ tuỳ chỉnh và format chỉ định định dạng phông chữ.

   @font-face {
      font-family: 'MyCustomFont';
      src: url('files/MyCustomFont.tff') format('truetype')
   }
   

Tham chiếu phông chữ tuỳ chỉnh trong trang tính kiểu

Tham chiếu phông chữ tuỳ chỉnh trong một trong các biến bộ phông chữ và kiểu trong mục Biến. Ví dụ:

$typography-main: mat-typography-config(    
    $font-family: '"Indie Flower", "Oxygen", sans-serif',    
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers    
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers    
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers    
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers    
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags    
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags    
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags   
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags   
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text   
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text    
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text    
    $button: mat-typography-level(14px, 14px, 500), // Buttons    
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);    

Tuỳ chỉnh biểu trưng

Bạn có thể tuỳ chỉnh biểu trưng được sử dụng trong cổng thông tin ở các vị trí sau:

Vị trí biểu trưng	Kích thước tệp mặc định
Thanh công cụ điều hướng trên máy tính	196 x 32 pixel
Thanh công cụ điều hướng trên thiết bị di động	156 x 32 pixel
Biểu tượng trang web trong thanh địa chỉ của trình duyệt (và các vị trí khác)	32 x 32 pixel
Trang Đăng nhập	392 x 64 pixel

Tuỳ chỉnh biểu trưng trong thanh công cụ điều hướng cho màn hình máy tính và thiết bị di động

Tuỳ chỉnh biểu trưng trong thanh công cụ điều hướng cho màn hình máy tính và thiết bị di động. Tuỳ thuộc vào chiều rộng của trình duyệt, bạn có thể thấy biểu trưng phiên bản dành cho máy tính hoặc thiết bị di động.

Bạn không thể xoá biểu trưng chính mà chỉ có thể thay thế biểu trưng đó. Nếu bạn không chỉ định biểu trưng cho màn hình thiết bị di động, thì biểu trưng chính sẽ được sử dụng theo mặc định.

Cách tuỳ chỉnh biểu trưng dùng trong thanh điều hướng cho màn hình máy tính và thiết bị di động:

1. Lấy một hoặc nhiều bản sao biểu trưng công ty phù hợp để sử dụng.
   Hãy tham khảo bảng trước để biết kích thước đề xuất.
2. Truy cập vào trình chỉnh sửa giao diện.
3. Cách thay thế biểu trưng trong thanh công cụ điều hướng trên cùng trên màn hình máy tính:
   a. Trong mục Kiểu cơ bản ở ngăn bên phải, hãy nhấp vào biểu tượng trong trường Biểu trưng chính.
   b. Duyệt tìm phiên bản biểu trưng dành cho máy tính trong thư mục cục bộ.
   c. Nhấp vào Mở để tải tệp lên.
4. Cách thay thế biểu trưng trong thanh công cụ điều hướng trên cùng trên màn hình thiết bị di động:
   a. Trong mục Basic Styles (Kiểu cơ bản) ở ngăn bên phải, hãy mở rộng Logo options (Tuỳ chọn biểu trưng) rồi nhấp vào trong trường Mobile logo (Biểu trưng cho thiết bị di động).
   b. Duyệt tìm phiên bản biểu trưng dành cho thiết bị di động trong thư mục cục bộ.
   c. Nhấp vào Mở để tải tệp lên.
5. Nhấp vào Lưu để xem trước các thay đổi trong ngăn bên trái.
6. Nhấp vào Xuất bản để xuất bản các thay đổi đối với cổng thông tin của bạn. Xác nhận thao tác khi được nhắc.

Tuỳ chỉnh biểu tượng trang chủ

Cách tuỳ chỉnh favicon dùng trong thanh địa chỉ của trình duyệt web (và các vị trí khác:

1. Lấy một bản sao biểu trưng công ty phù hợp để sử dụng làm favicon.
   Hãy tham khảo bảng trước để biết kích thước đề xuất.
2. Truy cập vào trình chỉnh sửa giao diện.
3. Trong mục Basic Styles (Kiểu cơ bản) ở ngăn bên phải, hãy mở rộng Logo options (Tuỳ chọn biểu trưng) rồi nhấp vào trong trường Favicon (Biểu tượng yêu thích).
4. Duyệt tìm phiên bản biểu tượng trang web của biểu trưng trong thư mục cục bộ.
5. Nhấp vào Mở để tải tệp lên.
6. Nhấp vào Lưu để xem trước các thay đổi trong ngăn bên trái.
7. Nhấp vào Xuất bản để xuất bản các thay đổi đối với cổng thông tin của bạn. Xác nhận thao tác khi được nhắc.

Tuỳ chỉnh biểu trưng trên trang Đăng nhập

Tuỳ chỉnh biểu trưng trên trang Đăng nhập khi định cấu hình trải nghiệm đăng ký và đăng nhập cho chương trình dành cho nhà phát triển, như mô tả trong phần Quản lý thông tin công ty.

Tuỳ chỉnh thanh công cụ điều hướng

Sau đây là một số mẹo nhanh để tuỳ chỉnh thanh công cụ điều hướng:

• Tuỳ chỉnh màu của thanh công cụ điều hướng trong tiêu đề và chân trang bằng cách thay đổi màu chính, như mô tả trong phần Tuỳ chỉnh bảng màu.
• Tuỳ chỉnh kích thước và kiểu phông chữ của các mục trong trình đơn trên thanh điều hướng ở đầu trang và chân trang bằng cách thay đổi kiểu Phông chữ và Nút, như mô tả trong phần Tuỳ chỉnh bộ phông chữ và kiểu.
• Tuỳ chỉnh chiều cao của thanh công cụ điều hướng tiêu đề bằng cách truy cập vào trình chỉnh sửa giao diện nâng cao và thêm biến sau đây với giá trị đã điều chỉnh vào phần Biến: $layout-header-height: 64px;
• Tuỳ chỉnh chiều cao của thanh công cụ điều hướng chân trang bằng cách truy cập vào trình chỉnh sửa giao diện nâng cao và thêm biến sau đây với giá trị đã điều chỉnh vào phần Biến: $layout-footer-height: 44px;
• Tuỳ chỉnh biểu trưng trong thanh điều hướng cho màn hình máy tính và thiết bị di động.

Tuỳ chỉnh hình nền

Tuỳ chỉnh hình nền trên trang chủ bằng cách thực hiện bất kỳ thao tác nào sau đây:

• Tải phiên bản hình ảnh home-background.jpg của riêng bạn lên trình quản lý tài sản bằng cùng tên và kích thước tệp tương đối (3000 pixel x 1996 pixel). Để biết thêm thông tin, hãy xem bài viết Quản lý thành phần.

• Sửa đổi tên tệp hình nền và khoảng đệm của hình nền bằng cách truy cập vào trình chỉnh sửa giao diện nâng cao và thêm SCSS sau đây với các giá trị đã điều chỉnh trong phần Kiểu tuỳ chỉnh:

  #index {
    &.main {
      .main-content {
        padding: 0;
        background-image: url('/files/home-background.jpg');
        background-size: cover;
      }
    }
  }
  

• Thêm hình nền vào tất cả các trang trong cổng thông tin bằng cách truy cập vào trình chỉnh sửa giao diện nâng cao và thêm SCSS sau đây với giá trị đã điều chỉnh trong mục Kiểu tuỳ chỉnh:

   body {
      background-image: url('/files/background-image.jpg');
   }
  
  

Tuỳ chỉnh kiểu chữ

Tuỳ chỉnh kiểu chữ bằng cách truy cập vào trình chỉnh sửa giao diện nâng cao và điều chỉnh giá trị cho một hoặc nhiều biến kiểu chữ sau trong mục Biến:

• $typography-main
• $typography-header
• $typography-footer
• $typography-context-bar

Ví dụ:

// Main content typography (includes dialog and notification popups)
$typography-main: mat-typography-config(
    $font-family: 'Roboto, "Oxygen", sans-serif',
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
    $button: mat-typography-level(14px, 14px, 500), // Buttons
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

Sau đó, bạn có thể áp dụng kiểu chữ cho một bộ chọn CSS cụ thể, như trong ví dụ sau:

@include mat-base-typography($custom-typography-config, '.css-selector');

Ngoài ra, bạn có thể áp dụng một cấp độ kiểu chữ cụ thể được xác định trong kiểu chữ tuỳ chỉnh cho bộ chọn CSS, như trong ví dụ sau:

.css-selector {
  @include mat-typography-level-to-styles($custom-typography-config, display-3);
}

Tuỳ chỉnh giao diện bằng trình chỉnh sửa giao diện nâng cao

Tuỳ chỉnh giao diện bằng cách ghi đè các biến giao diện hoặc tuỳ chỉnh các phần tử kiểu giao diện ngay trong trình chỉnh sửa giao diện nâng cao.

Ghi đè biến giao diện

Ghi đè các biến giao diện trong mục Biến của trình chỉnh sửa giao diện nâng cao. Để xem danh sách các biến giao diện, hãy xem phần Tham khảo biến giao diện.

Ví dụ: để tuỳ chỉnh chiều cao của thanh công cụ điều hướng tiêu đề và chân trang, hãy thêm các biến sau đây tương ứng với các giá trị đã điều chỉnh trong phần Biến của trình chỉnh sửa giao diện nâng cao:

Để biết thêm ví dụ, hãy xem:

• Tuỳ chỉnh bảng màu bằng cách ghi đè các biến giao diện
• Tuỳ chỉnh bộ phông chữ và kiểu bằng cách ghi đè các biến giao diện

Cách ghi đè biến giao diện:

1. Truy cập vào trình chỉnh sửa giao diện.
2. Trong ngăn bên phải, hãy nhấp vào Nâng cao.
3. Nhấp vào Biến.
4. Thêm các giá trị ghi đè biến.
   Để biết danh sách các biến có thể được ghi đè, hãy xem phần Tham chiếu biến giao diện.
5. Nhấp vào Lưu để lưu các thay đổi.
6. Nhấp vào biểu tượng x để đóng trình chỉnh sửa giao diện nâng cao.
7. Xem các thay đổi trong ngăn xem trước hoặc nhấp vào Xem trước để xem trước các thay đổi đối với trang web trong trình duyệt. Lưu ý: Bạn có thể nhấp vào các mục điều hướng trong trang xem trước của cổng thông tin để xem các thay đổi trên tất cả các trang.
8. Nhấp vào Xuất bản để xuất bản giao diện. Bạn sẽ được nhắc xác nhận việc cập nhật.

Tuỳ chỉnh phần tử kiểu giao diện

Tuỳ chỉnh các phần tử kiểu giao diện ngay trong phần Custom Styles (Kiểu tuỳ chỉnh) của trình chỉnh sửa giao diện nâng cao.

Ví dụ: để thay đổi màu của nút Tạo trên trang Ứng dụng mới xuất hiện khi đăng ký ứng dụng trong cổng thông tin, hãy thêm phần tử kiểu giao diện sau đây với giá trị được điều chỉnh:

.main .main-content button.app-save {
  color: blue;
}

Xem thêm phần Tuỳ chỉnh hình nền.

Cách tuỳ chỉnh các thành phần kiểu giao diện:

1. Truy cập vào trình chỉnh sửa giao diện.
2. Trong ngăn bên phải, hãy nhấp vào Nâng cao.
3. Nhấp vào Kiểu tuỳ chỉnh.
4. Thêm các thành phần kiểu giao diện.
5. Nhấp vào Lưu để lưu các thay đổi.
6. Đóng x để đóng trình chỉnh sửa giao diện nâng cao.
7. Xem các thay đổi trong ngăn xem trước hoặc nhấp vào Xem trước để xem trước các thay đổi đối với trang web trong trình duyệt.
   Lưu ý: Bạn có thể nhấp vào các mục điều hướng trong trang tổng quan của cổng thông tin trong ngăn xem trước để xem các thay đổi trên tất cả các trang.
8. Nhấp vào Xuất bản để xuất bản giao diện. Bạn sẽ được nhắc xác nhận việc cập nhật.

Tạo bảng điều khiển có chiều rộng đầy đủ trong trang cổng thông tin

Cách tạo bảng điều khiển toàn chiều rộng trong trang cổng thông tin:

1. Thêm các phần tử kiểu giao diện sau trong trình chỉnh sửa giao diện nâng cao, như mô tả trong phần Tuỳ chỉnh các phần tử kiểu giao diện:

   .full-width__container {
     position: relative;
     left: 50%;
     right: 50%;
     max-width: 100vw;
     margin-left: -50vw;
     margin-right: -50vw;
     background-image: url("/files/your-image.jpg");
     background-size: cover;
     background-position: 50% 50%;
     padding: 0;
   }
   
   .full-width__centered {
     @include centered-content();
   }
   
   .full-width__content {
     // Add any 'additional' padding here and NOT in .full-width__centered. Adding padding to
     // .full-width__centered will result in a horizontal scroll bar. You can exclude this class
     // and corresponding <div> container if no additional padding control other than the
     // min page padding is needed.
   }

2. Chỉnh sửa nội dung trang cổng thông tin để thêm phần tử <div> sau đây, như mô tả trong phần Phát triển nội dung cổng thông tin bằng trình chỉnh sửa trang:

   <div class="full-width__container">
     <div class="full-width__centered">
       <div class="full-width__content">  <!-- Include this div if you need additional padding -->
         <h2>Full Width Container</h2>
         <p>
           This content will align with the page header and other content outside
           of this full width container
         </p>
       </div>
     </div>
   </div>

Xuất bản giao diện

Cách phát hành giao diện và kiểu tuỳ chỉnh mà bạn đã thêm vào cổng trực tiếp:

1. Truy cập vào trình chỉnh sửa giao diện.
2. Nhấp vào Xuất bản.

Để xem nội dung đã xuất bản trong cổng thông tin trực tiếp, hãy nhấp vào Xem cổng thông tin trong thanh điều hướng trên cùng.

Tìm hiểu các quy tắc về mức độ cụ thể của CSS

Tính cụ thể của CSS mô tả phương thức mà trình duyệt sử dụng để xác định mức độ ưu tiên cho các phần khai báo phần tử kiểu CSS khi xảy ra xung đột. Độ cụ thể của CSS được tính bằng cách áp dụng trọng số cho một phần khai báo phần tử kiểu CSS cụ thể dựa trên loại bộ chọn của phần tử đó. Bộ chọn CSS càng cụ thể thì trọng số càng cao. Ví dụ: thuộc tính mã nhận dạng sẽ có trọng số cao hơn trong quá trình tính toán so với bộ chọn loại.

Ví dụ: nếu bạn xác định các phần tử kiểu sau trong mã CSS, thì phần tử đoạn văn sẽ có màu đỏ vì phần khai báo phần tử kiểu p trong phần tử div cụ thể hơn phần khai báo phần tử kiểu p.

div p { color: red }  ← More specific  
p { color: blue }

Tương tự, nếu bạn xác định các phần khai báo phần tử kiểu sau trong mã CSS, thì mọi văn bản được bao bọc trong thẻ <div class="test"></div> sẽ có màu xanh dương vì phần khai báo kiểu thuộc tính id trong phần tử div cụ thể hơn phần khai báo phần tử kiểu div.

div#test { background-color: blue; }  ← More specific  
div { background-color: red; }

Đối với các phần khai báo phần tử kiểu có cùng mức độ cụ thể, phần khai báo phần tử kiểu cuối cùng được xác định sẽ được ưu tiên. Ví dụ: theo thứ tự khai báo phần tử kiểu sau, phần tử đoạn văn sẽ có màu xanh dương.

p { color: red }  
p { color: blue }  ← Last specified

Tham chiếu biến giao diện

Các phần sau đây tóm tắt các biến có thể được ghi đè trong phần Biến của trình chỉnh sửa giao diện nâng cao, như mô tả trong phần Ghi đè biến giao diện.

• Biến giao diện cơ sở
• Biến bảng màu
• Biến kiểu và bộ phông chữ
• Biến kiểu chữ

Biến giao diện cơ sở

Tuỳ chỉnh màu nền trước của giao diện cơ sở được sử dụng trên toàn trang web. Các giá trị hợp lệ là light và dark.

$base-theme: light;

Biến bảng màu

Tuỳ chỉnh bảng màu bằng cách sửa đổi các biến sau để lần lượt thay đổi màu chính, màu phụ, màu nhấn và màu cảnh báo. Xem bài viết Giới thiệu về các danh mục bảng màu.

$primary: mat-palette($mat-grey, 800, 100, 900); 
$secondary: mat-palette($mat-green); 
$accent: mat-palette($mat-blue); 
$warn: mat-palette($mat-red); 

Các giá trị số lần lượt cho biết giá trị tô bóng cho phần tử mặc định, phần tử sáng hơn và phần tử tối hơn. Xem nội dung của tệp SCSS giao diện Material (material-theming.scss) để xác định các biến màu được xác định trước.

Ví dụ: bạn có thể thay đổi bảng màu chính thành màu xanh lục như sau:

$primary: mat-palette($mat-green, 800, 100, 900);

Để chỉ tuỳ chỉnh các giá trị tô bóng cho nhóm màu mặc định được xác định trong giao diện cơ sở, hãy thêm mã sau đây với các giá trị tô bóng đã điều chỉnh:

$primary: mat-palette($custom-hex-primary, 800, 100, 900);
$secondary: mat-palette($custom-hex-secondary, 800, 100, 900);
$accent: mat-palette($custom-hex-accent, 800, 100, 900);
$warn: mat-palette($custom-hex-warn, 800, 100, 900);

Biến kiểu và bộ phông chữ

Tuỳ chỉnh bộ phông chữ và kiểu phông chữ.

// If using a custom font, import it by URL. 
$typography-main-font-family: 'Roboto, sans-serif';

// Must resolve to a pixel value
$layout-responsive-breakpoint: 900px;
$layout-header-height: 64px;
$layout-header-menu-item-height: 36px;
$layout-header-menu-item-horiz-padding: 16px;
$layout-header-nested-menu-item-vert-padding: 5px;
$layout-header-menu-resp-item-height: 64px;
$layout-footer-height: 44px;
$layout-footer-menu-item-height: 36px;
$layout-footer-menu-item-horiz-padding: 16px;
$layout-footer-nested-menu-item-vert-padding: 5px;
$layout-context-bar-height: 60px;
$layout-context-bar-button-height: 36px;
$layout-context-bar-button-horiz-padding: 16px;
$layout-main-content-max-width: 1400px;
$layout-main-content-vert-padding: 38px;
$layout-horizontal-min-padding: 24px;

// Uses variables declared above
$typography-header: $typography-main;
$typography-footer: $typography-main;
$typography-context-bar: $typography-main;

Chỉ định kiểu chữ tuỳ chỉnh của riêng bạn để kiểm soát chi tiết hơn, như trong ví dụ sau:

$typography-context-bar: mat-typography-config(
    $font-family: 'Ubuntu, sans-serif',
    $headline: mat-typography-level(30px, 30px, 500), // Title
    $button: mat-typography-level(19px, 19px, 200) // Action buttons
);

Biến kiểu chữ

Tuỳ chỉnh kiểu chữ Material góc. Mỗi cấp độ kiểu chữ xác định một kích thước phông chữ, chiều cao dòng và độ đậm phông chữ.

$typography-main-display-4: mat-typography-level(112px, 112px, 300);
$typography-main-display-3: mat-typography-level(56px, 56px, 400);
$typography-main-display-2: mat-typography-level(45px, 48px, 400);
$typography-main-display-1: mat-typography-level(34px, 40px, 400);
$typography-main-headline: mat-typography-level(24px, 32px, 400);
$typography-main-title: mat-typography-level(20px, 32px, 400);
$typography-main-subheading-2: mat-typography-level(16px, 28px, 400);
$typography-main-subheading-1: mat-typography-level(15px, 24px, 400);
$typography-main-body-2: mat-typography-level(14px, 24px, 400);
$typography-main-body-1: mat-typography-level(16px, 22px, 400);
$typography-main-caption: mat-typography-level(12px, 20px, 400);
$typography-main-button: mat-typography-level(14px, 14px, 700);
$typography-main-input: mat-typography-level(16px, 1.125, 400);

// Copies properties declared above into a cohesive object
$typography-main: mat-typography-config(
  $font-family: $typography-main-font-family,
  $display-4: $typography-main-display-4,
  $display-3: $typography-main-display-3,
  $display-2: $typography-main-display-2,
  $display-1: $typography-main-display-1,
  $headline: $typography-main-headline,
  $title: $typography-main-title,
  $subheading-2: $typography-main-subheading-2,
  $subheading-1: $typography-main-subheading-1,
  $body-2: $typography-main-body-2,
  $body-1: $typography-main-body-1,
  $caption: $typography-main-caption,
  $button: $typography-main-button,
  $input: $typography-main-input);