Customising SharePoint2010 Modal Dialogs

-

First of all we discuss how the dialog framework works.

Well  SharePoint  uses Modal Dialogs for both 
  • Taking input from the user.(as New Item / Edit Itms forms)
  • Notifing end User that some processing is going on. so please wait.
For ease to work on these dialogs we are going to use OOB methods and feature present in SP.UI.ModalDialog Class.

Therefore dialog framework satisfies almost all the requirements that are related to functionality as we can use dialog for rendering *.aspx or *.html pages (weather an application page or ghostable page) , we can dinamically load usercontrols in it and even put html content in it directly as usually done before (when we were using jquery Modal dialog ) this is very important to consider when we are migrating our application from SP2007 to  SP2010. 

Besides the functionality requirements one more important thing that wants above all is the "Branding", for better UX and to make dialogs compatible with the whole application we have to modify the Title bar, Border and even Buttons. we can do all this by CSS only that supports all the browsers supported by SharePoint 2010.
For this put the include/overrides the following css classes in you style sheet now the OOB looks like (suites my branding):



/*sets the ui of the overlay (SP.UI.Modal Dialog)   */

.ms-dlgContent
{
    border: 1px solid #ebeced !important;
}
.ms-dlgBorder
{
    border: 1px solid #ebeced !important; 
}
.ms-dlgTitle
{
     background-color: #ebeced;
    background-image: none;
    vertical-align: middle;
    padding-bottom: 15px;
    border-bottom: 1px solid #b9b9ba; /*padding-left:12px;*/
}
.ms-dlgTitleText
{
    /*display: block;         font-weight: bold;         font-size: 13px;*/ /*color: #231F20;*/
    font-family: "proxima-nova-1" , "proxima-nova-2" ,sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 20px !important;
    margin: 0px;
    padding-left: 15px; /* text-align :center;*/
    padding-top: 11px;
}
#dialogTitleSpan
{
    /* width: 580px !important;*/
}
.ms-dlgTitleBtns
{
    z-index: 9999;
    border: none;
    position: absolute;
    right: 15px;
    top: 14px; 
    background:url("/_layouts/1033/STYLES/Themable/Images/lightbox_close.png") #ebeced no-repeat 100% 0px;
     /* width:20px;         height:20px;*/
}
.ms-dlgTitleBtns:hover
{
    background:url("/_layouts/1033/STYLES/Themable/Images/lightbox_close.png") #ebeced no-repeat 100% -50px;
 /*  width:20px !important;         height:20px !important;*/
}
.ms-dlgCloseBtn span:hover
{
    border: none;
    background: none;
}
.ms-dlgTitleBtns img
{
    display: none;
}

/*END the ui of the overlay (SP.UI.Modal Dialog)   */
Location: Gurgaon, Haryana, India

Comments

Post a Comment

Popular posts from this blog

How to Build Mobile Apps for Online Marketplaces

-
Image
  Introduction: In today's digital age, online marketplaces have revolutionized the way we buy and sell goods and services. With the increasing popularity of smartphones, mobile apps have become the go-to platform for accessing these marketplaces. If you are looking to venture into mobile app development for online marketplaces, you've come to the right place. In this comprehensive guide, we'll walk you through the essential steps and considerations for building mobile apps for online marketplaces.   Define Your App's Purpose and Features: Before diving into development, it's crucial to define the purpose and key features of your app. Consider the target audience, niche, and unique selling points that will set your marketplace app apart from the competition. Determine the core functionalities your app will offer, such as user registration, product listings, search and filtering options, secure payment gateways, ratings and reviews, and messaging capabilities...
Read more

The Growing Importance of Website Accessibility in the Digital Age

-
Image
  Introduction: In today's digital age, websites have become the primary means for individuals to access information, connect with businesses, and engage with various online services. As the online landscape continues to evolve, it is imperative that website owners and developers prioritize accessibility for all users. Website accessibility ensures that people with disabilities can navigate, understand, and interact with online content on an equal basis with others. In this blog post, we will explore the growing importance of website accessibility and its significant impact on user experience, inclusivity, legal obligations, and business success.   Enhancing User Experience: Website accessibility goes beyond compliance with legal requirements; it directly improves user experience for all visitors. By implementing accessible design principles, such as clear navigation, readable text, and properly labeled links, websites become more user-friendly for everyone. An accessi...
Read more

How to Choose the Right Software Development Company in 2023

-
Image
  In today's digital age, choosing the right software development company is crucial for the success of your business. Whether you are a startup looking to build a groundbreaking app or an established enterprise in need of custom software solutions, making the right choice can have a significant impact on your project's outcome. In this comprehensive guide, we will walk you through the key factors to consider when selecting a software development company in 2023.   Understanding Your Needs   Before you embark on the journey of finding the perfect software development partner, it's essential to have a clear understanding of your project's needs and goals. Take the time to define your project scope, objectives, and budget. Consider the following questions:   What is the purpose of your software?   What features and functionalities do you require?   What is your budget and timeline for the project?   Having a well-defined project plan will not only help y...
Read more