1

I'm working on a SharePoint Online Wiki page. I've edited the source on the page and then added the following style container:

<style>
.ms-core-listMenu-verticalBox { DISPLAY: none }
#s4-titlerow { DISPLAY: none }
#contentBox { margin-left: 20px }
.b-articleContainerFeatured .b-articleContent h2
{
    color:white !important;
}
.btn-style {
        background-color: #378ED5;
        color: #fff!important;
        padding: 10px 15px;
        font-size: 14px!important;
        border-radius: 2px;
        display: block;
        float: left;
        margin: 3px 5px 3px 0px!important;
        border: none;
}
</style>

After I click Ok in the edit source window I can see the changes successfully apply to my page. Unfortunately after I save page changes my changes disappear. In trying to figure out what went wrong I reedited the source on this page and noticed that everything except for my style tags:

<style>
</style> 

Had been stripped from the page source. What gives? Is there a better approach for applying my style block to a page in SharePoint Online?

2

Try adding a Script Editor web part to the top of the page, edit the web part, click on "Edit Snippet", and add your style block there.

SharePoint strips some things out of the main content areas, but you can effectively add style blocks, links to style sheets, script blocks, and links to script files in a Script Editor web part.

  • Well that's just ridiculous functionality isn't it? Will try this shortly... – Michael A Aug 5 '15 at 1:55
  • Agreed, seems like if they let you edit the source HTML, you should be able to add valid HTML. And yet...nope. Script and style stuff gets stripped out, and needs to be either in a Script Editor web part or pulled in using a Content Editor web part. – Dylan Cristy Aug 5 '15 at 1:58
  • Worked this way as well. Going to have to document this one! – Michael A Aug 5 '15 at 1:59
  • Its stripped out to stop people messing it up unwittingly. I realise most people on here would be aware of what is harmful code, but some users may not, by limiting their ability to add code/css that would break the branding/functionality you save yourself a lot of headaches. – Mauro Aug 5 '15 at 8:26
0

use an external css script and link it to your sharepoint page then re-write your css style in the external script.

  1. Put this code in your css file

    .ms-core-listMenu-verticalBox { 
        display: none 
    }
    
    #s4-titlerow { 
        display: none 
    }
    
    #contentBox { 
        margin-left: 20px 
    }
    
    .b-articleContainerFeatured .b-articleContent h2 {
        color:white !important;
    }
    
    .btn-style {
        background-color: #378ED5;
        color: #fff!important;
        padding: 10px 15px;
        font-size: 14px!important;
        border-radius: 2px;
        display: block;
        float: left;
        margin: 3px 5px 3px 0px!important;
        border: none;
    }
    

  2. link the css file to your wiki page

  3. save and run

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.