门户：如何使用改变门户显示风格

在本操作方法中，默认的门户引导程序主题（组合菜单）将替换为在线上找到的另一个主题。

名称：如何变更引导程序主题

类型：如何

听众：管理员, Integrator, Developer

水平：中等

持续时间：30分钟

关键词：portal,  Customization 

iTop版本：2.3.0

先决条件

您将需要：

• 知道如何将iTop扩展和升级用作系统，
• 装有安装了演示数据和增强门户的iTop系统，
• 可以访问具有足够权利的账号来连接到门户（通常这意味着拥有门户用户描述）。

该教程的目的

在此教程中，您将学习如何：

• 变更的门户引导程序主题以变更的外观为准，如以下多个屏幕截图所示：

分步说明

创建扩展

首先，我们需要创建一个iTop扩展，它将更改门户XML配置来定义要使用的主题。从自定义指南中检查扩展模块部分（iTop定制）（如有必要）。

1. 将该扩展命名为sample-portal-new-theme。
2. 删除main.sample-portal-new-theme.php文件，因为我们不需要任何PHP代码。

您应该具有以下结构：

选择一个新主题

现在已经进行了扩展，我们需要获得一个新的Bootstrap主题，它将替换Combodo。对于我们的示例，我们将使用来自bootswatch.com 但是您可以使用任何与Bootstrap 3兼容的主题。

去bootswatch.com，下载预编译的css文件 并将其放入新扩展名的文件夹中。

您应该具有以下结构：

请注意，Bootstrap模板与Bootstrap主题不同。 Bootstrap模板更加复杂，因为它不仅更改CSS样式，而且更改HTML标记。有关如何为门户使用新的Bootstrap模板的信息，请检查此其他示例扩展()

更改门户配置

现在我们有了新的主题，我们只需要制作一个XML增量，并使用变更和门户配置即可。打开datamodel.sample-portal-new-theme.xml文件并粘贴以下代码：

datamodel.sample-portal-new-theme.xml

 

<?xml version="1.0" encoding="UTF-8"?>
<itop_design xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.3">
  <module_designs>
    <module_design id="itop-portal" xsi:type="portal">
      <properties>
        <themes>
          <theme id="bootstrap" _delta="define_if_not_exists">sample-portal-new-theme/css/bootstrap.min.css</theme>
        </themes>
      </properties>
    </module_design>
  </module_designs>
</itop_design>

这将主题节点添加到门户。只需确保包含扩展名和文件名的路径与系统上的路径相同，即可进入最后一步。

升级系统

最后，运行iTop系统的升级，并选中新扩展名选项，然后访问门户。

等等！

资料下载

您可以在此处找到一些示例主题的扩展：sample-portal-new-theme-1.0.1-147.zip

原贴链接：https://www.itophub.io/wiki/page?id=2_7_0%3Acustomization%3Aportal_howto_changebstheme

Portal: How to change the Bootstrap theme

In this How to, the default portal bootstrap theme (Combodo's) will be replaced with another found online.

name:

How to change Bootstrap theme

type:

How To

audience:

Administrator, Integrator, Developer

level:

Intermediate

duration:

30min

keyword:

Portal, Customization

iTop version:

2.3.0

Prerequisites

What you will need to:

• Know how to make an iTop extension and upgrade your system,

• Have an iTop system with the demo data and the enhanced portal installed,

• Have access to an account with enough rights to connect to the portal (usually this means having the Portal User profile).

Aim of this tutorial

In this tutorial, you will learn how to:

• Change the portal bootstrap theme in order change its look and feel, as show in multiple screenshots below:

Step by step instructions

Creating the extension

First, we need to create an iTop extension that will alter the portal XML configuration to define which theme to use. Check the Extension modules part from the customization guide (iTop Customization) if necessary.

1. Name the extension as sample-portal-new-theme.

2. Remove the main.sample-portal-new-theme.php file as we won't need any PHP code.

You should have the following structure:

Choosing a new theme

Now that the extension is made, we need to get a new Bootstrap theme that will replace the Combodo one. For our example we will use Simplex from bootswatch.com but you can use any theme as long as it is compatible with Bootstrap 3.

Go to bootswatch.com, download the precompiled css file and put it into the folder of the new extension.

You should have the following structure:

Please note that a Bootstrap template is not the same as a Bootstrap theme. a Bootstrap template is more complex as it changes not only the CSSstyles but also the HTML markup. For information about how to use a new Bootstrap template for your portal, check this other sample extension ()

Changing the portal configuration

Now that we have the new theme, we just need to make an XML delta and change the portal configuration to use it. Open the datamodel.sample-portal-new-theme.xml file and paste the following code:

datamodel.sample-portal-new-theme.xml

 

<?xml version="1.0" encoding="UTF-8"?>
<itop_design xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.3">
  <module_designs>
    <module_design id="itop-portal" xsi:type="portal">
      <properties>
        <themes>
          <theme id="bootstrap" _delta="define_if_not_exists">sample-portal-new-theme/css/bootstrap.min.css</theme>
        </themes>
      </properties>
    </module_design>
  </module_designs>
</itop_design>

This adds a theme node to the portal. Just make sure the path containing the extension and file name are the same as on your system, then we can go to the final step.

Upgrading the system

Finally run an upgrade of your iTop system with the new extension option checked and access the portal.

Et voilà !

Downloads

You can find this extension with some example themes here: sample-portal-new-theme-1.0.1-147.zip