Category Archives: CSS

Bootstrap, CSS, SharePoint 2013

How to create a button in SharePoint 2013

So there are a few ways of creating custom buttons in SharePoint however, I like my buttons to be noticeable so I tend not to use the standard button however, I’ve shown below how to create buttons using basicbutton, Bootstrap & CSS.

Buttons1

Basic Button:

Button2

<input type=button onClick=”parent.location=’http://sharepoint-oc/'” value=’Click Here!’>

CSS Button:

Button4

<style>
.link {
background-color: #6666FF;
color: white;
padding: 12px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

.link:hover {
background-color: #C1C1FF;
}
</style>
<a href=”http://sharepoint-oc/” class=”link”>Click Here!</a>

Bootstrap Button:

Button3

<button type=”button” onclick=”parent.location=’http://sharepoint-oc'” class=”btn btn-primary btn-lg”>Click Here!</button>
CSS, SharePoint 2013

SharePoint 2013 Branding

Below are a few useful tips to hide items within SharePoint.

Remove quick launch

Before:
BrandingBefore
After:
BrandingRemoveQuickLaunch

Code:

<script type=”text/javascript”>
function pageLoad()
{
$(document).ready(function(){
$(“body”).addClass(“ms-fullscreenmode”);
$(“#fullscreenmode”).css(“display”, “none”);
$(“#exitfullscreenmode”).css(“display”, “”);
});
}
</script>

 

Hide Site Logo (top left of site)

Before:
BrandingBefore

After:
HideSiteIcon

Code:

<style>
div#siteIcon
{
display:none;
}
</style>

 

Hide Site Title

Before:
BrandingBefore

After:
HideTitle

Code:

<style>
.ms-core-pageTitle {
display:none;
}
</style>
Hide New Item & Quick Edit link

Before:
HideNewItemLinkBefore

After:
HideNewItemLinkAfter

Code:

<style>
.ms-list-addnew {
display: none;
}
</style>

 

Hide Column names

Before:
HideColumnName1

After:
HideColumnName2

Code:

 

<style>
.ms-viewheadertr {
display: none;
}
</style>

 

Hide Top Navigation

Before:
TopNav1

After:
TopNav2

Code:

<style>
.ms-breadcrumb-top {
display: none;
}
</style>

You can find all the data by using developer tools in your browser (f12 for IE & Chrome).

CSS, SharePoint 2013

How to put the Managed Metadata navigation to the top of the quick launch

There could be a number of reasons as to why this may be useful, my reason being is the quick launch navigation as it is, is rather packed and therefore trying to use this functionality requires a lot of scrolling down every time. Fortunately you can place some script on the page to push the Metadata navigation to the top of the quick launch, code courtesy of Steve Borgwordt.

Within your list, edit the page and insert a Script editor webpart (Found in Media and Content under the Categories section). Add the following code below.

<script src=”https://code.jquery.com/jquery-latest.min.js” type=”text/javascript”></script>

<script>

$(document).ready(function () {

$(‘.ms-tv-box’).remove().prependTo($(‘.ms-core-sideNavBox-removeLeftMargin’));

});

</script>

MetadataNavigation

If you are unable to view the Metadata navigation settings, check the site features to confirm the ‘Metadata Navigation and Filtering’ feature is activated.