4

I am trying to set a html homepage to a sharepoint page, The html is based off a bootstrap template as it felt the best to fit the purpose. My problem is that once uploaded to the sharepoint server using Sharepoint designer 2013 Everything gets messed up. I am assuming this is due to sharepoint's css overwriting my own. I have the bootstrap.css and mycustom.css.

I cannot apply this css to a masterpage due to the fact that this will be the only html page that uses it and this css breaks everything else.

  • 1
    Ryu, see my answer below and give it a try. There is a common work around for this.Thanks – Haroun A. Dec 24 '13 at 17:54
2

Yes you are right, by default Bootstrap will not run in SharePoint, because SharePoint is overwriting it's CSS. Check http://bootstrapsharepoint.codeplex.com for a running Bootstrap Template.

| improve this answer | |
  • OK so I am now running a bootstrap template, and while I now have a more responsive and way cooler sharepoint page to work with other things (im new to this so thanks for that, the .css does not seem to have any effect on my page. this may be due to its location being in "Site Pages". Any other ideas? – Ryu Dec 24 '13 at 21:51
  • 1
    doubt its because its in Site Pages as long as its a valid link (no 404), Can you open the .css file from the link in your browser? Are you using the bootstrap template from the link above? Can you zip the files so we can try in our env's? :) – int32 Dec 25 '13 at 10:25
  • Actually I made a mistake, I am not using the solution you posted above since I ran into an issue with not enough permissions to use it. Let me get that sorted first and I will get back to you. – Ryu Dec 26 '13 at 17:09
  • sure, let me know! :) – int32 Dec 26 '13 at 22:03
  • I could not get the permissions to use this, Its a state agency... but you did get me on the right path so thank you! – Ryu Dec 27 '13 at 0:28
1

why not convert your html to Master page and that page only apply to your home page. here is the link how to convert it http://msdn.microsoft.com/en-us/library/jj822370.aspx

or may be think about to create a page layout...

http://msdn.microsoft.com/en-us/library/jj822368.aspx

| improve this answer | |
  • I would have done this but my html was not xml compliant. – Ryu Dec 24 '13 at 21:48
0

First try this: Add the reference to your CSS files after the Sharepoint CSS references. By them being placed afterwards, they should override Sharepoint's CSS files and references.

If the above fails then:

You can add the below next to every attribute you want overwritten (which is all)

!important

Attribute to not allow your css to be overwritten. Simply add it next to your properties like below:

h3#issueHeader { color: blue !important; }

| improve this answer | |
  • So I refrence 2 .css sheets, bootstrap.css and mycustom.css, am I going to have to individually label each of them !important? – Ryu Dec 24 '13 at 21:47
  • 1
    Yes, you will need to write !important for every Attribute.I have also updated my answer with another recommendation which should technically work. – Haroun A. Dec 24 '13 at 21:53
  • How do you tell where sharepoint is going to put in its .css, If I could add mine last I would have. – Ryu Dec 24 '13 at 21:59
0

Because using the .wsp was not an option my only solution was to edit the default.aspx that was used as the homepage with the html I wanted to use. I also made my html a master page so that bootstrap.css would be loaded and applied the alternate css as mycustom.css no idea why this was required I was only messing around and it worked. Then I had to edit my master page to delete the ugly navigation and now I am set.

Thank you for all your answers as you lead me in the correct direction to find my solution.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.