I am looking to relocate the Edit button for Sharepoint 2013 pages and hide the 'suiteBar', im comfortable hideing through CSS, but need to be able to allow editing the page directly and postion this myself with CSS

I have tried grabbing the snippet from the source, but the effect wasnt what I wanted

Ideally just want the 'edit functionality' without the top two sharepoint bars. Would really appreaciate the full solution if possible and thank you in advance

  • Well, you might still hide the gear/site settings and the "edit" button in the top right bar but as soon as you have contribute/edit page rights, you will have the brower tab called "page" where you can edit the page as well. – Christoffer Mar 9 '17 at 12:34
  • It is most likely, by the time you make the move to SharePoint Online, you will not be able to make changes to that part of the UX, so the effort you now invest might have a short ROI calculation – Danny '365CSI' Engelman Mar 9 '17 at 12:53
  • Thanks - our IT roapmap suggests that transition is 1.5 light years away. So just need this for now - thanks for the heads up : ) – uatonly Mar 9 '17 at 13:54

Hide both ID's:

#suitebar {

For the button you should inspect your page with the developer tool in your browser, and use the properties from the original button. Here is a example of my edit button. You can use the onclick event to start the JavaScript function.

I did not tested it. But pretty sure it will work.

Let me know :)

<a class="ms-rtefocus-invalid ms-promotedActionButton" id="ctl00_PageStateActionButton" href="javascript:" onclick="CoreInvoke('PageActionClick', this);return false;" _action="edit" _editoffsetx="236" _editoffsety="84" _edithoveroffsetx="181" _edithoveroffsety="192" _saveoffsetx="0" _saveoffsety="433" _savehoveroffsetx="0" _savehoveroffsety="449" _edittooltip="Edit" _savetooltip="Save" title="Edit" onmouseover="this.firstChild.firstChild.style.left='-' + (this.getAttribute('_action') === 'edit' ? this.getAttribute('_edithoveroffsetx') : this.getAttribute('_savehoveroffsetx')) + 'px'; this.firstChild.firstChild.style.top='-' + (this.getAttribute('_action') === 'edit' ? this.getAttribute('_edithoveroffsety') : this.getAttribute('_savehoveroffsety')) + 'px';
    " onmouseout="this.firstChild.firstChild.style.left='-' + (this.getAttribute('_action') === 'edit' ? this.getAttribute('_editoffsetx') : this.getAttribute('_saveoffsetx')) + 'px'; this.firstChild.firstChild.style.top='-' + (this.getAttribute('_action') === 'edit' ? this.getAttribute('_editoffsety') : this.getAttribute('_saveoffsety')) + 'px';"><span style="height:16px;width:16px;position:relative;display:inline-block;overflow:hidden;" class="s4-clust ms-promotedActionButton-icon"><img src="/_layouts/15/images/spcommon.png?rev=23" style="position: absolute; left: -236px; top: -84px;" alt="Edit"></span><span class="ms-promotedActionButton-text">Edit</span></a>

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.