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>
