Part 3 – Sign Out/Sign in as a Different User

A project I am working on called for a custom implementation of the SharePoint Welcome menu control. (more…)

Part 2 – Edit Profile and My Site links

A project I am working on called for a custom implementation of the SharePoint Welcome menu control. The replacement control needed to provide the following:

• Implement the look and behaviors that the designers created.
• Exclude some default SharePoint menu items (such as My Regional Settings).
• Reuse some existing SharePoint menu items (such as Sign Out/Sign in as a Different User).
• Allow for the addition of other custom menu items in the future.
• Display thumbnail of the user’s profile picture.

I had to create a control that looked and behaved like the following:

The designers came up with some clean, semantic markup married with some jquery, for me to start from:

<div class="header">

    <img class="header-logo" src="/images/header_logo.png" alt="" width="169" height="78" />

    <div class="header-bar">

        <div class="profile_menu">

            <a href="#" class="profile_btn">

                <span class="image"><img src="" style="width:20px;height:20px" /></span>

                <span class="name">John Doe</span>

                <span class="arrow"></span>

            </a>

            <div class="profile_dropdown">

                <div class="dropdown_bkgrd">

                    <ul>

                        <li>Edit Profile</li>

                        <li>My Site</li>

                        <li>Log Out</li>

                        <li>Sign in as a Different User</li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

</div>

This is part 2 of a three part series.

1. Part 1 – Overview, Profile Picture, and User Name
2. Part 2 – Edit Profile and My Site links
3. Part 3 – Sign Out/Sign in as a Different User

(more…)

Part 1 – Overview, Profile Picture, and User Name

A project I am working on called for a custom implementation of the SharePoint Welcome menu control. The replacement control needed to provide the following:

• Implement the look and behaviors that the designers created.
• Exclude some default SharePoint menu items (such as My Regional Settings).
• Reuse some existing SharePoint menu items (such as Sign Out/Sign in as a Different User).
• Allow for the addition of other custom menu items in the future.
• Display thumbnail of the user’s profile picture.

I had to create a control that looked and behaved like the following:

The designers came up with some clean, semantic markup married with some jquery, for me to start from:

<div class="header">

    <img class="header-logo" src="/images/header_logo.png" alt="" width="169" height="78" />

    <div class="header-bar">

        <div class="profile_menu">

            <a href="#" class="profile_btn">

                <span class="image"><img src="" style="width:20px;height:20px" /></span>

                <span class="name">John Doe</span>

                <span class="arrow"></span>

            </a>

            <div class="profile_dropdown">

                <div class="dropdown_bkgrd">

                    <ul>

                        <li>Edit Profile</li> 

                        <li>My Site</li>

                        <li>Log Out</li>                        

                        <li>Sign in as a Different User</li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

</div>

This is part 1 of a three part series.

1. Part 1 – Overview, Profile Picture, and User Name
2. Part 2 – Edit Profile and My Site links
3. Part 3 – Sign Out/Sign in as a Different User

(more…)