[Solved] Skin overrides for toolbar buttons

[Tomica]

With respect to the attached image, I would like to adjust toolbar button formatting to match the panel bar.

For each I have applied CSS to adjust the default Metro Touch background colors. The toolbar includes additional borders or effects that I would like to go away, or at least be the same color as the background. Border color is obviously not the correct answer.

.rpExpanded {
    background-color:#3586CE  !important;
}

.rpSelected {
    background-color:#3586CE  !important;
}

.wwgToolbar {
      background-color:#3586CE  !important;
border-color:#3586CE  !important;
}

[Magdalena]

Hello,

Please, try to apply the following CSS to remove the border of the RadToolBar

html .RadToolBar .rtbOuter {
    border: 0;
}

Regards,
Magdalena
Telerik

 

 

[Tomica]

The "border: 0;" setting got me halfway there.

With reference to the revised screenshot, my goal is to match the PanelBar modifications as close as possible.

While the overall border is gone, it looks like I am left with individual borders on each of the toolbar buttons.

What is the relevant CSS styling to remove their black borders? I am guessing "border: 0;" but do not know the internal codes for the buttons.

[Dimitar]

Hello,

After inspecting the RadToolBarButton's styles, we can find out that these individual borders come from the rtbWrap CSS class. Thus, we need to override the styles with the following selector:

html .RadToolBar_MetroTouch .rtbWrap {
    border: 0;
}

Note that placing "html" in the beginning increases the weight of our selector and we do not need to add "!important" for the override to take place. I have attached a screenshot with the result of that style applied.

Regards,
Dimitar
Telerik