K2BFlat Theme

Introduction

K2BFlat themes were introduced in K2BTools version 8.0 for Evolution 3 to generate better user interfaces with K2BTools using the Responsive Web Design features available in GeneXus Evolution 3.

This theme has four variations: K2BFlat (orange), K2BFlatBlue, K2BFlatBordeaux, K2BFlatGreen. The difference between these versions is the key color used.

K2BFlatVersions
K2B Flat 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 11.1

K2BFlat_11.1GX15

New Classes

Type Name Changes
Custom

.K2BToolsTable_ComponentContainer .K2BToolsTable_RoundedBorder
  1. border-stype:none

 

K2BTools 11

K2BFlat_11.0GX15

New Classes

Type Name Changes
Table

K2BToolsImage_ComponentIcon
  1. height:25px
Table K2BToolsTable_LinkListContainer
  1. margin-top:15px
  2. margin-left:15px
  3. margin-bottom:15px
  4. margin-right:15px
Custom K2BToolsTable_ComponentContainer.Table_Basic_Widht100Percent.K2BToolsTable_ComponentTitleWithIcon td:first-child
  1. width:auto
Custom K2BToolsTable_GridSettingsContent td:last-child .gx-attribute
  1. float:right

Changelog

 

Type Name Changes
Image Image_Action
  1. margin-top:0px
  2. margin-bottom:1px
Table WWOrderByLabel
  1. background-image:OrderBy
Calendar Calendar
  1. custom-properties
    1. z-index:200 !important
ErrorViewer gx-error-message
  1. background-image:ErrorIcon

 

K2BTools 10.4.0

K2BFlat_10.4.0GX15

New Classes

Type Name Changes
Table

K2BToolsTable_ComponentContainer
  1. border-color:K2BToolsBorder
  2. border-style:solid
  3. border-width:1px
  4. top-left-radious:2px
  5. top-right-radious:2px
  6. bottom-left-radious:2px
  7. bottom-right-radious:2px
  8. margin-bottom:8px
Table K2BToolsTable_CollapsedComponentContainer
  1. custom-properties
    1. border-bottom:none;
Table K2BToolsTable_ModalWindow_Inner
  1. max-height:80vh
  2. custom-properties
    1. overflow-y:auto
    2. overflow-x:hidden
Table K2BToolsTable_LoadingMessageContainer
  1. font-size:24px
  2. font-family: SourceSansPro-Bold
  3. height:199px
  4. width:100%
  5. text-align:center
Table K2BToolsTable_ModalWindow
  1. padding-top:5px
  2. padding-left:5px
  3. padding-bottom:5px
  4. padding-right:5px
  5. background-color:#FFF
  6. top-left-radius:5px
  7. top-right-radius:5px
  8. bottom-left-radius:5px
  9. bottom-right-radius:5px
  10. max-width:90vw
  11. min-width:50%
  12. custom-properties
    1. margin:0 auto;
Table Table_Condition
  1. forecolor:#009688
Custom Class K2BToolsTable_CollapsedComponentContainer > .row:nth-child(2)
  1. display:none
Custom Class K2BToolsTable_ComponentContainer .Table_Basic_Widht100Percent td:first-child
  1. width:100%
Custom Class K2BToolsTable_ModalWindow .PopupHeaderButton
  1. margin-right:15px
Custom Class .K2BToolsTable_ModalWindow .PopupTitle
  1. Cursor:default
Custom Class K2BToolsTable_ComponentContainer .TextBlock_Subtitle A
  1. font-size:22px:
  2. text-decoration:none;
  3. FontFamily:"SourceSansPro-Regular"
    1. Forecolor:"#333"
Custom Class K2BToolsTable_ComponentContainer .TextBlock_Subtitle
  1. Margin-Top:0px
  2. Margin-Left:8px
Custom Class K2BToolsTable_ComponentContainer > .row:first-child
  1. background-color:#EEEBEB
  2. border-bottom:1px solid
  3. border-botom-color: K2BToolsBorder
  4. margin-top: 0px
  5. margin-left: 0px
  6. margin-bottom:0px
  7. margin-right:0px
  8. overflow:hidden

Changelog

 

Type Name Changes
Table K2BToolsTable_MainContentTable
  1. padding-right:15px
Section Section_Grid
  1. margin-right:-15px
  2. padding-right:15px
  3. custom-properties
    1. overflow-x:auto
Table Table_ConditionalConfirm
  1. Custom-Properties
    1. x-index:100
TextBlock WWOrderByLabel
  1. Background-image:"OrderBy"
Custom Class A.change-action
  1. z-index:2;
Custom Class .ErrorViewerBullet.gx-error-message
  1. background-image:ErrorIcon
Custom Class .ErrorViewerBullet.gx-warning-message
  1. Background-Image:"ErrorIcon"

K2BTools 10.3.0

K2BFlat_10.2.0Evo3

