This is a migrated thread and some comments may be shown as answers.

Skin overrides for toolbar buttons

3 Answers 61 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Tomica
Top achievements
Rank 2
Tomica asked on 12 Sep 2014, 06:41 PM
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;
}


3 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 17 Sep 2014, 07:56 AM
Hello,

Please, try to apply the following CSS to remove the border of the RadToolBar
html .RadToolBar .rtbOuter {
    border: 0;
}


Regards,
Magdalena
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Tomica
Top achievements
Rank 2
answered on 17 Sep 2014, 04:08 PM
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.
0
Dimitar
Telerik team
answered on 22 Sep 2014, 02:37 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
ToolBar
Asked by
Tomica
Top achievements
Rank 2
Answers by
Magdalena
Telerik team
Tomica
Top achievements
Rank 2
Dimitar
Telerik team
Share this question
or