SP2007 Branding

The lunacy of the SharePoint DatePicker control

Andy Burns, 4 Comments

More branding – I’d rebranded the SharePoint calendar. It looks nice, and not ‘SharePoint Blue’. “Great”, I thought, “I give that a quick check and move on to the next task”. So I gave it a check – and found that while the DatePicker that appears in the left navigation of the page was fine, the DatePicker control which appears for Date & Time fields had not picked up the styles I’d defined.

Arse. Mine was supposed to be red, not blue. So I began to wonder where this control was actually coming from. It wasn’t coming from my page – viewing the source, it wasn’t there, and if it had been I’d’ve expected it to be styled.

I didn’t think it was dynamically produced by JavaScript – I was sure there was an .aspx file behind it. I had a nasty feeling, so I went and checked the _layouts directory, but didn’t see anything that looked related to DatePickers.

Next up I tried the IIS logs – and found it. I was right – the DatePicker was being generated by iframe.aspx – and it was in the _layouts directory. (This makes me wonder – is this the only place where an iframe is used in SharePoint? Would something like datepicker.aspx or even datepickeriframe.aspx not have been a more obvious name?)

Anyway, so it’s in the _layout directory. It’s trivial to change it so that it also uses my stylesheet – but that will change it farm-wide, or configuration changes. I guess I’ll be looking at kb-944105 how to customize application pages in the layouts folder in wss 3 and moss 2007.

Edit: Michelle has an excellent suggestion, and she’s blogged about it here. It’s still a hack, really, but there are worse ones!

The lunacy of the SharePoint DatePicker control

Hover Styles in OOB SharePoint

Andy BurnsLeave a comment

Okay, this is going to sound really pedantic, but this is really annoying me. In default SharePoint there are a number of buttons. These buttons have text on them. When you roll you mouse over the button, the background and text changes colour. However, as the text does not have the same area as the whole button, the regions in which the hover occurs are different. For example, see the image below…

So, as you can see, the button turns oranges, and then the link turns black.

Now, this isn’t a problem in the default styles – the change from blue to black is very small. But you can’t guarantee that this is the case for rebranded sites – and of course, in mine it was a big difference.

And the crazy thing is, well, the button area’s style is being changed by JavaScript – that’s what makes it turn orange. So you can just use that style change to change the colour of the link text. Why define an hover pseudoclass for it?

Anyway, that’s what I did while tidying up my design.

Hover Styles in OOB SharePoint

The stupidity of Search boxes when branding SharePoint

Andy Burns, , Leave a comment

Okay, so I just made an interesting discovery. In the master pages on SharePoint there is a content placeholder called PlaceHolderTitleBreadcrumb. A slightly odd name – I’m not sure it should have ‘title’ in it, as that seems to make assumptions about how you’re going to use it – but in fairness, it is a placeholder for breadcrumbs. Great!

Except if you go the search page. Then, the search box is shown in the breadcrumb placeholder. WTF! Who the hell designed that? I mean, what idiot decided to put a large control, with LOTS of padding (discussed wonderfully by Heather Solomon).

Speaking of padding – that padding is hard coded into the control. It is fucking CSS, but they put it into the control. Nobody would ever want to get rid of that 50px padding above this control, right? Nobody would have designed space for the nice little breadcrumbs only to be caught out when the stonking search control sticks it’s flabby ass there, right?

Wrong. I’ve been caught, and I’m not the only one. As Tom says, the solution isn’t complicated – but I shouldn’t have to solve it. He’s right when he discusses the ‘contract’ of the master page. This design bug is just wrong.

And I don’t believe that I should have to write my own delegate controls all the time ‘cos someone was too lazy to write theirs in a generic way. I mean, this is supposed to be the office platform. Don’t hardcode styles into your delegate controls, don’t assume your control will be in a table row, and, in fact, could we stop using tables so we might make an accessible system? It’s kind of important in many countries…

The stupidity of Search boxes when branding SharePoint

SharePoint Master Pages – View All Site content page problems

Andy Burns, , Leave a comment

So I’ve been branding up a SharePoint system, and discovering all of the fun ‘features’ of the master pages in SharePoint. One of them is the way that SharePoint has lots of pages which use the ‘administration’ master page, which you can’t customise. And some are a bit awkward – File upload, Create Web Page, View All Site Content, Recycle bin.