K2BFlat_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
Custom Class 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

K2BFlat_10.2.0Evo3

K2BFlat_10.2.0GX15

ChangeLog(GX15 only)

Type Name Changes
Attribute

PromptAdvancedBarCell (Extra small)
  1. Position:relative
  2. Top:-76px
Switch Switch
  1. Switch-On-Background-color:#E7722B
  2. Switch-Off-Backgrond-Color:#E1DDD7
  3. forecolor:#666
Table K2BToolsTableCell_ActionContainer
  1. Height:50px;
Label WWOrderByLabel
  1. Background-Image:OrderBy
Custom Class gx-error-message
  1. Backgrond-Image="ErrorIcon"
CustomClass gx-warning-message
  1. BackgroundImage:WarningIcon

New Classes (GX15 only)

Type Name Changes
Custom Class bootstrap-switch-focused
  1. CustomProperties
    1. border-color:#bb4917 !important
    2. box-shadow:0 1px 1px rgba(0,0,0,.075) inset, 0 0 6px #e7722b !important;"

 

 

 

Changelog (GXEvo3 and GX15)

 

Type Name Changes
Attribute K2BToolsEnchancedCombo
  1. Height:auto;
GridColumn K2BToolsCheckBoxColumn
  1. PaddingTop:1px
  2. PaddingRight:5px
  3. PaddingBottom:1px
  4. PaddingLeft:15px;
    1. CustomProperties:"width:48px !important;
Image Image_Action
  1. Margin-Top:5px
Section K2BToolsTable_GridSettingsContainer
  1. Padding-Bottom: 7px;
  2. Padding-Top: 7px;
  3. Padding-Left: 0px
  4. Padding-Right:0px;
Section K2BToolsTable_MyAccountContainer
  1. Padding-Bottom: 7px;
  2. Padding-Top: 7px;
  3. Padding-Left: 0px
  4. Padding-Right:0px;
Section K2BToolsMyAccountTable
  1. Margin-Left:15px;
Table K2BToolsTable_GridSettings
  1. Marging-Left:15px
  2. Left: set value to default
  3. width: set value to default
Table K2BToolsTableCell_ActionsContainer
  • Height:50px

New Classes

Type Name

Properties
Attribute K2BTools_CheckAllGrid
  1. Left:16px;
  2. Position:absolute;
  3. Top:30px;
Table K2BToolsCell_CheckboxFreeStyle
  1. PaddingTop: 1px;
  2. PaddingRight:5px;
  3. PaddingBottom:1px;
  4. PaddingLeft:15px;
  5. Width:48px;
  6. VerticalAlign:Top;
Table K2BToolsTable_GridContainer
  1. Width:100%
  2. CustomProperties: border-collapse:collapse;
Custom Class GridColumnAscending >*::after
  1. Custom Properties
    1. content:"   ▲"
Custom Class GridColumnDescending >*::after
  1. Custom Properties
    1. content: "   ▼""
Custom Class K2BToolsSection_PromptImageAndFieldContainerFocus A
  1. Border-Color="#BB4917"
  2. Border Style="solid"
  3. Border Width="1px"
  4. Custom Properties:
    1. "outline:0 none; box-shadow:0 1px 1px rgba(0,0,0,.075) inset, 0 0 6px #e7722b;"
Custom Class K2BToolsSection_PromptImageContainer A
  1. padding-top: 5px
  2. padding-bottom:5px;
  3. FontSize: 14px
Custom Class K2BToolsTable_GridContainer > tbody > tr > td
  1. Width:0px
  2. VerticalAlign:top
  3. Custom Properties:
    1. padding:0px !important;"
Custom Class K2BToolsTextBlock_GridSettingsTitle > a
  1. Padding-Top:7px
  2. Padding-Right:16px
  3. Padding-Bottom:6px
  4. Padding-Left:16px
Custom Class K2BToolsTextBlock_MyAccount > a
  1. Padding-Top:7px
  2. Padding-Right:16px
  3. Padding-Bottom:6px
  4. Padding-Left:16px
Custom Class TH.K2BToolsSortableColumn:hover
  1. Background-color:#D9D5CF
  2. Custom Properties
    1. "cursor: pointer;"

 

 

K2BTools 10.1.0

Download

 

K2BFlat_10.1.0Evo3

K2BFlat_10.1.0GX15

 

Changelog

 

Type Name Changes
Attribute Table_ConditionalConfirm
  1. z-index:700

New Classes

Type Name

Properties
Attribute K2BToolsSimpleImageListImage
  1. Height:auto
  2. Width:200px
Attribute K2BToolsSimpleImageListText
  1. FontWeight:bold
  2. FontSize:16px;
  3. ForeColor:#333
Attribute K2BToolsSimpleImageListSecondaryAttributesTable
  1. margin-left:20px
  2. width:230px
