티스토리 뷰

SharePoint 2010에서의 마스터 페이지 (4)

디자이너와 개발자들이 보다 더 쉽게 작업할 수 있도록 페이지 구조 및 공통 CSS를 정리해보도록 하겠습니다. IE 개발자 도구를 통해서 찾으면 되는데 많이 찾는 공통 CSS를 페이지 구조와 정리했으니 참고하십시오.

아래 내용에서 구성된 CSS를 보고 이를 수정하여 다른 CSS에 적용해서 테스트할 수 있습니다.

 

 

s4-ribbonrow

BODY #s4-ribbonrow

 

siteactiontd

.ms-siteactionsmenu

.ms-siteactionsmenuinner

 

위로 탐색

.s4-breadcrumb-anchor

 

위로 탐색

s4-breadcrumb-menu

.s4-breadcrumb-anchor

.s4-breadcrumb-top

.s4-breadcrumb-header

.s4-breadcrumb

.s4-breadcrumbRootNode

.s4-breadcrumbCurrentNode

 

페이지 편집

.ms-qatbutton

 

 찾아보기

.ms-cui-tts

.ms-cui-tt

.ms-cui-tt-s

.ms-cui-tt-span.ms-cui-tt-a

 

 페이지

.ms-cui-tt-span

.ms-cui-tt-a

.ms-cui-tt

 

 

.ms-welcomeMenu

.ms-SPLink

 

 

.s4-title

.s4-titletext

.s4-titlelogo

 

검색 상자, 도움말

.s4-search

.ms-searchimage

.s4-help

 

전역 탐색

BODY #s4-topheader2

.s4-toplinks

.s4-tn a.selected

 

s4-leftpanel-content

body #s4-leftpanel

.ms-quickLaunch

Header (,라이브러리, 목록)

.s4-ql ul.root > li > .menu-item,.s4-qlheader,.s4-qlheader:visited

링크 (, 공유문서)

.s4-ql ul.root ul > li > a

휴지통 (이미지포함)

.s4-specialNavLinkList a

. s4-rcycl

. ms-splinkbutton-text

모든사이트 콘텐츠

(이미지포함)

.s4-specialNavLinkList a

 

웹 파트

.s4-wpcell

.ms-WPHeader

.ms-WPHeader TD

대화상자

문서 추가, 내용 보기 등 대화상자

.ms-dlgContent

.ms-dlgOverlay

아래 링크를 활용해서 간략히 정리했습니다. 스타일 시트가 좀 많지만 가장 많이 쓰는 내용은 아래와 같습니다. 나머지 내용은 적용하실 때 위 내용을 참고하시면 될 것 같습니다.

l  최상단 ribbonrow : BODY #s4-ribbonrow

l  리본 바로 아래: .s4-title

l  왼쪽 빠른 실행: body #s4-leftpanel

l  아래 Footer: DeveloperDashboard 태그 위 </div> 태그 위

 

 

SharePoint 2010 Base CSS Classes

http://erikswenson.blogspot.com/2010/01/sharepoint-2010-base-css-classes.html

Cascading Style Sheets Class Usage in SharePoint Foundation

http://msdn.microsoft.com/en-us/library/ms438349.aspx

Using Default SharePoint 2010 CSS Files (Wrox)

http://msdn.microsoft.com/en-us/library/hh537937.aspx

Real World Branding with SharePoint 2010 Publishing Sites

http://msdn.microsoft.com/en-us/library/gg430141.aspx

 

 

댓글