Month: November 2012

Themable custom master page in SharePoint 2010

Once you understand how theme colors work in SharePoint 2010, you’re on your way to creating your own themable (or “themeable”) master pages!

This article is not going to go through the details of making your own master page, as there are plenty of resources on creating custom master pages in SharePoint 2010. Instead, I’ll cover what you need to know to successfully create a themable master page.

I’m going to start with my own custom master page design – here’s what it looks like:

1. Ensure graphics can be recolored appropriately.

The top header area has a wrapper div with an orange background color (#ffbe18). Inside the wrapper div, my menu div uses a white background color, but I have a transparent background PNG called “navtab.png,” positioned on the right side of the div so that there is a curved tab effect.

When a new theme is applied, SharePoint’s theming engine can recolor everything. The wrapper div’s background color can change (orange to green), the menu div’s background color can change (white to beige), and the non-transparent pixels in the graphic are recolored from orange to green as well.

So – for any images that you want to use as part of your theme, you’ll want to make sure that recoloring them will work as you want. For example, you would not want to use an image such as the one shown below, because there are different hues in the same graphic, so recoloring would not produce the desired effect. (Keep reading below about how recoloring images works so that you know exactly what you can do!)

By the way – any graphics that you want to be recolored must be in PNG format.

2. Set up your CSS without shorthand notations for colors and backgrounds.

Instead of writing your CSS like this:

#cc-topmenu {
background: #fff url('navtab.png') no-repeat top right;
margin-right: 250px;
height: 30px;
padding-left: 10px;
}

Write your CSS so that the background properties are separated:

#cc-topmenu {
background-color: #fff;
background-image: url('navtab.png');
background-repeat: no-repeat;
background-position: top right;
margin-right: 250px;
height: 30px;
padding-left: 10px;
}

3. Add in theme tokens

Now, add in theme comments — that is, theme “tokens.” You can replace colors (font colors, background colors, border colors) with the ReplaceColor token.

/* [ReplaceColor(themeColor:"COLOR")] */

Color: Dark1, Dark2, Light1, Light2, Accent1, Accent2, Accent3, Accent4, Accent5, Accent6, Hyperlink, FollowedHyperlink. You can also append -Lightest, -Lighter, -Medium, -Darker, -Darkest to get the various shades of each color. (For example — Light1-Medium will give you the “medium” shade of your Light 1 color from your theme.)

You can get even more variations by using the themeShade (darkening) or themeTint (lightening) properties, if one of the previous “Lightest… Darkest” shortcut properties don’t work for you.

/* [ReplaceColor(themeColor:"COLOR", themeShade:"VALUE")] */
/* [ReplaceColor(themeColor:"COLOR", themeTint:"VALUE")] */

Value: Decimal value from 1.0 (no change from the color) to 0.0 (extremely dark or extremely light). See the diagram below for how themeTint and themeShade values affect the accent color, which is orange. (This may require some experimentation on your part to get the desired color!)

The RecolorImage token uses the same color options, but you can apply the color options in a few different ways:

  • Tinting: Change the hues of the graphic to your color – this is the default
    /* [RecolorImage(themeColor:"Accent1")] */

    or

    /* [RecolorImage(themeColor:"Accent1"),method:"Tinting"] */
  • Blending: Mix your color with the original hues of the graphic
    /* [RecolorImage(themeColor:"Accent1",method:"Blending")] */
  • Filling: Completely replace all non-transparent pixels with the color
    /* [RecolorImage(themeColor:"Accent1",method:"Filling")] */

You can also recolor just a portion of an image by specifying a rectangular area with the “includeRectangle” property. The x and y values determine the upper left point of the rectangle, and then you specify the width and height of the rectangle to recolor.

/* [RecolorImage(themeColor:"Accent1-Lighter",method:"Filling",includeRectangle:{x:0,y:0,width:100,height:30})] */

Note that if you refer to the image multiple times in the CSS, the last reference to the image is what it will look like. The theming engine only creates one recolored version of the image, so it will choose whichever definition overrides the others.

