Tag Archives: CSS

Customizing SharePoint’s Modern Lists’ Forms

Ya know that awesome new interface we get in Office 365 called Modern Lists? Ya know how that’s not editable, or customizable, or extensible? Well, ya know it right! It’s not.

However…

modern_list

Purty Modern List

Above is a typical modern list, in all of it’s glory. Pretty right? But I want to add some of my own code to this and do some cool customizations. Currently, that’s only reserved for the classic list view:

classic_list

Yucky Classic List

I just threw up a little in my mouth. 

What if we took the classic view, and persuaded it to be modern, but keep the beauty of customizations? It’s just some good ‘ole CSS, and yes I’ll share.

Quick steps on what to do:

  1. Download this little CSS file (click here for project on github).
  2. Upload the CSS file to SharePoint somewhere, like your Site Assets library
  3. Create a quick HTML file with just a link to the CSS file, i.e. <link rel=”stylesheet” href=”/SiteAssets/classic_modern.min.css”></link>.
  4. Upload the HTML file to SharePoint
  5. In the library where you uploaded the files, right click on the HTML file, Get Link, then select Restricted Link, and copy that URL
  6. Navigate to your list.
  7. Ensure it’s in Classic mode, and will stay that way. Go to List Settings, then Advanced settings. Scroll all the way down to List Experience and select Classic experience.
  8. Navigate back to your list and create a new item.
  9. Use the cog in the top right, and select Edit page.
  10. Add a Content Editor Web Part and set the Content Link to the URL of your HTML file.
  11. Save it all and reload the page, BLAMO
  12. I have a more indepth walk through on how to do this using a JavaScript file here, same applies to a CSS file.

classic_modern_list

YAY!

The flow and feel of the classic form is a lot more like the modern form, but ’tis classic.

Some Notes

  • Terrifyingly enough, the CSS for the modern lists are on the pages themselves, not in a CSS file I can reference. So there was a lot of copy/pasting of CSS from a modern list to this CSS file.
  • Your classic list form will have the full ribbon, this CSS is primarily focused on the form interface for users.
  • This will not do anything on the list view pages, I haven’t bothered styling those yet.
  • If you wanted to, you could put this CSS into a global CSS file so all classic lists will have similar interfaces.
  • This CSS is not all inclusive, it should get you most of the way there. If you do add to it, please feel free to share on the github project, or send me the changes.

Thanks, and ’til next time Happy SharePointing!

Advertisements

A Non-Developer’s Intro to the Developer Toolbar: Performance

Sorry for the delay in getting this last post in, it completely skipped my mind. This is part three of my mini-series, part one covered element inspection and part two covers scripting.

In this post, we will look into some of the performance tools available to the developer toolbar in Internet Explorer. This will allow you to assess your SharePoint site, and see where some of the slow points are.

Let’s get the developer toolbar open, press F12.

Profiler

Profiler assess the scripts and functions running on the page. Out of the box, there’s a ton running, and there’s little we can do about it, it’s all SharePoint. If you have some custom pieces in your site, especially those using client side development, then this tool may be of use.

Click the Profiler tab, then click Start profiling button. This may hang for a little, just give it a little time. When it’s ready, the button will change to Stop profiling. Reload the page now. Once the page has fully reloaded, click Stop profiling. You’ll then see your results.

Developer Toolbar Profiler

The results will show you which functions in the client code are taking the longest. Sadly, a lot of them are SharePoint’s, and we can’t do much about it. You’ll see a lot of functions that may be confusing in name, like ‘Anonymous function’.

  • If you sort by the Function column, you can find your functions a little easier.
  • Sort by Inclusive Time to find the functions that took the most time, including child functions. Exclusive Time is the time it took for that one function.
  • Doubleclick a function and it should send you to the Script tab, if it can find the function for you.

Network

This is the real fun one, and gives us more direction on what’s going on. Click the Network tab, then click Start capturing. Reload the page and you’ll see results immediately.

Developer Toolbar Network

