Skin overrides for toolbar buttons

4 posts, 0 answers
  1. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 12 Sep 2014 Link to this post

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


  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 17 Sep 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 17 Sep 2014 in reply to Magdalena Link to this post

    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.
  5. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 22 Sep 2014 Link to this post

    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.

     
Back to Top