Costumize TypoXP Sidebar Title Icons  

TypoXP Blogger (default) has 14 sidebar title icons below.


TypoXP Calendar Icon Calendar Icon
TypoXP Comment Icon Comment Icon
TypoXP Email Icon Email Icon
TypoXP Feed Icon Feed Icon
TypoXP File Icon File Icon
TypoXP Folder Icon Folder Icon
TypoXP Meta Icon Meta Icon

TypoXP New Icon New Icon
TypoXP OK Icon OK Icon
TypoXP Pictures Icon Pictures Icon
TypoXP Search Icon Search Icon
TypoXP Tags Icon Tags Icon
TypoXP Users Icon Users Icon
TypoXP Web Icon Web Icon

Default icon for TypoXP Blogger sidebar title is TypoXP New Icon. If you need to change this icon, read this instruction!

For example, you want to change icon for your HTML/JavaScript page element (widget) which has "Search" title with TypoXP Search Icon Search Icon.

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,

TypoXP Calendar Icon Calendar Icon
<div id='icon-cal'><h2><data:title/></h2></div>

TypoXP Comment Icon Comment Icon
<div id='icon-comment'><h2><data:title/></h2></div>

TypoXP Email Icon Email Icon
<div id='icon-email'><h2><data:title/></h2></div>

TypoXP Feed Icon Feed Icon
<div id='icon-feed'><h2><data:title/></h2></div>

TypoXP File Icon File Icon
<div id='icon-file'><h2><data:title/></h2></div>

TypoXP Folder Icon Folder Icon
<div id='icon-folder'><h2><data:title/></h2></div>

TypoXP Meta Icon Meta Icon
<div id='icon-meta'><h2><data:title/></h2></div>

TypoXP New Icon New Icon
<div id='icon-new'><h2><data:title/></h2></div>

TypoXP OK Icon OK Icon
<div id='icon-ok'><h2><data:title/></h2></div>

TypoXP Pictures Icon Pictures Icon
<div id='icon-pictures'><h2><data:title/></h2></div>

TypoXP Search Icon Search Icon
<div id='icon-search'><h2><data:title/></h2></div>

TypoXP Tags Icon Tags Icon
<div id='icon-tags'><h2><data:title/></h2></div>

TypoXP Users Icon Users Icon
<div id='icon-users'><h2><data:title/></h2></div>

TypoXP Web Icon Web Icon
<div id='icon-web'><h2><data:title/></h2></div>

2 comments: to “ Costumize TypoXP Sidebar Title Icons

  • Elvin
    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?

  • Deckard
    November 6, 2007 at 6:30 AM  

    Great template. Is it possible to change the icon graphics ... replace it with custom ones?