SharePoint SuiteBar Customization

การปรับแต่ง SuiteBar ของ SharePoint สามารถทำได้ง่ายๆ โดย SuiteBar มีส่วนประกับหลักดังข้างล่างนี้คือ
- SuiteBarLeft (ตรงส่วนของ Logo)
- SuiteBarRight (ตรงส่วนของ Login/Setting)
- Ribbon Tools (ส่วนข้างล่างของ SuiteBarLeft และ SuiteBarRight
- Logo

โดยหลักๆแล้วมันจะเขียน jQuery เข้าไป Over-ride Class หรือ Id ของส่วนที่เราต้องการ ดังนี้

$(document).ready(function() {

        /* Change backgroud SuiteBarLeft (Logo) */

$('#suiteBarLeft').attr('style','background-color:#FFFFFF !Important;');

/* Change background SuiteBarRight (Login/Setting) */

$('#suiteBarRight').attr('style','background-color:#FFFFFF !Important;');

/* Change background Ribbon Tools */

$('#globalNavBox').attr('style','background-color:#FFFFFF !Important;');

    

/* Change Suitebar Logo */        

var suitebar = $('#suiteBar');

       var branding = suitebar.find('.ms-verticalAlignMiddle');

       branding.html("<a href='/' style='margin-left:10px;'><img src='/Style Library/images/Logo.png' height='30px'></a>");

});

โดยในการ Custom ในครั้งนี้ผมได้พบกับปัญหา บางประการในส่วนของ IE8 ที่ไม่ว่าจะ Custom อย่างไร
มันก็ไม่เป็นไปตามที่ต้องการ ผมจึงต้องทำการเขียน Code เพิ่มเติมนิดหน่อย ตาม Code ข้างล่างนี้

/* Change backgroud SuiteBarLeft (Logo) */

.ms-core-needIEFilter #suiteBarLeft

{

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff,endColorstr=#ffffff) !Important; BACKGROUND-COLOR: transparent;

}

/* Change background SuiteBarRight (Login/Setting) */

.ms-core-needIEFilter #suiteBarRight

{

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff,endColorstr=#ffffff) !Important; BACKGROUND-COLOR: transparent;

}

/* Change background Ribbon Tools */

.ms-core-needIEFilter #globalNavBox

{

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff,endColorstr=#ffffff) !Important; BACKGROUND-COLOR: transparent;

}

-- จบ --