Tag Archives: Branding

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

Before you make SharePoint Public – 2 more times

I wanted to quickly share on two more options for you to listen in on my session Before you make SharePoint Public.

SP24 is reairing all of their sessions, this Wednesday and Thursday, May 14th – 15th. My session will be run Wednesday night, at 9pm EST. I hope you can make it. Check out the wrap up from my first session here.

I am also presenting this session live at the Connecticut SharePoint User Group on May 15th. CTSPUG is hosted at 100 Pearl Street in Hartford, CT, check out their site for more details, www.ctspug.org

I hope to see you there!

24-Hour Devathon for a Cause

I am very proud to share that our team at Slalom is taking 24 hours out of this beautiful New England weekend for a SharePoint/Office 365 dev-a-thon to benefit local non profit Junior Achievement of Northern New England.

From www.janewengland.org:

The mission of Junior Achievement (JA) is to inspire and prepare young people to succeed in a global economy. Using hands-on experiences, JA helps to prepare young people for the real world by teaching skills in financial literacy, workforce readiness and entrepreneurship. Junior Achievement trains community volunteers to deliver curricula, and to incorporate the sharing of personal and professional experiences with students. The hallmark of Junior Achievement efforts, these mentors inspire students by transforming the JA lessons into relevant messages that connect what is learned in the classroom to real-world situations.

I am a big fan of this organization. Financial literacy and workforce readiness is very important, with the rise of debt from school loans and credit cards, we have to teach the younger generations more and more about how to best manage their money and be ready to get sustainable jobs. JA reaches 38,000 students in annually!

This weekend a small contingency from Slalom Consulting Boston is putting in 24 hours to create a portal for JA’s board of directors, hosted on Office 365. Some of the key requirements include:

  • Calendaring including RSVP.
  • Custom newsfeed on the homepage highlighting important details from the portal (not what is followed).
  • Branding to match the JA brand.
  • Mobile device friendly, with a heavy focus on the iPad.
  • And other portal stuff like document libraries,

We are employing our best SharePoint and User Experience architects and developers to accomplish something great. I am really looking forward to working with my team as a whole. As consultants we are all spanned across multiple projects and clients, it’ll be a blast to work with the team, together, busting out a sweet project.

Why do I share this with you? One, to show off how much I love my job. Slalom loves promoting community efforts among its employees, really helping us do what we’re passionate about. #SlalomProud. Secondly, to tell you a little about JA, and hopefully you’ll check them out. They are a great organization, one definitely worth the look.

Finally, I wanted to give you a heads up as we’ll be sharing some of the code we create and walk throughs on what we built. I’m excited to build something great and being able to share it with the SharePoint community.

‘Til then, Happy SharePointing!

There’s more than meets the eye: Differences between SharePoint’s Oslo and Seattle master pages

If you’ve been looking at the neat new masterpages with SharePoint 2013, and playing around with changing them, you can quite easily see a difference between the two options: Oslo and Seattle. Seattle is what we’re used to with SharePoint 2010: left nav and a top nav. Oslo moves the left nav to the top, and removes the top nav all together. Oslo also provides more room for your content by widening the area by moving the left nav.

SharePoint's Oslo Masterpage

Oslo Masterpage Layout

SharePoint's Seattle Masterpage

Seattle Masterpage Layout

But what is really different, technically speaking? I compared the two pages and found a little more:

Comparing Oslo to Seattle Master Pages

  • Oslo uses a different CSS, obviously, oslo.css instead of corev15.css. Also, the CSS link has EnableCssTheming set to true, whereas Seattle doens’t state anything.
  • Oslo has several accessibility and animation links wrapped with a SPSecurityTrimmedControl, configured to hide the contents from the search crawler. Seattle just has the links listed, no security trimming.
  • Oslo has a AuthenticatedUserDiv tag wrapping almost all of the content on the page. This control “Renders a DIV element which has different styles based on whether the current user is authenticated or anonymous” (from MSDN article). This control is configured with an authenticated style set to a CSS class. So when an authenticated user accesses the site, it uses a CSS class, when it’s anonymous, no class is specified at all.
  • Oslo has several other areas and controls wrapped with SPSecurityTrimmedControl configured to restrict to authenticated users only.
  • Oslo has a couple of small areas where CSS class names differ.
  • There’s the obvious changes with the navigation and header, and previously noted.
  • The PlaceHolderTopNavBar content place holder is thrown at the bottom of the page, and is set to be hidden. So that’s where that went.

Seeing there are a lot of security trimming around authenticated vs anonymous, I decided to test that out to see what it looks like.

First, let’s see what Seattle looks like anonymously:

SharePoint Seattle Masterpage in Anonymous

Seattle Master Page as Anonymous

Interesting, the web parts are intelligent enough to know anonymous users can’t “get started” and the newsfeed is gone. Also, some of the ribbon items change. Nothing else too significant.

Next up, Oslo:

SharePoint Seattle Masterpage in Anonymous

Oslo Master Page as Anonymous

Whoa, that’s a lot more now isn’t it? We lost the ribbon completely, including the SharePoint blue bar at the top. It feels naked.

I compared the HTML output of the two sets of pages as well.

  • Seattle didn’t differ much, minor items, but nothing too specific to anonymous vs authenticated.
  • Oslo, huge differences, entire sections are missing. Those security trimmed sections I mentioned before, poof, gone.

It almost feels like Oslo was designed with anonymous access in mind, as in Microsoft wanted us to use Oslo for public facing sites, as it took care of so much for you already. ;)

Thanks to Sane Amit for asking this question on SharePoint.StackExchange.com, always looking for new post ideas ;)

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!