Posted on

Hide the Browse and Edit buttons and/or the Share, Follow, and Focus/Full-Screen buttons from a SharePoint page’s ribbon menu

Photo by Drew Rae from Pexels

I know I’m blogging a lot about CSS changes lately, and it’s not normally something I recommend. But for a very specific project of mine, I’ve been doing a lot of this and am sharing a few tips along the way in case they help others needing to accomplish something similar.

Hide the Browse and Edit buttons/tabs

Click to enlarge

In this post, I’ll share how to hide the Browse and Edit tabs from the ribbon menu of a SharePoint page. This only applies to classic experience pages. To hide these tabs/buttons, add the following CSS inside a <style> tag to the page(s) on which you wish to remove these options.

.ms-cui-tt a[Title='Browse'],.ms-cui-tt a[Title='Edit']{
display:none;
}

If you’re unsure how to add CSS to your page, this post details the steps with a different script. Just use the script above inside <style> tags instead.

You can also hide other tabs like Page, Files, Library, etc. by adding a comma right before the opening brace ({) and then pasting another .ms-cui-tt a[Title=’Page’] (substituting the tab name of course). This only works for some, but not all tabs.

Hide the Share, Follow, and Focus/Full Screen buttons

You may also wish to hide the three buttons on the right side of the ribbon seen here:

Click to enlarge

Similar to above, we’ll just set the #RibbonContainer-TabRowRight ID to not display. This one has to have !important added inside the semi-colon for it to override competing code and take effect as expected.

#RibbonContainer-TabRowRight{
display:none!important;
}
Posted on

Style embedded html iframe and border so it doesn’t look sunk on the page

Photo by Zukiman Mohamad from Pexels

If left unstyled, your embedded iframe content when working with html pages appears inside “sunken” boxes/frames (browser and context-dependent, of course). I don’t find this look to be very appealing, so I typically adjust the iframe’s properties a bit in the html to give it a little less sink and a little more pop. I add specific width and height values to be exact about where I’m placing it and what it contains, and I use box-shadow instead of border which gives it that “lift” off the page.

Consider the following script just a starting place, then get creative with your own content and design. You’ll want your embedded content to “fit in” with the rest of its page’s contents so try to be consistent if you have other boxed elements/containers on the page (Tip: Use F12 and element selection to see the style properties of other parts of your page).

<iframe src="https://sharepoint.contoso.com/SitePages/MyLinks.aspx" border="0" frameborder="0" style="border-style:none;box-shadow:0px 0px 2px 2px rgba(0,0,0,0.2);width:262.5px;height:250px;" cellspacing="0"></iframe>

P.S. I’m sure I could write this prettier, but it works. For instance, you could reference the iframe in your CSS rather than hard-coding it in the html body.

Posted on

Make full-width SharePoint hyperlink column clickable beyond just the link text

Photo by Pixabay from Pexels

This is such an obscure topic, but maybe it will help somebody curious out there. I recently had a request to alter a classic experience list with a single hyperlink column so that users could click in the white space of a cell and it takes them to that cell’s hyperlink value as if they’d actually clicked the link.

To illustrate what I mean, notice how the arrow pointer changes to a hand cursor like the whole cell is clickable. And when white (blue) space of the Google link is clicked, it takes us to Google anyway:

Click to enlarge

This was done with the tiniest bit of CSS added to the page inside a <style> tag. Note that this will affect all links in tables on the page to which it’s applied. So if you have more than one table on the page, this could cause issues. But in my case I just had the single-column list I was working with and this sufficed.

td a {
    display:inline-flex;
    width:100%;
}

Good luck!