Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I am following this SharePoint 2010 tutorial where the author is adding styles directly in the html mark-up of the page.

When I edit the mark-up in SharePoint 2013 and click OK initially the styles are applied, but when I click save and view the page again, all styles have been stripped out.

As Fox politely pointed out, this is normal behaviour - so how do I apply styles to html elements within SharePoint 2013 if I want to make a custom page with a custom layout?

share|improve this question
1  
What are you editing. Master Page, Page Layout? If you do edit content pages directly, SharePoint will strip out any HTML Elements such as <script> or <style> tags. –  Fox Mar 8 '13 at 8:52
    
Ah that explains it then - I reworded my question to ask how to reference css files from templates. Thanks for the help so far. –  g18c Mar 8 '13 at 8:58
add comment

3 Answers 3

up vote 1 down vote accepted

If you don't want to edit master pages or page layouts I usually store the CSS in a document library (or asset library) on the same SharePoint site. Then I add content editor web part (CEWP) to the page to 'insert' this css into the page.

Disadvantage is that you need to add that CEWP to every page where you want to apply the styling.

I have once written a blog post about it. Although the blog post is about inserting HTML snippet (google maps sample). The idea for your CSS is exactly the same. Store it in a file an reference it with a CEWP. (works great for JavaScript as well)

You find the post here: http://blog.amtopm.be/2011/05/04/use-google-maps-in-sharepoint-oob/

share|improve this answer
    
Thanks @W0ut, is it much more complicated to use a page layout or would we reference in the same way with the page template? –  g18c Mar 8 '13 at 19:22
    
Creating page layouts or a master has become a lot more easier in SP2013 by using the Design Manager (not in the Foundation version). Personally I prefer creating a page layout and insert the css (or a reference to the css) in the new page layout. However some clients do not allow me to create/use custom page layouts, SPD, etc... In such cases I found the above approach useful. –  W0ut Mar 9 '13 at 6:30
add comment

A very effective and easy way is to store the css files either in the file system or in the style library(I vote for the first one).

  1. First create a css file with the style definitions you want and save it in the structure in Visual Studio of a SharePoint Project. The files could either be copied to SharePoint root or to a SharePoint library on deployment.
  2. Then create a user control which you deploy to the controltemplates/projectname. In that user control you add the references to your css files add possible javascript files.
  3. Create a delegate control that puts your user control in the AdditionalPageHead on the master page.
  4. Create a feature for your delegate control that will activate your css.

//M

share|improve this answer
add comment

I have not worked with Sharepoint 2013 before but i'm pretty sure that it stays exactly the same as in 2010. You can add

share|improve this answer
    
similar, but not exact. –  1c1cle Jun 5 '13 at 16:15
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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