I had a great question from a student last week… how can you stack 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. You can accomplish this with a few lines of CSS. Continue reading Stack the SharePoint 2013 Suite Bar on top of Ribbon
Category Archives: HTML/CSS
Use CSS Sibling Selector Combinators in lieu of :nth-child for IE8 Support
Wow just the title of this blog post is a mouthful. Just wait, it will get worse. This post was inspired by one of my students who wanted to hide the second and third search scopes (Result Sources in SharePoint 2013) in the drop down in the SharePoint user interface AND needed to provide support for IE8. Using CSS this can be done really quickly. Continue reading Use CSS Sibling Selector Combinators in lieu of :nth-child for IE8 Support
Hide items from SharePoint Ribbon using CSS
When you search for ways to hide items from the SharePoint Ribbon, such as the Font formatting block or the Edit HTML Source option, you will generally find a bunch of methods that involve fancy code and creating a new project in Visual Studio. One thing the Ribbon does have going for it is a ton of added classes and IDs to all the various options, buttons, links, blocks and components. You can target and remove elements from the Ribbon by just using CSS. Continue reading Hide items from SharePoint Ribbon using CSS
Obscure issue with moving around items in SharePoint 2013 ribbon
Ever have one of those days where SharePoint just makes you say, umm, WTF??? Yeah, me too. Tag another one on the long list.
I wanted to absolute position the ribbon’s tab row right DIV contents of SharePoint 2013 to a different location on the page. In non-SharePointy code speak, I just wanted to move the links on the right side of the page that consist of Share, Follow, Edit/Save, Focus on Content and Developer Dashboard to a different place on the web page. Continue reading Obscure issue with moving around items in SharePoint 2013 ribbon
SharePoint 2013 Ribbon styles preview box – fix for bad background
I came across an oddball issue today where the background area of the Styles preview boxes in the Ribbon turned black when using a custom master page in SharePoint 2013. Here is a quick CSS fix that will correct this issue. Continue reading SharePoint 2013 Ribbon styles preview box – fix for bad background
How to use Icon Fonts with SharePoint
One of the current trends in the web world is to use icon fonts with and for various things in your web user interface. They are fast to load, easy to scale in size, quick to change color, and it’s simple to add effects. Icon fonts can be used in SharePoint with just a little CSS. This post contains demos for both SharePoint 2010 and 2013. Continue reading How to use Icon Fonts with SharePoint
SharePoint 2013 CSS classes that suck and save the day
If you are working on custom SharePoint 2013 master pages, designs and/or CSS, these little CSS classes and style statements may give you some grief, or save your tooshie… This list will continue to be updated as I come across more! Continue reading SharePoint 2013 CSS classes that suck and save the day
SharePoint CSSLink
Understanding SharePoint:CSSLink and how to add your custom CSS in SharePoint 2010
CSS is a wonderful tool for branding SharePoint; unfortunately SharePoint 2010 has done a decent job of making things pretty hairy and confusing with working with CSS in a SharePoint site. Something we get asked all the time in our classes is “where do I link to my custom CSS file?” Great question and the answer isn’t just “from your master page”. Continue reading SharePoint CSSLink
SharePoint CSS and CSS Specificity
CSS specificity (weight) and SharePoint
When dealing with SharePoint CSS one of your biggest friends is specificity. It also happens to be one of the harder things to wrap your head around, especially if you are just getting into creating and editing CSS. Specificity is a key thing to understand for SharePoint branding and something that I cover in all my branding classes. Continue reading SharePoint CSS and CSS Specificity
What makes good SharePoint CSS?
I recently read an interesting post that I think is a good starting list for judging CSS files. You can check it out here: Judging CSS / Spotting Bad Code
Reading that article and my ensuing comment that I posted based on my experience with SharePoint led me to think… why not write this up for SharePoint? So here I am. 🙂 Let’s get started with chatting briefly about why you should even care about what makes good SharePoint CSS code. Continue reading What makes good SharePoint CSS?