This tells us what took so long to download, from scripts to CSS files to images. You can sort by the Taken (time it took to download) or Received (amount of data) columns to see which items on the page took the most time. Normally, the page itself, in my case home.aspx, took the longest. This is because this page contains all of the HTML markup you see. Rarely is there something that can be done about this size, other than if there are custom web parts spilling out extraneous markup.

This tool will tell you if there is a large image or script/CSS file that’s taking long to download. You can take this data back to your developers and complain about the long times. They may have a shocked look on their face when you report this to them. Have fun with that ;). Large assets like images and script files can be optimized and minified to improve download speeds.

My next post will be on some of the other neat tools and advantages in the Developer Toolbar.

Til then, Happy SharePointing!

My Users Don’t Like SharePoint Because It’s Just Ugly!

This is Part 4 of my series on ‘My Users Don’t Like SharePoint…

“Can you make it not look like SharePoint?”

Sorry, I can’t use the Mustang metaphor on this one, it’s too beautiful.

Ugly SharePoint 2010

SharePoint can be a little rough to stare at day after day. It’s basic, and a little boring. The 2010 interface was a huge improvement over 2007’s, and the 2013 is an improvement over 2010’s. Eventually, they’ll be hatred for the 2013 design I’m sure. I don’t remember the last SharePoint gig I was on where branding wasn’t a part of it, in some manner. It’s ugly, it is, but it is functional.

Fortunately SharePoint can be branded/themed/designed, whatever you want to call it, to look like anything but SharePoint. Don’t believe me? Check out TopSharePoint.com, an entire site dedicated to showcasing awesome SharePoint sites. Small disclaimer: these sites listed are publicly facing marketing sites and not intranets for a company. Making your SharePoint look like one of these might be an unrealistic expectation. However, it is a great start for getting ideas for cleaning it up and removing the SharePoint look and feel.

Branding SharePoint can be a basic task (change a color or two, layout, etc.) using a custom CSS file to a large project (new master pages, page layouts, full styling, images, etc.) which can engage a team of designers and developers. Branding can be setup to automatically handle mobile devices, giving a richer user interface to SharePoint for iPads, tablets and phones.

If you have the money, pay for a team to come in and brand SharePoint until it’s not recognizable anymore. Go to town and make SharePoint look like anything but SharePoint.

If you’re like most, budgets don’t allow for a full redesign. I’m going to walk through taking a SharePoint site and doing some basic tasks to spruce it up a little. My CSS file is linked at the end of the walk

Before we dive in. True design takes into greater consideration the user experience (UX) along with the user interface (UI). Not only should it look good, but is it functional. Up to now, my other posts have been about improving UX, and though this post might be about UI, it should really be considered in tandem with UX. If you make it look pretty, but users still can’t do anything, what’s the point?

With that said, let’s make SharePoint look a little prettier.

Change the theme. Pretty easy, go to Site Settings > Site Theme (under Look and Feel). Pick your desired colors. If you’re using SharePoint Server, you have the option of taking it a step further and customizing your colors as well.

I’ve picked a new theme, Construct. When you do, you’ll notice it’s a slight change, but definitely still looks like SharePoint.

Use a custom CSS file. This isn’t tough. A Site Owner can do apply a custom CSS file, no need for SharePoint Designer or custom master pages, with the Publishing Site Feature enabled. If not, you’ll need to modify your master page to link to your CSS file.

To really make a noticeable difference, I decided to set the page fixed width (see Lesson Learned: Using Fixed-Width Layouts in SharePoint. Explore whether or not your SharePoint design should flow with the browser or be set to a fixed width.). And since the page is fixed width, I threw in a background color. Notice I took out the large image. A caveat with fixed width is that content can spill over and make the page look bad. I went ahead and removed that image.

Disclaimer, I’m terrible at matching colors, which is why I leaned towards an almost monochromatic theme.

Let’s rework the left quick launch a little bit, adding a little depth and style by bolding the section headers and indenting the links.

Change the site logo to your company’s logo. If the logo isn’t a solid square (most aren’t), make sure its background is transparent so it will fit nicely. Save it to the Site Assets folder, and then set the logo in Site Settings > Tile, Description and Icon.

