K2BModern Theme

Introduction

K2BModern themes were introduced in K2BTools 7.1. 

This theme has four variations: K2BModern (green), K2BModernBlue, K2BModernBordeaux K2BModernGrey. The difference between these versions is the key color used.

K2BModernVersions
K2B Modern Versions

This page contains the history of these themes so that a manual update can be made when upgrading a KB from one version of K2BTools to a newer one.

When using the stock theme provided by K2BTools with no modifications, the download links corresponding to the version can be used to upgrade automatically. In this case, please import the XML file using the "Theme Import Behavior" set to "Overwrite".

K2BFlatImport
K2B Flat Import

 

 

 

K2BTools 10.3.0

K2BModern 10.2.0

K2BModern_10.3.0GX15

New Classes(GX15 only)

Type Name Changes
GridColumn

Column_BlueWithBackground

  1. background-color:#E3F2FD
GridColumn Column_GreenWithBackground
  1. background-color:#E0F2F1
GridColumn Column_RedWithBackground
  1. background-color: #FFEBEE
GridColumn Column_YellowWithBackground
  1. background-color: #FFFDE7
Custom Class Column_BlueWithBackground > p > span, .Column_Blue > p > span
  1. forecolor: #2196F3
Custom Class Column_GreenWithBackground > p > span, .Column_Green > p > span
  1. forecolor:#009688
Custom Class Column_RedWithBackground > p > span, .Column_Red > p > span
  1. forecolor:#F44336
Custom Class Column_YellowWithBackground > p > span, .Column_Yellow > p > span
  1. forecolor:#F9A825
TextBlock_LineSeparatorClose > a, .TextBlock_LineSeparatorOpen > a
  1. padding-left:28px
  2. font-size:18px
  3. text-decoration:none
  4. font-family:SourceSansPro-Bold
  5. forecolor:#666

K2BTools 10.2.0

Download

 

K2BModern 10.2.0

 Change Log

Type Name Changes
Table Table_ConditionalConfirm
  1. z-index:500

New Classes

Type Name

Properties

Attribute K2BTools_CheckAllGrid
  1. left:6px
  2. position:absolute
  3. top:9px
  4. border-style:none
Table K2BToolsTable_GridContainer
  1. Position:relative
  2. Width:100%
Custom Class GridColumnAscending >*::after"
  1. Custom Properties:
    1. "content:"   ▲""
Cusom Class GridColumnDescending >*::after
  1. Custom Properties
    1. "content:"   ▼""
Custom Class K2BToolsTable_GridContainer > tbody > tr > td:first-child
  1. Width:0px
  2. VerticalAlign:top
  3. Custom-Properties
    1. "padding:0px !important;"
Custom Class TH.ColumnSortable:hover
  1. Custom-Properties:
    1. cursor: pointer; opacity:0.8;
Custom Class TH.K2BToolsSortableColumn:hover
  1. Custom-Properties:
    1. cursor:pointer, opacity:0.8;

 

K2BTools 10.0.0

Download

 

 

K2BModern 10.0.0

 Change Log

Changelog

 

Type Name Changes
Attribute

ReadonlyK2BTools_SearchResultImage

  1. width:100%
Custom Class PopUpContent
  1. background-color:#EFEFEF"
  2. radius: 3px
  3. padding: leave empty
    1. Custom Properties="padding: 40px 10px 15px 10px !important;border: 1px solid #ccc;box-shadow: 4px 3px 3px rgba(51,51,51,.3);
Custom Class PopUpHeader
  1. margin:""
  2. FontFamily:arial, sans-serif
  3. Custom Properties="width:100% !important; top:0px !important; left:0px !important;height: 40px !important;"
Custom Class PopUpTitle
  1. margin-top:30px
  2. margin-left:10px
  3. fore-color:#28808F"
Custom Class PopUpHeaderButton
  1. background-image:K2BActionTagRemove
  2. margin-right:35px

New Classes

Type Name

Properties

Attribute AttributeInMultipleCombo_Filter
  1. border-style:none
  2. border-width:0px
Attribute K2BToolsAttribute_BorderlessFilter
  1. margin:0px
  2. padding:0px
  3. border-style:none
  4. border-width:0px
Attribute K2BToolsAttribute_Invisible
  1. display:none;
Attribute K2BToolsAttribute_TagDescription
  1. padding-right:10px
  2. border-style:none
  3. border-width:0px
Image K2BToolsTwoPane_Action
  1. background-color:transparent
  2. custom-properties: "background:transparent; border: 0px none;"
Image K2BToolsTagAction_Remove
  1. width:17px
