Awwwards
Blog

A place where we talk SharePoint, web design, inspirations, trends and everything in between.

Category Archives: CSS

SharePoint Saturday: Slide Deck : Giving your SharePoint site a new lick of paint

On SharePoint Saturday I presented my session on SharePoint Saturday – Giving your SharePoint site a new lick of paint – and as promised here is my slide deck from the session.

PinkPetrol SharePoint 2010 Master Page & Styles

After my recent presentations at both SharePoint Saturday UK and SharePoint User Group UK, I have decided it would be a good idea and great help to people to release the ‘this is what I prepared earlier’ files including styles, images and Master Page that were used in both presentations.

So what do you get? you will a Master Page which is a slight modification of v4.master and all the styles that can give your out of the box installation a different look albeit fuchsia pink, which is an awful colour I know and all the required images. All the images are PinkPetrol related such as my logo and banner but you can use these files as a templates and obviously you can change and make your own using something like Photoshop, Fireworks or Gimp (which is free).

If you click and follow the link below, you will be able to download all the files with instructions.

http://www.mediafire.com/?6dk5fwiagld9za6

I hope you find it useful and <shamelessplug>if you need any help, then please get in touch </shamelessplug>.

Enjoy!

Making the SharePoint 2010 Ribbon scroll like a normal site!

So Microsoft decided to dock/stick/fix the ribbon to the top of the page like so.

Whilst in my session I covered how to make this scroll and gain a lot of questions – Why did they do this? and what is the fix? Well the fix is very simple. But for the ‘why’ I am not sure why. I think they wanted people to also have access to the ribbon much to how the other Office applications work.

  1. First thing you need to do is remove or change scroll=”no” to “yes” in the <BODY> – this will make the page scroll conventionally.
  2. Next you need to remove or change the “s4-workspace” ID tag from line 293 (in v4.master).
  3. I usually just rename it to s4-workspaced so if you need to change it make, you can just remove the ‘d’
  4. Next you need to add some CSS either in a referenced custom stylesheet or directly in the masterpage. The CSS code is very simple it is – body {overflow:auto!important;}

And this should make your page scroll. Fairly straight forward but probably the most requested ‘feature’ to remove when I am branding SharePoint 2010.

Please note – this will mean that if you have a large page and you need to edit the properties you will need to scroll back up.

SharePoint Saturday – My Day, My Session, My Verdict

On Saturday 2nd October the UK saw its first SharePoint Saturday event and what an event it was. I want to be completely honest in my post because I feel that is important for the future events and so that people can really see how great the event was and I’m sure will be in the future.

So I set off in the morning woken up by the best alarm clock – my baby daughter. There was me worrying about sleeping in that morning that I set 3 alarms – first at 7.00am, second at 7:15am and the third at 7:30am, only to be woken at 6:55am! I set off for the event with Andrew Woodward who was kind enough to give me a lift. Once we arrived we headed straight into the Key Note speech from Mark Miller and Joel Oleson – Mark did a funny, yet to the point speech combined with some excellent videos based on the theme of Lord of Rings. Joel followed with a series of analogies based on juggling roles and responsibilities – at least that is what I thought…

Key Note with Mark Miller – Hobbits, Wizards and Elves – Discuss SharePoint 2010

The attendees – a large crowd for the first SharePoint Saturday

The first session I attended was Matt Groves – SharePoint in the Cloud, which gave me a great insight into what is to expect and the future of SharePoint, something I am interested in, in particular the whole BPOS scheme and what I will mean to myself & my business. All in all another polished presentation from Matt.

Matt Groves delivering SharePoint in the Cloud

Next was my session, although I had decided I was going to attend Chris O’Brien’s session but I couldn’t because I was presenting myself! Prior to the day I had a nightmare and awoke in a cold sweat, I dreamt that my virtual machine crashed and I couldn’t get it back! So I was pretty nervous about presenting but I was also confident in my subject and like to think I know what I am doing when it comes to SharePoint Design & Branding. I was lucky enough to do trial run of my session at a recent Manchester Usergroup back in September.

