생활 웹디자인

코스 전체목록

닫기

Appearance Options

Enabling Custom Colors

테마 안에서 특별한 메타 컬러 태그를 포함함으로써 사용자들은 "커스터마이즈"화면에서 쉽게 컬러들을 조정 할 수 있습니다.

Example

<html>
    <head>
        <!-- DEFAULT COLORS -->
        <meta name="color:Background" content="#eee"/>
        <meta name="color:Content Background" content="#fff"/>
        <meta name="color:Text" content="#000"/>

        <style type="text/css">
            #content {
                background-color: {color:Content Background};
                color: {color:Text};
            }
        </style>
    </head>
    <body bgcolor="{color:Background}">
        <div id="content">
            ...
        </div>
    </body>
</html>

Enabling Custom Fonts

테마 안에서 특별한 메타 폰트 태그를 포함함으로써 사용자들은 "커스터마이즈"화면에서 쉽게 폰트를 조정 할 수 있습니다.

Example

<html>
    <head>
        <!-- DEFAULT FONTS -->
        <meta name="font:Title" content="Helvetica Neue"/>
        <meta name="font:Body" content="Arial, Helvetica, sans-serif"/>

        <style type="text/css">
            h1 {
                font: 30px {font:Title};
            }

            #content {
                font: 12px {font:Body};
            }
        </style>
    </head>
    ...
</html>

Enabling Booleans

테마 안에서 특별한 메타 if 태그를 포함함으로써 사용자들은 "커스터마이즈"화면에서 쉽게 당신이 지정한 옵션을 쉽게 껐다 켤 수 있습니다.  이것은 위젯이나 디자인 요소를 보였다 숨겼다 하는데 유용합니다.

Example

<html>
    <head>
        <!-- DEFAULTS -->
        <meta name="if:Show people I follow" content="1"/>
        <meta name="if:Reverse pagination" content="0"/>
    </head>
    <body>
        {block:IfNotReversePagination}
            <a href="...">Previous</a> <a href="...">Next</a>
        {/block:IfNotReversePagination}

        {block:IfReversePagination}
            <a href="...">Next</a> <a href="...">Previous</a>
        {/block:IfReversePagination}

        {block:IfShowPeopleIFollow}
            <div id="following">...</div>
        {/block:IfShowPeopleIFollow}
    </body>
</html>

Enabling drop-down lists

테마 안에서 특별한 메타 셀렉트 태그를 포함함으로써 사용자들은 "커스터마이즈"화면에서 쉽게 디자인 요소의 옵션을 변경할 수 있습니다.

Example

<html>
    <head>
        <!-- DEFAULTS -->
        <meta name="select:Layout" content="regular" title="Regular">
        <meta name="select:Layout" content="narrow" title="Narrow">
        <meta name="select:Layout" content="grid" title="Grid">
    </head>
    <body>
        <div class="content {select:Layout}">
            ...
        </div>
    </body>
</html>

Enabling Custom Text

테마 안에서 특별한 메타 텍스트 태그를 포함함으로써 사용자들이 "커스터마이즈"화면에서 당신이 정의한 텍스트 변수들을 쉽게 설정할 수 있습니다. 이것은 사용자 정보를 요구하는 위젯의 설정이나 텍스트를 지정하는데 유용합니다. 

Example

<html>
    <head>
        <!-- DEFAULT TEXT -->
        <meta name="text:Flickr Username" content=""/>
    </head>
    <body>
        {block:IfFlickrUsername}
            <div id="flickr_widget">
                <script type="text/javascript"
                src="http://flickr.com/widget?user={text:Flickr Username}">
                </script>
            </div>
        {/block:IfFlickrUsername}
    </body>
</html>

Enabling Custom Images

테마 안에서 특별한 메타 이미지 태그를 포함함으로써 사용자들이 "커스터마이즈"화면에서 편집없이 바로 사용자 이미지를 쉽게 사용할 수 있게 합니다. Image variables (e.g., {image:Logo} ) will return a 1-pixel transparent square if no image is set.

Example

<html>
    <head>
        <!-- DEFAULT IMAGE -->
        <meta name="image:Background" content="http://static.tumblr.com/..."/>
        <meta name="image:Header" content=""/>

        <style type="text/css">
            body {
                background: #2D567C url('{image:Background}');
            }
        </style>
    </head>
    <body>
        {block:IfHeaderImage}<img src="{image:Header}"/>{/block:IfHeaderImage}
        {block:IfNotHeaderImage}<h1>{Title}</h1>{/block:IfNotHeaderImage}
    </body>
</html>

Enabling Custom CSS

테마의 CSS style 영역 맨 아래 부분의 {CustomCSS} 태그를 포함함으로써 당신의 테마를 사용하는 사용자들은 마크업의 수정 없이 테마의 디자인을 쉽게 수정할 수 있습니다.

Example

<html>
    <head>
        <style type="text/css">
            #content {
                background-color: #fff;
                color: #000;
            }

            {CustomCSS}
        </style>
    </head>
    <body>
        <div id="content">
            ...
        </div>
    </body>
</html>

댓글

댓글 본문
버전 관리
리체
현재 버전
선택 버전
graphittie 자세히 보기