Attribute K2BToolsSimpleImageListTable
  1. margin-top:20px
  2. margin-left:20px
  3. padding-right:20px
  4. padding-bottom:20px
  5. padding-left:20px
  6. background-color:#F3F3F3
  7. Height:230px
  8. Width:230px

 

K2BTools 10.0.4 (GX15 Only)

K2BFlat_10.0.4GX15

Changelog

Type Name Changes
Section PromptAdvancedBarCell
  1. position:relative
  2. top:-76px
  3. background-color: transparent

 

K2BTools 10.0.0

Download

 

K2BFlat_10.0.0Evo3

K2BFlat_10.0.0GX15

 

Changelog

 

Type Name Changes
Attribute K2BTools_SearchResultImage
  1. margin-top:0px
  2. margin-right: 0px
  3. margin-bottom: 0px
  4. margin-left: 0px
  5. Height: auto
  6. Custom-properties: object-fit:conver;
Attribute

ReadonlyK2BTools_SearchResultImage
  1. width:100%
FreeStyleGrid K2BTools_SearchGrid
  1. padding-right: 15px
  2. padding-top: 15px;
  3. padding-bottom: 15px
  4. padding-left: 15px
  5. custom-properties: ""
Section K2BToolsSection_Card
  1. margin-top:0px
  2. margin-rigth:-5px
  3. margin-left:-5px
  4. Height:""
  5. min-height:210px
  6. width:""
Section  
  1. Set property position to default value.
Table  
  1. min-width:30px
    1. Set property width to default value.
Custom Class  
  1. background-color: #F4EFEA

New Classes

Type Name

Properties
Attribute AttributeInMultipleCombo_Filter
  1. Position:absolute;
  2. Top:11px;
Attribute K2BTools_FilterAttributeInCombo
  1. width:150px;
Attribute K2BToolsAttribute_BorderlessFilter
  1. horizontal:""
  2. vertical:""
  3. blur:""
  4. spread: ""
  5. color: ""
  6. inset:""
  7. background-color:transparent;
  8. border-style:none;
  9. height: auto
  10. width: 150px
  11. Custom-properties: box-shadow:none;
Attribute K2BToolsAttribute_BorderlessFilter(ExtraSmall)
  1. Width: 90px
Attribute K2BToolsAttribute_FitInContainerImage
  1. border-width:0px
  2. height:200px
  3. width: 100%
  4. custom-properties: object-fit:cover;
Attribute K2BToolsAttribute_Invisible
  1. display:none;
Attribute K2BToolsAttribute_SmallTitle
  1. Font-family: SourceSansPro-Regular;
Attribute K2BToolsAttribute_TagDescription
  1. Font-Size: 15px;
  2. FontFamily: SourceSansPro-SemiBold;
  3. ForeColor:#666;
  4. Height: 12px;
  5. vertical-align: middle
Image Image_Action_OnSectionHover
  1. visibility:hidden
  2. custom-properties:
    1. opacity: 0;
    2.  transition: visibility 0s linear 0s, opacity 400ms;
Image K2BToolsTwoPane_Action
  1. margin-right: 8px
Image K2BToolsTagAction_Remove
  1. width:19px
  2. verical-aling:middle
Section K2BToolsTable_CardAttributesSection
  1. padding-rigth:15px;
  2. padding-left: 15px;
Section K2BToolsTable_MultipleComboContainer
  1. background-color: white
  2. border-top-color:K2BToolsBorder
  3. border-right-color:K2BToolsBorder
  4. border-left-color: K2BToolsBorder
  5. border-bottom-color:K2BToolsBorder
  6. border-style:solid
  7. bordre-widht:1px
  8. top-left-radius:4px
  9. bottom-left-radius:4px
  10. bottom-right-radious:4px;
  11. bottom-top-radious: 4px;
  12. padding-top:4px
  13. padding-right: 16px
  14. padding-bottom:3px
  15. padding-left:16px
  16. z-index:2
  17. whitespace:nowrap
  18. fontstyle:normal
  19. fontsize:16px
  20. fontfamily:SourceSansPro-Semibold
  21. forecolor:#333
  22. custom-properties: text-decoration:none;
Section K2BToolsTable_RightBorder
  1. custom-properties:"border-right:1px solid #cccccc; border-top:0px;"
Section K2BToolsMultipleFilterListContainer
  1. horizontal: 4px
  2. vertical: 3px
  3. blur:3px
  4. spred:""
  5. color:#3333334"
  6. Inset:""
  7. Left:-1px
  8. position:absolute
  9. top:4px
  10. z-index:5
  11. background-color:#fff
  12. border-top-color:#ccc
  13. border-bottom-color: #ccc
  14. border-left-color:#ccc
  15. border-right-color:#ccc
  16. border-style:solid
  17. border-widht:1px
  18. width:150px
