 |
 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Creating a custom HTML theme |
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
2Blog lets you fully customize the appearance of your 2Blog by editing your theme's HTML code. This is only recommended for users comfortable hand-coding HTML. To start, click the "Customize" button on your Dashboard. Click the "Theme" tab, and click "Use custom HTML". This will bring up a text box with your current theme's HTML code. 2Blog has two types of special operators used to render content in your HTML. Variables are used to insert dynamic data like your 2Blog's title or description: <html>
<head>
<title>{Title}</title>
</head>
<body>
...
</body>
</html>
Blocks are either used to render a block of HTML for a set of data (like your posts), or to conditionally render a block of HTML (like a "Previous Page" link): <html>
<body>
<ol id="posts">
{block:Posts}
<li> ... </li>
{/block:Posts}
</ol>
</body>
</html>
Here's an example of the complete markup for a theme: <html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
</head>
<body>
<h1>{Title}</h1>
{block:Description}
<p id="description">{Description}</p>
{/block:Description}
<ol id="posts">
{block:Posts}
{block:Text}
<li class="post text">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
{Body}
</li>
{/block:Text}
{block:Photo}
<li class="post photo">
<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Photo}
{block:Quote}
<li class="post quote">
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</li>
{/block:Quote}
{block:Link}
<li class="post link">
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
</li>
{/block:Link}
{block:Chat}
<li class="post chat">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</li>
{/block:Chat}
{block:Video}
<li class="post video">
{Video-400}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Video}
{/block:Posts}
</ol>
<p id="footer">
{block:PreviousPage}
<a href="{PreviousPage}">« Previous</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}">Next »</a>
{/block:NextPage}
<a href="/archive">Archive</a>
</p>
</body>
</html>
Theme Variables
Navigation
Permalink Navigation
Posts
ReBlogs
Group Posts
Group Members
Text Posts
Photo Posts
Quote Posts
Link Posts
Chat Posts
Audio Posts
Video Posts
Dates
Tags
Tags Example<html>
<body>
{block:Posts}
<div class="post">
{block:Text}...{/block:Text}
{block:Photo}...{/block:Photo}
...
{block:HasTags}
<ul class="tags">
{block:Tags}
<li>
<a href="{TagURL}">{Tag}</a>
</li>
{/block:Tags}
</ul>
{/block:HasTags}
</div>
{/block:Posts}
</body>
</html>
Tag Pages
Tag Page Example<html>
<body>
{block:TagPage}
<h2>Posts tagged "{Tag}"</h2>
{/block:TagPage}
{block:Posts}
...
{/block:Posts}
</body>
</html>
Search
Search Form Example<form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}"/>
<input type="submit" value="Search"/>
</form>Following
Example Following Markup{block:Following}
2Blogs I follow:
<ul>
{block:Followed}
<li>
<img src="{FollowedPortraitURL-48}"/>
<a href="{FollowedURL}">{FollowedName}</a>
</li>
{/block:Followed}
</ul>
{/block:Following}
Enabling Custom ColorsBy including the special meta-color tags in your theme, users you share your theme with will be able to easily tweak those colors using their "Customize Theme" screen. 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 CSSBy including the {CustomCSS} tag at the bottom of your theme's CSS style block, users you share your theme with will be able to tweak the appearance of your theme without editing its markup. Custom CSS Example<html>
<head>
<style type="text/css">
#content {
background-color: #fff;
color: #000;
}
{CustomCSS}
</style>
</head>
<body>
<div id="content">
...
</div>
</body>
</html>
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 |
 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
URL
for the high-res photo of this post.