Not much going on in the office today, so I figured I’d document a SharePoint theme customization technique. This example was taken from this excellent SharePoint blog post. I just wanted to make sure I had this captured so I wouldn’t loose it.
A SharePoint theme is a set of fonts, graphics, and colors that make up the appearance of the site. An approach to develop a new theme is to customize an existing theme. This allows you to start with a working theme and then make modifications, shortening the amount of time it takes to develop a new theme.
A SharePoint site to which a theme has been applied will have a _themes folder when viewed within SharePoint Designer. When the _themes folder is expanded the theme that has been applied will appear as a sub folder. When a theme is applied to the a SharePoint site a copy of all the files that make up the theme are copied into the content database in the _themes sub folder.
Note: This is an important point. Because a copy is made of the theme’s folder ohn the web server and placed in the content database, any changes you make to the CSS of theme files within SharePoint designer will not be used on anything except the site you are currently working with. You have to manually make the same changes in the theme’s folder on the web server if you want the theme modifications to be used when a new site is created.
In addition to all the files from the theme’s folder, the theme.css and the mossExtension.css files are merged to create a new file that is stored in the content database. The file is named XXXX1011-65001.css, where the XXXX represents the first four letters of the theme’s name.
The XXXX1011-65001.css style sheet is the only CSS file applied to the site by the theme. It is applied right after the CORE.css style sheet is applied by the default.master page. Any core styles redefined in the theme’s style sheet will override the styles defined in the CORE.css. This gives you the designer complete control over the CSS applied to the pages on your site.
So to customize a theme, the first step is to examine the themes that come with SharePoint and find one that closely matches the theme you want to create. For this example, a new theme will be created called “My Theme” based on the Classic theme in SharePoint. In the new theme the Search area gradient will be changed to gray instead of yellow.
(more…)
I hate the pesky top Global Navigation breadcrumb “home” Link.
There are a couple of techniques to get rid of this Global Navigation Breadcrumb.
Technique 1: Modify the Master Page
A technique to remove it is to make the changes to the Master Page using SharePoint Designer.
- Launch SharePoint Designer
- Click File->Open Site. Enter your site.
- In the folder list pane, expand the _catalogs folder. Then expand the masterpage folder.
- Open the “default.master” page.
- Locate the content placeholder for the breadcrumb…. look for the following lines in the HTML of the master page.
1
2
3
| <asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" runat="server">
<asp:SiteMapPath SiteMapProvider="SPSiteMapProvider" id="GlobalNavigationSiteMap" RenderCurrentNodeAsLink="true" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional" runat="server"/>
</asp:ContentPlaceHolder> |
- Leave the Content placeholder in place but remove the navigation breadcrumb by replacing the lines above with the following:
1
| <asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" runat="server" /> |
Technique 2: Modify the Theme CSS
The second technique to remove it is to make the changes to the CSS for the Theme using SharePoint Designer. This removes it from the Site Navigation breadcrumb also so make sure this is what you want:
- Launch SharePoint Designer
- Click File->Open Site. Enter your site.
- In the folder list pane, open the _themes folder. Then expand the current theme folder.
- Open the .css file associated with the theme. It will have the first four characters of the theme name followed by 1011-65001.css
- To hide the Top Navigation bread crumb add the following:
1
2
3
| .ms-sitemapdirectional,.ms-sitemapdirectional a{
display:none;
} |
I have some fields in my list that I do not want the end user’s to see when presented with my List’s the NewForm.aspx page. I played around with a whole bunch of different techniques to do this. Seems like this should be something easy enough to do with SharePoint Designer doesn’t it? Hide the default ListFormWebPart then add a new custom list form and delete the columns you do not want to display. Although this works there were all kinds of problems dealing with Attachments. When creating a new item, I would get a nasty error:
Failed to get value of the “Attachments” column from the “Attachments” field type control. See details in log. Exception message: Guid should contain 32 digits with 4 dashes (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)..
…. see this post for all kinds of problems with attachment functionality and custom forms.
I stumbled upon Scott Wheeler’s awesome post here: (more…)
After you have created a Custom New Form for your customized list or library using SharePoint designer, you’ll notice that the default action when clicking on the “Cancel” or the “Save” button is to add the item to the list but not to navigate away from the form. Most people would prefer to have the Form return to the previous screen when at least the “Cancel” button is pressed. I’m going to step through how to perform this customization using SharePoint Designer. I’m assuming you already have a custom New Form produced that will input new items into your custom list or library. If not check out my previous post here.
When SharePoint navigates to a default form for a list or library, the URL of the originating page is passed as a query string called “Source”. Use the procedure below to make use of this query string variable to provide navigation after the form has been submitted.
(more…)
I wanted to document how to use SharePoint Designer to create a customized “NewForm.aspx” so that you can modify what list column fields are available for a new item. I recently wanted to collect information for a new list item but didn’t want the user to be able to fill out all the fields on the out of the box new list item form. This is a technique that can be used to only display certain fields or to customize the look and feel of the page.
1. To start with open the existing default “NewForm.aspx” page and save a copy with a different name (ie. NewFormModified.aspx”.
Note: Do not modify the existing page. There are a lot of troubles associated with getting rid of this first form. Just create another.
2. Select the default “ListFormWebPart” on your renamed “NewForm.aspx” web page.
Webpart Properties for DefaultWebpart
3, Right click on the “ListFormWebPart” and hide the web part by checking the “Hidden” check box in the “Layout” section.
Note: Do not delete the existing webpart!! Once again there are a lot of troubles associated with getting rid of this existing default webpart. Just hide it and create another.
(more…)