Community > Answers

How can we help you today?

Ask Question
Manage notifications
Subscribe to this question
87 views

No Navbar Button Color Defined in Knowledgebase

Could you please provide or define the CSS style code for the navbar's button color in Live Knowledgebase? It's currently using the native CSS code to define the navbar's default blue color. I want to make them orange like the theme color of my site.   

Will Will
asked 05/14/2019 16:11
Add Comment
Last Activity 05/27/2019 15:54

4 Answer(s)

  • answered 05/15/2019 19:21
    Mandeep Singh

    You can override the following:

    .ms-nav-pills>li.ms-active>a,.ms-nav-pills>li.ms-active>a:focus,.ms-nav-pills>li.ms-active>a:hover {
        color: #fff !important;
        background-color: #337ab7 !important;
    }

    Note: This will change the colors of tabs across all Mandeeps Modules. 

    Add Comment
  • answered 05/20/2019 01:35
    Will

    Mandeep,

    I changed the color as you recommended, but the buttons still appear blue in Knowledgebase. I found the code in here:

    Code located in /httpdocs/DesktopModules/Mandeeps/Libraries/Common/Frameworks/Bootstrap/3.3.4/css/bootstrap.css

    Line 3964-68

    Is that correct file?

    Add Comment
    Ashish Pachori
    replied 05/22/2019 13:28

    It will get revert back if you install Common Library in future. Please do not update Common bootstrap.min.css intead add it in your portal.css (Persona Bar > Settings > Custom CSS). 

    Reply
  • answered 05/22/2019 18:05
    Will

    Ok, it just works for button mouse over. I want the buttons the Porto color theme of the site (i.e. #f07830). They still remain blue while browsing the Knowledgebase page or module. 

    Add Comment
    Ashish Pachori
    replied 05/23/2019 12:55

    Please provide URL so we can take a look.

    Reply
  • answered 05/23/2019 14:26
    Will

    https://www.itspecialist.com/Knowledgebase

    Add Comment
    Ashish Pachori
    replied 05/24/2019 06:47

    Please add following CSS at Persona Bar > Settings > Custom CSS

    .ms-nav-pills>li.ms-active>a, .ms-nav-pills>li.ms-active>a:focus, .ms-nav-pills>li.ms-active>a:hover {
        color: #fff;
        background-color: #ff6a34;
    }

    Will
    replied 05/24/2019 16:38

    That did not correct the problem.

    Ashish Pachori
    replied 05/27/2019 04:06

    The CSS should be added with important.

    .ms-nav-pills>li.ms-active>a, .ms-nav-pills>li.ms-active>a:focus, .ms-nav-pills>li.ms-active>a:hover {
        color: #fff;
        background-color: #ff6a34 !important;;
    }

     

     

     

     

    Will
    replied 05/27/2019 15:54

    Thanks! That fixed it.

    Reply
Add an Answer