Costumize TypoXP Sidebar Title Icons
Tuesday, May 29, 2007
TypoXP Blogger (default) has 14 sidebar title icons below.
Default icon for TypoXP Blogger sidebar title is
For example, you want to change icon for your HTML/JavaScript page element (widget) which has "Search" title with
Step #1
Go to Template>Edit HTML. Note that Expand Widget Templates box CHECKED.
Step #2
Scroll down and find yours in your template. Will look something like this.
<b:widget id='HTML1' locked='false' title='Search' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Step #3
Replace red code above with this code,
<div id='icon-search'><h2><data:title/></h2></div>
For others icons, you can use these code,
<div id='icon-cal'><h2><data:title/></h2></div>
<div id='icon-comment'><h2><data:title/></h2></div>
<div id='icon-email'><h2><data:title/></h2></div>
<div id='icon-feed'><h2><data:title/></h2></div>
<div id='icon-file'><h2><data:title/></h2></div>
<div id='icon-folder'><h2><data:title/></h2></div>
<div id='icon-meta'><h2><data:title/></h2></div>
<div id='icon-new'><h2><data:title/></h2></div>
<div id='icon-ok'><h2><data:title/></h2></div>
<div id='icon-pictures'><h2><data:title/></h2></div>
<div id='icon-search'><h2><data:title/></h2></div>
<div id='icon-tags'><h2><data:title/></h2></div>
<div id='icon-users'><h2><data:title/></h2></div>
<div id='icon-web'><h2><data:title/></h2></div>
August 24, 2007 at 10:00 PM
thanks ya mas.....
templatenya bagus banget.
udah saya pasang di http://scentedsoycandle.blogspot.com.
bikin template lagi dong, yang lain
kalo mau belajar bikin template untuk new blogger, situsnya apa?
apa harus mahir XML dulu?
November 6, 2007 at 6:30 AM
Great template. Is it possible to change the icon graphics ... replace it with custom ones?