Here’s what my CSS looks like after adding in the theme tokens (I’ve stripped out my layout code so that you can just see the colors):

body #s4-ribbonrow { /* recoloring the ribbon, originally black */
/* [ReplaceColor(themeColor:"Dark1")] */background-color: #000;
}
#s4-workspace { /* recoloring the main background, originally grey */
/* [ReplaceColor(themeColor:"Light1-Lightest")] */background-color: #eeeeee;
}
#cc-wrapper {
margin: 0 20px; /* recoloring the content area, originally white */
/* [ReplaceColor(themeColor:"Light1")] */background-color: #ffffff;
}
#cc-header {  /* recoloring the header, originally orange */
/* [ReplaceColor(themeColor:"Accent1")] */background-color: #ffbe18;
}
#cc-topmenu { /* recoloring the menu, originally white, and recoloring the right curved tab graphic, originally orange */
/* [ReplaceColor(themeColor:"Light1")] */background-color: #fff;
/* [RecolorImage(themeColor:"Accent1")] */background-image: url('navtab.png');
background-repeat: no-repeat;
background-position: top right;
}
#cc-left { /* recoloring the gradient background image behind the left column, originally green */
/* [RecolorImage(themeColor:"Accent2-Lightest")] */background-image: url('leftbg.png');
}
.s4-ql ul.root > li > .menu-item, .s4-qlheader, .s4-qlheader:visited { /* recoloring the navigation headers */
/* [ReplaceColor(themeColor:"Accent2-Darker")] */color: #3e750e;
}
.s4-ql ul.root ul > li > a { /* recoloring the navigation links */
/* [ReplaceColor(themeColor:"Dark1")] */color: #000;
}
#cc-breadcrumbs { /* recoloring the breadcrumb navigation */
/* [ReplaceColor(themeColor:"Accent2")] */color: #82c942;
}
.ms-rteElement-H1B { /* recoloring the heading font */
/* [ReplaceColor(themeColor:"Accent1")] */color: #ffbe18;
}
.ms-rteElement-P { /* recoloring paragraph font */
/* [ReplaceColor(themeColor:"Dark1-Medium")] */color: #666;
}

Important note: Everything is case-sensitive!! So “Dark1-medium” won’t work. You MUST put “Dark1-Medium.”

4. Put your CSS in a Themable folder

Your CSS (and image) files should go in the top level of your site collection into either /Style Library/Themable or /Style Library/~language-code/Themable (such as /Style Library/en-us/Themable). The Themable folder is created automatically for publishing sites; if you don’t see it in the Style Library folder, you can just create your own folder. Just be sure to spell it properly! You can then drop in your styles and images into those folders, or into a subfolder if, like me, you want things to be somewhat organized.

5. Use <SharePoint:CssRegistration> to link your stylesheet

In your master page, you’ll have to use <SharePoint:CssRegistration> to link your stylesheet, like this:

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/<em>location-of-stylesheet</em> %>" After="corev4.css" runat="server"/>

Here’s the example from my master page:

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style%20Library/Themable/corriecustom/styles.css%>" After="corev4.css" runat="server"/>

6. Check and publish and change your theme

I tend to refresh often as I’m working on a custom master page design. If you’re trying to see how your themable changes affect your design, be sure to check in and publish your stylesheet and images. You will then need to apply a new theme so that SharePoint regenerates the themed files. Then, you’ll be able to see your changes! Below, you can see my site with my custom master page applied, after switching themes a few times!

Cay theme applied

Grapello theme applied

Resources and links

Advertisements

3 week meal prep

From SharePoint to slow-cooking… this blog is certainly a mishmash of topics!

I just attempted my first three-week menu-planning one-day-prep-cooking and I’ve survived! Menu-planning is a personal thing to me – even though there’s tons of plans out there, I always want to tweak them with things that our family will actually eat. But hey, I’ll throw this out there, in case you find some of the recipes and techniques helpful.

Here’s what I’ve got:

The menu

