블로그 이미지
정홍주
Azure에 대한 내용뿐만 아니라 새로운 트렌드로 빅데이터, BI, SharePoint, 앱 등의 내용을 다룹니다.

calendar

      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    

Notice

2012.05.14 08:30 Office 365/SharePoint Online

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

 

 

신고
posted by 정홍주
2012.04.30 01:27 Office 365/SharePoint Online

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

이번 내용에서는 디자이너와 마스터 페이지를 협업할 때 필요한 유용한 도구로 IE 개발자 도구와 대체 CSS에 대한 내용을 알아보도록 하겠습니다.

SharePoint Online 또는 SharePoint 2010 사이트를 액세스합니다. 여기서는 IE 9와 크롬 브라우저로 테스트합니다.

IE 9로 사이트가 열렸으면 F12를 클릭하면 아래와 같은 개발자 도구를 살펴볼 수 있습니다.  

 

위 개발자 도구에서 HTML 탭 아래에 보면 화살표 아이콘(클릭으로 요소 선택)을 볼 수 있는데요, 이 메뉴를 클릭하고 웹 브라우저에서 원하는 부분을 클릭하면 됩니다. 먼저 상단 메뉴를 한번 클릭해보도록 하겠습니다. 그러면 아래와 같이 웹 브라우저에서는 파란색 테두리로 나타나고 F12 개발자도구에서는 해당 HTML 요소와 스타일을 바로 알 수 있습니다. 개발자 도구를 이용하여 디자이너와 협업하면 디자이너는 어떤 스타일을 변경해야 할지 좀 더 쉽게 이해할 수 있을 것입니다. HTML 소스만 봐서는 머리만 아프죠.  

 

위 그림의 오른쪽 부분의 스타일에 보면 체크표시들이 보이는데 체크를 해제해보면 스타일이 변경되는 것을 알 수 있으며 또한 해당 값을 변경해볼 수 있습니다. 간단하게 테스트해보기 위해 사이트에 오신 것을 환영합니다.” 부분의 색상을 개발자 도구에서 아래와 같이 변경해보았습니다. 원래 파란색 계통인데 검정색 계통으로 변경해볼 수 있습니다 

위 그림의 스타일 부분에 가로로 줄을 그어놓은 것은 상위에서 선언된 스타일을 아래 부분에서 재정의해서 쓰고 있다는 것입니다.

스타일의 특성을 추가해서 간단히 테스트하려면 위 그림의 해당 스타일의 오른쪽 옆을 보면 corev4.css 링크를 볼 수 있습니다. 링크를 클릭하면 css 파일의 해당 스타일로 이동하고 스타일에서 오른쪽 클릭하면 특성 추가를 통해 스타일을 추가로 지정해볼 수 있습니다. 저장되는 것은 아니고 브라우저에서 테스트로 추가되는 것입니다.

아래 그림은 해당 스타일 시트 파일로 가서 text-decoration: underline을 추가한 내용입니다. 밑줄이 생긴 것을 볼 수 있습니다.  

변경하고 싶은 스타일 요소와 테스트 값을 지정해보았다면 위 그림의 CSS 메뉴 아래의 저장 버튼을 눌러 변경된 CSS 전체를 다운로드 할 수 있습니다. 전체 중에서 변경된 내용만 정리해서 다른 이름으로 저장을 합니다. 저장된 파일을 대체 CSS로 적용해보도록 하겠습니다.

BODY #s4-leftpanel-content {

background-color:#e8e8e8;

}

.ms-rteElement-H1B {

COLOR: #0e0000; FONT-SIZE: 2em; FONT-WEIGHT: normal; TEXT-DECORATION: underline

}

여기서는 corev4_alterDemo.css 파일로 저장을 했고 이를 SharePoint 2010 사이트에 스타일 라이브러리에 업로드 했습니다. (업로드후 체크 인과 주 버전 게시를 해야 합니다.)

SharePoint 2010의 기능 중에서 게시 관련 기능을 사이트 모음과 사이트 기능에서 활성화했다면 사이트 설정에서 디자인 영역의 마스터 페이지를 볼 수 있습니다. 마스터 페이지를 링크를 클릭하고 맨 아래 부분을 보면 대체 CSS에 대한 내용을 업로드한 파일을 찾아보기 하여 설정할 수 있습니다. 

적용된 결과는 아래와 같이 나타나게 됩니다.  

크롬 웹 브라우저의 F12 개발자도구에서도 HTML 요소를 선택하거나 스타일을 체크 해제하거나 할 수 있습니다. 사용하기 편한 도구를 통해 SharePoint 2010의 영역에 어떤 스타일이 지정되어 있는지를 손쉽게 알 수 있고 SharePoint 2010의 페이지 구조를 몰라도 스타일을 손쉽게 변경, 추가해보고 이를 통해 대체 CSS를 사용하여 새로운 스타일을 적용해서 테스트해볼 수 있습니다.