My session started with a quick run down about what tools I will using during the session and what I will specifically covering such as changing the top and left navigation, adding a banner, logo and revamping the search . My VM started a bit slow then kicked into gear and allowed me to do a 45 minute live branding session showing you what a small piece of knowledge and the right tools can achieve using SharePoint Designer and CSS. I then wrapped up my session with a design showcase of SharePoint 2010 sites that showed the possibilities of what can be achieved – accompanied with a piece of music made famous by Tony Hart. I think was my session was well received and my session was pretty full – I just hope people enjoyed it but more importantly took something away from it whether that be an insight into SharePoint branding, what can be achieved or even the tips to actually doing it – that’s what makes it worthwhile. On a side note if you liked/disliked my session or you thought of any areas where I could improve, I would really appreciate a comment or an email. Thank you in advance.

Me, getting to grips with my slow Virtual Machine!

Me, talking about SharePoint Design & Branding

The final product – taking SharePoint out of the box and adding some pink petrol to it!

After my session I took a little break and had some lunch, food was good considering the event was free. I had a chat with a few people such as new 21APPS recruit Ant Clay and then planned what sessions I was attending next.

Lunch time!

Next I headed to Andrew Woodward‘s session – Real World Sandboxed Solutions. What I loved about this session were two things. Firstly the annotated slides, using his fancy new laptop with touch screen, the interaction was brilliant, sketching out development paths/servers etc – this worked really well. Secondly I loved the crowd interaction, Andrew has this knack of getting people talking, something that isn’t seen much in these type of sessions. The session turned from presentation to group session/conversation and was really well received. The session covered Sandbox solutions – a new feature in SharePoint 2010. Andrew showed us how he, James Fisk and myself developed and built 21SCRUM using a Sandbox solution for the development. At the end of Andrew’s session he gave away packs of his cool 21SCUM post it notes – if you can get some of these (get in touch with him, he may send you some) I would recommend them!

Andrew Woodward and his live annotates

After Andrew’s session I took a break and caught up with Mark Miller of EndUserSharePoint.com, a great guy and a key figure head in the SharePoint community. I have a lot of respect for this guy, he beams positivity and is one of those people you could talk to for hours. We had a picture together and talked SharePoint – well what else were we going to talk about? Oh yes, his shirts – brilliant.

Mark Miller and I – loving the shirt!

My final session was Creating an effective and highly developed Learning Gateway for education with SharePoint 2007 and 2010 with Dave Coleman and Mike Herrity. A session I was looking forward to because they were talking about their Learning Gateway in which I designed and branded. The session was a great insight into what they have achieved in the education world, something they are proud of. They showed the live version of their Learning Gateway from back in 2001 and how it has come on leaps and bounds to SharePoint 2010. It was a good session and reminded me a bit of Laurel & Hardy or the Chuckle Brothers? To me, to you!

The Dave Coleman and Mike Herrity double act!

The conference was wrapped up by Brett thanking everyone and with an ask the experts session followed by I think everyone’s favourite bit – the prizes!

The prizes that people could win here fantastic , you had the chance to win an XBOX360, an Amazon Kindle, various book vouchers, USB Headsets, MSDN licences, development books, tshirts and an Apple iPad! I think you will agree some absolutely fantastic prizes but you had to be there to win it! And some poor person chap missed out on the Kindle and some lucky second drawn person won it!  I personally didn’t win anything but my friend Peter Oare did – a book and software vouchers, twice!

The free prizes – XBOX360, iPad & Kindle to name but a few.

So with the first SharePoint Saturday wrapped up it was on to the SharePint! In the bar I had a few beers with some great guys. I met Seb Matthews for the first time, he’s a top bloke and loves Formula 1 and Fulham – someone has to! I also met up with Intelligent Decisioning guys – Mark Macrae, Andy Smith, Tony Pounder and his son Jamie; who all helped putting this fantastic event on.

SharePint well underway

With the SharePint drank Brett Lonsdale, Ant ClayMatt Groves, Andrew Woodward, James Fisk, Veronique Palmer, Benjamin Athawes, Mark Miller and myself headed into Solihull for a ShareCurry – one of the best curries I have had before!

Time for a ShareCurry

Once that was consumed – I headed home for a much needed cup of tea.

So what can I pick at? Again I want to be honest and I think no WiFi was a bit of a problem, however that didn’t stop the constant flood of tweets and updates from the different hand held devices. Water was another one, I couldn’t find a glass of water anywhere! And that is about it – 2 measly picky points from a free event and the first Intelligent Decisioning have put on. Not bad I think.

