sap更改主题_SAP主题个性化修改（一）搜索页面

搜索页面修改主题后的效果如图：

这次用的是基于bluecrystal主题创建的页面。分析dom树结构，有利于页面布局和色调的修改。

当我们掌握了页面的大体结构，我们可以针对不同的元素进行个性化的定制，这时就可以充分发挥CSS功力，让页面大变身了。

让我们先来看看搜索页面的基本结构。

body调用urBdyStd、urBdyStdNoMrg两个样式，看过上篇文章后可以发现，这两个属于标准命名规则，从字面上就能知道基本的含义。

页面整体的背景图片是通过一个div.urCanvasBgImage  设置的，默认是没有背景图，不显示。

页面所有内容包裹在一个table>tbody>tr>td>div中，这些都没有定义class属性；这个div里面包裹了两个div。

一、第一个div

第一个div和父div都是宽高100%，其里包裹了一个table(同样是宽高100%)，它有两个样式urMatrixLayout、urHtmlTableReset，这也是除了body以外的首个应用了class的元素了，这两个样式只是定义了字体的字号、字重、风格、对齐方式等。tbody.urLinStd(没有样式)里面包裹了3个没有任何属性的tr元素，同时tr里面各自包裹了一个td.lsContainerCell.lsContainerCellVAlign--top.urLayoutPadless，几个class里面只有urLayoutPadless定义了padding:0的样式。

1、第一个tr > td(pageHeader)

table.urMatrixLayout.urHtml