위 내용을 테스트할 경우 네트워크 속도에 따라 좀 느리게 나오거나 한번씩 새로 고침을 해주어야 할 수 도 있습니다.

신고
posted by 정홍주
2012.04.17 08:30 Office 365/SharePoint Online

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

 

마스터 페이지는 개발자가 직접 손 대기에는 무리가 있는 편입니다. 일단 CSS를 손대야 하고 이미지를 만들거나 수정해야 합니다.

디자이너도 손 대기에는 좀 무리가 있습니다. 일단 SharePoint 2010이 낯설고 자체를 이해하기가 어렵습니다. 그리고 디자인을 하기 위해서는 SharePoint Designer 2010을 다룰줄 알아야 하기도 하고 마스터 페이지 태그 중에 <Sharepoint 가 있어 어려워하는 것으로 보입니다.

 

그래서 개발자 또는 퍼블리셔와 디자이너가 같이 작업하는 것이 여러모로 나은 듯 합니다.

 

1.     코딩이나 사용자 컨트롤로 디자인을 할지 스타일 시트로 할지를 결정해야 합니다. SharePoint Online이나 Power User를 위해서는 스타일 시트로 하는 것이 일반적이며 저도 좋아하는 방식입니다.

2.     리본을 보이게 할지 말지를 결정해야 합니다. 사용자나 사이트 성격에 따라 리본을 표시해주지 않아도 상관없는 경우가 있습니다. 게시 페이지 같은 경우 리본 숨기기메뉴가 있어 디자인을 좀 더 잘해야 하는 경우도 있죠.

3.     퍼블리셔, 디자이너에게 SharePoint 2010에서 대해서 대략적인 사이트 구조와 영역(상단의 리본, 위쪽 링크 모음, 왼쪽 빠른 탐색)에 대해서 설명을 해줍니다. 바로 이해하기는 무리가 있습니다.

4.     리본이 있는 경우 디자인 시안은 리본 위에 이미지를 올려서 처리하는 경우와 리본 밑에 이미지를 올려둘 경우가 있을 수 있는데 리본 위에 이미지를 올릴 경우는 제한적이라는 것을 디자이너에게 미리 알려주어야 합니다. 이 내용은 아래에서 다시 정리하겠습니다.

5.     레이아웃이 많이 다르다거나 필요하다면 별도의 마스터 페이지를 만들어서 개발자가 만들어주어야 합니다.

6.     사용자 지정 마스터 페이지와 스타일 시트를 위해 간단히 IE 개발자 도구를 통해서 CSS를 변경하는 것으로 보여줍니다. 그러면 이해도가 상당히 많이 올라옵니다. 아니면 부분별 CSS목록을 하나하나 찾아서 알려주면 됩니다.

7.     그리고 대체 CSS를 통해서 접근하는 것을 진행하고 나면 퍼블리셔나 디자이너가 혼자서 작업도 가능합니다. SharePoint Designer 2010을 반드시 사용하지 않아도 됩니다. 원격에서 이리 저리 디자인을 변경해 볼 수 있습니다.

8.     상단의 리본, 위쪽 링크 모음, 왼쪽 빠른 탐색, CSS에 대한 내용이 정리가 되면 디자인 시안을 만들어 낼 수 있을 것 같습니다.

9.     어느 정도 작업이 완료가 되면 개발자가 정리해서 마스터 페이지에 새로운 CSS 를 참조하거나 새로운 모듈 프로젝트를 만들고 통합, 배포 테스트를 진행할 수 있습니다.

 

위 단계로 마스터 페이지를 디자이너가 한번 숙달해보고 나면 생산성이 약 7배정도 올라가는 것 같습니다.(저만의 생각~)

 

IE 개발자도구와 대체 CSS를 사용하여 스타일에 대해 접근하는 방법과 사용자 지정 마스터 페이지를 생성하여 적용하는 내용에 대한 부분을 이후에서 다루어보도록 하겠습니다.

 

# 리본 위에 이미지를 올리는 것의 예는 “SharePoint Server 게시기능을 활성화 하면 “nightandday” 마스터페이지를 참조하시면 됩니다.

이 경우 상단에 로고와 백그라운드 이미지를 통해 디자인을 하실 수 있는 데요. 스타일 시트는 아래와 같습니다.

 

.nightandday .ribbonbackground

{

           /* [ReplaceColor(themeColor:"Accent1")] */

           background-color: #05acc3;

           /* [RecolorImage(themeColor:"Accent2",method:"Filling")] */

           background-image:url("../../../images/nd_headerBG.png");

           background-repeat:repeat-x;

}

위 스타일을 참고해서 작업하면 되는데 height는 별도로 지정하지 않습니다. 잘못 지정하면 문서 업로드 등에서 아래와 같이 나타나게 됩니다. 상단에 이미지가 많이 나타나게 되며 확인, 취소 버튼이 안보이게 되죠.

 

 

신고
posted by 정홍주
prev 1 next