您正在查看的是 Apigee Edge 文档。
转到 Apigee X 文档。 信息
主题由全局级联样式表 (CSS) 组成,可为门户中的所有网页提供统一的外观和风格。主题背景的作用是让您可以一次更改所有门户页面的外观和风格。
示例门户提供的大多数默认样式都基于引导。您可以按照下文所述自定义、预览和发布主题背景。
观看以下视频,了解如何自定义门户主题。
访问主题编辑器
在主题背景编辑器中自定义、预览和发布门户的主题背景。如需打开主题编辑器,请在顶部导航栏的下拉菜单中选择主题。
如上图所示,主题背景编辑器让您可以执行以下操作:
添加自定义样式
在样式编辑器窗格中添加您自己的 CSS 代码,以自定义您的主题。支持所有 CSS 样式元素。
如需自定义主题,请按以下步骤操作:
- 在顶部导航栏的下拉菜单中选择 Theme。
- 在页面右侧的样式编辑器窗格中添加您的自定义 CSS 代码。
- 点击重新加载预览,在预览窗格中预览更改。
> 注意:您可以点击门户导航以预览所有页面上的内容。 - 点击发布,发布主题更改。
- 点击发布以确认更新。
自定义徽标
使用您公司的徽标自定义“您的徽标”图片,然后使用相同的名称和相对文件大小上传您的徽标,从而替换文件管理器中的以下图片文件:
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
发布主题
如需将您已添加的主题背景和样式自定义内容发布到线上门户,请执行以下操作:
- 在顶部导航菜单的下拉菜单中选择 Theme。
- 点击发布。
如需查看您在直播门户中发布的内容,请点击顶部导航栏中的直播门户。