Themes and fieldsets

10 posts, 0 answers
  1. Anthony
    Anthony avatar
    126 posts
    Member since:
    Jun 2013

    Posted 13 Aug 2014 Link to this post

    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

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 14 Aug 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Anthony
    Anthony avatar
    126 posts
    Member since:
    Jun 2013

    Posted 14 Aug 2014 in reply to Iliana Nikolova Link to this post

    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?

  4. Anthony
    Anthony avatar
    126 posts
    Member since:
    Jun 2013

    Posted 14 Aug 2014 in reply to Anthony Link to this post

    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?
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 15 Aug 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Anthony
    Anthony avatar
    126 posts
    Member since:
    Jun 2013

    Posted 08 Oct 2014 Link to this post

    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



  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 10 Oct 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Anthony
    Anthony avatar
    126 posts
    Member since:
    Jun 2013

    Posted 10 Oct 2014 in reply to Iliana Nikolova Link to this post

    Thanks, that seems ideal

    I presently use dotless in visual studio, but not for Kendo. I'll look at moving from the css to using less files after the release.

    One thing that has put me off is the comments in the forum post below, I use kendo mobile and would prefer not to use a non standard dotless processor. It's been 2 years but I assume I would still need to use it to get this working?

    http://www.telerik.com/forums/using-less-with-dotless

    thanks
  9. Anthony
    Anthony avatar
    126 posts
    Member since:
    Jun 2013

    Posted 15 Oct 2014 in reply to Anthony Link to this post

    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
  10. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 17 Oct 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top