Editor’s note: Contributor Benjamin Niaulin is a SharePoint Specialist at Sharegate. Follow him @bniaulin
Not long ago, I started a branding series to get closer to how I could change the look and feel of my SharePoint site without dealing with tons of complicated code stuff. So I looked at the basic elements of a SharePoint site, mainly the navigation, and with CSS I discovered a whole world of possibilities. In time, I even pushed on to realize jQuery did not have to be a scary word only developer’s use. You can find links to my series here.
I decided to start a series that will show you some cool little tricks you can do with CSS. If you are not sure how to apply CSS, go back to the first articles of my series above where it is described in details. In short, you can use the Content Editor Web Part to a CSS that will apply to a single page. The one with the CEWP on it.
Hide the Quicklaunch
We all love the quicklaunch, navigation menu on the left.
But there are times when you would rather maximize the page content and leave the quicklaunch out of it.
The solution is but a few lines of CSS:
<STYLE>
#s4-leftpanel {
display: none
}
.s4-ca {
margin-left: 0px
}
</STYLE>
The code above hides the “left panel” (quicklaunch) and gives the “Content Area” (.s4-ca) full width by starting from 0px on the left.
Hiding the “Recently Modified” of wikis
Probably the most popular demand I get during sessions or at conferences.
This will do the trick:
<STYLE>
.s4-recentchanges{
display:none;
}
</STYLE>
SharePoint uses a class called s4-recentchanges to show it
Hiding “I Like it and Tags and Notes”
I do get this request from time to time. Although I don’t always agree as it adds a great value to the end user on SharePoint and My Profile.
<STYLE>
.ms-socialNotif-Container {
display:none;
}
</STYLE>
And it’s gone
Change the look of hyperlinks with specific words in the link
Let’s say you want to add an icon for every link to “My Sites” in your SharePoint. Or simply change the font and color of links to the company web site.
In this example, I want to change the color of the link to the Sharegate site to orange and make it bold. But I don’t want to do this only to this hyperlink, that would be easy. I want CSS to always find the links wherever they are and change it automatically
<STYLE>
A[href*='share-gate'] {
COLOR: #e36c09;
FONT-WEIGHT: bold
}
</STYLE>
Stay in touch via twitter @bniaulin