Week 1: (slightly more intensive cooking because it’s a holiday week!)

  • Sunday – shopping and prep day! Good day for takeout!
  • Monday – Slow cooker ham, mashed cauliflower, sautéed spinach
  • Tuesday – Stuffed cabbage rolls, cauliflower “rice,” rice (for kids)
  • Wednesday – pasties
  • Thursday (Thanksgiving potluck) – pretzel bites
  • Friday (Thanksgiving potluck) – pumpkin pie, Texas roadhouse rolls
  • Saturday – leftovers

Week 2: (back to work… quick dinners and slow-cooker meals!)

  • Sunday (potluck) – Arkansas green beans
  • Monday – Korean beef over cauliflower “rice” (with regular rice for kids)
  • Tuesday – Toasted sesame ginger salmon, bok choy
  • Wednesday – Slow cooker white bean soup with ham, fresh salad
  • Thursday – Slow cooker pulled pork, Hawaiian rolls, fresh salad
  • Friday – leftovers
  • Saturday – dinner with friends

Week 3: (even more slow-cooker and already-prepped meals!)

  • Sunday: Slow cooker Hawaiian style short ribs, steamed broccoli, cauliflower “rice”, rice (for kids)
  • Monday: leftovers or eat out
  • Tuesday: Slow cooker balsamic chicken with veggies, “cauliflower” rice (with regular rice for kids)
  • Wednesday: Pasties
  • Thursday: Slow cooker red lentil coconut soup
  • Friday: Slow cooker beef and tomato stew
  • Saturday: leftovers

(Extra in the freezer: Slow cooker kalua pork, several servings of broccoli)

Keep going past the jump for full shopping list and plan… as well as some tips on how to make your own menu plan.

Continue reading “3 week meal prep”

How are SharePoint 2010 Theme colors used?

How exactly are the theme colors used in the SharePoint 2010 v4 master page? If you’re creating your own color scheme, refer to the images and explanation below to understand more of how the colors are used. You’ll also find a download at the end with the SharePoint CSS files – theme comments included – so that you can search through them and pick apart which colors are used where.

More than just ten colors

SharePoint uses a set of theme colors (a .thmx file, which is the same type of file that you’d use for PowerPoint, Word, and other Office themes). These colors are used for fonts, backgrounds, and borders throughout the site. Below, I’ve posted a graphic showing the colors from the “Classic” theme.

If you dissect a themeable stylesheet, you’ll see lines of comments before the CSS for defining colors. This is what tells the theme engine what color to use – and, optionally, which variant to use. The theme colors can have additional variants (Lightest, Lighter, Medium, Darker, and Darkest — see the graphic above). Looking at the corev4.css, the “body” element uses the Dark 2 “darker” color for the default font color and the Light 1 color for the background.

body{
font-family:Verdana,Arial,sans-serif;
font-size:8pt;
/* [ReplaceColor(themeColor:"Dark2-Darker")] */ color:#676767;
/* [ReplaceColor(themeColor:"Light1")] */ background-color:#fff;
margin:0px;<br />padding:0px;
}

The default v4 colors are replaced with the classic colors when you look at the actual generated theme stylesheet.

body{
font-family:Verdana,Arial,sans-serif;
font-size:8pt;<br />color:#002163;
background-color:#fff;<br />margin:0px;
padding:0px;
}

Besides the ten colors (Dark 1…. Accent 6) and their five variants (Darker… Lightest), you can also use themeTint and themeShade to define custom tints (lighter) or shades (darker). Below is the code for a selected navigation menu item, with a diagram to illustrate how those colors are used.

.s4-toplinks .s4-tn a.selected{
/* [ReplaceColor(themeColor:"Accent1-Medium")] */ border-color:#91cdf2;
/* [ReplaceColor(themeColor:"Accent1-Lighter")] */ border-bottom-color:#addbf7;
/* [ReplaceColor(themeColor:"Accent1-Lightest")] */ border-top-color:#c6e5f8;
/* [RecolorImage(themeColor:"Light1")] */ background:url("/_layouts/images/selbg.png") repeat-x left top;
/* [ReplaceColor(themeColor:"Accent1",themeTint:"0.35")] */ background-color:#ccebff;
/* [ReplaceColor(themeColor:"Accent1",themeShade:"0.20")] */ color:#003759;
padding:4px 5px;<br />margin:0px 5px;
}