Section K2BToolsSection_SquareCard
  1. margin-right:0px
  2. margin-left:0px
  3. overflow:hidden
  4. padding-top:0px
  5. padding-bottom:0px
  6. padding-right:0px
  7. padding-left:0px
  8. height:auto
  9. min-height:0px
Section K2BToolsSecton_CompactCard
  1. margin-bottom:5px
  2. background-color:#fff
  3. border-top-color:#ccc
  4. border-bottom-color:#ccc
  5. border-left-color:#ccc
  6. border-right-color:#ccc
  7. border-style:solid
  8. border-width:1px
Section K2BToolsSection_VerticalCard
  1. margin-top:15px
  2. margin-rigth:15px
  3. margin-bottom:15px
  4. margin-left:15px
  5. background-color:#fff
  6. border-top-color:#ccc
  7. border-right-color:#ccc
  8. border-bottom-color:#ccc
  9. border-left-color:#ccc
  10. border-style:solid
  11. border-width:1px
Table K2BToolsTable_Compact
  1. custom-properties: border-collapse:collapse;
Table K2BToolsTable_FieldBorder
  1. border-bottom:""
  2. border-left:""
  3. horizontal:""
  4. vertical:0px;
  5. blur:1px
  6. color:#00000013
  7. inset:inset
  8. padding-right:5px
  9. position:relative
  10. top:4px
  11. border-top-color:#ccc
  12. border-right-color:#ccc
  13. border-bottom-color:#ccc
  14. border-left-color:#ccc
  15. border-style:solid
  16. border-width:1px
  17. top-left-radius:1px
  18. bottom-left-radius:1px
  19. bottom-right-radious:1px
  20. height:36px
  21. custom-properties:
    1. width:auto !important;
    2. border-spacing:0px
Table K2BtoolsTable_FieldBorderFocus
  1. border-top-color:#BB4917
  2. border-left-color:#BB4917
  3. border-right-color:#BB4917
  4. border-bottom-color:#BB4917
  5. Custom-properties: "box-shadow: 0 1px 1px rgba(0,0,0,.075) inset,0 0 6px #e7722b;"
Table

K2BToolsTable_FilterTag
  1. margin-top:3px;
  2. margin-rigth:3px
  3. margin-bottom:1px
  4. margin-left:3px
  5. overflow:hidden
  6. display:block
  7. whitespace:nowrap
  8. background-color:#EEEBEB"
  9. border-color:#EEEBEB"
  10. border-style:solid
  11. border-width:1px
  12. radius:4px
  13. width:180px
  14. text-overflow:ellipsis
  15. Custom Properties="border-collapse: separate !important;"
Table K2BToolsTable_FilterTag(ExtraSmall)
  1. width:100px;
Table

K2BToolsTable_GreyBackground
  1. background-color:#EEEBEB
  2. border-color:#ccc
  3. border-style:solid
  4. border-width:1px
  5. radius:4px;
Table K2BToolsTable_MultipleComboMainTable
  1. custom-properties:"border-collapse: collapse;"
Table K2BToolsTable_MultipleFilterContainer
  1. width:100%
  2. text-align:left
Table K2BToolsTwoPaneNoItemSelectedTable
  1. border-style:none;
Table K2BToolsTable_PhotoCardContent
  1. min-height:210px; 
  2. width:100%
Table K2BToolsTable_TwoPaneActionsContainer
  1. float:right;
  2. custom-properties: "border-collapse:collapse;"
Table K2BToolsTable_TwoPaneActionsFixedSize
  • float:right
  • min-height:49px
  • custom-properties: "border-collapse: collapse";
Table K2BToolsTable_TwoPaneContainer
  • margin-left:-15px
  • padding-top:10px
  • padding-right:14px
  • padding-bottom:14px
  • border-radius:4px
  • custom-properties: "border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px solid #cccccc;"
Table K2BToolsTable_TwoPaneActonsFixedSize
  • float:right
  • min-height:49px
  • custom-properties: "border-collapse: collapse";
Table K2BToolsTable_TwoPaneContainer
  • margin-left:-15px
  • padding-top: 10px
  • padding-right:14px
  • padding-bottom:10px
  • padding-left:14px;
  • radius:4px
  • Custom Properties:"border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px solid #cccccc;"
TextBlock K2BTools_MoreInformationText
  • float:right
  • margin-right:15px
TextBlock K2BToolsTextBlock_MultipleComboTitle
  • Custom Properties="text-decoration:none;
TextBlock K2BToolsTwoPaneNoItemSelectedText
  • font-size:24px
  • font-family: SourceSansPro-Bold
  • Forecolor="#A1A1A1"
  • text-align:center
TextBlock TextBlock_Subtitle
  • font-size:22px
TextBlock TextBlock_Subtitle(extra-small)
  • font-size:18px
Custom Class gx-grid
  • custom-properties:""
Custom Class K2BToolsAttribute_BorderlessFilter:focus
  • border-style:none;
  • custom-properties: "outline:none; box-shadow:none;"
