Lightweight CSS to Improve SharePoint Look & Feel

christineSharePoint, Templates & DownloadsLeave a Comment

Here’s a few lines of CSS to make SharePoint look a little better. Full file is available for download below. The way I use this is to set my root site to use the stylesheet, then all subsites to inherit the CSS settings. That way if I make changes to the CSS it gets updated everywhere.

What this does

The CSS adds a little padding above the site title to give the navigation some breathing room, removes the drop shadow from the top navigation, increases the font size and spacing between top menu items, and darkens the text in the left navigation. It also hides the “this page is checked out” message so that you can check pages out and work on them without everyone noticing.

Default menu:

menu1

Custom CSS menu:

menu2

Requirements

You need to have Publishing Infrastructure enabled at the site collection level for this to work (assuming you don’t have a custom master page). You can turn this on in your site settings, but once it’s on don’t turn it off (this is a tidbit I heard from MS support). Your subsites do not have to be publishing sites to use the CSS, it’ll work with team sites.

Instructions

If you already use a custom stylesheet, paste the code below into it. If not, download the CSS file below, upload it to your Style Library in the Site Contents of your site collection, then tell your site to use it in your master page settings (you can find this link in your Site Settings). Don’t have a master page link in your Site Settings? Try accessing it via URL.

CSS

/*hides “page checked out” message so that you can work on things behind the scenes */
#pageStatusBar {
display:none !important;
}

/* #DeltaSiteLogo is making the home navigation unclickable, removing line-height attribute to fix */
#siteIcon {
line-height:normal;
}

/* adding padding above site title */
.ms-core-pageTitle {
margin-top:6px;
}

/* making top navigation somewhat less ugly */
ul.dynamic {
min-width: 190px;
box-shadow:none;
margin:0px 0px 10px 0px;
border-color:#F3F3F3;
margin-left:10px;
color:#17333D; /* adjust color to your preference */
}

.dynamic li a {
padding:4px 4px 4px 0px;
padding-left:10px;
font-weight:normal;
opacity:1;
color:#1F4452; /* adjust color to your preference */
}

/*sidebar links */
.ms-core-listMenu-item, .ms-core-listMenu-item:link, .ms-core-listMenu-item:visited, .ms-tv-item:link, .ms-tv-item:visited, .ms-tv-header:link, .ms-tv-header:visited {
color:#1F4452; /* adjust color to your preference */
}

/*padding for nav links */
.dynamic li {
line-height:1.2em;
}

/*top nav only */
.ms-core-listMenu-horizontalBox a, .dynamic-children, .ms-core-listMenu-horizontalBox .ms-core-listMenu-selected:link {
font-size:14px;}

 Download Stylesheet

 

Leave a Reply

Your email address will not be published. Required fields are marked *