 | SharePoint like any other technology is full of tricks and mysteries. People who work with it every day reveal these secret options and possible pitfalls one by one but there are still many ruses to learn. Today I want to share one of these ruses with you. I mastered this magic trick when I was developing the master-page for a SharePoint website. During this process I faced certain difficulties with the settings of the standard SharePoint component appearance, namely the Welcome component, search component, etc. I’m going to reveal the secret how I adjusted the appearance of these elements. Let’s start from the Welcome component. |
1. I’m sure that everyone who has ever worked with SharePoint noticed a small pull-down menu in the upper right corner of the page. This menu usually contains a welcoming message for the current user. I badly needed to change the appearance of this component that is why I started looking for the solution everywhere. I found it in the CSS style setting.
First of all we have to declare the component on the page:
<%@ Register TagPrefix="wssuc" TagName="Welcome" src="~/_controltemplates/Welcome.ascx" %>
<wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false"> </wssuc:Welcome> When the component is parsed HTML tags with certain CSS classes are generated. Covering these classes we will be able to adjust the component the way we need. Here is a list of classes I had to cover to change the default styles:
.ms-welcomeMenu{}
.ms-welcomeMenu a:link{}
.ms-welcomeMenu a:hover{}
.ms-welcomeMenu.ms-SpLinkButtonActive{}
.ms-welcomeMenu.ms-SpLinkButtonActive a:link{}
.ms-welcomeMenu .ms-menu-a{}
.ms-welcomeMenu div.ms-MenuUIPopupBody .ms-MenuUIPopupScreen{}The names of the classes help us understand what function this or that class performs.
2. The other component I had to change was the search component. I needed to change the button appearance and remove the pop-down menu that offered to specify the search location. This task can be carried out with the help of a feature. The search component is declared on the page in the following way:
<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox"/>Next we have to create a feature which will help us to copy a pic to the server. This pic will be displayed instead of the button. Now we have to add the following code to activate the changes:
<Control
Id = "SmallSearchInputBox"
Sequence = "15"
ControlClass = "Microsoft.SharePoint.Portal.WebControls.SearchBoxEx" ControlAssembly = "Microsoft.SharePoint.Portal, Version = 12.0.0.0, Culture = neutral, PublicKeyToken = 71e9bce111e9429c">
<Property Name="GoImageUrl">Picture location</Property>
<Property Name="GoImageActiveUrl"> Picture location </Property>
<Property Name="UseSiteDefaults">true </Property>
<Property Name="FrameType">None</Property>
<Property Name="DropDownMode">HideScopeDD</Property>
</Control>Now indicate the ID of a control to operate it (SmallSearchInputBox in our case) and the address of the button-pics. The default number of pictures is 2: one is displayed when the button is inactive, and the other – when it’s active. The DropDownMode feature detects when to display the pop-down menu. In the describes case we hide it.
So there it goes! Together we have just changed the appearance of two SharePoint standard components and you see, there is no magic in it.
 | Posted by Ivan Vahovich, .Net Developer |
| Bookmark or share: |          |
