MOVABLETYPE 4.0 stylesheet(CSS) ·무버블 타입 4.0 스타일시트 수정

Contents By publish9 on February 26, 2008 1:31 AM | Permalink | Comments (1) | TrackBacks (0)

MOVABLETYPE 4.0 stylesheet(CSS) ·무버블 타입 스타일시트 수정

무버블타입 4.0(movabletype 4.0) 스타일시트 수정관련글입니다.무버븥 타입의 디자인 스타일을 변경하려면 기본적인 html을 비롯하여 스타일시트(CSS) 위젯셋(widget set) 템플릿(Templet) 등 변경해야 할 부분이 한두군데가 아닙니다. 게다가 거미줄 처럼 얽혀있는 이 놈은 개발자 수준의 지식을 요구하기도 합니다. 지금 Langolier company의 스타일은 외국의 모 블로그를 모태로 절반의 허락을 얻어 아직 수정중인 상태입니다. 저는 웹기획자도 디자이너도 개발자도 아니기에, 사실 지금까지 체계적인 학습없이 해보고 안되면 바꾸는 다소 미련한 방식으로 작업해왔습니다. lots of hard work 더하기 많은 시간. dknow님과 메일주고받은 내용중 조금 정리하여 포스팅합니다.

*메일 내용그대로 forwarding 합니다 :)

세가지 CSS 와 관련 이미지파일 압축해드려요.

일단 그대로 입히셔도. 적용은 어느정도 될거에요.

하지만 제가 골격을 조금 바꾸어놓은 부분이 있어 안맞는 부분도 많이 있을것 같습니다.

1. 적용전에 design > style> 에서 wide-thin-thin 으로 설정변경하셔야 되구요.

2. StyleCatcher OFF -> 하단내용 참고

3. 변경후 CSS 파일을 수동으로 업로드하여 스타일시트를 적용해보세요.

(1) 저는 [StyleCatcher/stylecatcher.pl ] 를 Disabled 시켜놓구 FTP 로 수동 업데이트하고 있습니다. 무버블타입 4.0 설치시 자동으로 설치되는 StyleCatcher 플러그인을 사용하면 , 자동으로 설정변경이 용이하지만 수작업한 코딩내용이 리빌드할때마다 자동으로 업데이트되기때문에, 오히려 더 번거롭습니다. (물론 저의 경우입니다 :)

Systemoverview -> Preferences -> Plugins -> StyleCatcher/stylecatcher.pl [Disabled]변경입니다.

(2) 무버블타입(movabletype) 의 페이지는 총 3개의 CSS 로 구성됩니다.

[styles.CSS ] / screen.CSS / base_theme.CSS 이 세가지인데요.

styles.css 가 최후에 열리는 스타일시트로 screen.css 와 base_theme.css 두개의 스타일 시트의 값을 읽어드립니다.

screen.css 는 폰트, 색상 등 표면적인 내용.

base_theme.css 는 기본 골격, 사이즈등의 내용이 주를 이룹니다.

하지만 둘다 세세한 내용에서는 위에 언급한 내용 이상으로 거미줄처럼 얽혀있기 때문에 내용을 잘 파악하셔야 할것 같습니다.

스타일 시트를 수정하다보면, 알파, 베타, 감마값(α, β, γ)으로 각자의 영역을 정의해놓았는데요. 일반적으로 당연히 순차적일 것이라고 생각지만 그 순서가 달라 많이 헷갈려하는 부분일 것 같습니다. 상당의 이미지를 참고하십시오.

<Thin> <Wide> <Thin> : β α γ

<Wide> <Thin> <Thin> : α γ β

가장 일반적인 구성이 thin wide thin 이고 Langolier compnay 의 경우 wide thin thin 구성입니다. γ β / 감마, 베타값이 바뀌어있어서 저도 작업하면서 자주 헷갈립니다. 저도 내용을 체계적으로 이해하지 못하고 있어서, 보내드리는 스타일시트와 설명이 엉망입니다. 이해해주세요. : )

* base_theme.css 와 style.css 가 리빌드(rebuild)시 자동생성되지 않도록 비활성화 시켜놓은 참고이미지입니다.

design > templete

Movable Type Documentation > Designer's Guide

Designer's Guide to Movable Type

Like any basic content management system, templates control the content presentation layer for all pages published by Movable Type. The templates provide a generic framework of content which is consistent between all pages published with the template in addition to placeholders for variable content such as user, entry and blog information.

About Movable Type's Templating Language

Presentation is as important as content, so Movable Type's template system allows you to produce pages that showcase your content exactly as you wish. Templates describe where you want to put your content and what that content should look like, using special markers (tags) that are typically mixed with another markup language such as HTML or XML. When you perform a site rebuild, templates are merged with content to create a page that visitors can view in their web browsers. The template engine is crucial to automating this process.

When a new blog is created, it is supplied with its own distinct set of default templates that produce the files listed in the previous section. Weblog Administrators or any user with template management privileges can view and edit these templates.

Most of the non-variable content in the templates is comprised of basic HTML tags (or XML for feeds) and surrounding text. The areas for insertion of variable content are marked by Movable Type template tags. These tags are very similar in their appearance and function to HTML tags, giving template designers a familiar set of tools to work with and eliminating the need to learn an additional programming language just to change the display of the entries on a blog.

The familiarity of the template tags combined with a model of separation of content and presentation allows for both the push-button publishing ease-of-use and ultimate control over the final published product for which Movable Type has always been known.