Rounded Corners are cool in SharePoint, apparently

I’m not a designer; I neither wear cool enough glasses, a turtleneck, nor sport an iPhone. But I do have to build other peoples designs, and I’ve noticed something – every design I get handed has rounded corners all over it.

I do see their point – SharePoint is a bit, well, ‘Square’. “Boxy but good”.

So instead we have designs with corners, well, all over them. Here’s the one I’ve been working on:

Things to note there – Rounded corners on the tabs in the top nav, and a rounded corner (only one) on the web part title. How did I do this? Continue reading “Rounded Corners are cool in SharePoint, apparently”

Rounded Corners are cool in SharePoint, apparently

Comparison of different ways of putting content into SharePoint 'Pages'

Previously I’ve looked at a couple of ways of entering your data into a Publishing Page. Well, it turns out that really there are 3 ways of putting content in:

  1. Writing content directly using the Content Editor control (the RichHTMLField control)
  2. Writing content in Word 2007 and using the Document Conversion service
  3. Writing content in Word 2007 and cutting and pasting(!)

I decided to test and compare these techniques. For options 2. and 3. I used this document:

The Source Word 2007 Document

Let’s look at the results of this and the code that is behind each resulting page… Continue reading “Comparison of different ways of putting content into SharePoint 'Pages'”

Comparison of different ways of putting content into SharePoint 'Pages'

Options for Branding SharePoint

Okay, so I’ve been tasked with looking at branding in SharePoint – again! What do I know about branding? I can change some colours and CSS, but that isn’t the same thing.

Anyway, I’m increasingly taken with Themes over Master Pages. You can do a lot with a theme, and one of it’s main disadvantages as far as I’m concerned (the inability to apply a theme across a hierarchy) can be overcome with extensions (though I’d prefer a Site Admin page option).

Another thing that I recently realised (and then discovered that I’ve probably read about too) is that you can ‘apply’ a theme to all subsites by setting the ‘Alternate CSS URL’ on the Site Settings > Master Page page. You can find the URL to a theme on a site that has that theme applied, and then paste it into the alternate CSS URL field, and apply to all children. Cool! And if you apply a theme to one of these children? Well, the theme will override the Alternate CSS – so your theme will apply.

All of which kind of confuses the heck outta people. You’ve got styles coming from, potentially, the CORE.CSS, alternate CSS, themes, masterpage’s CSS files, the master page itself, and the page. I think it works out as:

CSS Inheritance in SharePoint

…where the lower items win. It’s worth noting that the overriding of styles isn’t that fixed – your master page could pull in the themes, core.css, etc. in a different order if you wanted it to, but this is typically how it seems to be. Just remember that last wins.

And the best bit – generating Themes now has tools, such as SharePoint Skinner, and Serves SharePoint Theme Generator (though it’s more about just the colours).

New Master Pages are just awkward, though – so many required placeholders, CSS and structural quirks, controls generating things that they shouldn’t. I don’t think I’d go there again unless 1) it’s a WCM site or 2) I really need to change the page structure.

Options for Branding SharePoint

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

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

Styling the ms-hovercellinactive style

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

SharePoint Skinner

Themes in SharePoint are tough. I think this quote describes it nicely:

If you have attempted to override the styles on an out of the box SharePoint site, you know that it isn’t a very easy thing to do. The core.css file that contains the basic rules has 979 different style rules.

The core.css file uses a palette of 132 colors and 143 images.

The default page of a newly provisioned team site uses only 61 of those rules.

So, unless you have branded a lot of SharePoint sites and are intimately familiar with core.css and the default master pages and page layouts, just figuring out where to start modifying can be a daunting task.

So Doug has built SharePoint Skinner to make that easier. I’ve not tried it (yet) but I like his thinking…

SharePoint Skinner

MOSS, themes and master pages

So, Joel Oleson has blogged a bit about master pages and themes in MOSS. This is an area I think that the SharePoint team have the right idea, but execution is a little short.

My problems are that we have master pages – which is great. And we’ve got seperate master pages for standard pages, and administration pages. Okay, I’m happy with that. However, there is a mechanism for changing the master page for normal pages – but nothing for administration pages. ‘Cos nobody will ever look at them, right?

Then there is the question of master pages and themes. I really like some of the themes that come OOB, much more so than the default ‘blue’ (I like ‘Simple’). But they can only be applied on a site by site basis; there is no inheritance mechanism. And if you use a master page, it’ll probably override the theme anyway. So why have themes? Why not just use master pages?

MOSS, themes and master pages

No Theme Inheritance in SharePoint

Bit of a shocker – no inheritance of themes through a site hierarchy in WSS3. There is of Master Pages, but not of themes.

Given that you can do all of what you do with Master Pages it does make me wonder – what are Themes for?

Updated: Heather Solomon has looked at it, and her suggestion is to just put your styles in the Master page.

Updated again: Or just use the Alternate CSS URL for your site.

No Theme Inheritance in SharePoint

Using CSS to underline text in a textbox

As used in SharePoint 2007 – putting a red wavy line below text in a text box. Neat.

Just in case I ever need this (and the page goes missing):

<style>
.squiggle
{
background-image:url("squiggle.gif");
background-repeat:repeat-x;
background-position:left bottom;
padding-bottom:2px;
vertical-align:text-top;
font-style:italic;
}
.container
{
border:1px solid #a5a5a5;
overflow-x: hidden;
width: 100%;
color: windowtext;
height: 18px;
background-color: window
}
</style>
<div class="container" contenteditable="true" tabindex="0">
<span class="squiggle" contenteditable="false" tabindex="-1">
<div style="DISPLAY: none" displaytext="here"></div>
<span contenteditable="true" tabindex="-1">unresolved!</span>
</span>
</div>

Using CSS to underline text in a textbox