Custom Class K2BToolsAttribute_TagDescription A
  • font-size:15px;
  • forecolor:#666
  • custom-properties:text-decoration:initial;
Custom Class K2BToolsTableMultipleFilterListContainer .gxgrid
  • border-style:none;
  • margin-top:0px
  • margin-rigth:0px
  • margin-bottom:0px
  • margin-left:0px
  • max-height:330px
  • custom-properties: overflow-x:hidden;
Custom Class K2BToolsTableMultipleFilterListContainer Table
  • custom-properties:border-collapse:collapse;
Custom Class K2BToolsTable_AttributeContainer .gx-attribute
  • text-aling:left
Custom Class K2BToolsTable_Compact td:first-child
  • width:60px
  • text-align:center
Custom Class K2BToolsTable_FieldBorder Table
  • padding-top:0px
  • padding-right:10px
  • padding-bottom:0px
  • padding-left:5px
  • Custom-properties:border-collapse:collapse;border-spacing:0px;    padding:0px;
Custom Class K2BToolsTable_FieldBorder TD
  • padding-top: 0px
  • padding-right: 0px
  • padding-bottom:0px
  • padding-left:0px
  • custom-properties: border-collapse:collapse;    border-spacing:0px;    padding: 0px !important;
Custom Class K2BToolsTable_FilterTag .form-control-static
  • padding: 0px
  • min-height:0px
Custom Class K2BToolsTable_FilterTag .gx-tab-padding-fix-1
  • paddign-top:0px
  • padding-right:2px
  • padding-bottom:0px
  • padding-left:0px
Custom Class K2BToolsTable_MultipleComboContainer:focus
  • border-color:#BBB"
  • Custom Properties="outline:none; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #ccc;"
Custom Class K2BToolsTable_MultipleComboContainer:hover
  • custom-properties: "background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); background: linear-gradient(to bottom, #ffffff 0%,#efefef 100%); -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 )"
Custom Class K2BToolsTable_MultipleFilterContainer .FreeStyleGrid
  • overflow:hidden
  • custom-properties: "border-collapse: collapse;border-spacing: 0;";
Custom Class K2BToolsTable_MultipleFilterContainer .gx-grid
  • border-style:none
  • margin: 0px
  • max-height:300px
Custom Class K2BToolsTextBlock_MultipleComboTitle > a
  • font-size:16px
  • font-family:SourceSansPro-Semibold
  • fore-color:#333
  • custom-properties: text-decoration:none; color: #333 !important;

 

K2BTools 8.3.0

Download

 

K2BFlat_8.3.0

Changelog

 

Type Name Changes
TextBlock SideLabel
  1. top:3px
Attribute

ReadonlyAttribute_Trn

ReadonlyAttribute_TrnDate

ReadonlyAttribute_TrnDateTime
  1. position:relative
  2. top: 2px;
Attribute ReadonlyAttribute_FixedData
  1. position:relative;
  2. top: 3px;
Attribute CheckBoxInGrid
  1. custom-properties:
    1. padding-left:0px !important;
Section K2BContextHelp
  1. Set property position to default value.
Table K2BToolsCell_PaginationNormal
  1. min-width:30px
    1. Set property width to default value.
Custom Class .gx-row-selected
  1. background-color: #F4EFEA

New Classes

Type Name

Properties
Action K2BToolsButton_FlatAction
  1. border: none;
  2. padding: 0px;
  3. color: #e7722b;
  4. font-family: SourceSansPro-Semibold;
  5. font-size: 15px;
  6. custom properties: text-decoration:underline;
Attribute K2BTools_FilterOptionCombo
  1. margin-right:5px;
  2. margin-left:5px;
  3. width:180px;
Grid Grid_AllowSelection
  1. external-class:true;
Group Group_AdvancedFiltersTitle
  1. FontWeight="700",
  2. FontSize="16px",
  3. FontFamily="SourceSansPro-Regular",
  4. Fore Color="#666"
Table child of: Table_DataAreaContainer Table_TransactionDataAreaContainer  
Table K2BTools_AdvancedFilterRow
  1. custom-properties:
    1. border-collapse: collapse;
Table K2BToolsTable_SideTextContainer
  1. custom-properties:
    1. border-collapse: collapse !important;
    2. border-spacing : 0px !important;
Table K2BToolsTableCell_SideText
  1. custom-properties: padding-left:0px !important;
Table K2BToolsTableCell_RequiredField
  1. custom-properties:
    1. padding-left:0px !important;
Table K2BToolsTableCell_EmptyRequiredContainer
  1. width:1px
Table K2BToolsTable_TopAttributeContainer
  1. margin-bottom:15px
Table: Child of Table_ActionsContainer Table_ComboActionsContainer  
TextBlock Textblock_AdvancedFiltersEmptyState
  1. font-Weight:normal
