Tag Archives: CSS Tricks

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

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

Modify SharePoint Add link in a list or library

For such a small little guy, the “Add” action link for a SharePoint list or library can sure cause a lot of grief for people.  Here is a sample of the SharePoint Add link if you were looking at a Links list.  Different lists show different text, such as Add Document or Add New Announcement.

Add new link option for SharePoint lists and libraries

I hear a lot of requests to change the look and feel of the link or move it to a different location on the web page. Luckily there is a lot you can do with CSS alone.  Continue reading

CSS Challenge Response: Change dialog box background

A CSS Challenge from Jennifer:

I have a masterpage with a black background and white links…however when I edit a page and insert an item the popup box is white background with white links. I would like to change the background of the box but my designer tool won’t pull the information so I can see what style is controlling it.

The dialog box can be tricky. What is happening is your HTML is getting loaded up in an iFrame so you essentially have your master page within your master page. The HTML, FORM, BODY (etc.) tags are all repeated again.  The trick to controlling the dialog box is to reference the class (.ms-dialog) that is assigned to the HTML element that is within the iFrame.

Here is the CSS to control the background of your dialog box. Continue reading

CSS Challenge Response: Simple styles for SharePoint list

A CSS Challenge from Fred:

Make lists look like basic MS-Office tables:

  • dark background header row with white text
  • alternate rows with light color background
  • dark bottom borders on every rows

Here is the CSS to start your list/library styles! Continue reading

Add a tool tip for an image you create in CSS

My golden site design coding rule is site design supporting images are only referenced through the CSS.  This would include logos, header images, gradation bars, decorative backgrounds, etc.  Content supporting images (like Bob and Joe hanging at the company picnic) are content supporting images and therefore can end up in other places outside of CSS.

A question that often comes up when I teach this is “what about the ALT text value for the image?”. Continue reading