如何在xPage上更改整个导航栏背景颜色？

Question

这是我的xPage，只有导航栏：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">

    <xe:navbar id="navbarBottom" 
    fixed="fixed-bottom" 
    headingStyle="font-weight: bold;" 
    pageWidth="fixed" 
    headingText="Testpage" 
    title="Testpage"
    style="background-color:red;">

    <xe:this.navbarAfterLinks>
        <xe:basicLeafNode title="Page1" label="Page1" href="/Page1.xsp"></xe:basicLeafNode>
        <xe:basicLeafNode title="Page2" label="Page2" href="/Page2.xsp"></xe:basicLeafNode>
        <xe:basicLeafNode title="Page3" label="Page3" href="/Page1.xsp"></xe:basicLeafNode>
    </xe:this.navbarAfterLinks>
    </xe:navbar>
</xp:view>

我想改变它的背景颜色。但风格=＆＃34;背景颜色：红色;＆＃34;仅适用于After链接。我无法弄明白我应该使用哪种元素。检查例如元素Chrome只会让我感到困惑。

Answer 1

您需要在浏览器中检查元素并检查其类。将以下代码放入您的css文件中。它会改变导航栏的背景颜色。

.xspNavbar .container-fluid {
    background-color: red;
}

Answer 2

试试这个，它应该可以解决你的问题：

的XPage

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">

    <xp:this.resources>
        <xp:styleSheet href="/custom.css"></xp:styleSheet>
    </xp:this.resources>

    <xe:navbar id="navbarBottom" fixed="fixed-bottom"
        headingStyle="font-weight: bold;" pageWidth="fixed" headingText="Testpage"
        title="Testpage" styleClass="navbar-custom">

        <xe:this.navbarAfterLinks>
            <xe:basicLeafNode title="Page1" label="Page1" href="/Page1.xsp">
            </xe:basicLeafNode>
            <xe:basicLeafNode title="Page2" label="Page2" href="/Page2.xsp">
            </xe:basicLeafNode>
            <xe:basicLeafNode title="Page3" label="Page3" href="/Page1.xsp">
            </xe:basicLeafNode>
        </xe:this.navbarAfterLinks>
    </xe:navbar>

</xp:view>

CSS-文件

.navbar-custom {
    background-color:red;
    background-image: none;
}