Hi

It quite complicated to implement your question,

1. Learn carefully about LESS at http://lesscss.org/#docs
2. Use when condition mixins

It seems we can not use the single checkboxes type for this case.

Here the steps:

1. Define variables (should be in variables.less)
@mod-border-top: 1; //can be 1 or 0 based on default value in xml file
@mod-border-right: 1;
.....
.....
@border-width: 10px;

2. Define mixins (can be in mixins.less file or any other files which you use to add style )

.mod-border-mixins() when (@mod-border-top = 1) {
border-top-width: @border-width;
}

.mod-border-mixins() when (@mod-border-top = 0) {

}

.mod-border-mixins() when (@mod-border-right = 1) {
border-right-width: @border-width;
}

.mod-border-mixins() when (@mod-border-right = 0) {

}

3. Use the mixins in css selector

.t3-module {
border-style: solid;
.mod-border-mixins();
}


4. Define thememagic variable

<field name="mod-border-top" type="radio" class="btn-group"
label="Border Top"
description="">
<option value="0">JNO</option>
<option value="1">JYES</option>
</field>
<field name="mod-border-right" type="radio" class="btn-group"
label="Border Right"
description="">
<option value="0">JNO</option>
<option value="1">JYES</option>
</field>

<field name="border-width" type="text" class="input-small t3tm-dimension" label="Border width" default="10px" description="" />



Hope it helps,

Regards

Hi,

Thanks for help.

Regards

It worked!

I did this way (only for searches here in the forum)...

- thememagic.xml:
<field name="ModBord" type="text" size="10" class="input-tiny t3tm-dimension" label="Border width" description="" ></field>
<field name="ModBordTop" type="checkbox" label="Top">
<option value="0">Top</option>
</field>
<field name="ModBordRight" type="checkbox" label="Right">
<option value="0">Right</option>
</field>
<field name="ModBordBottom" type="checkbox" label="Bottom">
<option value="0">Bottom</option>
</field>
<field name="ModBordLeft" type="checkbox" label="Left">
<option value="0">Left</option>
</field>

- variables.less:
@ModBord: 0px;
@ModBordTop: 0;
@ModBordRight: 0;
@ModBordBottom: 0;
@ModBordLeft: 0;

- style.less:
.mod-border-mixins() when (@ModBordTop = 1) { border-top: @ModBord solid @ModBordColor; }
.mod-border-mixins() when (@ModBordTop = 0) { }
.mod-border-mixins() when (@ModBordRight = 1) { border-right: @ModBord solid @ModBordColor; }
.mod-border-mixins() when (@ModBordRight = 0) { }
.mod-border-mixins() when (@ModBordBottom = 1) { border-bottom: @ModBord solid @ModBordColor; }
.mod-border-mixins() when (@ModBordBottom = 0) { }
.mod-border-mixins() when (@ModBordLeft = 1) { border-left: @ModBord solid @ModBordColor; }
.mod-border-mixins() when (@ModBordLeft = 0) { }
.t3-module { .mod-border-mixins(); }

See: http://prntscr.com/224f6t

Thanks again!