Textblock child of : Label Attribute_RequiredLabel  
CustomClass Group_AdvancedFiltersTitle
  1. Margin Bottom="5px"
CustomClass

K2BToolsButton_FlatAction:hover,

.K2BToolsButton_FlatAction:focus
  1. custom-properties
    1. text-decoration:none
    2. background:none
Custom Class K2BTools_AdvancedFilterRow .input-group
  1. Margin Left="-2px"
Custom Class K2BTools_AdvancedFilterRow TD
  1. custom-properties:
    1. padding: 0px !important;
Custom Class Attribute_RequiredLabel:after
  1. custom-properties:
    1. content:"*";
    2. color:#c00;
Custom Class Attribute_RequiredReadOnlyLabel:after
  1. custom-properties:
    1. content:”” !important;
    2. color: #666 !important;
Custom Class span.Attribute_RequiredLabel:empty
  1. custom-properties:
    1. top: 0px !important;
Custom Class

.K2BToolsTable_SideTextContainer .ReadonlyAttribute_Trn

.K2BToolsTable_SideTextContainer .ReadonlyAttribute_TrnDate

.K2BToolsTable_SideTextContainer .ReadonlyAttribute_TrnDateTime
  1. top:5px;
Custom Class

.K2BToolsTable_TopAttributeContainer .ReadonlyAttribute_Trn

.K2BToolsTable_TopAttributeContainer .ReadonlyAttribute_TrnDate

.K2BToolsTable_TopAttributeContainer .ReadonlyAttribute_TrnDateTime
  1. top:6px;
Custom Class K2BToolsButton_MainAction:hover
  1. background-color: #bb4917;
  2. border-bottom-color: #bb4917;
  3. border-left-color: #bb4917;
  4. order-right-color: #bb4917;
  5. border-top-color: #bb4917;
  6. border-style: solid;
  7. border-width: 0px;
  8. fore-color: white;
Custom Class .K2BToolsButton_MainActiondisabled background-color: #E7722B;
Custom Class .Image_Actiondisabled:hover
  1. custom-properties:
    1. backgrond:none;

 
Custom Class .Grid_AllowSelection tr:hover
  1. backgroundcolor:#F4EFEA

 

K2BTools 8.2.0

Download

 

K2BFlat_8.2.0

Changelog

 

Type Name Changes
CustomClass .gx-grid
  1. Custom properties:
    1. overflow-x:auto
Custom Class

.input-group A.btn-default:hover

.Image_Action:hover

.K2BToolsTable_MyAccountContainer:hover

.K2BToolsTable_GridSettingsContainer:hover

.bootstrap-select > .btn:hover

.Button_Standard:hover
  1. Custom properties:
    1. Replace filter:ProgId... with -ms-filter:"ProgId..."
Attribute FilterAttribute
  1.  Remove class.
Custom .FilterAttribute:focus
  1. Remove class
Table

AvancedContainerItem

AdvancedContainer

K2BToolsMenuContainer

RecentLinksMainTable (Extra small)
  1. Custom properties
    1. In transition (only applies to transition property, ignore -moz-transition, -webkit-transition, etc) property remove the 0s value closest to easy-in-out. Example: replace transition: left 0.5s ease-in-out  0s with transition: left 0.5s ease-in-out
Custom .input-group .form-control + span.input-group-btn > a.btn
  1. Custom properties
    1. In transition (only applies to transition property, ignore -moz-transition, -webkit-transition, etc) property remove the 0s value closest to easy-in-out. Example: replace transition: left 0.5s ease-in-out  0s with transition: left 0.5s ease-in-out
TextBlock TextBlock_LineSeparatorOpen
  1. Custom properties
    1. Remove user-select:none (so custom property value has the following properties: -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;)
Custom dummy, class^="cb-icon-", class=" cb-icon-"
  1. Custom properties:
    1. Remove the * that is before margin-right property. 
Custom UL.K2BMetisMenu UL LI.active > A:
  1. Custom properties:
    1. change background-color: #ff7f7 to background-color:#ff7f70
Custom UL.K2BMetisMenu UL UL A
  1. Custom properties:
    1. padding-right is written wrong. Add a d to paDing-right

New Classes

Type Name

Properties
TextBlock child of: K2BToolsTextBlockPaginationNormal K2BToolsPaginationNormal_Disabled
 
Custom Class .K2BToolsTextBlock_PaginationNormal_Disabled A
  1. forecolor:#ddd
  2. cursor:default
  3. TextDecoration:none
Custom Class .K2BToolsTextBlock_PaginationNormal_Disabled A:hover
  1. forecolor:#ddd
Custom Class .Grid_WorkWithFooter
  1. Height:50px
Custom Class

.input-group A.btn-default:hover

.Image_Action:hover

.K2BToolsTable_MyAccountContainer:hover

