Edit button page (relocate)

Question

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

Answer 1

Hide both ID's:

#suitebar {
  display:none;
}
#s4-ribbonrow{
  display:none;
}

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>