{"id":53,"date":"2009-11-02T11:05:22","date_gmt":"2009-11-02T18:05:22","guid":{"rendered":"http:\/\/localhost\/todd_wp\/how-to-create-a-custom-theme-for-sharepoint-2010-aspx\/"},"modified":"2013-07-01T13:55:39","modified_gmt":"2013-07-01T19:55:39","slug":"how-to-create-a-custom-theme-for-sharepoint-2010-aspx","status":"publish","type":"post","link":"https:\/\/toddbaginski.com\/blog\/how-to-create-a-custom-theme-for-sharepoint-2010-aspx\/","title":{"rendered":"HOW TO: Create a custom theme for SharePoint 2010"},"content":{"rendered":"

<\/a><\/p>\n

Creating SharePoint themes used to require editing CSS style sheets manually or using a tool like SharePoint Designer.\u00a0 Furthermore, packaging and deploying the themes required administrative access to the server.\u00a0 This is no longer the case!\u00a0 Now you can create a SharePoint theme without ever having to see a single CSS style and you can easily deploy it to your server and apply it all within your web browser!\u00a0 Here’s how it’s done with Microsoft PowerPoint 2010.<\/p>\n

Create the theme<\/strong><\/p>\n

First, open Microsoft PowerPoint 2010 and proceed to create an Office theme just like you would for a PowerPoint presentation.\u00a0 See this PowerPoint help documentation<\/a> which describes how to do this.\u00a0 For this example I created a theme called Greens which uses a predominately green color scheme.\u00a0 The files which make up Office themes have a .THMX file extension.<\/p>\n

Upload the theme<\/strong><\/p>\n

Themes may now be stored in the Themes Gallery on your SharePoint server, and you can also find them on the file system on your SharePoint server in the following directory.<\/p>\n

\n
C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions14TemplateGlobalListsThemes<\/pre>\n
After you have saved the <ThemeName>.thmx file, open your web browser and navigate to the Theme Gallery on your SharePoint server.\u00a0 To find the Theme Gallery and upload your custom theme, follow these steps.\u00a0<\/p>\n<\/div>\n
    \n
  1. Open your SharePoint site<\/li>\n
  2. Click Site Actions<\/li>\n
  3. Click Site Settings<\/li>\n
  4. In the Look and Feel section, click Site theme<\/li>\n
  5. At the top of the page click the Theme Gallery link<\/li>\n
  6. Click the Documents tab<\/li>\n
  7. Click Upload Document<\/li>\n
  8. Click Browse<\/li>\n
  9. Browse to the <ThemeName>.thmx file you created and select it<\/li>\n
  10. Click OK<\/li>\n
  11. Click Save<\/li>\n<\/ol>\n
    Apply the theme<\/strong><\/p>\n
      \n
    1. Click Site Actions<\/li>\n
    2. Click Site Settings<\/li>\n
    3. In the Look and Feel section, click Site theme<\/li>\n
    4. In the Select a Theme section select the theme you uploaded.\u00a0<\/li>\n<\/ol>\n
      \u00a0\u00a0\u00a0\u00a0\u00a0 Selecting a theme in the list will show you the colors and fonts specific to the theme.\u00a0 Here you can see the colors which make up the Greens theme I created.<\/p>\n
      \u00a0\u00a0\u00a0\u00a0 \"Theme<\/p>\n
      \u00a0\u00a0\u00a0\u00a0\u00a0 6. Click the Preview button to see what the theme will look like once it is applied
      \n\u00a0\u00a0\u00a0\u00a0\u00a0 7. To apply the theme to your SharePoint site, click the Apply button<\/p>\n
      \u00a0\u00a0\u00a0\u00a0\u00a0 Here you can see the Greens theme applied to a SharePoint site.<\/p>\n
      \u00a0\u00a0\u00a0\u00a0\u00a0 \"Greens<\/a><\/p>\n
      \u00a0\u00a0\u00a0\u00a0\u00a0 Yes!\u00a0 It works for administration pages too!<\/p>\n
      \u00a0\u00a0\u00a0\u00a0\u00a0 \"Site<\/a><\/p>\n
      \u00a0\u00a0\u00a0\u00a0\u00a0 It also works for dialog popup windows \u2026<\/p>\n
      \u00a0\u00a0\u00a0\u00a0\u00a0 \"Dialog<\/a><\/p>\n
      \u00a0\u00a0\u00a0\u00a0\u00a0 \u2026 the Site Actions menu \u2026<\/p>\n
      \u00a0\u00a0\u00a0\u00a0\u00a0 \"Site<\/a><\/p>\n
      \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 and the Ribbon too!<\/p>\n
      \u00a0\u00a0\u00a0\u00a0\u00a0 \"Ribbon<\/a>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/p>\n
      Under the hood<\/strong><\/p>\n
      What happens when you apply the theme to your SharePoint site?\u00a0 First, SharePoint opens up the THMX file and creates several images and CSS style sheets based on the colors defined in your custom theme. Then, a new subdirectory is created in the Themes Gallery and the images and CSS style sheets are put inside it. The first time you apply a theme to a SharePoint site the newly created subdirectory is named 0.\u00a0 The directory name is incremented by 1 each time you apply a new theme to the site.\u00a0<\/p>\n
      Here\u2019s a screenshot from SharePoint Designer 2010 which shows the subdirectory that is created when you apply a theme to a SharePoint site.\u00a0 In this case the subdirectory name is 3 because I applied 4 separate themes to the SharePoint site; the subdirectory name started as 0 and was incremented 4 times.<\/p>\n
      \"theme<\/a><\/p>\n
      If you want to modify the theme further you can then edit the CSS style sheets and the images in the new subdirectory for your theme.<\/p>\n
      One size does not fit all<\/strong><\/p>\n
      The approach outlined in this blog post will not change the layout of your site, it will merely change the colors, heading font, and body font.\u00a0 It\u2019s a helpful approach to use when developing a prototype or a demo and you don\u2019t have enough time to dig into the CSS to change the layout.\u00a0 It\u2019s also a helpful approach to use when your requirements do not call for major look and feel changes and color changes will suffice.\u00a0 Other approaches also exist for changing the look and feel of your SharePoint sites, such as making custom Master Pages, Page Layouts, and CSS files.\u00a0 This approach usually takes less time than the other approaches, however it is not as flexible.<\/p>\n","protected":false},"excerpt":{"rendered":"
      Creating SharePoint themes used to require editing CSS style sheets manually or using a tool like SharePoint Designer.\u00a0 Furthermore, packaging and deploying the themes required administrative [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":230,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[46,98],"tags":[10,5,6,7],"class_list":["post-53","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-most-popular","category-sharepoint-2010","tag-custom-development","tag-helpful-code","tag-how-to-sharepoint","tag-sharepoint"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/53","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/comments?post=53"}],"version-history":[{"count":5,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/53\/revisions"}],"predecessor-version":[{"id":814,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/53\/revisions\/814"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media\/230"}],"wp:attachment":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media?parent=53"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/categories?post=53"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/tags?post=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}