Now let’s take the top link bar, add a little custom styling, and modify the left quick launch to add some gradient. Check out the Ultimate CSS Gradient Generator for a great free tool for creating gradients that even work in IE9.

It’s coming along isn’t it?  Using the same gradient tool, and a little more styling to the background and web part titles, here’s my finished result.

Not bad eh?

This is all in one CSS file, which you can download here. This took me about 20 minutes to do, spent most of the time playing with colors.

Upload the CSS file to your Site Assets folder, and then specify this as your custom CSS file (Site Settings > Master Page > Alternate CSS URL). If you don’t have the Master Page option, you’ll need to enable the Site Publishing feature. If you can’t enable this, or don’t want all of the other stuff that comes with it, you can link to your CSS file by editing your master page in SharePoint Designer.

Where to go from here. There is so much more you can do with branding, and if you’re feeling adventurous, you can start diving into editing your master page and moving stuff around, adding cooler elements, JavaScript/jQuery, HTML, etc. Keep in mind, the more you add, the greater chance you have of slowing down the pages. Adding jQuery minimum alone adds approximately 93kb to the page. Keep this in mind as you’re improving your design.

There are a ton of resources online for how to customize your master page, apply a custom CSS and do some pretty cool stuff using jQuery. Here’s a few I’ve booked marked along the way:

Til next week, Happy SharePointing!

Customize the SharePoint Calendar Colors

I shared a post a while ago on how to create a color coded calendar in SharePoint. This is a no code (for real!) solution, and I’ve received some great feedback from it. One area I want to focus on are the colors.

Let’s go from blah

To, well, more colorful, not sure if I’d call this awesome or not (my color matching skills are lacking)

If you haven’t noticed, there are some colors which are really close to each other, and could easily be mistaken for each other. It’s rather frustrating. Also, they’re all pastels, which is nice but what if I want it to pop on the page?

You can setup a custom style sheet on your calendar page to override the colors. Unfortunately, this will not change the colors at the time you setup the calendars. To keep your colors straight, here’s the colors, and their associated values:

Light Yellow, #fef8d6, Color #1
Light Green, #d0ffbc, Color #2
Orange, #feebcd, Color #3
Light Turquoise, #c8f0ff, Color #4
Pink, #ffc8e8, Color #5
Light Blue, #bee5ff, Color #6
Ice Blue, #e0e8f2, Color #7
Ice Blue, #d9dde1, Color #8
White, #f2f2f2, Color #9

See the close similarities? 1 and 3; 4 and 6; 7, 8 and 9. You only have 5 unique colors to work with.

As you create your color coded calendar, make note of the color #s you’re using, this will be important when creating the new color scheme. And since we’re talking about color schemes, I highly recommend using a comfortable color scheme. You don’t want your calendar to hurt your users. You may only want to change a few colors instead of the entire collection. There are a lot of color schemes and combos online, if you want to create your own, check out http://colorexplorer.com/. Take some time and figure out your ideal color scheme.

Now that you have your colors, let’s get started! First thing you want to do is follow my other post and make your color coded calendar, click here to open the post. Your end result should be a spread of drab pastel colors, like my first image on this post.

Okay, now that you have your color coded calendar, let’s change some colors! You don’t have to change every color in the list, or you may want to. Up to you. I’m going to change colors 3, 4, 8 and 9, and use some real colors that pop.

How? Magical CSS classes:

.ms-acal-color# {
 BACKGROUND-COLOR: #xxxxxx
}
.ms-acal-selcolor# {
 BACKGROUND-COLOR: #xxxxxx
}
.ms-acal-apanel-color# {
 BORDER-COLOR: #xxxxxx;
 BACKGROUND-COLOR: #xxxxxx;
}

The above 3 classes of styles represent one color. The first class is the color you see when the page loads, and you haven’t clicked on the item. The second is the selected color when you hover on it. The third class is the color in the legend, on the left of the calendar view.

