自定义主题(原始版本)

您正在查看的是 Apigee Edge 文档。
转到 Apigee X 文档
信息

主题由全局级联样式表 (CSS) 组成,可为门户中的所有网页提供统一的外观和风格。主题背景的作用是让您可以一次更改所有门户页面的外观和风格。

示例门户提供的大多数默认样式都基于引导。您可以按照下文所述自定义、预览和发布主题背景。

观看以下视频,了解如何自定义门户主题。

访问主题编辑器

在主题背景编辑器中自定义、预览和发布门户的主题背景。如需打开主题编辑器,请在顶部导航栏的下拉菜单中选择主题

主题背景编辑器

如上图所示,主题背景编辑器让您可以执行以下操作:

添加自定义样式

在样式编辑器窗格中添加您自己的 CSS 代码,以自定义您的主题。支持所有 CSS 样式元素。

如需自定义主题,请按以下步骤操作:

  1. 在顶部导航栏的下拉菜单中选择 Theme
  2. 在页面右侧的样式编辑器窗格中添加您的自定义 CSS 代码。
  3. 点击重新加载预览,在预览窗格中预览更改。
    > 注意:您可以点击门户导航以预览所有页面上的内容。
  4. 点击发布,发布主题更改。
  5. 点击发布以确认更新。

使用您公司的徽标自定义“您的徽标”图片,然后使用相同的名称和相对文件大小上传您的徽标,从而替换文件管理器中的以下图片文件:

  • logo.png(140 x 40 像素)
  • mobile-logo.png(140 x 40 像素)

此外,请根据需要修改 CSS 样式表中的以下内容:

/* ==== Header Menu ==== */
...
body .navbar-brand {
  padding: 5px 15px;
}

.navbar-brand img { max-height: 50px; margin: 0; padding: 0; }

如需了解详情,请参阅管理资产

自定义首页上的背景图片

通过修改 CSS 样式表中的以下内容,自定义首页上的背景图片。

  • 修改背景图片文件及其位置。
    您可以使用相同的名称和相对文件大小(1440 像素 x 540 像素)将自己版本的 portal-hero.jpg 图片上传到文件管理器。如果要使用其他文件名,请务必修改以下 CSS 中的 background-image 值。

    /* ==== Jumbotron ====
    a billboard for drawing attention, from Bootstrap  */
    
    home-page-jumbotron-bg {
        background-image: url('/files/portal-hero.jpg');
    }
  • 修改叠加在背景图片上的文字的格式。

    .jumbotron {
     text-align: center;
     height: 500px;
     background-size: cover;
     margin: -50px -30px 0 -30px;
     border-radius: 0;
    }
    
    .jumbotron h1 {
     font-size: 40px;
     font-weight: 400;
    }
    
    .jumbotron h2 {
     font-size: 25px;
     font-weight: 400;
    }
    
    .jumbotron a, .jumbotron a:hover {
     font-size: 18px;
    }
    
    .jumbotron p {
     max-width: none;
    }

了解 CSS 特异性规则

CSS 特异性描述发生冲突时浏览器用于确定 CSS 样式元素声明优先级的方法。CSS 特异性是通过基于选择器类型将权重应用于特定的 CSS 样式元素声明来进行计算的。CSS 选择器特异性越明显,权重越高。例如,ID 属性在计算时的权重将高于类型选择器。

例如,如果您在 CSS 代码中定义了以下样式元素,那么段落元素将显示为红色,因为 div 元素中的 p 样式元素声明比该 p 样式元素声明更具特异性。

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

同样,如果您在 CSS 代码中定义了以下样式元素声明,那么 <div class="test"></div> 标记中的所有文本都将显示为蓝色,因为 div 元素中的 id 属性样式声明比 div 样式元素声明更具特异性。

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

对于具有相同特异性的样式元素声明,定义的最后一个样式元素声明将优先。例如,如果样式元素声明顺序如下,那么段落元素将显示为蓝色。

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

发布主题

如需将您已添加的主题背景和样式自定义内容发布到线上门户,请执行以下操作:

  1. 在顶部导航菜单的下拉菜单中选择 Theme
  2. 点击发布

如需查看您在直播门户中发布的内容,请点击顶部导航栏中的直播门户