CSS spezialist needed

Hy everybody,

i´m using the ikarus widget add-on in my application to show a breadcrump widget.
https://vaadin.com/directory#addon/ikaruswidget

Now i need some css to:

  1. hide the house icon at the begining of the breadcrump widget
  2. disable the mouse icon change by moving the mouse over the breadcrump

thank you very much

use something like firebug to find out what css style name these object have and then create styles in your style.css or .scss in which you overwrite them using:
1: display:none;
2: cursor:default;

by using findbug, i found following code part:



.xbreadcrumbbutton-home .v-button-caption {
    background: url("./images/home.gif") no-repeat scroll left center transparent;
    padding-left: 20px;
}

i´ve tried to remove the icon in my styles.css in this way:


.xbreadcrumbbutton-home .v-button-caption {
    background: default;
    padding-left: 0;
}

but nothing happens :frowning:

Is your style.scss correctly applied to the app?
does it show the wanted result if you apply the properties directly in the firebug dev console?

You could try using:
background: default !important;`

Also did you clear the browser cache before testing?

can you see your style change in firebug when selecting the component (but maybe marked to show that it’s not applied)?

as you can see in the attached file, there is the home icon.

by clicking on the code, i can disable the codeline → icon is disabled
13415.png

just made a bit of testing with the demo app of ikarus and when you add this style:

.xbreadcrumbbutton-home{
display: none !important;
}

the home button completly disappears. background: default and none doesn’t do anything when applied to the button.

yes, it completly disapperses… but that is not exactly what i am looking for :slight_smile:

So this should be more what you want, right?

.xbreadcrumbbutton-home .v-button-wrap .v-button-caption {
background: none !important; //important probably not even necessary
}

this disables just the background.

not working for me :frowning:

the icon is still visible

worst possible question-answer. Be more precise, show screenshots AND try around with Firebug (or whatever browser dev tool you are using)

because nothing changed, a screenshot is not very usefull…

but i´ve tried something around with firebug and this is working for me now:


.v-button.v-button-link, .v-button.v-button-link:focus, .v-button.v-button-link:active, .v-button-link.v-pressed, .v-disabled.v-button.v-button-link, .v-button.v-button-link .v-button-wrap, .v-button.v-button-link:focus .v-button-wrap, .v-button.v-button-link:active .v-button-wrap, .v-button-link.v-pressed .v-button-wrap, .v-disabled.v-button.v-button-link .v-button-wrap {
    background: transparent;
    height: auto;
    padding: 0;
    cursor: default;
    line-height: inherit;
}

.xbreadcrumbbutton-home .v-button-caption {
background: none !important;
padding-left: 0px;
}