Hi so I was wondering if there is a way to basically create my own website that is shown through SharePoint. Basically I want to use the SharePoint top navigation bar but everything below it I would like to be my own custom html and css. Is there a way to do this and if so how would I go about it?
2
-
Are you using the 'Classic' UIde for SPO or 'Modern'?– BigRajCommented Jun 17, 2019 at 15:58
-
I am using Modern– MikeDursoCommented Jun 27, 2019 at 17:52
Add a comment
|
6 Answers
The short answer is, Yes you can customize the page template and the long answer will be, your question is very subjective and can have multiple answer depending on the design you are trying to achieve.
In classic SharePoint we have the concept of Master Pages and Page Layouts to achieve the custom theme/branding. But in case of SPO modern pages, as of now there is concept of SharePoint Lookbook, using which you can define the templates for page, themes and layout and pre-populate the content of page. Read more about SharePoint Lookbook.
Not Recommended
This is not a recommended way but if you have strict requirement where you want to hide all the chrome of SPO, them SPFx Application Customizer is your friend. You can use it to hide the SPO component to achieve your UI, and SPFx webpart to handle the content UI. Read more on application customizer. The sample screentshot of customization is following.
While the other suggestions given are great and probably better long-term, here's a very client-side approach that I use all the time. I've even built robust, single-page-application React apps that sit below the Sharepoint header. The feedback from users: "Is this a Sharepoint site? It doesn't feel like a Sharepoint site!"
Simply add a Content Editor Web Part to a blank page, say a Wiki page. Link the CEWP to an html file with content such as this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="{link to your stylesheet here}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="{link to your javascript file here}"></script>
</head>
<body>
<div id="root">
</div>
</body>
<script>
$(document).ready(function() {
BuildApp();
});
</script>
</html>
Then within your javascript file, create and export the function BuildApp() which builds your content and inserts it into the root element. Your code can even access your Sharepoint lists using the PNP libraries (https://github.com/pnp/pnpjs)
Don't forget to hide all the OOTB Sharepoint stuff below the header using CSS in your stylesheet file (or jQuery after the page has loaded.) For example,
#s4-titlerow, #sideNavBox { /* maybe even #s4-ribbonrow, #suiteBar, */
display:none !important;
}
It might be simpler to create your non-SharePoint content on a non-SharePoint server and just embed it using the Embed web part. Microsoft has instructions here.
you can look at using 'Provider hosted add-in' technology for SharePoint. Using this technology you can host your web application, service, or database that is hosted externally from the SharePoint farm or SharePoint Online subscription. It may also include SharePoint components. You can host the external components on any web-hosting stack, including the LAMP (Linux, Apache, MySQL, and PHP) stack.
If you use the modern experience in SharePoint online and you want to add the custom code in the page, you could deploy SPFx solution in your SharePoint online environment.
For more detailed information, refer to the articles below.
Use an SPFx Application Customizer to add JavaScript (e.g. header) to every page in a site.
So basically what I have been doing is:
-I made a copy of the default Master page
-So far I haven't made any edits to that page but I have a custom CSS file that uses the Classes and ID's of the SharePoint default corev15.css file.
-My custom CSS file will overwrite some of the properties that need to be overwritten as well as add properties that were not included. Because the corev15.css file is still in the background the rest of the page is styled based off of that file.
It has been working well although it is intimidating to go through the corev15.css file without knowing much about it. Using chrome developer tools makes it easy to find the class or ID you want to be able to edit in the CSS file.