Badge style

[Voss]

Is it possible to style the badge?

Looking to make it larger and possibly move it down and in a bit.

thanks for any help.

v.

[Iliana Nikolova]

Hi Voss,

You can customize the appearance of the badge using custom CSS rules. As an example:

.km-ios .km-badge,
.km-ios7 .km-badge,
.km-blackberry .km-badge,
.km-android .km-badge,
.km-wp .km-badge,
.km-flat .km-badge{
    min-width: 2.2em;
    height: 2.2em;
    line-height: 2.2em;
    top: 0;
}

 
Regards,
Iliana Nikolova
Telerik

 

 

[Voss]

Iliana,
I copied that into my site.css, but do not see any difference in my badges.

Can you supply a small example?

thanks.

[Iliana Nikolova]

Hi Voss,

Here is a simple example which demonstrates the suggested solution is action. If you still experience any issues please modify the example and demonstrate your current implementation - this way I would be able to check what exactly is going wrong and provide concrete recommendations.

Regards,
Iliana Nikolova
Telerik

 

 

[Voss]

Can you provide an example without the       var app = new kendo.mobile.Application(document.body);?

I cannot get the demo work without the mobile app part.

thanks.

[Voss]

If I remove this  var app = new kendo.mobile.Application(document.body); it does not work.

[Iliana Nikolova]

Hello Voss,

In this case you can use the following CSS rule: 

.km-badge{
   min-width: 2.2em;
   height: 2.2em;
   line-height: 2.2em;
   top: 0;
}

Here is the updated example.

Regards,
Iliana Nikolova
Telerik