One request we frequently receive is to display fly-out menus, the Top Nav in place of the Quick Launch, or both. I recently found a way to completely move the Top Nav to display where the Quick Launch would normally display and hide the Quick Launch at the same time. This is what I did.
1. Make a copy of the v4.master master page, check it out, rename it, and open it to edit it;
2. Assuming you have still not made any changes to your copy of the v4.master content, go to line 377.
3. I like inserting notes for future reference. So in this particular case, I'm going to insert a comment in between lines 377 and 378, as follows,
3. Once again we're going to assume you have still not made any further changes to your copy of the master page. Scroll back up and go to line 340. Select lines 340 through 368 and move this to where you inserted your comment for the Top Nav's new location.
4. Now you need to change the Top Nav orientation from horizontal to vertical. In the sample image below, this is done at line 362. Change the default setting where it says Orientation="Horizontal" to Vertical. You can also make adjustments to the static and dynamic display levels and maximum based on your site needs.
5. We also need to hide the Quick Launch so it only displays the Top Nav. To do this, scroll back to the top of your copy of the master page and locate the closing </head>. Once again we'll assume you have not made any other changes that the ones included in this blog post. Therefore, the closing </head> tag should be located at line 35. Insert a line or two between lines 34 and 35 and type in the following, <!-- BEGIN ADDED LINES TO HIDE QUICK LAUNCH --> <style type="text/css">
<!-- END ADDED LINES TO HIDE QUICK LAUNCH -->
6. Save, check in, publish, and approve the page.Note:
If you need to further customize the site for other colours than the ones used by the SharePoint theme applied to the site, you will need to further modify your copy of the master page to register your external CSS file
and make a copy of the corev4.css CSS file where you can made your customizations. To learn how to register your external CSS file on your master page, visit my blog post here
. For a clean copy of the corev4.css file, visit my Useful Files section
The following is a list of the main CSS classes that control the look and feel for the Top Nav:
- .s4-tn ul.static
- .s4-tn li.static > .menu-item
- .s4-tn u.dynamic
- .s4-tn li.dynamic > .menu-item
- .s4-tn li.dynamic > a:hover
- .s4-tn li.static > a:hover
- .s4-toplinks .s4-tn a.selected
- .s4-toplinks .s4-tn a.selected:hover
"Hiding" would be a better way of describing what I'm about to say, since "Removing" will make SharePoint not render properly.
In other words, I do not recommend removing any Content Place Holders from SharePoint master pages. I recommend turning them off.
So let's say that you need to hide or remove the Search area from a SharePoint site.
Using SharePoint Designer, open your copy of the v4.master master page.
Locate the following piece of code:
If you have still never made changes to your copy of the v4.master master page, the lines of code I'm talking about go from line 330 to 337.
Tip: Using SharePoint Designer Split View, select the Search box in the lower Design frame and SharePoint will highlight the code in the upper Code frame.
Delete what you don't need. For most of my projects, I delete the entire <div>, starting with the <div id="s4-searcharea" class="s4-search s4-rp"> all to the closing </div> right after the </span>.
Go to the bottom of the Master Page in the Code view. Locate the following lines of code:
Insert a couple of lines right above the closing </form> tag and type the following:
<!-- Lines below added for unused Content Place Holders -->
<asp:panel visible="false" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server" />
<!-- End added lines for unused Content Place Holders -->
Save, check in, and publish your master page. Go to the browser and test to see how it looks.
I love the fact that Microsoft now included Fields to display options within a Content Query Web Part (CQWP). In more than one ocassion where I didn't need to get too fancy about styles, I was able to do with this option instead of having to create custom styles in my Style Sheets. I'm saying this because the solution I'm about to present has been simplified to take advantage of these new SharePoint 2010 features. So let's dive in.
More than once I've been asked to use "nicer" images or small logos in place of the typical HTML bullet or the little orange square bullet that SharePoint usually displays for bulleted lists.
Step 1 - Create, Reuse, or Adapt Image to be used as Bullet
So the first thing I usually do is I create or adapt a bullet from images the customer might provide, or I create one from scratch using an imaging application such as Photoshop or Fireworks.
So once you have your image, upload it to a library of your choice. When it comes to elements that I'm going to be using as part of my custom look and feel, I have a tendency to "hide" them in places my users won't be able to find easily. More than once I ended up with that "loverly" red X in place of images because my customers would not know what the file is and delete it. So I usually create a Master Page folder within the Style Library and I upload (and publish) all my images for custom look and feel there. So this example will assume that. We will also assume the name for the image is divbullet.gif.
Step 2 - Create The Necessary CSS Class Definitions
In my copy of the corev4.css file, I create a class that usually looks something like this:
font-family: Verdana, Helvetica, Arial, sans-serif;
padding: 4px 0px 0px 18px;
You may need to adapt the padding settings to better accomodate for the image of your choice.
Step 3 - Create The Necessary Item Styles
After making a copy of Microsoft's original Style Sheet, modify your copy to include a style that will be used by the CQWP.
<xsl:template name="MyLinks" match="Row[@'MyLinks']" mode="itemstyle">
<xsl:with-param name="Title" select="@MyLink"/>
<xsl:with-param name="UrlColumnName" select="'URL'"/>
<xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
<div id="linkitem" >
<!-- Apply special bullet styles -->
<div class="myBullet" >
<!-- Link to item -->
<xsl:value-of select="substring-before($DisplayTitle,', ')"></xsl:value-of>
<xsl:value-of select="substring-after($DisplayTitle,', ')"></xsl:value-of>
Step 4 - Add and Modify Content Query Web Part (CQWP)
Go to the page where you would like to display the links, insert a CQWP, open its tool pane, select the custom links list within Query, apply filters if any (such as DisplayYN), remove chrome, provide a name and make any other changes that you may see fit. Then export the web part to your computer, open it using Notepad, and make the following changes:
<property name="ItemXslLink" >/sites/SiteName/Style Library/XSL Style Sheets/CUSTOMItemStyle.xsl</property>
Save the modified CQWP, upload it to the page where it should display, edit the web part, and verify that within the Fields to display section (you may need to expand Presentation) MyLink displays in the name for the hyperlink column in the Link box; otherwise, type it in.
Within the Styles section of the web part tool part, select MyLinks at the Item Style drop-down list.
Select [Apply] and [OK] at the bottom of the tool part.
Another frequent request I receive is the ability to post a message that the site is under construction or an important announcement needs to be displayed. For the announcements, many of my customers do not want to use the actual SharePoint Announcement list. They just want something that stands out on their home page.
So I usually provide one of two solutions:
- Scrolling Marquee with no styles
- Scrolling Marquee with styles
Scrolling Marquee (No Styles)
Well, what I actually mean by 'no styles' is simple HTML code with no need to create XSL templates. Usually this is the easiest way to go. But for some other assignments with more complex needs, I had to recourse to well, a little bit more complex of a solution.
And for the simple, easy to implement solution, this is what I do:
1. Add a Content Editor Web Part to the page where you would like to display a marquee
2. Edit and modify the Content Editor web part properties, remove the chrome, make any other changes as desired, give the web part a meaningful name (for example, Marquee), and then select [Apply] followed by [OK]
3. Select Click here to add new content at the Content Editor Web Part
4. Locate the HTML icon within the Markup section of the ribbon, select it, and then select Edit HTML Source
5. Type in or copy and paste the code below in the HTML Source web page dialog
<FONT face="Verdana" color=#ff0000 size=2>
<MARQUEE scrollDelay=95 width=500 height=16>
<DIV align=left>Note: Replace this sample text with any message applicable to your particular situation.</DIV></MARQUEE></P></FONT>
6. Select [OK] and save the page (and publish if publishing is turned on for your site)
You can change anything that is highlighted in red above, as well as the sample text in blue to suit your own needs.
Note: If SharePoint modifies the code above after you saved and it doesn't render as desired, create a TXT file containing the code above, upload the file to a document library, and reference the file via the Content Editor Web Part.
Scrolling Marquee (With Styles)
In a handful of situations I had to create something a little bit more complex than the simple HTML marquee above. For those cases, I used the following elements:
- Site Column (Optional)
- Custom List
- Styles (CSS)
- XSL Template
- Customized Content Query Web Part
Step 1 - Site Column (Optional)
Since I don't like doing things more times than absolutely necessary, for most part I end up creating site columns for columns I know I'm going to be using at more than one list or library. For this particular scenario, I created a site column named DisplayYN (Yes/No checkbox or Choice (Yes/No) column). For this example, we are going to say the DisplayYN column is Boolean (Yes/No checkbox).
Step 2 - Create Alerts Custom List
The next step was to create a custom list to manage the Alerts. The list would contain only a couple of columns:
- Title (the text for the alert)
- DisplayYN site column
You may be asking yourself why the custom list and why the DisplayYN flag. In many projects I have to work on there's a business approval process behind the scenes where usually the person who creates the text and items on the list is not necessarily the one who gives the green light to display the alerts on the sites. So these people go through review processes until everybody is happy and then the person responsible for the site or alerts edits the item and selects DisplayYN to 'Yes.'
Step 3 - Create The Necessary Styles (CSS)
I create a custom style definition in my CSS file (the copy I created from the corev4.css file). If you have been following my posts, then you know how I advocate towards making copies of Microsoft's files and leaving their original files alone. So back to that point, the following is an example class I may create:
font-family: Verdana, Helvetica, Arial, sans-serif;
padding: 3px 3px 3px 3px;
border: 1px gray solid;
Don't forget to check in and publish (if needed) your CSS file for the changes to become visible to those users who have been granted the lowest access levels to the site, as well as registering and referencing your external CSS file on your custom master page, as needed.
Step 4 - Create The Necessary Item Style Templates
In your XSL Style Sheet (the one that I hope you copied from Microsoft's original) I create a template, as follows,
<xsl:template name="Alert" match="Row[@'Alert']" mode="itemstyle">
<div id="alert" class="myAlert">
<marquee scrollamount="2" scrolldelay="1"><xsl:value-of select="@Title"/></marquee>
Some designers also like to include an entry on their Content Query Main to declare the above template. Not everybody follows this rule. Depending on the styles, SharePoint will still render the items on the page, whether you modify the Content Query Main file or not.
Step 5 - Create The Custom Content Query Web Part (CQWP)
I add a CQWP to the home page or page where the alert should display at. I then modify the CQWP to use the custom list as source and I set the filter on DisplayYN equals Yes. That way only those items on the custom alerts list that have been selected to be displayed will display.
For most part, my customers never select more than one item at a time. But they usually want to know which other alerts they had published before. That's when this second solution turns out to be better than the simple HTML shared further above.
Then I export the CQWP to my computer and I open it using a tool like Notepad. I then make the following changes:
<property name="ItemXslLink" >/sites/SiteName/Style Library/XSL Style Sheets/CUSTOMItemStyle.xsl</property>
<property name="MainXslLink" >/sites/SiteName/Style Library/XSL Style Sheets/CUSTOMContentQueryMain.xsl</property>
<property name="Xsl" ><xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:cmswrt="http://schemas.microsoft.com/WebPart/v3/Publishing/runtime" exclude-result-prefixes="xsl cmswrt x" > <xsl:import href="/Style Library/XSL Style Sheets/Header.xsl" /> <xsl:import href="/Style Library/XSL Style Sheets/CUSTOMItemStyle.xsl" /> <xsl:import href="/Style Library/XSL Style Sheets/CUSTOMContentQueryMain.xsl" /> </xsl:stylesheet></property>
I save and then I import the updated CQWP to the page. The last thing is to select my style within the drop-down Presentation list within the CQWP tool pane. And finally, I delete the original CQWP from the page once I make sure the customized one is working as expected.
Visit this page
to view a list of the Locale IDs (LCID) applied in XSL format statements to select the appropriate one for your particular needs if date, time, currency, or all of the above are not displaying in the desired or needed format on a Data View Web Part. (This also applies to Content Query Web Parts.).
Add this snippet of code to the Item Style (Style Sheet) file to render the names of the fields being passed to the Content Query Web Part (CQWP). Note that this code will be temporary. You don't want to leave this in the finished Item Style!
<xsl:template name="RenderFieldsBeingPassed" match="Row['RenderFieldsBeingPassed']" mode="itemstyle">
P:<xsl:value-of select="name()" />
Save the file. Return to the site (in the browser) and refresh the page. Open the Web Part Tool Pane for the CQWP and expand Presentation. Then under Styles change the Item Style to the new custom style (RenderFieldsBeingPassed) in the drop down. Select Apply.
The CQWP will now list out all of the fields that are being passed.
The steps below allow you to add a "Welcome to the site, Jane Doe!" welcome message to a page. We did this to insert it to an Announcement list.
1. Using SharePoint Designer, insert a Data View Web Part based on the Announcement list;
2. Select Data > Conditional Formatting;
3. Select any data value and select Create;
4. Select Show Content;
5. Create a condition that reads Title EQUALS [Current User] and select [OK];
6. Go back to the Design view;
7. Type "Welcome to the site, " inside one of the Table cells;
8. Switch to Code view;
9. Find the following code:
<ParameterBinding Name="UserID" Location="CAMLVariable" DefaultValue="CurrentUserName"/>
10. Change this code to:
<ParameterBinding Name="UserID" Location="CAMLVariable;ServerVariable(LOGON_USER)" DefaultValue="CurrentUserName"/>
11. Scroll up in the code and find "Welcome to the site, "
12. Change this code to: "Welcome to the site, <xsl:value-of select="$UserID"/>"
13. Save the page.
As part of one of my assignments I needed to insert four Content Query Web Parts at the bottom of my custom master page for the site. This was a somewhat easy thing to do in MOSS 2007 and you would do it only once on the master page itself. Well, that’s not the case in SharePoint 2010 anymore. You cannot insert Web Parts on a SharePoint 2010 Master Page at all. However, I found a way around it.
Microsoft might have taken that functionality away from us in what concerns Master Pages. But… they have not taken it away when it comes to page layouts. You can insert web parts in a custom page layout.
The main con about this approach is that if you need those web parts available to all pages being created on your site, then you have to create a copy of each page layout available out there and insert the web parts to all of them. So when your customers create new pages, the web parts are going to be there. (By inserting them once in the MOSS 2007 master page you were done; now you have to replicate the job for all page layouts for which you want those web parts to display.)
Note: As I always emphasize, make sure you are working on a copy of Microsoft’s originals and leave the originals from Microsoft alone.
This is what you need to do:
1. Create some “test” or “hidden” page somewhere on the site where you can create your web parts and edit the page;
2. Insert the web part at any web part zone on the page (it doesn’t really matter where since this is more of a placeholder until you are done creating the web part completely). In the case of custom Content Query Web Parts, do all of the necessary customizations to the web parts, style sheets, CSS rule sets, etc.
3. Download the web part or web parts to your hard drive;
4. Upload the web part or web parts to the site’s Web Part Gallery;
5. Using SharePoint Designer, open your custom page layout
6. Go to the location of the page where you would like to insert the web part (it could be a row or cell in a table or a <div>); I usually work in split mode. You may want to use the Code or Design view; it’s up to you and whatever it is easier for you.
7. Select the Insert tab on the ribbon and then select Web Part within the Web Parts group;
8. SharePoint Designer will display a Web Part drop-down menu; locate the web part uploaded in step 4 above and insert it in your page;
9. Save, check in, and publish the page;
10. Go back to your site using Internet Explorer this time (not Designer) and create a page using the modified page layout. Or if you have already created a page using this particular page layout, open it. Make sure the web part is now displaying at the desired location on the page.
Use this solution if you are requested to completely hide the View All Site Content menu option from the [Site Actions] menu of a site.
1. Using SharePoint Designer edit your custom copy of the v4.master master page
2. Using SharePoint Designer's Code view, locate the section with an
3. Once you located this section, locate the PermissionsString and change the default value of "ViewFormPages" to "ManageWeb."
4. Save, check in, and publish your custom master page
5. Open the site in the browser and test it with a few users who have been granted different access level. With this new setting, the View All Site Content option will display only for those users who have access to higher features within the site.
for more settings for the Permissions String.
Tip: If you would like to hide the Quick Launch (or left navigation pane) for all the pages on a given site, you can insert the code below within the header (<head>) of your custom master page using SharePoint Designer.
The easier way to do this would be to insert a Content Editor Web Part anywhere on the page for which you would like to hide the Quick Launch and insert the code in the HTML Source section of the web part. However, once in a while I face a couple of things with the Content Editor Web Part since we upgraded to SharePoint 2010. And that is that it many times adds blank lines, creating empty, blank spaces on my pages, or it changes my HTML code once I save the web part or page. So I prefer to put the code on a text file (you can use your computer's notepad and that should suffice) that I then upload to some document library on the site. Then I use the Content Editor Web Part to reference the file where I have saved the code. In this way I can prevent both SharePoint from "compiling" and changing my code to whatever, and I avoid the bug that adds blank lines to my pages where the Content Editor Web Part displays. But this is my preference. You can do whatever feels better, easier, or more comfortable for you.
The code you need is, as follows,