So people there you have it, the first SharePoint Saturday, a completely free event put on by people in their own time to help other learn more about SharePoint and a place where you can gain knowledge, talking to experts and professionals and socialise at the same time – FOR FREE! A fantastic event, a great atmosphere, great content and great people.

Thanks for reading, but I want to say thanks to the organisers and thanks to the other speaking for taking time out of their busy schedules to make this great event happen.

All the speakers!

Thanks to James Love for taking the pictures – the full album can be found on ID Live’s Facebook page.

My session can be viewed below – resources to follow

Top 20 Examples of Creative Search Areas within SharePoint

Continuing with the series of my SharePoint Top 20, I now bring you Top 20 Examples of Creative Search Areas within SharePoint.

So let the showcase begin….

1. WesTrac Cat

WesTrac Cat

I am a keen fan of gradients which can work really well if used correctly. What I like about this search area is the way it show the users  the magnifying glass within the search input box, combined with some text and the gradient search go button – all in all I think it looks really cool and more importantly noticeable.

http://www.westrac.com.au

————————————————————————————————————————————————

2. imason

iMason

Another way to show a search box is using rounded edges. Although my personal opinion is that the rounded box looks a bit out of place on a website that is predominately squared, boxed, contemporary etc.. it is a good example of another way of displaying your search box.

http://www.imason.com/

————————————————————————————————————————————————

3. IBC Bank

I like it when a website takes the time to keep a running theme going throughout, it should be second nature but it is surprising how many sites don’t. In this case they have done just that with the go, search, site search buttons etc. What I also like is the combination of the SharePoint site search with the JQuery drop down box. A good example of what you can do with the SharePoint and web technologies combined.

https://www.ibc.com

————————————————————————————————————————————————

4. Gevalia

I like the style of this search box with a nice and crisp outline combined with their theme colour orange background for the submit button. What I also love about this ‘go’ button is that it is in the style of a coffee mug, from a birds eye view – very clever and quirky.

http://www.gevalia.com

————————————————————————————————————————————————

5. Cable One

The reason I like this search box is because it is just a standard search box and a plain ‘go’ button, which has been placed on a polygon image, which I believe takes shape just like there logo. It is also using the same red as their branding on the top of a blue navigation bar. Although I prefer search boxes to be on the right hand side I do thing they have made this stand out enough to say ‘our search box is on the left’ !

http://www.cableone.net

————————————————————————————————————————————————

6. Ajilon

I choose this particular site for its search, for the fact that it uses 2 buttons as well as the search box. With the traditional search area (top right) being the second place your eyes take you when you look at website, they have been clever to add some further ways to getting to information. Works well if done correctly.

http://www.ajilon.com

————————————————————————————————————————————————

7. ERGO

The search icon is what I like about this search setup, slightly rounded on a red background in contrast to the black navigation bar underneath works great. Clean, crisp and keeping up with the developing theme.

http://www.ergo.co.uk

————————————————————————————————————————————————

8. West Virginia

This is a great example of pushing people to use search, which works so well if their search is set up correctly & presents correct results and as we all know search in SharePoint, if set up properly, can be fantastic. This, in my opinion is a good example of using the search functionality as a focal point for your website. Also I like the added extra of the ‘recent searches’ that other people have searched on – all in all a great search example.

http://www.wv.gov/

————————————————————————————————————————————————

9. Childine

I have obviously taken a close look at a lot of search boxes, areas, layouts etc. and I can say I haven’t really seen many search ‘go’ icons that are circular. This site does and it goes well with the circular home icon and their main telephone icon – also may I add a very important charity in the UK.

http://www.childline.org.uk

————————————————————————————————————————————————

10. SOS Childrens Villages

Using my favourite blue is always going to get my attention – I say again, I love this blue! Also just like the Ajilon site they have used the top right hand corner area for their most important buttons – Search & Donate. Have you done your bit?

http://www.sos-usa.org

————————————————————————————————————————————————

11. Speak.NL

Using the bright orange as the search box on the black background really works, it draws your eyes towards it and works well as the it is the sites main colour. Using a bright colour like orange on a very dark background is going to create a great contrast.

http://www.speak.nl/

————————————————————————————————————————————————

12. Right@Home