Well, the View All Site content page is awkward, as everyone seems to have it on their page, but I think you’d miff site admins by removing it from the page. So, I went in and had a look at the code for it – and realised that it was security trimmed. It uses an SPSecurityTrimmedControl:

<!-- View All Site Content -->

<label class="ms-hidden">

<SharePoint:EncodedLiteral runat="server"

     text="<%$Resources:wss,quiklnch_pagetitle%>"

     EncodeMethod="HtmlEncode"/>

</label>

<Sharepoint:SPSecurityTrimmedControl runat="server"

     PermissionsString="ViewFormPages">

     <SharePoint:SPLinkButton id="idNavLinkViewAll" runat="server"

          NavigateUrl="~site/_layouts/viewlsts.aspx"

          Text="<%$Resources:wss,quiklnch_allcontent%>"

          AccessKey="<%$Resources:wss,quiklnch_allcontent_AK%>"/>

</SharePoint:SPSecurityTrimmedControl>

Hmm. Okay. But users with very few permissions were still able to see this link. What gives?

Well, the important part is the PermissionsString attribute – it’s set to ViewFormPages. That’s pretty low – users who’re able to view a library seem to have that. So I wondered, what other PermissionsStrings are there?

A quick search found Zac Smith had been wondering the same thing. And then I thought to check MSDN, and they have a nice list of the permissions and what they mean.

So, I set PermissionsString to ManageWeb, and now the ‘View All Content’ link should only appear for Site Admins.

SharePoint Master Pages – View All Site content page problems

Make sure you use the .ms-bodyareaframe style in your Master Pages

Andy Burns, , 2 Comments

So, I’ve just discovered something interesting. In SharePoint, some content should fill the whole of the content area of the master pages; others should have a margin. For example, viewing a document library fills the content section, but Wiki pages need a margin. This is achieved by the ms-bodyareaframe style in the master page, which supplies the padding for the content that is contains.

Ah, but how does the content that doesn’t need a margin get displayed? Well, it supplies an override to ms-bodyareaframe to set the padding to zero – and that is why you should make sure you use the ms-bodyareaframe style!

I found this when working off Heather Solomon’s Minimal Master pages, which don’t include this style.

Make sure you use the .ms-bodyareaframe style in your Master Pages

Branding the SharePoint Treeview (spTreeview control)

Andy BurnsLeave a comment

I’ve gotta say, this part of the process has been pretty straight forward – but now I’ve got a bit of a problem – how do I change the icons in the treeview for the different types of list, etc? I mean, I can change the icons for the expand/collapse – as described here – but the orange folder icons don’t match my design. I’d like to specify others. I could also change the images themselves – but that would cause the change to be farm-wide, rather than just for my pages.

I’ve even tried using JavaScript running onLoad to match and replace the image sources – but as the TreeView control dynamically loads subnodes when it’s expanded, well, I’d have to hook into that event also, and replace any new images again. Not really practical.

All in all, those images seem to be just baked in.

Branding the SharePoint Treeview (spTreeview control)

Styling the ms-hovercellinactive style

Andy Burns, 1 Comment

So, I’ve had a interesting problem – I’ve been asked to style up a site which uses a very dark colour for the area behind the ‘global links’ at the top of the page. “No problem”, I thought, “I’ll just make the colour for the hyperlinks up there white”. Wrong! The styles which are applied to the Welcome control and the My Links menu are Shared with other page elements – such as on the publishing console. See below for what I mean – the areas sharing a the ms-splink and ms-hovercellinactive styles are bordered in red.

This posed a problem – some elements needed dark text, others light, and SharePoint gave them all the same style. Looking at the master page, I couldn’t see any way of directly applying my own style – they seem to be built into the delegate controls (though I must confess, I can’t see where). Anyway, I didn’t fancy the delegate controls.

After much head scratching, I realised my mistake – CSS always overrides with the latest applicable style. Thus, in the end all I needed to do was make sure that there was a style which only applied to the items in the ‘global links’ section, and that it came after the ‘normal’ ms-splink and ms-hovercellinactive styles.

Thus, I found that the following style did what I wanted:

/* Style to make the link menus for 'Welcome' and 'My Links' light coloured text */
.ms-globallinks .ms-SPLink a,
.ms-globallinks .ms-SPLink a:link,
.ms-globallinks .ms-SPLink a:visited,
.ms-globallinks .ms-SPLink a:active{
color:#ffffff;
}

