css - 如何更改 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>

我想改变它的背景颜色。但是 style="background-color:red;"仅适用于 After 链接。我无法真正弄清楚我应该将样式应用到哪个元素。检查元素，例如Chrome 让我感到困惑。

Answer 1

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

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;
}