Here the combination of the menu/logo font for the example search text and the size makes this site search a feature point of this site. Big searches work, but must fit in line with the rest of the site – proportion is very important.

http://www.rightathome.com/

————————————————————————————————————————————————

13. Advantive

There is some real emphasis on this search box, by making this the focal point of the site I would assume that are looking for users to use it to find information, the only down side to that is if their search is configured correctly then it will work great to find the relevant results and quickly. If not then you will be loosing people very rapidly.

http://www.advantive.nl

————————————————————————————————————————————————

14. Expedia Media

I know this post isn’t to showcase top headers (that’s the next one) but I love this top bar and I love the way the search box and go button have been incorporated into it – leading on from that the green go button works really well and compliments the blue.

http://www.advertising.expedia.com

————————————————————————————————————————————————

15. VB Parents

When I look at this search area I do hope they meant to make the search box a part of the cloud! Because if they have it looks great, I like the idea and I like the colour contrasts used on the search ‘go’ button.

http://www.vbparents.com

————————————————————————————————————————————————

16. Cox

When viewing this site I tend to mute it, as the woman gets a little bit annoying. But what I do like about this site is the nice search box they have, large box with a subtle ‘go’ in a techy font – nothing over the top and nothing in your face – I suppose that’s the woman’s job on this site – man she is annoying!

http://www.coxhelpcenter.com

————————————————————————————————————————————————

17. Australian Government

Another example of making your search maybe too prominent! All I seem to be drawn to is the white border that I think just looks odd and out of place – remove it and you will have a nice search box there. I am  still looking at it, still looking at it….

http://www.socialinclusion.gov.au

————————————————————————————————————————————————

18. Lutron

Light grey on a darker grey background with white text works, looks great and is stylish – wouldn’t you agree?

http://www.lutron.com

————————————————————————————————————————————————

19. ARG

This is a cool example of using a texture behind the search box to give it some life, which is exactly what this site has done. I think if it was just a normal search box it would just look lost as part of the header. A simple grunge background brings this search functionality to your attention.

http://www.arg.net.au

————————————————————————————————————————————————

20. Northwestern Mutual

The best example of a corporate style search? I think so, enough said.

http://www.northwesternmutual.com

Squashed SharePoint site when viewing Properties in Edit Mode

I have finally found a fix to a really annoying bug in SharePoint that squishes my site when I have edited a Web Part!

In side the SharePoint master page everything is set to Height:100% – EVERYTHING, even I feel I am set to Height:100% when I have finished looking at the damn code! Removing these can cause all kinds of hidden issues so my rule of thumb is if CSS can bully in line styles then let it go to town them!

The problems crop up when you want to add a custom footer that combined with a small resolution causes this…

squashed

As you can see this isn’t very user friendly and looks pretty poor. Well I used my trusty tool set of web apps to find out the cause and hopefully a fix and I feel I have found one. If you use this line of CSS code in your style sheets it will increase the height of the properties pane on the right hand side.

#MSO_tblPageBody {
 height:500px !important;
}

This is the fix I have found which has worked for me – if anyone knows a better one or an improvement on mine then feel free to share!

Customising the Content Query Web Part list results

Example of Read More Links

The CQWP is a fantasic webpart my only two annoyances are that you can only do 3 rules on the filtering and the second is that the results are a bit rubbish in terms of styling, look and feel.

There are two ways you can customise these results. First way is to put a DIV wrapper around the results and style them that way which is ok when you want to do text styling such as color change, style and padding which you can see in the orange box. You can do this by using the styles below but remember – you need to put a DIV wrapper around the Web Part Zone and/or Web Part.

#blogbox .link-item,
#blogbox .link-item a:link,
#blogbox .link-item a:visited,
#blogbox .link-item a:active
{
color:#990000;
font-family:arial;
font-size:1.15em;
font-weight:bold;
}

When looking into this I first tried to style the A tag that is used for the TITLE which read ‘New version of Free2Teach launched’ which worked ok until there was a long title line that wrapped around and underneath. This caused it to visually break and look poor. I then thought I am going to have to do this properly if I want to do it!

What I did was very very simple, I started by opening up ItemStyle.xsl inside the XSL Style Sheets within the Style Library. Next I took a copy of this file (very important!) and then added the following below. I set the template name to ‘ReadMoreLink’ so I could remember it when selecting it in the CQWP settings.

