CODEWITHSUNDEEP
cssjsfprimefaces
Peter Penzov
Peter Penzov

Reputation: 1588

How to remove background from p:breadCrumb

I have this breadCrumb. How I can remove the background. I want just to display the links without any background.

<h:form>
    <p:breadCrumb style="font-size:11px;">
        <p:menuitem value="Datacenters" url="#" />
        <p:menuitem value="Zone" url="#" />
        <p:menuitem value="Rack" url="#" />
        <p:menuitem value="Server" url="#" />
        <p:menuitem value="Processor" url="#" />
        <p:menuitem value="RAM" url="#" />
        <p:menuitem value="HDD" url="#" />
    </p:breadCrumb>
</h:form>

Into the manual I found that I have to change the css class .ui-breadcrumb in order to change the background. But how I can override the background?

P.S

This is the css class responsible for background:

.ui-widget-header {
    background: url("/DX-57/RMC-57/javax.faces.resource/images/ui-bg_diagonals-   thick_6_333333_40x40.png.html?ln=primefaces-aristo") repeat scroll 50% 50% #333333;
    border: 1px solid #333333;
    color: #FFFFFF;
    font-weight: bold;
}

Upvotes: 0

Views: 7144

Answers (3)

Anub Promison
Anub Promison

Reputation: 11

.breadcrumb{ background-color : unset !important; }

Upvotes: 1

Dipen Lama
Dipen Lama

Reputation: 147

Use bg-transparent style from bootstrap.

Upvotes: 0

Top Questions
Top Questions

Reputation: 1852

In your .css file (at the end of it), or in your header in tags:

.ui-breadcrumb{background-color: none;}

More i can´t do with this less informations.

edit: If that doesn´t work:

.ui-breadcrumb{background-color: none!important;}

that should do the trick.

another edit: if it´s an image:

.ui-breadcrumb{background-image: none;}

Upvotes: 1

Related Questions