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?