Category Archives: HTML/CSS

Convert SharePoint 2013 Global Navigation Drop-down to Show Multiple Columns

This is a quick and simple trick to turn a long SharePoint global/top navigation drop down (a.k.a. fly-out) menu into an easier to read, two or more column display. All you need is a little CSS. Continue reading Convert SharePoint 2013 Global Navigation Drop-down to Show Multiple Columns

SharePoint 2013 Functional CSS Selectors

One approach to writing CSS is to use functional CSS, which are selectors (classes) with a singular purpose.  For example, let’s say you need a given item on your web page to be absolute positioned, have a purple background and an enlarged font size. Instead of putting three declarations in a single CSS style statement, you would split up the declarations across three generic CSS style statements and specify three classes for the HTML element. It is a different yet effective way to do things. SharePoint 2013 actually has several functional CSS classes already baked in their CSS files and ready for your use.  Continue reading SharePoint 2013 Functional CSS Selectors

CSS Fix for Broken DynamicHorizontalOffset and DynamicVerticalOffset in SharePoint 2013 AspMenu Control

That is a mouthful of a title but luckily this is a simple fix for an annoying bug in SharePoint 2013.  Between SharePoint 2010 and 2013, the DynamicHorizontalOffset and DynamicVerticalOffset properties in the AspMenu control became useless because of how the drop down menus are styled in CSS by SharePoint.  You can set these properties all day long and nothing comes of it.  So abandon that and just use the following CSS fix. Continue reading CSS Fix for Broken DynamicHorizontalOffset and DynamicVerticalOffset in SharePoint 2013 AspMenu Control

Part 2: “CSS scares me!” – Implement Custom CSS in SharePoint Master Pages

As a follow up to the previous post, “CSS scares me!” – How to Move Past the Intimidation and Implement Custom CSS in SharePoint, this second part is going to cover how to add a CSS file reference to your SharePoint master page.  Continue reading Part 2: “CSS scares me!” – Implement Custom CSS in SharePoint Master Pages

“CSS scares me!” – How to Move Past the Intimidation and Implement Custom CSS in SharePoint

Be it clowns, creepy movies, dark basements with a single dingy light bulb or the next presidential candidate, we all have our fears. What I don’t want anyone to be afraid of is adding some custom CSS to their SharePoint site. With the push to not use custom master pages in SharePoint Online / Office 365, more and more people are looking for alternatives on how to pull off small tweaks (and even big ones) in their SharePoint site user interface that doesn’t involve custom master pages. Continue reading “CSS scares me!” – How to Move Past the Intimidation and Implement Custom CSS in SharePoint

Stack the SharePoint Suite Bar on top of Ribbon – SharePoint Online / Office 365

Just over a year ago I wrote a post about stacking the SharePoint 2013 Suite Bar on top of the Ribbon, thus collapsing down the needed real estate for the top area of your SharePoint site.  I was asked this week if it was possible to do it for SharePoint Online / Office 365. As with SharePoint 2013 on-premises, you can accomplish this with CSS – it just takes a few more lines of code to pull it off.  Continue reading Stack the SharePoint Suite Bar on top of Ribbon – SharePoint Online / Office 365

Switch out the SharePoint 2013 Site Actions gear icon for something more flexible

SharePoint 2013 switched from using the text “Site Actions” to showing a gear/cog/wagon wheel icon (I like gear so we will go with that for this post). That is all well and good until you need to change the background to a darker tone or if you want to change the color of the gear icon. SharePoint 2013 inserts in the icon image via HTML *cringe* thus making it more difficult to update to match your color scheme. With a little CSS we can knock out the default image and show our own icon instead. Continue reading Switch out the SharePoint 2013 Site Actions gear icon for something more flexible

Modify Project Summary Web Part Countdown

This is a bit of an odd one… but I love to show examples of how simple CSS can meet your needs, however different they may be, for SharePoint and SharePoint web parts.  A student needed to convert the Project Summary web part countdown box to a single line above the rest of the web part content.  The following CSS can make this happen. Continue reading Modify Project Summary Web Part Countdown

Increase width of SharePoint 2013 drop down navigation

This is a quick but handy little CSS style statement to increase the width of the SharePoint 2013 top navigation bar drop down, which by default is pretty small.  Now I know ideally the navigation item text should be short and sweet, but I also know how folks love their long department names and the like in the navigation.  Continue reading Increase width of SharePoint 2013 drop down navigation