Styling the ms-hovercellinactive style

Styling the Publishing Console in SharePoint

Andy Burns, , Leave a comment

So, I’ve been asked to style up a SharePoint site, and I’ve come across a really stupid bit of code

The Publishing Console is the control for showing all the ‘edit page’, ‘check in’, ‘approve’, etc. functionality for publishing pages. You’ve gotta use it.

Complaint 1: It assumes that it’s going to be inside a table.

The control produces a table row – a <tr> . Hellooo? Anybody here of accessibility? Trying to avoid Tabled designs? Thanks guys, you’ve made that easy.

Complaint 2: Styling through JavaScript

So, the publishing control has these bits of padding at either end. Irritatingly, they’re hard to get rid of. They also position div tags below the table row that the console produces. This is shown on the right. So, what style contains the code for that? Um, none. That style is set in EditMenu.js, not in any style.

What bloody idiot decided to build such an inflexible, unstylable control, and did it in this way? There is no need for it to be done this way. I’ve now got to fight passed this, or write my own publishing console. Great. I’m happy with the out of box console, I just want to change it’s style a bit – creating a new control is excessive (though instructions are here).

Okay, slightly calmer edit – okay, yes, I can copy and change the Publishing Console itself – the file is straight forward enough – and hook it up as a delegate control. But I shouldn’t have to.

Success – I got rid of the end space. I realised that I could turn off display of the non-breaking spaces that hold the end padding open – and that annoying JavaScript doesn’t turn the visibility of the inner div tags back on!.ms-consoletitleareaframe, .ms-consoletitleareaframebottom
{
width:0px;
padding:0px;
margin: 0px;
background-color: #ffffff;
background-image: none;
display: none;
}

Styling the Publishing Console in SharePoint

Deploy a SharePoint Master Page as a Feature

Andy Burns, , Leave a comment

SharePoint master pages are sort of designed to be created in SharePoint Designer. This isn’t much good, though, if you want to redeploy a master page to another or multiple systems. Also, a master page that has been created in SharePoint designer is “Customized” – that is, it is stored in the database rather than as a file on the file system. This makes it a bit slower.

What I wanted to be able to do for a customer was to create a SharePoint feature that would deploy all my physical files, and in such a way that they weren’t customised. Well, I think I’ve done that.

I pretty much followed the gist of this blog entry by Chris O’Brien (his blog is excellent and well worth a read).

You can also get a feel for it by examining the PublishingLayouts feature that comes standard in MOSS. That feature deploys all of the OOB master pages, etc..

In short, the approach is:

  • Create design in SharePoint Designer
  • Copy and paste master page code to a new aspx file in your feature, with the same name as the file in SharePoint Designer. (Do not just save the file in SharePoint Designer to the file system. It mucks up the links. Copy and Paste the code – just as Chris says to. Guess who forgot?)
  • Save all other relevant files to the your feature.
  • Create the Feature.xml file
  • Create the Elements manifest file. Note that the XML is case sensitive, and the case used in the blog entry above is wrong.
  • Make sure that the permissions on the feature folder are correct and inherited by child files and folders.
  • Run “stsadm -o installfeature -name featurename”
  • Activate feature at site or sitecollection level.

Attached is an example feature that installs a (rubbish) master page I’ve created called ‘Cairngorm’. To install it:

  • Unzip the archive
  • Copy the CairngormMaster folder to your Features folder in 12 Hive
  • Check its permissions
  • Run 
    stsadm -o installfeature -name CairngormMaster
  • Go to the Site Collection Features page, and activate it.

You should now find that you can select the ‘Cairngorm’ master page from the ‘Site Settings > Master Pages’ page. Select it for your master pages, and you should find your pages go a bit black and orange! You can get the dodgy design I came up with here, but please just use as an example – it looks bleedin’ awful.

Deploy a SharePoint Master Page as a Feature

SharePoint Branding or "Pimp my SharePoint"

Andy Burns, , , 1 Comment

One of the things that customers appear to want, and will like about SharePoint is the ability to ‘brand’ or ‘skin’ it. For some reason, it’s something that people always get hung up on – what it looks like, not how it works – and I don’t expect we will have many projects that don’t have the question of branding/skinning/customisation. But what does this mean, how does it work, and what are the limitations? Continue reading “SharePoint Branding or "Pimp my SharePoint"” →

SharePoint Branding or "Pimp my SharePoint"