Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

Div
stylemax-width: 50%
classfloatRight
Panel
borderColor#ccc
bgColor#fff
borderStylesolid
titleSee AlsoborderStylesolid
Include Page
_useful links for prefs framework
_useful links for prefs framework

...

HTML elementSample Markup
drop-down
Code Block
languagexml
<label class="flc-uiOptionsprefsEditor-magPositionLabel" for="magnifier-position"></label>
<select class="flc-uiOptionsprefsEditor-magPositionInput" id="magnifier-position"></select>
checkbox
Code Block
languagexml
<input class="flc-uiOptionsprefsEditor-captionsInput" type="checkbox" id="captions-choice"/>
<label class="flc-uiOptionsprefsEditor-captionsLabel" for="captions-choice"></label>
radio button
Code Block
languagexml
<div class="flc-uiOptionsprefsEditor-themeRow">
    <input class="flc-uiOptionsprefsEditor-themeInput" type="radio" name="theme" id="bw" value="bw" />
    <label class="flc-uiOptionsprefsEditor-themeLabel" for="bw"></label>
</div>

...

UI and MARKUPCSS

Code Block
html
html
 <h2>
  <span class="fl-icon-contrast"></span>
  <span class="flc-uiOptionsprefsEditor-contrast-label heading-text"></span>
</h2>

<div class="flc-uiOptionsprefsEditor-themeRow fl-choice">
  <input type="radio" class="flc-uiOptionsprefsEditor-themeInput fl-hidden-accessible" name="theme" id="bw" value="bw" />
  <div class="fl-indicator"></div>
  <label for="bw" class="flc-uiOptionsprefsEditor-theme-label fl-theme-uiobw-bwprefsEditor">
    <span class="fl-preview-A"></span>
    <span class="fl-hidden-accessible"></span>
  </label>
</div>

For the header:

Code Block
css
css
 .fl-uiOptionsprefsEditor .fl-icon-contrast {
    font-family: 'InfusionIcons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    float:left;
    margin: 0.2em 0.3em 0 0;
    font-size: 1.5em; 
}
.fl-uiOptionsprefsEditor .fl-icon-toc:before {
    content: "\e005";
}

For the radio buttons:

Code Block
css
css
/* Theme radio buttons */
.fl-uiOptionsprefsEditor .fl-choice {
    display: inline;
    float: left;    
}
.fl-uiOptionsprefsEditor .fl-choice label {
    margin-right: 5px;  
    border: 1px solid black;
    border-radius: 5px;
    height: 3em;
    width: 3em;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    line-height: 3em !important;
    padding: 2px;
}
.fl-uiOptionsprefsEditor .fl-choice .fl-preview-A {
    font-size: 2em;
}
.fl-uiOptionsprefsEditor .fl-choice input:focus ~ label {
    outline: 2px solid black;
}

Code Block
html
html
<h2>
  <span class="fl-icon-toc"></span>
  <span class="flc-uiOptionsprefsEditor-toc-label heading-text"></span>
</h2>

<div class="fl-uiOptionsprefsEditor-onoff">
  <input type="checkbox" id="toc-choice" class="flc-uiOptionsprefsEditor-toc" />
  <label for="toc-choice">
    <span class="fl-uiOptionsprefsEditor-switch" data-checkboxStateOn="ON" data-checkboxStateOff="OFF">
   	  <span class="fl-uiOptionsprefsEditor-switch-inner"></span>
    </span>
    <span class="flc-uiOptionsprefsEditor-toc-choice-label"></span>
  </label>
</div>

For the switch:

Code Block
css
css
/* The container for the toggle, which is also a label for the hidden checkbox. */
.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff .fl-uiOptionsprefsEditor-switch { 
    border-radius:50px;
    border: 1px solid #776D67;
    width: 5em;
    height: 2em;
    background-color: #E6E6E6;
    box-shadow: 1em 1.1em 0 0 rgba(250,250,250,0.53) inset;
    overflow:hidden;
    vertical-align: middle;
    display:inline-block;
    transition-duration: 0.2s;
    transition-property: padding-left, width, background-color, margin-left;
    font-size: 1.2em;
    font-weight: 600;
}

/* Hide input */
.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff input {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff input:focus + label {
    outline: 2px solid black;
}

.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff input:checked + label .fl-uiOptionsprefsEditor-switch {
    padding-left: 3em;
    width: 2em;
    background-color: #2da750;
    box-shadow: -1em 1.1em 0.1em 0 rgba(172, 216, 92, 0.63) inset;
}

/* With data attributes defining the on/off text, localizing the templates is easier */
.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff input + label [data-checkboxStateOn]:before {
    content: attr(data-checkboxStateOn);
}
.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff input + label [data-checkboxStateOff]:after {
    content: attr(data-checkboxStateOff);
}

/* The "on" portion of the toggle and the knob. */
.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff input + label .fl-uiOptionsprefsEditor-switch:before {
    color: #fff;
    border: 1px solid #776D67;
    border-radius: 50px;
    float:left;
    width:1.9em; 
    height: 1.9em; /* Width and height of the knob. */
    text-indent:-1.6em;
    line-height:1.7em;
    text-shadow: 1px 1px 1px #000;
    background-color: #fff;
    background-image: -o-linear-gradient(bottom, rgb(205,204,202) 0%, rgb(244,244,244) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(205,204,202) 0%, rgb(244,244,244) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(205,204,202) 0%, rgb(244,244,244) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(205,204,202) 0%, rgb(244,244,244) 100%);
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, rgb(205,204,202)),
        color-stop(1, rgb(244,244,244))
    );
    background-image: linear-gradient(bottom, rgb(205,204,202) 0%, rgb(244,244,244) 100%);  
    box-shadow: 0.2em 0.2em 0.5em #888;
}

/* The "off" portion of the toggle. */
.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff input + label .fl-uiOptionsprefsEditor-switch:after {
    float:left;
    position:relative;
    top: 0.36em;    
    left: 0.5em;
}

/* The dark inner circle to the toggle knob. */
.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff .fl-uiOptionsprefsEditor-switch-inner {
    border: 1px solid #493A30;
    border-radius: 50px;
    width: 1em;
    height: 1em;
    position:relative;
    left:-2.85em;
    top:0.46em;
    background-color: #675243;
    box-shadow: 0 -0.2em 0.3em 0.05em rgba(250, 250, 250, 0.3) inset;
    display:inline-block;
}

.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff input:checked + label .fl-uiOptionsprefsEditor-switch .fl-uiOptionsprefsEditor-switch-inner {
    top:-1.6em;
    left: 0.46em;
}