Finally, the theme colors also be used to recolor .png images that are part of a themed look — that is, those images that are referenced in the stylesheet. In the navigation link example above, you can see this line of code, which takes the selbg.png image and recolors it to be white (Light 1).

/* [RecolorImage(themeColor:"Light1")] */ background:url("/_layouts/images/selbg.png") repeat-x left top;

Recoloring an image allows you to take a .png image and change the hue — it’s quite powerful! Here’s an example of a custom graphic, recolored using the theme color:

v4 Master Page colors

Now that you know how Theme colors relate to the stylesheet, let’s take a look at different sections of SharePoint pages (using v4.master) to see how the colors are applied. (Click screenshots to see a larger version.)

Let’s take a look at a Team Site welcome page:

As you look at the different components, here are the primary colors that are used:

  • Light 1 is the main body background, while Light 2 is used for the top and left background colors.
  • Dark 1 and Dark 2 are the primary colors used for text.
  • Accent 1 is used for highlighting the selected menu button, the “welcome” title, and various hover effects.
  • Hyperlink is used for most of the links in the body area (the brighter blue links).

Notice the bottom right “Getting Started” section, however — the four light blue links have the color hard-coded! The search box colors are also hard-coded, so changing the theme will not change those links. Below, I’ve changed the theme colors, but the Getting Started links and search box text colors have not changed.

The same main colors are used in dialog windows, as well:

If you go to a calendar page, you’ll start to see other accent colors being used. If you modify your calendar with Calendar Overlays, you can choose different colors to use for displaying the different calendars. The color dropdown corresponds with the various theme colors. In the example below, you can see the default calendar appointments use the default calendar style (a lighter version of Accent 5). However, my “personal” calendar overlaid on top uses the “Brown” color, which is actually Accent 6 (lightest).

Another place where an accent color pops up is in a picture library page. The little image preview uses Accent 3 for the border.

Some uses of colors are less intuitive than others. On the All Site Content page, the links use the darker version of Accent 1 instead of the normal hyperlink color. Who knows why? I don’t.

The search results page also has some odd combinations of colors, which you’ll want to double-check if you change the theme colors. Since the left links use Accent 1 on top of the Light 2 background, you’ll want to make sure there is enough contrast for the text to be legible.

One more page that is useful to examine is a blog page:

As you can see, generally the Accent 2 – 6 colors aren’t used all that often. Of course, you can always use them in rich-text editing content areas by changing the text or background color manually. Selecting from the Theme colors means that those colors will change with the theme.

The “Styles” and “Markup Styles” dropdowns also use theme colors — although the callout boxes are hard-coded (again – who knows why…)!

The accent colors are also used in “edit” mode. For example, hovering or selecting a web part zone changes the background and border colors.

Deep-diving into the CSS

Hopefully the diagrams above help you to get a pretty good sense of how theme colors are used. But if you are curious about a specific element, I advise that you dive into the CSS to see what’s going on.

First, download the themecolors.zip file, which includes the SharePoint CSS files grabbed off the server (you can’t view these in SharePoint Designer).

Now, use your favorite web developer tool to look at the CSS for the specific element that you’re trying to learn more about. In this example, I want to figure out what’s going on with the web part title. I like to use the Firebug extension in Firefox — first, I click the “inspect” button on the Firebug toolbar, then mouse to the web part title and click on it to select. The CSS for that element then shows up in the panel on the right.

If necessary scroll through the cascading styles to find the relevant line of code that defines the colors for that style. In this case, the .ms-WPTitle and .ms-WPTitle a selectors appear to control the text color. Make a note of the file and line number — in this case, the style is in the corev4 stylesheet at line 3425.

Now, open up the stylesheet and go to the line number to find the code.

You can now see which theme color is being used – in this case, Hyperlink.

Now that you understand how stylesheets are made themeable, you might be wondering if you can make your own themeable styles. Sounds like a good topic for a future post! 🙂