See at the end of the class name, before the {, is a #. This is just a place holder, you’ll want to swap this out with the color above you want to change. For example, if you want to change color 4, you’d update your CSS like:

.ms-acal-color4, .ms-acal-selcolor4, and .ms-acal-apanel-color4

You can copy and paste the CSS as many times as you need, for numbers 1 through 9. Within each section you’ll see BACKGROUND-COLOR: #xxxxxx, and in the last CSS you’ll see BORDER-COLOR :#xxxxxx as well. This is where your new color scheme comes into play.

I’m going  use this neat color scheme I quickly found:

Any scheme you find you’ll want to find the HTML, hexidecimal, or CSS value, for your colors (naming varies depending on the site you get it from). It’ll be a 6 character code, usually starting with #. Take the above CSS classes and create your new CSS classes using the colors your picked for your previously made calendar, and specify your own color palette. Here’s what mine will look like:

.ms-acal-color3{
 BACKGROUND-COLOR: #C0362C
}

.ms-acal-selcolor3{
 BACKGROUND-COLOR: #C0362C
}

.ms-acal-apanel-color3{
 BORDER-COLOR: #C3B7AC; BACKGROUND-COLOR: #C0362C;
}

.ms-acal-color4{
 BACKGROUND-COLOR: #816C5B
}

.ms-acal-selcolor4{
 BACKGROUND-COLOR: #816C5B
}

.ms-acal-apanel-color4{
 BORDER-COLOR: #C3B7AC; BACKGROUND-COLOR: #816C5B;
}

.ms-acal-color8{
 BACKGROUND-COLOR: #668D3C
}

.ms-acal-selcolor8{
 BACKGROUND-COLOR: #668D3C
}

.ms-acal-apanel-color8{
 BORDER-COLOR: #C3B7AC; BACKGROUND-COLOR: #668D3C;
}

.ms-acal-color9{
 BACKGROUND-COLOR: #007996
}

.ms-acal-selcolor9{
 BACKGROUND-COLOR: #007996
}

.ms-acal-apanel-color9{
 BORDER-COLOR: #C3B7AC; BACKGROUND-COLOR: #007996;
}

For the border color, I decided to go with a grey. Once you have your CSS together, let’s get it into SharePoint!

Browse to your color coded calendar.

  • Click Site Actions, then Edit Page. This will switch the page into edit mode.
  • Click Add a Web Part above the calendar.
  • Select Forms in the Categories from the top left, then select HTML Form Web part. Click Add
  • Hover over the web part and click on the web part menu, on the right
  • The task pane will appear on the far right. Click Source Editor.
  • Delete what’s in there now, and then type in:
    <style type="text/css">
  • Paste in your CSS.
  • Type in at the bottom of the page
    </style>
  • You should see something similar to
  • Click Save.
  • You’ll see your new colors appear!!
  • My text is hard to read. Fortunately from here I can use the full arsenal of CSS and change font colors, sizes, spacing, etc.
  • To change the font color, add the following for each color number you want to change (#ffffff is white, you could use any color you want here as well.)
    .ms-acal-color3 div, .ms-acal-color3 div a, .ms-acal-apanel-color3 SPAN {color: #ffffff !important}
  • Click OK in the task pane to close it. Click Stop Editing in the ribbon to stop page editing.

And here we have it!


You can also modify the default light green item by adding these CSS classes. However, if you do, make sure to put it at the top of your CSS text, also, in my case here, any colors not using a new color scheme, like my pink PTO, will be changed to whatever color you put here.

.ms-acal-item {
 BORDER: #xxxxxx; BACKGROUND-COLOR: #xxxxxx
}
.ms-acal-default-hover {
 BORDER: #xxxxxx; BACKGROUND-COLOR: #xxxxxx
}
.ms-acal-apanel-item {
 BORDER: #xxxxxx; BACKGROUND-COLOR: #xxxxxx
}

And if you want to change the default font color:

.ms-acal-item div, .ms-acal-item div a, .ms-acal-apanel-item SPAN
{ color: #xxxxxx !important}

Happy SharePointing!