Section K2BToolsSection_TwoPaneContainer
  1. radius: 6px
  2. margin:10px
  3. min-height:120px
  4. custom-properties: "border: 1px solid #d7d7d7;"
Section K2BToolsTable_MultipleComboContainer
  1. border-color:#666
  2. border-style:solid
  3. border-width:1px
  4. radious:5px
Section K2BToolsMultipleFilterListContainer
  1. margin-left:-3px
  2. position:absolute
  3. background-color:#fff
  4. border-color: #666
  5. border-style:solid
  6. border-width:1px
  7. text-aling:right
  8. Custom Properties: "border: 1px solid #666 !important;box-shadow: 4px 3px 3px rgba(51,51,51,.3);"
Table K2BToolsTable_FieldBorder
  1. padding-top:0px
  2. padding-right:0px
  3. padding-bottom:0px
  4. padding-left:2px
  5. border-color: #666
  6. border-style:solid
  7. border-width:1px
  8. radius: 5px
Table K2BtoolsTable_FieldBorderFocus
  1. padding-top:0px
  2. padding-right:0px
  3. padding-bottom:0px
  4. padding-left;2px
  5. border-color:#666
  6. border-style:solid
  7. border-widht:1px
  8. radius:5px
Table

K2BToolsTable_FilterTag

  1. margin-bottom:2px
  2. padding-top:0px
  3. padding-right:10px
  4. padding-bottom:0px
  5. padding-left:0px
  6. background-color: #EEE
  7. radius:3px
Table K2BToolsTable_TwoPaneActionsContainer
  1. float:right;
Table K2BToolsTable_TwoPaneContainer
  1. width:100%
  2. custom-properties="align-items: center;
Table TwoPaneNoItemSelectedContainer
  1. width:100%
  2. text-aling:center
TextBlock K2BTools_MoreInformationText
  • float:right
  • margin-right:10px
TextBlock K2BToolsTwoPaneNoItemSelectedText
  • position:relative
  • top:20px
  • font-size: 16pt
  • font-family:arial
  • fore-color:#575757
TextBlock TextBlock_Subtitle
  • padding-right:5px
  • padding-left:5px
  • background-color:#2B3A42
  • font-weight:bold
  • font-size:8pt
  • forecolor:white
Custom IMG.ReadonlyAttribute_Trn
  • max-height:60px
Custom K2BToolsMultipleFilterListContainer label
  1. border-style:none
  2. border-width:0px
Custom K2BToolsMultipleFilterListContainer td
  1.  Custom Properties="padding: 2px !important;"
Custom K2BToolsTableFieldBorder Table
  1. border-style:none
  2. border-width:0px
  3. padding:0px
  4. Custom Properties="border-collapse:collapse !important; align-items: left;"
Custom K2BToolsTableFieldBorder td
  1. margin:0px
  2. padding:0px
Custom K2BToolsTable_MultipleComboContainer Table
  1. Custom Properties="border-collapse:collapse !important; align-items: left;"
Custom K2BToolsTable_MultipleComboContainer td
  1. margin:0px
  2. padding: 0px
Custom K2BToolsTextBlock_MultipleComboTitle > A
  1. text-decoration:none
  2. forecolor:#000
Custom    

K2BTools 8.3.0

Download

 

 

K2BModern 8.3.0

 Change Log

In order to have a valid css in K2BModern perform the following changes:

  1. In custom-properties add quotes under url: ex: change url(data:image/svg+xml;base64...)  to url("data:image/svg+xml;base64...")  in:
    • Button
    • ButtonStandard
    • Image_Action
    • Image_Paging
    • Button_Standard:hover
    • Image_Action:hover
    • Image_Paging:hover
    • Image_PagingLefT:hover
    • Image_PagingRigths:hover
  2. In custom-properties change fitler property to filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#900000,endColorstr=#900000) in
    • Table_ConditionalConfirm

 

K2BTools 8.2.0

Download

 

 

K2BModern 8.2.0

 Change Log

Type Name Changes
Messages Messages
  1. white-space:nowrap

K2BTools 8.1.0

Download

 

 

K2BModern 8.1.0

 Change Log

Type Name Changes
Table Section_Invisible
  1. Display:none
Button Button_DashBoard
  1. border-bottom:0px
  2. border-left:0px
  3. border-right: 0px
  4. border-top: 0px

New Classes

Type Name

Properties

Attribute child of: Attribute_Grid Attribute_Image_Grid
  1. max-width="60px"

K2BTools 8.0.14

Download

 

 

K2BModern 8.0.14

Changelog

 

New Classes

Type Name

Properties

Custom Class SearchButtonCell
  1. TextAlign="left"
  2. vertical-align="bottom"