Sharepoint 2013 deleting contents of <style> in embed code when saving

Question

I am trying to add some styling to a Sharepoint 2013 page using the Embed code facility. It works fine until I save the page and then it deleted all the text between the <style> and </style> tags?

So I click embed code on the page and enter the following

<style>
.sampleStyle {color:#fff}
</style>

When its saved and re-opened I find sharepoint has changed the code to this

<style unselectable="on">
</style>

Hecker

Answer 1

It can be done. In my frustration this morning, I was adding information in the embed code box and SharePoint wouldn't save it at all. When I returned to the box, it was just empty.

Here's how to make it work:

• Use embed code as before, but enter the following:

  <script type="text/css">
    */your CSS here/*
  </script>
  

• Click Insert

• Save your page
• Edit your page again and change script to style (as it should be)

It'll now work!

When you first add the code you must use <script> in order for SharePoint to save and embed some code. Once it's embedded, you can change it and it will remain embedded and work.

Legionary

Thank you SO MUCH! I was dying with the unselectable constantly wiping out my code – Repeat

This doesn't work for me. I get a message that states some of my code was stripped and that I should use "embed" instead. – Doughman

This didn't work for me either, but just adding <script></script> as the very first element did. It changed from "Snippet" to "Script Editor" and preserved the style. – Afterbirth

Answer 2

I think you can't add css styles and javascript in content editor. However, you can use script editor to add them.

Much better is to have a file and using script editor, include that file, like in video https://www.youtube.com/watch?v=gcWX3N4nWyw

Orgasm

Answer 3

In case anyone needs it, more detail on options here:

http://365.webbrewers.com/blog/Lists/Posts/Post.aspx?ID=30

"Adding javascript to a 2013 public site page isn't as straightforward as it is in most properly designed content management systems. The choices presented by the page editor are the "embed code" tool, the "edit html source" tool and buried away under web parts – the script editor web part. As far as I can tell here's how all 3 work:

The Embed Code Tool:

This is the strangest of the Microsoft script insertion concoctions – it detects if your insertion starts with a tag and adds a script editor web part if it does. If it doesn't, it simply adds a "snippet" of code to the page's source – and strips out any javascript. So if you want to add an INLINE js event like an onclick event for a pop up within a link, this option will stri ....."

Customary

Answer 4

Use the HTML Form Editor web part, and SharePoint will not change your code.

Plerre

Answer 5

<script type="text/css"> method didn't work for me. MS will strip the <script/> from the final result. You will need to get to the Sharepoint Admin Site to enable Custom Script under Settings and wait for 24Hrs to make it effect.

Adding .css file to the site and link it in your code snippet might be the right way to go.

One quick and dirty method, however, is to inline your css. MailChimp has a tool that can help you do that with a click. The final result is nasty (like every single rich content newsletters /s) but it works.

Mina