Shulou(Shulou.com)06/02 Report--

In general, companies change the style of websites and create unique brand styles for purposes such as sharing data within a team or within the company. the solution given by many R & D engineers is to build a custom home page for their site. Although SharePoint Designer is a powerful tool, I do not recommend using a tool like SharePoint Designer to change the code of the page, because changing the master page will lead to updates and patches. Changes to the home page usually prevent updating connectivity between sites, which means that Site Collection administrators have to do a lot of extra work to find and fix block problems, wasting time and extra money, and preventing SharePoint from releasing new features when developing new features.

For changing the theme of the site or Logo, Microsoft recommends using the onboard tools that comes with SharePoint. You can choose a pre-configured theme template, including color panels, fonts and even background images, and you can modify it according to your own flexibility. You can also create custom themes or your own fonts and add them to your site. The real benefit of using Onboard tools or themes is that they will not interfere with SharePoint updates.

If you want to make more fine-tuning to your site, you can create a custom CSS stylesheet. With CSS, you can change the properties of the site elements instead of the underlying page code as you change the new master page. You can even use JavaScript to change the CSS elements at the page level and use them in your site, but using CSS may be a little risky. Because you cannot guarantee that the element name will not be changed when SharePoint is updated, but it is still much safer than using SharePoint Designer to change the master page.

Therefore, for modifying the theme and Logo, the recommended solution is:

Use built-in tools to build custom themes using pre-built themes use CSS to customize master page changes, but take on additional development work to ensure that your site is updated

Next, I'll show you how to create and upload a CSS stylesheet, and some may ask why you use CSS.

CSS is a safer and more flexible alternative to other customization methods provided by Microsoft. CSS allows you to control the style of the various elements of the site. I have seen some people design their site by inserting blank content areas in all pages and then manually updating the HTML code on each page with an inline style. although this is possible, it is much more complicated than redefining an existing element tag with CSS. Using CSS allows you to apply changes throughout the site and helps ensure consistency. Although support for new feature may be slightly different, CSS is a widely used styling method for all browsers and all platforms. With CSS, you only need to change the properties of the element, not the underlying page code, and it is free, does not require any License, and it does not require the intervention of the system administrator. You just need to activate Site Collection's Publishing Feature.

Now, let's prepare to modify our website:

The first step is to create a new blank stylesheet and load it into our SharePoint site.

Now you can use any text editor application to create stylesheets, such as Windows notepad, because you can't upload an empty file to SharePoint, so I have to put some placeholder text here, save it as a modified_style.css file, and store it in assets Library on the website.

The second step is to associate StyleSheet with your site.

We need the site to reference our newly uploaded stylesheet, and after activating Site Collection's Publishing Feature, Alternate CSS URL references the newly uploaded stylesheet on the Setting- > Site Master Page Settings page of the site collection.

Step 3: make real-time changes to the website by editing the StyleSheet we uploaded.

Although Chrome is my most commonly used browser, it is recommended to use IE or Micrsoft Edge when updating CSS, because I often need to update Cache manually to show my changes. Now let's click and open the stylesheet as text to edit the background color of the site: black.

Sample code:

/ css/

Body {

Background-color: black

}

Just save the modified_style.css.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.