.K2BToolsTable_GridSettingsContainer:hover

.bootstrap-select > .btn:hover

.Button_Standard:hover
  1. Custom properties:
    1. Replace filter:ProgId... with -ms-filter:"ProgId..."

 

K2BTools 8.1.0

Download

 

K2BFlat_8.1.0

Changelog

 

New Classes

Type Name

Properties
Attribute child of: Attribute_Grid Attribute_Image_Grid
  1. max-width="60px"
Image K2BMenuItemImage
  1. max-width="30px"
Custom Class .nav
  1. Extra small:
    1. custom properties: width:140!important;
  2. Small
    1. custom properties: width 140!important;
  3. Medium
    1. custom properties: width:184!important;
  4. Large
    1. custom properties: width:218!important;
Custom Class .sidebar-nav
  1. custom: border-bottom: 1px solid #ccc !important;
Custom Class .sidebar-nav ul a
  1. background-color: #EEEBEB
  2. padding-top: 10px
  3. padding-bottom:10px
  4. padding-right: 20px
  5. padding-left:20px
  6. custom properties:text-shadow:none !important; box-shadow:none !important; color:#857f76 !important;
Custom Class

.sidebar-nav ul a:hover

.sidebar-nav ul a:active

.sidebar-nav ul a:focus
  1. fore-color: #FFF
Custom Class UL.K2BMetisMenu
  1. border-top:1px solid #ccc;
Custom Class UL.K2BMetisMenu A:hover
  1. custom properties: color:#000 !important;
Custom Class UL.K2BMetisMenu A
  1. text-decoration: none;
  2. padding: 14px !important;
  3. font-family: SourceSansPro-Semibold;
  4. font-size: 18px;
  5. border-top:0px !important;
  6. border-bottom: 1px solid #ccc;
  7. border-right: 1px solid #ccc;
  8. cursor: pointer;
  9. custom properties: background-color:#eeebeb !important; border-top:0px !important;
Custom Class UL.K2BMetisMenu LI.active > A
  1. custom properties : background-color:#f5f2f2 !important;color: #666 !important;
Custom Class UL.K2BMetisMenu LI.active > A:hover
  1. custom properties: color:#666 !important;
Custom Class UL.K2BMetisMenu UL LI.active >A
  1. font-weight:bold;
  2. custom properties: background-color:#ff7f7 !important;
Custom Class UL.K2BMetisMenu UL UL LI.active > A 
  1. custom properties: background-color:#f5f2f2 !important;
Custom Class UL.K2BMetisMenu UL A
  1. border-bottom:none;
  2. font-size: 16px;
  3. font-family: SourceSansPro-Regular;
  4. custom properties :background-color:#f5f2f2 !important; padding: 10px !important;padding-left:15px !important;
Custom Class UL.K2BMetisMenu UL UL UL A
  1. border-bottom: none;
  2. font-size: 14px;
  3. custom properties: padding-left:30px !important;padding: 8px !important;
Custom Class UL.K2BMetisMenu UL UL UL UL A
  1. custom properties: padding-left:60px !important;
Custom Class UL.K2BMetisMenu LI.activeelement > A
  1. border-right: 6px solid #e7722b;
  2. custom properties: background-color: #fff !important;
Custom Class .fa.arrow:before
  1. custom properties: content: "\f107" !important;
Custom Class .active > a > .fa.arrow:before
  1. custom properties: content: "\f106" !important;
Custom Class .InvisibleInExtraSmallMenu
  1. extra-small:
    1. display:none!important;
Custom Class .InvisibleInSmallMenu
  1. small:
    1. display:none!important;
Custom Class .InvisibleInMediumMenu
  1. medium:
    1. display:none!important;
Custom Class .InvisibleInLargeMenu
  1. large:
    1. display:none!important;

 

K2BTools 8.0.14

Download

 

K2BFlat_8.0.14

Changelog

Type Name Changes
Table K2BToolsTable_FieldContainer
  1. Width="100%"
  2. Custom Properties="table-layout:fixed;"
Section K2BToolsSection_Card
  1.  Height="200px"
  2. Width="100px"
  3. Margin-Right="0px"
  4. Margin-Left="0px"
FreeStyle K2BTools_SearchGrid
  1.  Padding-Right="10px"
  2. Padding-Left="10px"
Table K2BToolsTable_SearchContainer
  1. externalclass="false"
  2. max-width="400px"
  3. overflow="hidden"
Attribute ReadOnlyAttribute_ConditionalConfirm
  1. Position="relative"
  2. Top="-5px"
Section Section_CondConf_Dialog
  1. background-color="#FFF"
  2. border-radius="15px 15px 15px 15px
  3. left="50%"
  4. margin-top="-84px"
  5. margin-left="-122px"
  6. Postion="absolute"
  7. Top="50%"
  8. height="169px"
  9. width="244px"
  10. text-align="center"
  11. customProperties="border-collapse:collapse;"
