SharePoint Online Development: how to use Develo

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

When we use the CSS element, almost every browser has a built-in development tool, which is very convenient. The development tool will allow you to locate the objects on the page and view their properties. The advantage is that the development tools can not only be used in each browser, but also can be opened in the same way. Let's continue to take the home page of the website and open it using an IE browser as an example, just press F12. If you are using a Lenovo laptop, you need to use the Fn+F12 key together.

You will see in the explorer pane that HTML has many elements, Microsoft calls many elements at a time, while SharePoint works from a large number of stylesheets, elements are nested in nested elements, and so on, so if you are not a professional website developer, there will be some trial and error when you experiment with your website style, but there is no risk of destroying any Object, and any actions you do on this page are temporary You can simply refresh the browser page to set everything back to the default value.

Now let's look at how to find an element, how to make changes, and how to test it.

We start with the more obvious Object, such as removing the search bar, we use the select page element pointer to click on the search area, in the Explorer panel, you will see jump to the relevant page code, we want to find: searchux-searchbox, double-click and copy it, then add a rule under the style tag on the right, and you will find that the search box on the left disappears.

Add the Rule under the Style tag, sample code:

Ms-searchux-searchbox {

Display: none

}

It is important to note that when we refresh the page again, the page will be refreshed and loaded, and the changes will disappear and return to the original state. If you want to keep it permanently, you need to copy this rule, paste it into the stylesheet, and save it, which will use this rule permanently.