Themes and fieldsets

[Anthony]

Hi
  Apologies as this is probably somewhere in the documentation, but...

I want to use theming on a fieldset, I'm not sure what classes to use for the fieldset and the legend to get the kendo look and feel?

Just to complicate things slightly I'm using a bootstrap 'well' class to get the bootstrap styling for the fieldset.

I don't know if these can be integrated in some way, I don't know if you can only use bootstrap elements if you're using the bootstrap theme?

If not is there a 'pretty' kendo fieldset? The bootstrap one looks much nice than the html default

thanks

[Iliana Dyankova]

Hi Anthony,

Kendo UI does not contain specific styling for fieldset elements, however you can customize the appearance using custom CSS rules. For your convenience here is a basic example - you can modify the rules as per your requirements. 

Regards,
Iliana Nikolova
Telerik

 

 

[Anthony]

Thanks, but what I was after was an approach that would work with kendo theming. So for example, I see you set the fieldset to b-block but what about the legend? It looks ok in "BlueOpal" but rubbish in "Black" as the font is the wrong colour

- Do you literally have to make a custom style for each theme or are there theme classes you can apply to the legend?

[Anthony]

I don't think my last answer was too clear

I wanted to know are there any Kendo classes you can apply that only affect colours, not borders or anything else. e.g. If I like and want to use the bootstrap styling but override the colours as per the Kendo themes

I suspect the answer is no and I'll need to specify the colours myself per theme

On a side note, I'm not presently using less with Kendo, I don't know if it now works with the dotless processor or if you still need the Kendo 'less' variant?

[Iliana Dyankova]

Hi Anthony,

Actually there are some CSS classes defined in kendo.common.min.css which set only color / background (k-success-colored, k-info-colored, .k-error-colored) - they are demonstrated in this online demo.

Regards,
Iliana Nikolova
Telerik

 

 

[Anthony]

A long time later I'm back to this.

I need to create elements on the page which are consistent with the Kendo UI theming, everything from 
http://demos.telerik.com/kendo-ui/themebuilder/

Ultimately I need to do something like this

<div class="MyClass Kendo_BlackTheme_PanelBarTopItem">
  <div class="The gray colour from tabstrip"></div>
</div>

but -without- any of the other styles attached, just the color/background. Just the notification colors isn't enough

Is this something that could be accomplished with less? I know Kendo uses it's own less processor so I'd prefer to use raw classes but would consider it if possible.

This is something that is probably very easy to do for Telerik, you already have the colours  specified at the top of the css file, they just need another classname adding in, e.g.

.k-textbox,
.k-autocomplete.k-header,
.k-dropdown-wrap.k-state-active,
.k-picker-wrap.k-state-active,
.k-numeric-wrap.k-state-active ,

.k-kendo-colors-textboxColors (with a better name)
{
  border-color: #2b2b2b;
  background-color: #272727;
}

I could do it but then of course I'd lose it with every new release of Kendo UI

Is this possible?

thanks

[Iliana Dyankova]

Hi Anthony,

In order to achieve the expected result I would suggest to define custom classes and use the less variables from the Kendo UI Themes. For your convenience I prepared a basic example - please check it and let me know if this fits the current requirements or I can assist you further. 

Regards,
Iliana Nikolova
Telerik

 

 

[Anthony]

Hi
  I could just do with an answer to that last question, does the Kendo less implementation still use the non standard less processor?
I will be using both mobile and desktop.

"Kendo UI Mobile needs our linear-gradient() LESS extensions and can't be compiled with upstream LESS"

was the last comment from 2 years ago I can find, nothing about it in the standard documention 

http://docs.telerik.com/kendo-ui/themebuilder

(again, that I can find)

thanks

[Iliana Dyankova]

Hi Anthony,

The comments which you have found in this forum thread are still valid - for Kendo UI Web you can use the official LESS parser, however for Kendo UI Mobile you have to use our linear-gradient() LESS extensions.

Regards,
Iliana Nikolova
Telerik