Section Section_CondConf_DialogInner
  1. Padding="45px 14px 14px 14px "
  2. height="100%"
  3. width="100%"
  4. fontsize="18px"
  5. fontfamily="SourceSansPro-Regular"
Table Table_ConditionalConfirm
  1. left="0px"
  2. position="fixed"
  3. top="0px"
  4. background-color="#0000004C"
  5. Height="100%"
Custom dialog-buttons button.cancel:hover 
  1. Rename to: "dialog-buttons button.cancel:hover, .K2BToolsButton_GreyAction:hover"
Custom K2BToolsButton_MainAction:focus
  1. Rename to: "K2BToolsButton_MainAction:focus, .K2BToolsButton_MainAction_Confirm:focus"
Custom K2BToolsButton_MainAction:hover
  1. Rename to: "K2BToolsButton_MainAction:hover, .K2BToolsButton_MainAction_Confirm:hover"

 

New Classes

Type Name

Properties
Custom Class K2BToolsTable_FieldContainer td:first-child
  1. width="15px"
Table child of: K2BToolsTable_PaginationContainer K2BToolsTable_SearchPaginationContainer
  1. width="300px"
Button child of:Button K2BToolsButton_GreyAction
  1. margin-top="25px"
  2. margin-left="5px"
  3. padding= "7px 13px 7px 12px"
  4. Background-color=" #BFB8B8"
  5. Border-Color= "#BFB8B8 #BFB8B8 #BFB8B8 #BFB8B8"
  6. Border-Style="solid"
  7. Border-Width = "0px"
  8. Border-Radious =  "4px 4px 4px 4px"
  9. Font Weight = "normal"
  10. Font-Size= "16px"
  11. Font-Family= "SourceSansPro-Semibold"
  12. Fore-Color = "#FFF"
  13. Height= "38px"
  14. Width = "90px"
Button child of: K2BToolsButton_MainAction K2BToolsButton_MainAction_Confirm
  1. margin-top="25px"
  2. margin-left="5px"
  3. width ="90px"

 

K2BTools 8.0.12

Download

 

K2BFlat_8.0.12

Changelog

Modified classes

 

Type Name Changes
Attribute K2BFSG_LoginField
  1. Width="361px"
  2. Margin Bottom="25px"
Attribute ReadonlyBlobContentK2BFSG_LoginField
  1.  Border Width="0px"
Attribute ReadonlyK2BFSG_LoginField
  1.  Border Width="0px"
Attribute K2BFSG_CAPTCHAField
  1. Custom Properties="margin:0 auto;"
Attribute ReadonlyBlobContentK2BFSG_CAPTCHAField
  1. Border Width="0px"
Attribute ReadonlyK2BFSG_CAPTCHAField
  1. Border Width="0px"
Table K2BFSGTable_DashBoardItem
  1. Margin Top="10px"
  2. Margin Right="10px"
  3. Margin Bottom="10px"
  4. Margin Left="10px"
  5. Background Color="#FFF"
  6. Min-Height="250px"
  7. Width="80%"
  8. TextAlign="center"
  9. Custom Properties="border: 1px solid #eee; border-radius:4px;"
Table K2BFSGTable_CAPTCHAContainer
  1. TextAlign="center"
  2. Custom Properties="margin: 0 auto;"
Table K2BToolsFSGAM_Table_Basic
  1. Background Color="White"
Table K2BToolsFSGAM_LoginTable
  1. PaddingTop="78px"
  2. PaddingRight="85px"
  3. PaddingLeft="85px"
  4. Height="733px"
  5. Width="531px"
  6. TextAlign="center"
Table K2BToolsTable_FloatLeft
  1. Width="100%"
Table Table_Basic_Widht100Percent
  1. Width="100%"
Textblock K2BFSGTextBlock_DashboardTitle
  1. FontSize="30px"
  2. FontFamily="SourceSansPro-Regular"
  3. Forecolor="#333"
Textblock SideLabel
  1. Position="relative"
  2. Top="-2px"
Group K2BToolsFSGAM_Group_Tabular_Invisible
  1. Display="none"
FreeStyleGrid FreeStyleGrid_Transaction
  1.  Width="100%"

New Classes

Type Name

Properties
Custom Class K2BToolsTable_AttributeContainer .gx-attribute
  1. TextAlign="left"
Custom Class K2BToolsTable_AttributeContainer .Label
  1. Position="relative"
  2. Top="5px"
Form K2BFormLogin
  1. Background Color="#EEEBEB"
  2. Height="100%"
  3. Width="100%"
TextBlock TextBlock_FloatRight
  1. Float="right"
Table K2BTableActionsLeftContainer
  1. External="True"
Table K2BTableActionsRightContainer
  1. Float="right"

K2BTools 8.0.8

Download

 

K2BFlat_8.0.8

Changelog

First Release.