SharePoint Online custom development: how to modify site navigation font color and background

https://blog.51cto.com/13969817

Many companies have a clear set for UI style, or for a better user experience of the need to make changes to a particular font or background of the navigation of the site.
We use IE browser to open the Site Settings page of your site, for example, press the F12 key to enter the developer tools page, if you are using a Lenovo notebook, you need to use with the Fn + F12 keys. You will be in the Explorer pane, select the page element we use the pointer click on the "Calendar strategy review" in the Explorer panel, you will see a jump to the relevant page of code, we want to find: menu-item-text double-click it, and then add a rule in the right side of the label style, its navigation font color is red.
SharePoint Online custom development: how to modify site navigation font color and background

Add in the Style tag Rule, sample code:

.menu-item-text {
color: red !important;
}

have to be aware of is:

  • For these rules, you can put an exclamation point after defining attribute, which means that it will override any other command.
  • When we refresh the page again when the page will refresh + loaded, changes made will disappear, set back to the initial state.
  • If you want to permanently retained, you need to copy this rule, and then paste the style sheet, save it permanently using this rule, the following changes in the stylesheet.
    SharePoint Online custom development: how to modify site navigation font color and background

If you want to float on mouse navigation, navigation color changes, such as turn blue, how does it work?

We need to make some changes in the style sheet:
SharePoint Online custom development: how to modify site navigation font color and background

Sample code:

.menu-item-text {
color: red !important;
}
.menu-item-text :hover {
color: blue !important;

When the mouse floating navigation, navigation color to blue:

SharePoint Online custom development: how to modify site navigation font color and background

Next, we look at how the font change the background color of the navigation bar?

We need to make some changes in Explorer panels: Static menu-item, add a rule:
SharePoint Online custom development: how to modify site navigation font color and background

Rules sample code:

.static {
background-color: lightblue !important;
}

Description:

If you want to permanently retained, you need to copy this rule, and then paste the style sheet, save it permanently using this rule, the following changes in the stylesheet.

SharePoint Online custom development: how to modify site navigation font color and background

Guess you like

Origin blog.51cto.com/13969817/2450638