Inspiration: New State Websites Made With SharePoint

It’s been a long while since my last post… I have been working non-stop, particularly on the new ms.gov, which is going live tomorrow. I wanted to show everyone some great new state websites, all made by subsidiaries of my parent company, NIC, that all use SharePoint. Hopefully these will provide some inspiration to show what is possible with SharePoint for internet-facing sites.

Texas.gov

tx

The new Texas.gov is responsive, with a  clean, stripped down aesthetic that loads quickly. It uses SharePoint 2010, along with Google fonts, JQuery, Modernizr, and other goodies, proof that modern web development techniques can work beautifully with SharePoint.

SC.gov

sc

The new South Carolina state website is bold and bright. It also uses several modern web technologies such as Google fonts and JQuery UI, and responsive design.

Maryland.gov

ml

The new Maryland.gov is packed with features. It is an HTML 5, responsive site loaded with custom SharePoint developed features-this site is a good example of what you can do if you have dedicated SharePoint engineers.

MS.gov

I can’t show it today or my GM will kill me, but I can tell you it is a SharePoint 2010 HTML 5 site, it is responsive,  uses Twitter Bootstrap, JQuery, SPServices, Google Search and Google fonts, and it is has touch groovies for tablet users. I will post more on it tomorrow 🙂

Advertisements

Discovering Styles in Designer 2010

The standard method for finding out what classes are being used on a page in SharePoint is to use Firebug or IE Developer Tollbar. SharePoint Designer 2010 has a few new features that can also help in finding this information.

Skewer Click

In SharePoint Designer, open a page or masterpage and make sure that you are in Design or Split view. Click the Skewer Click button from the Home tab on the ribbon and then click on an object on the page:

Skewer Click

A list will then display with all of the classes that affect the object.

Skewer Click

When you select a class, its properties will display in the CSS Properties panel.

CSS Properties Panel

Copy Styles

An easy way to make a copy of a style that is applied to an object is to select the object, view the list of styles in the CSS Properties panel, and then right-click on a style and select New Style Copy:

New Style Copy

A dialog box will display. To copy the style into your custom css stylesheet, under Define in, select Existing Stylesheet. Then Browse for your custom stylesheet. You can then make changes to the css through the dialog box or you can keep it as is. Click OK.

New Style Dialog

Your custom stylesheet will then open in Designer with the selected style copied into it.

Copied Style

You can also choose to add the copy directly into your page by selecting Current Page from Define In and then clicking the box next to Apply new style to document selection.

Current Page

Designer will add the word Copy to the style, insert it into the page, and update the reference to the style within the HTML. Obviously, adding a bunch of styles directly to a page is not a best practice, but it is a possibility.

Styling Headers in the QuickLaunch, SP 2010

I finally have time to really dive into 2010. I will post my notes on how I accomplished individual things as I learn them.

QuickLaunch Headers

Of course, 2010 just can’t use the same styles as 2007, so once again starts the great search to find what class or classes affects what. I only wasted an hour today finding out how to target the headers within the quicklaunch. Use the style below in your custom css to target the headers:

Here is the before and after images:

Search Area Makeover

I thought that the search area on the top of each page was a bit bland and I set out to style it. The whole search area is enclosed in an id, WebPartWPQ1. I added this id to my theme css and gave the area some padding and margins, and I added a background. To change the color of the background of the magnifying glass, I copied the td.ms-sbgo class from core and changed the background color. Is nice, yes?

Search area with makeover

Search area with makeover