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
  • 1
    Ryu, see my answer below and give it a try. There is a common work around for this.Thanks
    – Haroun A.
    Dec 24, 2013 at 17:54

4 Answers 4

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.

5
  • 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, 2013 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, 2013 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, 2013 at 17:09
  • sure, let me know! :)
    – int32
    Dec 26, 2013 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, 2013 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

1
  • I would have done this but my html was not xml compliant.
    – Ryu
    Dec 24, 2013 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; }

3
  • 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, 2013 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, 2013 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, 2013 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.

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.