<xsl:template name=”NewLinkDefault” match=”Row[@Style=’NewLinkDefault’]” mode=”itemstyle”>
        <xsl:variable name=”SafeLinkUrl”>
            <xsl:call-template name=”OuterTemplate.GetSafeLink”>
                <xsl:with-param name=”UrlColumnName” select=”‘LinkUrl'”/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name=”SafeImageUrl”>
            <xsl:call-template name=”OuterTemplate.GetSafeStaticUrl”>
                <xsl:with-param name=”UrlColumnName” select=”‘ImageUrl'”/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name=”DisplayTitle”>
            <xsl:call-template name=”OuterTemplate.GetTitle”>
                <xsl:with-param name=”Title” select=”@Title”/>
                <xsl:with-param name=”UrlColumnName” select=”‘LinkUrl'”/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name=”LinkTarget”>
            <xsl:if test=”@OpenInNewWindow = ‘True'” >_blank</xsl:if>
        </xsl:variable>
        <div id=”linkitem” class=”item”>
            <div class=”link-item”>
             <xsl:call-template name=”OuterTemplate.CallPresenceStatusIconTemplate”/>    
                <a href=”{$SafeLinkUrl}” target=”{$LinkTarget}” title=”{@LinkToolTip}”>
                    <xsl:value-of select=”$DisplayTitle”/>
                </a>
                <a href=”{$SafeLinkUrl}” target=”{$LinkTarget}” title=”{@LinkToolTip}” class=”readmorelink”>
                  read more
                </a>

            </div>
        </div>
    </xsl:template>

What I have simply done is coped the full A reference and copied it underneath and set the class to ‘readmorelink’ and added the following css to my style sheet and it should work :)

.readmorelink {
display:block;
text-indent:-9999px;
background:transparent url(‘../Images/ergoimages/readnewsitem.jpg’) top left no-repeat;
color:#666666;
margin:10px 0 0 0 !important;
padding:0;height:27px;
font-family:arial;
font-size:1.15em;
font-weight:bold;
}

Adding Custom Styles to the RichTextEditor (RTE) in SharePoint

SharePoint Rich Text Editor

Whilst doing some branding work for a client I was asked ‘can we have different text colors’. I instantly thought of hours of HTML teaching and had visions of brightly coloured pages illuminating fire red, yellow and radioactive greens! So what I needed to do was lock it down so the client can dictate the colors but the users can set them.  The best way to do this is give them a selection of custom styles they can use for titles that are outside of the standard h1, h2 & h3 that are set.

.ms-rteCustom-CustomStylesh1 { color: #990000; font-size:3em;font-weight:bold;}
.ms-rteCustom-CustomStylesh2{ color: #666666;font-size:2em;font-weight:bold; }
.ms-rteCustom-CustomStylesh3{ color: #cccccc;font-size:1em;font-weight:bold; }

The way it works it by adding .ms-rteCustom-NEWSTYLENAME the RTE will pick up this style and will insert the desired styling.

JavaScript Error when Moving WebParts in a CSS and DIV’d up MasterPage

Helpful errors

I spent a lot of time trying to put SharePoint in a nice place where it could flourish without being bullied by other sites that conform to accessibility standards. So you can probably understand my anger when I discovered that my new masterpage and css broke the drag and drop functionality.

When in Edit Mode, you try and drag and drop a WebPart from one WebZone to another it ill throw up a Javascript Error and the functionality wont work. Even though this functionality only works in IE it does present a customer use problem.

At first I used Neil Mosafi’s solution of using his JavaScript fix, at first it worked but I saw it only worked periodically, so the problem still existed.  I searched and I searched and found nothing. I then looked at using the CSS to control the problem which I believe is that the webparts don’t exist now because they are divs and not tables (?)

I’m not a techy so I tend not to delve into the problems as much as they do, I just look at why it doesn’t work and what is the easiest fix.

body {
margin: 5px;
padding: 0;
text-align: center;
font-family:Arial;
font-size:62.5%;
background:#ffffff;
position:relative;
}

I found adding Position:Relative to the body fixes this, I tried doing this on all the WebPart TD tags but it didn’t work and it got tiresome and annoying, I have found that this has worked but SharePoint being SharePoint it doesn’t wondering unexplained things, so time will tell if this has really fixed the problem.