วันอาทิตย์ที่ 9 มีนาคม พ.ศ. 2557

การปรับหน้าจอและ Theme

หลายคน คงสงสัยว่า หน้าตา Sharepoint เนี่ยสามารถปรับเปลี่ยนได้ไหม ขอตอบเลยว่ามีวิธีปรับครับ โดย ผมขอแบ่งออกเป็น 2 ส่วนนะครับ

1. ส่วนที่เป็น Banner นะครับ
2.ส่วนที่เป็น Font ของเมนู

โดยก่อนอื่นให้ทุกท่านติดตั้ง Tools ตัวหนึ่งของ Sharepoint ก่อนนะครับ คือ Microsoft Sharepoint Designer
Download : http://www.microsoft.com/th-th/download/details.aspx?id=16573
เมื่อติดตั้งแล้วเรามาเริ่มดำเนินการกันต่อเลย

- ส่วนทีเป็น Banner
1.ให้เราหาภาพหรือออกแบบขึ้นมาก็ได้นะครับ ขนาดประมาณ 1400x180 pixel
2. upload ภาพดังกล่าว ไปเก็บไว้ที่


 



 


3. เปิด Microsoft Sharepoint Designer ขึ้นมาแล้วไปที่ Master Page  -> Right click ที่ V4.Master เลือก Edit File in advance Mode 
พิมพ์ค่าดังนี้
<style type="text/css">
/*–Hide Quick Launch –*/
/*–Hide Quick Launch –*/
#s4-leftpanel{
display:none
}
.s4-ca{
margin-left:0px
}
.s4-title {
 background:#F9F9F9 url('/SiteCollectionImages/ชื่อรูปที่upload) repeat-x 0px 0px;
 margin:0;
 min-height:180px;
 overflow-x:hidden;
 word-wrap:break-word;
 }
</style>
4. SAVE แล้วก็Right  Click ที่ File V4.Master เพื่อCheck in เข้าไปนะครับ
 
หมายเหตุก่อนแก้หรือทำอะไรก็ Backup File ไปด้วยนะครับ
 
-------------------------------------------------------------------------------------------------------------------------
- ส่วนทีเป็น Font ของเมนู
1.เปิด Microsoft Sharepoint /designer -> ไปที่ All files -> Style Library
 
 
2. Right Click ที่พื้นที่ว่างๆ New-> CSS
 
3. Copy css ด้านล่างไปใช้งานหากต้องการปรับ Font,ความหนา, ขนาด จาก CSS ด้านล่างได้เลยครับ
.s4-toplinks .menu LI { BORDER-RIGHT: 1px solid HighlightText; border-color: silver}
/*** Top Navigaion Global Menu Container ***/
.s4-tn
{
    
      padding: 0px;
  BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid;  BORDER-TOP: 1px solid ; BORDER-RIGHT: 1px solid ;   
      margin: 0px;
      font-family: 'Calibri' !important;
      font-size: 12pt !important;
  font-weight: bold;
       border: 2px transparent solid;
      padding-right: 10px;
      padding-left: 10px;
 
}

/*** Top Navigaion Static Menu Style ***/
.s4-tn li.static > .menu-item
{
      color: #5A9A18;
  BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid;  BORDER-TOP: 1px solid ; BORDER-RIGHT: 1px solid ;   
    font-weight: bold;
 
      padding: 4px 10px;
      line-height: 9px;
      height: 50px;
}
 
/*** Top Navigaion Static Menu Hover ***/
.s4-tn li.static > a:hover
{
      background: url("/_layouts/Images/selbg.png") repeat-x left top;
  BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid;  BORDER-TOP: 1px solid ; BORDER-RIGHT: 1px solid ;   
      background-color:  #FFFFCC;
      color:  blue;
      text-decoration: none;
     
}
 
/*** Top Navigaion Static Menu Selected ***/
.s4-toplinks .s4-tn a.selected
{
      background: url("/_layouts/Images/selbg.png") repeat-x left top;
      background-color: #529610;
      color:  #fff;
      text-decoration: none;
      border: 1px transparent solid;
      padding-right: 10px;
      padding-left: 10px;
      margin: 0px;
      border-color: #529610;
}
 
/*** Top Navigation Flyover/Dynamic Menu Container ***/
.s4-tn ul.dynamic {
 background-color: white;
 border: 1px solid #000;
}
 
/*** Top Navigation Sub-Menu Items Padding ***/
.s4-tn li.dynamic > .menu-item {
 padding: 10px 20px 10px 20px;
}
 
/***  Top Navigation Sub-Menu Items (HyperLinks) CSS Style ***/
.s4-tn li.dynamic > a {
 font-weight: normal;
 color: #529610;
}
/*** Top Navigation Sub-Menu Items (HyperLinks) Hover Style ***/
.s4-tn li.dynamic > a:hover {
 font-weight: bold;
 background-color: #AECE8F;
 color: #FFF;
}
 
3. จากนั้นกด Save แล้ว Checkin เข้าไปเหมือนเดิมเลยครับ
4.ไปที่ Master Page แล้วพิมพ์
<link href="/Style%20Library/ชื่อCSS ที่สร้างขึ้น.css" rel="stylesheet" type="text/css" />
 
เขียนโดย ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)