Anda bisa membuat template/tema sendiri, caranya sebagai berikut:
Dari menu pengaturan > tema > edit tema > tandai opsi kustom tema
Kami menggunakan django templates, untuk selengkapnya bisa anda lihat di tautan _berikut . Django template sebenarnya hanya berkas html yang di dalamnya terdapat tags {% %} dan variabel {{ }}. Tags dan variabel berguna untuk menampilkan data anda. Contoh:
<html>
<head>
<title> {{ user.username }}</title>
</head>
<body>
<h1>{{ user.username }}</h1>
{% for chat in chat_list %}
<div class="chathare">{{ chat.html|safe }}</div>
{% endfor %}
<body>
<html>
Template yang anda buat untuk menampilakan halaman profil (/alikusnadi/) anda dan halaman konten detail (/alikusnadi/2012-01-20-20-30-00-514983/), untuk membedakannya anda bisa menggunakan path. Contoh:
{% if path == 'halaman_user' %}
<title>Ali Kusnadi</title>
{% else %}
<title>{{ chat_list.0|safe|truncatewords_html:3 }} </title>
{% endif %}
Berikut data yang tersedia.
tipe (String, 'pesan', 'join', 'leave')
url (String)
html (String)
pub_date (DateTime)
group.nama (String)
respon_to (String)
user(User)
privat (Boolean)
timeline (Boolean)
repost (DictField)
get_absolute_url (String)
username (String)
kota_asal (String)
about (String)
get_profile_url (String)
get_avatar (String)
get_avatar_48 (String)
get_avatar_22 (String)
get_avatar_32 (String)
is_anonymous (Boolean)
is_authenticated(Boolean)
path (String, 'halaman_user')
user (User)
request.user (User)
chat_list (List/Array dari chat)
next (String)
path (String, 'konten_detail')
chat_list (List/Array dari chat)
jam (String)
request.user (User)
String
{{ jam }} - {{ next }} - {{ chat_list.0.html }}
List
{% for data in data %}
{{ data.<properti> }}
{% endfor %}
contoh lainnya
{% for chat in chat_list %}
{{ chat.title }} - {{ chat.html }}
{% endfor %}
Dict
{% for user, jam in chat.repost.iteritems %}
<a href="{% url user_detail user %}"><img src="{% get_avatar_22 user %}" /></a>
{% endfor %}
Boolean
{% if user.is_authenticated %}
-- data --
{% endif %}
Selain filter bawaan django templates, anda juga bisa menggunakan filter tambahan sebagai berikut
**bukan_none**
Untuk memeriksa data None
{% if data|bukan_none %}
{{ data }}
{% endif %}
**cek_nilai**
Untuk memeriksa nilai data lebih besar dari nol
data = []
{% if data|length|cek_nilai %}
-- False --
{% endif %}
**sejak**
filter untuk Datatime
{{ chat.pub_date|sejak }}
Selain tags bawaan django templates, anda juga bisa menggunakan tags tambahan sebagai berikut:
get_username
{% for user, jam in chat.repost.iteritems %}
<a href="{% get_username user %}"
title="dibagikan ulang oleh {{ user }} - {{ jam|sejak }}">
</a>
{% endfor %}
get_avatar_48
{% for user, jam in chat.repost.iteritems %}
<img src="{% get_avatar_48 user %}"/>
{% endfor %}
get_avatar_22
{% for user, jam in chat.repost.iteritems %}
<img src="{% get_avatar_22 user %}"/>
{% endfor %}
get_avatar_32
{% for user, jam in chat.repost.iteritems %}
<img src="{% get_avatar_32 user %}"/>
{% endfor %}
get_avatar
{% for user, jam in chat.repost.iteritems %}
<img src="{% get_avatar user %}"/>
{% endfor %}
Beberapa tags bawaan django yang tidak bisa digunakan
include
date
ssi
debug
extends
Untuk membuat tema anda, anda bisa membaginya kedalam blok” seperti dibawah ini:
{% block title %} {% endblock %}
{% block konten %}
{% block ajax %} {% endblock %}
{% endblock %}
{% block footer %} {% endblock %}
Perubahan tema hanya bisa dilihat pada halaman konten detail dan halaman profile anda. Untuk halaman profile perubahan hanya ditampilkan jika yang melihat halaman bukanlah pemilik halaman tersebut.
block title
Title / judul halaman anda, anda bisa meenyesuaikan title antara halaman profil anda dengan halaman konten detail, contoh:
{% block title %}
{% if path == "halaman_user" %}
{{ user.username|capfirst }}
{% else %}
{{ chat_list.0.url }}
{% endif %}
{% endblock %}
{% spaceless %}
{% block title %}
{% if path == 'halaman_user' %}
{{ user.username|capfirst }}
{% else %}
{{ chat_list.0.url }}
{% endif %}
{% endblock %}
{% endspaceless %}
{% block konten %}
<div class="container_16">
<div class="konten">
<div class="grid_12">
<div class="prefix_2">
{% if path == 'konten_detail' %}
<div class="grid_8">
<h2><a href="{{ user.get_absolute_url }}">{{ chat_list.0.user.display_name|upper }}</a></h2>
{{ jam }} {% if chat_list.0.timeline %}@<a href="{{ chat_list.0.user.username }}">TIMELINE</a> {% else %}@<a href="{{ chat.group.get_absolute_url }}">{{ chat_list.0.kota|upper }}</a>{% endif %}
</div>
<div class="grid_2">
<div class="menuopsi">
{% if chat_list.0.user.username == request.user.username %} <a href="#" id="hapuschat">HAPUS </a>{% else %} <a href="#" id="repostchat" class="on">BAGIKAN ULANG</a>{% endif %}
</div>
</div>
<div class="clear"> </div>
{% else %}
<div class="clear"> </div>
<h2><a href="{{ user.get_absolute_url }}">{{ user.username|upper }} </a></h2>
{% if user.kota_asal|bukan_none %}{{ user.kota_asal|capfirst }}, Indonesia <br/>{% endif %}
{% if user.about|bukan_none %}{{ user.about|safe }}{% endif %}
{% endif %}
{% if path != 'konten_detail' %}
<div class="menuopsi">
<a id="flo" href="#" class="all" rel="/{{user.username }}/all/" title="lihat Semua">SEMUA</a>
<a id="flo" href="#" class="chat" rel="/{{user.username }}/chat/" title="lihat chat">KONTEN</a>
<a id="flo" href="#" class="aktifitas" rel="/{{user.username }}/aktifitas/" title="lihat aktifitas teman">AKTIFITAS</a>
<a id="flo" href="#" class="video" rel="/{{user.username }}/video/" title="lihat chat">VIDEO</a>
<a id="flo" href="#" class="images" rel="/{{user.username }}/images/" title="lihat gambar">GAMBAR</a>
<a id="flo" href="#" class="blogs" rel="/{{user.username }}/blog/" title="lihat posting panjang">BLOG</a>
<a id="flo" href="#" class="link" rel="/{{user.username }}/link/" title="lihat tautan">TAUTAN</a>
</div>
{% endif %}
<div class="streamhare">
<div class="contenthare">
<div id="chat"><div class="chat-frame"/></div><div class="clear"> </div><div class="batas"/>
{% block ajax %}
{% for chat in chat_list %}
<div class="chathare">
<div class="grid_3">
<i><abbr class="timeago" title="{{ chat.pub_date|sejak }}">{{ chat.pub_date|sejak }} </abbr> </i><br />{% if chat.timeline %}{% else %}@<a href="{{ chat.group.get_absolute_url }}">{{ chat.group.nama }}</a> - {% endif %} {% if request.user.username not in chat.repost.keys %} <a href="#" id="repostchat">repost</a>{% endif %} - <a href="{{ chat.get_absolute_url }}">#</a>
</div>
<div class="grid_6">
{% if path == 'konten_detail' %}
{{ chat.html|safe }}
{% else %}
{% if chat.tipe == 'pesan' %}
{{ chat.html|safe|truncatewords_html:70 }}
{% endif %}
{% if chat.tipe == 'join' %}
<p>Baru sajah berada di grup </p>
{% endif %}
{% if chat.tipe == 'leave' %}
<p>Baru sajah meninggalkan grup </p>
{% endif %}
{% endif %}
</div>
</div>
{% if path != 'konten_detail' %}
{% if chat.repost %}
<div class="clear"> </div>
<div class="repost">
{% for user, jam in chat.repost.iteritems %}
<a href="{% url user_detail user %}" title="dibagikan ulang oleh {{ user }} - {{ jam|sejak }}">
<img src="{% get_avatar_22 user %}"/>
</a>
{% endfor %}
</div>
{% endif %}
{% endif %}
<div class="clear"> </div>
{% empty %}
<br/> <br/> MOHON MAAF, DATA BELUM ADA
{% endfor %}
{{ next }}
{% if path == 'konten_detail' %}
<div class="chat-detail-hare"/>
{% if chat_list.0.repost %}
<div class="clear"> </div>
<div class="repost-posting">
<h4>DIPOSTING ULANG OLEH:</h4>
{% for nama, jam in chat_list.0.repost.iteritems %}
<div class="repostdisini">
<div class="imagerepost">
<img src="{% get_avatar_22 user %}"/>
</div>
<div class="grid_7">
<a href="{% url user_detail nama %}">{{ nama }}</a> - <abbr class="timeago" title="{{ jam|sejak }}">{{ jam|sejak }} </abbr>
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% endif %}
{% endblock %}
</div>
</div>
{% if path == 'konten_detail' %}
<div class="grid_8">
{{ form }}
</div>
<br/><br/>
{% endif %}
</div>
</div>
<div class="clear"> </div>
<div class="sidebar">
<div class="container_16">
<div class="grid_4">
<div class="sid-user-detail">
<img src="{{ user.get_avatar}}"/>
</div>
</div>
<div class="grid_3">
<div class="sid-teman">
<h3>TEMAN</h3>
{{ daftar_teman }}
<div class="clear"> </div>
{{ opsi_pertemanan }}
</div>
<div class="sid-teman">
<h3>PENGIKUT</h3>
{{ daftar_pengikut }}
<div class="clear"> </div>
{{ opsi_pengikut }}
</div>
</div>
<div class="grid_3">
<div class="sid-group">
<h3>{{ user.username|upper }} GRUP</h3>
{% for group in grup_terkait %}
<div class="list-group"><div class="count">{{ group.online_count }}</div> <a href="{{ group.get_absolute_url }}" title="{{ group.online_count }} Pengguna Sedang Online">{{ group.nama|capfirst }}</a>
</div>
{% endfor %}
</div>
</div>
{% if path == 'halaman_user' %}
<div class="grid_3">
<div class="sid-trending">
<h3>TOPIK TERHANGAT</h3>
{{ topik_terhangat }}
</div>
</div>
{% endif %}
{% if user.username == request.user.username %}
<div class="grid_3">
<div class="sid-users">
<h3>TEMAN ONLINE</h3>
{% for nama in teman_online %}
<div class="user-{{ nama }}">
<div class="grid_1">
<a href="{% url user_detail nama %}"><img src="{% get_avatar_32 nama %}"/></a>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
<div class="clear"> </div>
</div>
</div>
<div class="clear"> </div>
{% endblock %}
{% block footer %}
TEMA RETROIKA
{% endblock %}
Berikut struktur tema anda di bawah ini, untuk css, anda bisa menggunakan opsi kustom css.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %} - brungut.com</title>
<link href="http://media.brungut.com/grid.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" type="image/jpg" href="http://media.brungut.com/images/ico.jpg"/>
<script src="http://media.brungut.com/js/jquery-1.7.1.min.js"></script>
</head>
<body>
<div id="menu-wrapper">
<div class="container_16">
<div id="usernavigation">
<div class="grid_14">
{% if request.user.is_authenticated %}
<ul id="pgmenu">
<li><a id="nav_home" href="/" class="on">BRUNGUT</a> </li>
<li class="frames-user">
<a href="/{{ request.user.username }}" class="timeline-notif">{{ request.user.username|upper }} {% if request.user.timeline_count > 0 %}<span id="timeline_count">{{ request.user.timeline_count }}</span>{% endif %}</a>
<ul id="user-menu">
<li><a href="/{{ request.user.username }}" title="{{ request.user.timeline_count }} pesan baru">TIMELINE {% if request.user.timeline_count > 0 %}<span id="timeline_count">{{ request.user.timeline_count }}</span>{% endif %}</a></li>
<li><a href="/{{ request.user.username }}/edit/">PENGATURAN</a></li>
<li><a href="/{{ request.user.username }}/teman/pending/">PERMINTAAN {% if request.user.request_count > 0 %}<span id="timeline_count">{{ request.user.request_count }}</span>{% endif %}</a></li>
<li><a href="/{{ request.user.username }}/avatar/">AVATAR</a></li>
<li><a href="/logout/">LOGOUT</a></li>
</ul>
</li>
<li>
<a href="#" class="kot">KOTA {% if request.user.respon_kota_count > 0 %}<span id="k_notip_count">{{ request.user.respon_kota_count }}</span>{% endif %}</a>
<ul id="kota-menu">
{% for nama in request.user.kota %}
<li id="{{ nama.nama }}"><a href="/kota/{{ nama.nama }}/" title="{{ nama.respon_count }} pesan baru">{{ nama.nama|upper }} {% if nama.respon_count > 0 %}<span id="k_notip_count">{{ nama.respon_count }}</span>{% endif %} </a></li>
{% endfor %}
{% if request.user.respon_kota_count > 0 %}
<li class="hapus-notif-k"><a href="#" id="hapusnotifkota">HAPUS NOTIFIKASI</a></li>
{% endif %}
</ul>
</li>
<li>
<a href="#" class="sub">GRUP {% if request.user.respon_count > 0 %}<span id="g_notip_count">{{ request.user.respon_count }}</span>{% endif %}</a>
<ul id="grup-menu">
{% for nama in request.user.groups %}
<li id="{{nama.nama}}"><a href="/grup/{{ nama.nama }}/" title="{{ nama.respon_count }} pesan baru">{{ nama.nama|upper }} {% if nama.respon_count > 0 %}<span id="g_notip_count">{{ nama.respon_count }}</span>{% endif %} </a></li>
{% endfor %}
{% if request.user.respon_count > 0 %}
<li class="hapus-notif-g"><a href="#" id="hapusnotifgrup">HAPUS NOTIFIKASI</a></li>
{% endif %}
</ul>
</li>
<li class="frames-notif">
<a href="#" class="notif">NOTIF {% if request.user.notif_count > 0 %}<span id="notip_count">{{ request.user.notif_count }}</span>{% endif %}</a>
<ul id="notif-menu">
{% for data in request.user.notification %}
{% if data.action == 'alert' %}
<li id="{{ data.id }}"><a href="#">{{ data.text|safe }} - {{ data.pub_date|date:"l j F H:i"}}</a></li>
{% else %}
<li id="{{ data.id }}"><a href="/grup/{{ data.url }}/">{{ data.text|safe }} <i>@{{data.url}}</i> - {{ data.pub_date|date:"l j F H:i"}}</a></li>
{% endif %}
{% endfor %}
{% if request.user.notif_count > 0 %}
<li class="hapus-notif"><a href="#" id="hapusnotif">HAPUS NOTIFIKASI</a></li>
{% endif %}
</ul>
</li>
</ul>
{% else %}
<ul id="pgmenu">
<li><a id="nav_home" href="/" class="on">BRUNGUT</a> </li>
<li><a href="/login/facebook/" title="login dengan akun facebook anda" target="_blank">FACEBOOK</a></li>
<li><a href="/login/twitter/" title="login dengan akun twitter anda" target="_blank">TWITTER</a></li>
<li><a href="/login/plurk/" title="login dengan akun plurk anda" target="_blank">PLURK</a></li>
<li><a href="/login/" title="login dengan akun brungut anda" target="_blank">LOGIN</a></li>
<li><a href="/register/" title="register">REGISTER</a></li>
</ul>
{% endif %}
</div>
</div>
</div>
</div>
<div class="clear"></div>
{% block konten %}
{% block ajax %}
{% endblock %}
{% endblock %}
<div class="clear"></div>
<div id="footer_wrepper">
<div class="container_16">
<div class="grid_10">
{% block footer %}{% endblock %}
</div>
<div class="grid_6">
<div class="rights">
VERSI 0.3.1 - © 2012 <a href="http://byur.in">BRUNGUT.COM</a> HOSTING AT <a href="http://byur.in">BYUR</a>
</div>
</div>
</div>
</div>
</body>
</html>