wcfsetup/install/files/acp/templates/styleAdd.tpl

   1 {include file='header' pageTitle='wcf.acp.style.'|concat:$action}
   2
   3 <script data-relocate="true" src="{@$__wcf->getPath()}acp/js/WCF.ACP.Style.js?v={@$__wcfVersion}"></script>
   4 <script data-relocate="true" src="{@$__wcf->getPath()}js/WCF.ColorPicker.js?v={@$__wcfVersion}"></script>
   5 <script data-relocate="true">
   6         //<![CDATA[
   7         $(function() {
   8                 new WCF.ColorPicker('.jsColorPicker');
   9                 WCF.TabMenu.init();
  10
  11                 var $useFluidLayout = $('#useFluidLayout');
  12                 var $fluidLayoutMinWidth = $('#fluidLayoutMinWidth');
  13                 var $fluidLayoutMaxWidth = $('#fluidLayoutMaxWidth');
  14                 var $fixedLayoutVariables = $('#fixedLayoutVariables');
  15                 function useFluidLayout() {
  16                         if ($useFluidLayout.is(':checked')) {
  17                                 $fluidLayoutMinWidth.show();
  18                                 $fluidLayoutMaxWidth.show();
  19                                 $fixedLayoutVariables.hide();
  20                         }
  21                         else {
  22                                 $fluidLayoutMinWidth.hide();
  23                                 $fluidLayoutMaxWidth.hide();
  24                                 $fixedLayoutVariables.show();
  25                         }
  26                 }
  27                 $useFluidLayout.change(useFluidLayout);
  28                 useFluidLayout();
  29
  30                 WCF.Language.addObject({
  31                         'wcf.global.button.upload': '{lang}wcf.global.button.upload{/lang}',
  32                         'wcf.style.colorPicker': '{lang}wcf.style.colorPicker{/lang}',
  33                         'wcf.style.colorPicker.new': '{lang}wcf.style.colorPicker.new{/lang}',
  34                         'wcf.style.colorPicker.current': '{lang}wcf.style.colorPicker.current{/lang}',
  35                         'wcf.style.colorPicker.button.apply': '{lang}wcf.style.colorPicker.button.apply{/lang}'
  36                 });
  37                 new WCF.ACP.Style.ImageUpload({if $action == 'add'}0{else}{@$style->styleID}{/if}, '{$tmpHash}');
  38
  39                 {if $action == 'edit'}
  40                         new WCF.ACP.Style.CopyStyle({@$style->styleID});
  41
  42                         WCF.Language.addObject({
  43                                 'wcf.acp.style.copyStyle.confirmMessage': '{@"wcf.acp.style.copyStyle.confirmMessage"|language|encodeJS}'
  44                         });
  45                 {/if}
  46
  47                 $('.jsUnitSelect').change(function(event) {
  48                         var $target = $(event.currentTarget);
  49                         $target.prev().attr('step', ($target.val() == 'em' ? '0.01' : '1'));
  50                 }).trigger('change');
  51
  52                 $('.tabMenuContainer').on('wcftabsbeforeactivate', function () {
  53                         setTimeout(function() {
  54                                 $('#individualLess')[0].codemirror.refresh();
  55                                 $('#overrideLess')[0].codemirror.refresh();
  56                         }, 100);
  57                 });
  58         });
  59         //]]>
  60 </script>
  61 <header class="boxHeadline">
  62         <h1>{lang}wcf.acp.style.{$action}{/lang}</h1>
  63         {if $action == 'edit'}<p>{$styleName}</p>{/if}
  64 </header>
  65
  66 {include file='formError'}
  67
  68 {if $success|isset}
  69         <p class="success">{lang}wcf.global.success.{$action}{/lang}</p>
  70 {/if}
  71
  72 <div class="contentNavigation">
  73         <nav>
  74                 <ul>
  75                         {if $action == 'edit'}
  76                                 <li><a href="{link controller='StyleExport' id=$style->styleID}{/link}" class="button"><span class="icon icon16 icon-download-alt"></span> <span>{lang}wcf.acp.style.exportStyle{/lang}</span></a></li>
  77                                 <li><a class="jsCopyStyle button"><span class="icon icon16 icon-copy"></span> <span>{lang}wcf.acp.style.copyStyle{/lang}</span></a></li>
  78                         {/if}
  79
  80                         <li><a href="{link controller='StyleList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.style.list{/lang}</span></a></li>
  81
  82                         {event name='contentNavigationButtons'}
  83                 </ul>
  84         </nav>
  85 </div>
  86
  87 <form method="post" action="{if $action == 'add'}{link controller='StyleAdd'}{/link}{else}{link controller='StyleEdit' id=$styleID}{/link}{/if}">
  88         <div class="tabMenuContainer" data-active="{$activeTabMenuItem}" data-store="activeTabMenuItem">
  89                 <nav class="tabMenu">
  90                         <ul>
  91                                 <li><a href="{@$__wcf->getAnchor('general')}">{lang}wcf.acp.style.general{/lang}</a></li>
  92                                 <li><a href="{@$__wcf->getAnchor('globals')}">{lang}wcf.acp.style.globals{/lang}</a></li>
  93                                 <li><a href="{@$__wcf->getAnchor('colors')}">{lang}wcf.acp.style.colors{/lang}</a></li>
  94                                 <li><a href="{@$__wcf->getAnchor('advanced')}">{lang}wcf.acp.style.advanced{/lang}</a></li>
  95
  96                                 {event name='tabMenuTabs'}
  97                         </ul>
  98                 </nav>
  99
 100                 {* general *}
 101                 <div id="general" class="container containerPadding tabMenuContent">
 102                         <fieldset>
 103                                 <legend>{lang}wcf.acp.style.general.data{/lang}</legend>
 104
 105                                 <dl{if $errorField == 'styleName'} class="formError"{/if}>
 106                                         <dt><label for="styleName">{lang}wcf.acp.style.styleName{/lang}</label></dt>
 107                                         <dd>
 108                                                 <input type="text" name="styleName" id="styleName" value="{$styleName}" class="long" />
 109                                                 {if $errorField == 'styleName'}
 110                                                         <small class="innerError">
 111                                                                 {if $errorType == 'empty'}
 112                                                                         {lang}wcf.global.form.error.empty{/lang}
 113                                                                 {else}
 114                                                                         {lang}wcf.acp.style.styleName.error.{$errorType}{/lang}
 115                                                                 {/if}
 116                                                         </small>
 117                                                 {/if}
 118                                         </dd>
 119                                 </dl>
 120                                 <dl{if $errorField == 'authorName'} class="formError"{/if}>
 121                                         <dt><label for="authorName">{lang}wcf.acp.style.authorName{/lang}</label></dt>
 122                                         <dd>
 123                                                 <input type="text" name="authorName" id="authorName" value="{$authorName}" class="long" />
 124                                                 {if $errorField == 'authorName'}
 125                                                         <small class="innerError">
 126                                                                 {if $errorType == 'empty'}
 127                                                                         {lang}wcf.global.form.error.empty{/lang}
 128                                                                 {else}
 129                                                                         {lang}wcf.acp.style.authorName.error.{$errorType}{/lang}
 130                                                                 {/if}
 131                                                         </small>
 132                                                 {/if}
 133                                         </dd>
 134                                 </dl>
 135                                 <dl{if $errorField == 'copyright'} class="formError"{/if}>
 136                                         <dt><label for="copyright">{lang}wcf.acp.style.copyright{/lang}</label></dt>
 137                                         <dd>
 138                                                 <input type="text" name="copyright" id="copyright" value="{$copyright}" class="long" />
 139                                                 {if $errorField == 'copyright'}
 140                                                         <small class="innerError">
 141                                                                 {if $errorType == 'empty'}
 142                                                                         {lang}wcf.global.form.error.empty{/lang}
 143                                                                 {else}
 144                                                                         {lang}wcf.acp.style.copyright.error.{$errorType}{/lang}
 145                                                                 {/if}
 146                                                         </small>
 147                                                 {/if}
 148                                         </dd>
 149                                 </dl>
 150                                 <dl{if $errorField == 'styleVersion'} class="formError"{/if}>
 151                                         <dt><label for="styleVersion">{lang}wcf.acp.style.styleVersion{/lang}</label></dt>
 152                                         <dd>
 153                                                 <input type="text" name="styleVersion" id="styleVersion" value="{$styleVersion}" class="small" />
 154                                                 {if $errorField == 'styleVersion'}
 155                                                         <small class="innerError">
 156                                                                 {if $errorType == 'empty'}
 157                                                                         {lang}wcf.global.form.error.empty{/lang}
 158                                                                 {else}
 159                                                                         {lang}wcf.acp.style.styleVersion.error.{$errorType}{/lang}
 160                                                                 {/if}
 161                                                         </small>
 162                                                 {/if}
 163                                         </dd>
 164                                 </dl>
 165                                 <dl{if $errorField == 'styleDate'} class="formError"{/if}>
 166                                         <dt><label for="styleDate">{lang}wcf.acp.style.styleDate{/lang}</label></dt>
 167                                         <dd>
 168                                                 <input type="date" name="styleDate" id="styleDate" value="{$styleDate}" class="small" />
 169                                                 {if $errorField == 'styleDate'}
 170                                                         <small class="innerError">
 171                                                                 {if $errorType == 'empty'}
 172                                                                         {lang}wcf.global.form.error.empty{/lang}
 173                                                                 {else}
 174                                                                         {lang}wcf.acp.style.styleDate.error.{$errorType}{/lang}
 175                                                                 {/if}
 176                                                         </small>
 177                                                 {/if}
 178                                         </dd>
 179                                 </dl>
 180                                 <dl{if $errorField == 'license'} class="formError"{/if}>
 181                                         <dt><label for="license">{lang}wcf.acp.style.license{/lang}</label></dt>
 182                                         <dd>
 183                                                 <input type="text" name="license" id="license" value="{$license}" class="long" />
 184                                                 {if $errorField == 'license'}
 185                                                         <small class="innerError">
 186                                                                 {if $errorType == 'empty'}
 187                                                                         {lang}wcf.global.form.error.empty{/lang}
 188                                                                 {else}
 189                                                                         {lang}wcf.acp.style.license.error.{$errorType}{/lang}
 190                                                                 {/if}
 191                                                         </small>
 192                                                 {/if}
 193                                         </dd>
 194                                 </dl>
 195                                 <dl{if $errorField == 'authorURL'} class="formError"{/if}>
 196                                         <dt><label for="authorURL">{lang}wcf.acp.style.authorURL{/lang}</label></dt>
 197                                         <dd>
 198                                                 <input type="text" name="authorURL" id="authorURL" value="{$authorURL}" class="long" />
 199                                                 {if $errorField == 'authorURL'}
 200                                                         <small class="innerError">
 201                                                                 {if $errorType == 'empty'}
 202                                                                         {lang}wcf.global.form.error.empty{/lang}
 203                                                                 {else}
 204                                                                         {lang}wcf.acp.style.authorURL.error.{$errorType}{/lang}
 205                                                                 {/if}
 206                                                         </small>
 207                                                 {/if}
 208                                         </dd>
 209                                 </dl>
 210                                 <dl{if $errorField == 'styleDescription'} class="formError"{/if}>
 211                                         <dt><label for="styleDescription">{lang}wcf.acp.style.styleDescription{/lang}</label></dt>
 212                                         <dd>
 213                                                 <textarea name="styleDescription" id="styleDescription">{$i18nPlainValues['styleDescription']}</textarea>
 214                                                 {if $errorField == 'styleDescription'}
 215                                                         <small class="innerError">
 216                                                                 {if $errorType == 'empty'}
 217                                                                         {lang}wcf.global.form.error.empty{/lang}
 218                                                                 {else}
 219                                                                         {lang}wcf.acp.style.styleDescription.error.{$errorType}{/lang}
 220                                                                 {/if}
 221                                                         </small>
 222                                                 {/if}
 223
 224                                                 {include file='multipleLanguageInputJavascript' elementIdentifier='styleDescription' forceSelection=true}
 225                                         </dd>
 226                                 </dl>
 227
 228                                 {event name='dataFields'}
 229                         </fieldset>
 230
 231                         <fieldset>
 232                                 <legend>{lang}wcf.acp.style.general.files{/lang}</legend>
 233
 234                                 <dl{if $errorField == 'image'} class="formError"{/if}>
 235                                         <dt><label for="image">{lang}wcf.acp.style.image{/lang}</label></dt>
 236                                         <dd class="framed">
 237                                                 <img src="{if $action == 'add'}{@$__wcf->getPath()}images/stylePreview.png{else}{@$style->getPreviewImage()}{/if}" alt="" id="styleImage" />
 238                                                 <div id="uploadImage"></div>
 239                                                 {if $errorField == 'image'}
 240                                                         <small class="innerError">
 241                                                                 {if $errorType == 'empty'}
 242                                                                         {lang}wcf.global.form.error.empty{/lang}
 243                                                                 {else}
 244                                                                         {lang}wcf.acp.style.image.error.{$errorType}{/lang}
 245                                                                 {/if}
 246                                                         </small>
 247                                                 {/if}
 248                                                 <small>{lang}wcf.acp.style.image.description{/lang}</small>
 249                                         </dd>
 250                                 </dl>
 251                                 {if $availableTemplateGroups|count}
 252                                         <dl{if $errorField == 'templateGroupID'} class="formError"{/if}>
 253                                                 <dt><label for="templateGroupID">{lang}wcf.acp.style.templateGroupID{/lang}</label></dt>
 254                                                 <dd>
 255                                                         <select name="templateGroupID" id="templateGroupID">
 256                                                                 <option value="0">{lang}wcf.acp.template.group.default{/lang}</option>
 257                                                                 {foreach from=$availableTemplateGroups item=templateGroup}
 258                                                                         <option value="{@$templateGroup->templateGroupID}"{if $templateGroup->templateGroupID == $templateGroupID} selected="selected"{/if}>{$templateGroup->templateGroupName}</option>
 259                                                                 {/foreach}
 260                                                         </select>
 261                                                         {if $errorField == 'templateGroupID'}
 262                                                                 <small class="innerError">
 263                                                                         {if $errorType == 'empty'}
 264                                                                                 {lang}wcf.global.form.error.empty{/lang}
 265                                                                         {else}
 266                                                                                 {lang}wcf.acp.style.templateGroupID.error.{$errorType}{/lang}
 267                                                                         {/if}
 268                                                                 </small>
 269                                                         {/if}
 270                                                 </dd>
 271                                         </dl>
 272                                 {/if}
 273                                 <dl{if $errorField == 'imagePath'} class="formError"{/if}>
 274                                         <dt><label for="imagePath">{lang}wcf.acp.style.imagePath{/lang}</label></dt>
 275                                         <dd>
 276                                                 <input type="text" name="imagePath" id="imagePath" value="{$imagePath}" class="long" />
 277                                                 {if $errorField == 'imagePath'}
 278                                                         <small class="innerError">
 279                                                                 {if $errorType == 'empty'}
 280                                                                         {lang}wcf.global.form.error.empty{/lang}
 281                                                                 {else}
 282                                                                         {lang}wcf.acp.style.imagePath.error.{$errorType}{/lang}
 283                                                                 {/if}
 284                                                         </small>
 285                                                 {/if}
 286                                                 <small>{lang}wcf.acp.style.imagePath.description{/lang}</small>
 287                                         </dd>
 288                                 </dl>
 289
 290                                 {event name='fileFields'}
 291                         </fieldset>
 292
 293                         {event name='generalFieldsets'}
 294                 </div>
 295
 296                 {* globals *}
 297                 <div id="globals" class="container containerPadding tabMenuContent">
 298                         {* layout *}
 299                         <fieldset>
 300                                 <legend>{lang}wcf.acp.style.globals.layout{/lang}</legend>
 301
 302                                 <dl>
 303                                         <dt></dt>
 304                                         <dd><label>
 305                                                 <input type="checkbox" id="useFluidLayout" name="useFluidLayout" value="1"{if $variables[useFluidLayout]} checked="checked"{/if} />
 306                                                 <span>{lang}wcf.acp.style.globals.useFluidLayout{/lang}</span>
 307                                         </label></dd>
 308                                 </dl>
 309
 310                                 <dl id="fluidLayoutMinWidth">
 311                                         <dt><label for="wcfLayoutMinWidth">{lang}wcf.acp.style.globals.fluidLayoutMinWidth{/lang}</label></dt>
 312                                         <dd>
 313                                                 <input type="number" id="wcfLayoutMinWidth" name="wcfLayoutMinWidth" value="{@$variables[wcfLayoutMinWidth]}" class="tiny" />
 314                                                 <select name="wcfLayoutMinWidth_unit" class="jsUnitSelect">
 315                                                         {foreach from=$availableUnits item=unit}
 316                                                                 <option value="{@$unit}"{if $variables[wcfLayoutMinWidth_unit] == $unit} selected="selected"{/if}>{@$unit}</option>
 317                                                         {/foreach}
 318                                                 </select>
 319                                         </dd>
 320                                 </dl>
 321                                 <dl id="fluidLayoutMaxWidth">
 322                                         <dt><label for="wcfLayoutMaxWidth">{lang}wcf.acp.style.globals.fluidLayoutMaxWidth{/lang}</label></dt>
 323                                         <dd>
 324                                                 <input type="number" id="wcfLayoutMaxWidth" name="wcfLayoutMaxWidth" value="{@$variables[wcfLayoutMaxWidth]}" class="tiny" />
 325                                                 <select name="wcfLayoutMaxWidth_unit" class="jsUnitSelect">
 326                                                         {foreach from=$availableUnits item=unit}
 327                                                                 <option value="{@$unit}"{if $variables[wcfLayoutMaxWidth_unit] == $unit} selected="selected"{/if}>{@$unit}</option>
 328                                                         {/foreach}
 329                                                 </select>
 330                                         </dd>
 331                                 </dl>
 332
 333                                 <dl id="fixedLayoutVariables">
 334                                         <dt><label for="wcfLayoutFixedWidth">{lang}wcf.acp.style.globals.fixedLayoutWidth{/lang}</label></dt>
 335                                         <dd>
 336                                                 <input type="number" id="wcfLayoutFixedWidth" name="wcfLayoutFixedWidth" value="{@$variables[wcfLayoutFixedWidth]}" class="tiny" />
 337                                                 <select name="wcfLayoutFixedWidth_unit" class="jsUnitSelect">
 338                                                         {foreach from=$availableUnits item=unit}
 339                                                                 <option value="{@$unit}"{if $variables[wcfLayoutFixedWidth_unit] == $unit} selected="selected"{/if}>{@$unit}</option>
 340                                                         {/foreach}
 341                                                 </select>
 342                                         </dd>
 343                                 </dl>
 344
 345                                 {event name='layoutFields'}
 346                         </fieldset>
 347
 348                         {* logo *}
 349                         <fieldset>
 350                                 <legend>{lang}wcf.acp.style.globals.pageLogo{/lang}</legend>
 351
 352                                 <dl>
 353                                         <dt><label for="pageLogo">{lang}wcf.acp.style.globals.pageLogo{/lang}</label></dt>
 354                                         <dd>
 355                                                 <input type="text" name="pageLogo" id="pageLogo" value="{$variables[pageLogo]}" class="long" />
 356                                                 <small>{lang}wcf.acp.style.globals.pageLogo.description{/lang}</small>
 357                                         </dd>
 358                                 </dl>
 359
 360                                 {event name='logoFields'}
 361                         </fieldset>
 362
 363                         {* font *}
 364                         <fieldset>
 365                                 <legend>{lang}wcf.acp.style.globals.font{/lang}</legend>
 366
 367                                 <dl>
 368                                         <dt><label for="wcfBaseFontSize">{lang}wcf.acp.style.globals.fontSize{/lang}</label></dt>
 369                                         <dd>
 370                                                 <input type="number" id="wcfBaseFontSize" name="wcfBaseFontSize" value="{@$variables[wcfBaseFontSize]}" class="tiny" />
 371                                                 <select name="wcfBaseFontSize_unit" class="jsUnitSelect">
 372                                                         {foreach from=$availableUnits item=unit}
 373                                                                 <option value="{@$unit}"{if $variables[wcfBaseFontSize_unit] == $unit} selected="selected"{/if}>{@$unit}</option>
 374                                                         {/foreach}
 375                                                 </select>
 376                                         </dd>
 377                                 </dl>
 378                                 <dl>
 379                                         <dt><label for="wcfBaseFontFamily">{lang}wcf.acp.style.globals.fontFamily{/lang}</label></dt>
 380                                         <dd>
 381                                                 <select name="wcfBaseFontFamily" id="wcfBaseFontFamily">
 382                                                         {foreach from=$availableFontFamilies key=fontFamily item=primaryFont}
 383                                                                 <option value='{@$fontFamily}'{if $variables[wcfBaseFontFamily] == $fontFamily} selected="selected"{/if}>{@$primaryFont}</option>
 384                                                         {/foreach}
 385                                                 </select>
 386                                         </dd>
 387                                 </dl>
 388
 389                                 {event name='fontFields'}
 390                         </fieldset>
 391
 392                         {event name='globalFieldsets'}
 393                 </div>
 394
 395                 {* colors *}
 396                 <div id="colors" class="container containerPadding tabMenuContent">
 397                         <fieldset>
 398                                 <legend>{lang}wcf.acp.style.colors.page{/lang}</legend>
 399
 400                                 {* page *}
 401                                 <ul class="colorList">
 402                                         <li>{include file='styleVariableColor' variableName='wcfPageBackgroundColor' languageVariable='backgroundColor'}</li>
 403                                         <li>{include file='styleVariableColor' variableName='wcfPageColor' languageVariable='color'}</li>
 404                                         <li>{include file='styleVariableColor' variableName='wcfPageLinkColor' languageVariable='linkColor'}</li>
 405                                         <li>{include file='styleVariableColor' variableName='wcfPageLinkHoverColor' languageVariable='linkHoverColor'}</li>
 406
 407                                         {event name='pageColorListItems'}
 408                                 </ul>
 409
 410                                 {event name='pageColorLists'}
 411                         </fieldset>
 412
 413                         <fieldset>
 414                                 <legend>{lang}wcf.acp.style.colors.content{/lang}</legend>
 415
 416                                 {* content *}
 417                                 <ul class="colorList">
 418                                         <li>{include file='styleVariableColor' variableName='wcfContentBackgroundColor' languageVariable='backgroundColor'}</li>
 419                                         <li>{include file='styleVariableColor' variableName='wcfColor' languageVariable='color'}</li>
 420                                         <li>{include file='styleVariableColor' variableName='wcfDimmedColor' languageVariable='dimmedColor'}</li>
 421                                         <li>{include file='styleVariableColor' variableName='wcfLinkColor' languageVariable='linkColor'}</li>
 422                                         <li>{include file='styleVariableColor' variableName='wcfLinkHoverColor' languageVariable='linkHoverColor'}</li>
 423
 424                                         {event name='contentColorListItems'}
 425                                 </ul>
 426
 427                                 {event name='contentColorLists'}
 428                         </fieldset>
 429
 430                         <fieldset>
 431                                 <legend>{lang}wcf.acp.style.colors.container{/lang}</legend>
 432
 433                                 {* general *}
 434                                 <ul class="colorList">
 435                                         <li>{include file='styleVariableColor' variableName='wcfContainerBackgroundColor' languageVariable='backgroundColor'}</li>
 436                                         <li>{include file='styleVariableColor' variableName='wcfContainerAccentBackgroundColor' languageVariable='accentBackgroundColor'}</li>
 437                                         <li>{include file='styleVariableColor' variableName='wcfContainerBorderColor' languageVariable='borderColor'}</li>
 438                                         <li>{include file='styleVariableColor' variableName='wcfContainerHoverBackgroundColor' languageVariable='hoverBackgroundColor'}</li>
 439
 440                                         {event name='containerColorListItems'}
 441                                 </ul>
 442
 443                                 {event name='containerColorLists'}
 444                         </fieldset>
 445
 446                         <fieldset>
 447                                 <legend>{lang}wcf.acp.style.colors.userPanel{/lang}</legend>
 448
 449                                 {* user panel *}
 450                                 <ul class="colorList">
 451                                         <li>{include file='styleVariableColor' variableName='wcfUserPanelBackgroundColor' languageVariable='backgroundColor'}</li>
 452                                         <li>{include file='styleVariableColor' variableName='wcfUserPanelColor' languageVariable='color'}</li>
 453                                         <li>{include file='styleVariableColor' variableName='wcfUserPanelHoverBackgroundColor' languageVariable='hoverBackgroundColor'}</li>
 454                                         <li>{include file='styleVariableColor' variableName='wcfUserPanelHoverColor' languageVariable='hoverColor'}</li>
 455
 456                                         {event name='userPanelColorListItems'}
 457                                 </ul>
 458
 459                                 {event name='userPanelColorLists'}
 460                         </fieldset>
 461
 462                         <fieldset>
 463                                 <legend>{lang}wcf.acp.style.colors.tabular{/lang}</legend>
 464
 465                                 {* general *}
 466                                 <ul class="colorList">
 467                                         <li>{include file='styleVariableColor' variableName='wcfTabularBoxBackgroundColor' languageVariable='backgroundColor'}</li>
 468                                         <li>{include file='styleVariableColor' variableName='wcfTabularBoxColor' languageVariable='color'}</li>
 469                                         <li>{include file='styleVariableColor' variableName='wcfTabularBoxHoverColor' languageVariable='hoverColor'}</li>
 470
 471                                         {event name='tabularColorListItems'}
 472                                 </ul>
 473
 474                                 {event name='tabularColorLists'}
 475                         </fieldset>
 476
 477                         <fieldset>
 478                                 <legend>{lang}wcf.acp.style.colors.buttons{/lang}</legend>
 479
 480                                 {* default button *}
 481                                 <ul class="colorList">
 482                                         <li>{include file='styleVariableColor' variableName='wcfButtonBackgroundColor' languageVariable='backgroundColor'}</li>
 483                                         <li>{include file='styleVariableColor' variableName='wcfButtonBorderColor' languageVariable='borderColor'}</li>
 484                                         <li>{include file='styleVariableColor' variableName='wcfButtonColor' languageVariable='color'}</li>
 485
 486                                         {event name='defaultButtonColorListItems'}
 487                                 </ul>
 488
 489                                 {* button:hover *}
 490                                 <ul class="colorList">
 491                                         <li>{include file='styleVariableColor' variableName='wcfButtonHoverBackgroundColor' languageVariable='hoverBackgroundColor'}</li>
 492                                         <li>{include file='styleVariableColor' variableName='wcfButtonHoverBorderColor' languageVariable='hoverBorderColor'}</li>
 493                                         <li>{include file='styleVariableColor' variableName='wcfButtonHoverColor' languageVariable='hoverColor'}</li>
 494
 495                                         {event name='hoverButtonColorListItems'}
 496                                 </ul>
 497
 498                                 {* primary button *}
 499                                 <ul class="colorList">
 500                                         <li>{include file='styleVariableColor' variableName='wcfButtonPrimaryBackgroundColor' languageVariable='primaryBackgroundColor'}</li>
 501                                         <li>{include file='styleVariableColor' variableName='wcfButtonPrimaryBorderColor' languageVariable='primaryBorderColor'}</li>
 502                                         <li>{include file='styleVariableColor' variableName='wcfButtonPrimaryColor' languageVariable='primaryColor'}</li>
 503
 504                                         {event name='primaryButtonColorListItems'}
 505                                 </ul>
 506
 507                                 {event name='buttonsColorLists'}
 508                         </fieldset>
 509
 510                         <fieldset>
 511                                 <legend>{lang}wcf.acp.style.colors.formInput{/lang}</legend>
 512
 513                                 {* form input *}
 514                                 <ul class="colorList">
 515                                         <li>{include file='styleVariableColor' variableName='wcfInputBackgroundColor' languageVariable='backgroundColor'}</li>
 516                                         <li>{include file='styleVariableColor' variableName='wcfInputBorderColor' languageVariable='borderColor'}</li>
 517                                         <li>{include file='styleVariableColor' variableName='wcfInputColor' languageVariable='color'}</li>
 518                                         <li>{include file='styleVariableColor' variableName='wcfInputHoverBackgroundColor' languageVariable='hoverBackgroundColor'}</li>
 519                                         <li>{include file='styleVariableColor' variableName='wcfInputHoverBorderColor' languageVariable='hoverBorderColor'}</li>
 520
 521                                         {event name='formInputColorListItems'}
 522                                 </ul>
 523
 524                                 {event name='formInputColorLists'}
 525                         </fieldset>
 526
 527                         {event name='colorFieldsets'}
 528                 </div>
 529
 530                 {* advanced *}
 531                 <div id="advanced" class="container containerPadding tabMenuContent">
 532                         <fieldset class="marginTop">
 533                                 <legend>{lang}wcf.acp.style.advanced.individualLess{/lang}</legend>
 534
 535                                 <dl class="wide">
 536                                         <dd>
 537                                                 <textarea id="individualLess" rows="20" cols="40" name="individualLess">{$variables[individualLess]}</textarea>
 538                                                 <small>{lang}wcf.acp.style.advanced.individualLess.description{/lang}</small>
 539                                         </dd>
 540                                 </dl>
 541                         </fieldset>
 542
 543                         <fieldset{if $errorField == 'overrideLess'} class="formError"{/if}>
 544                                 <legend>{lang}wcf.acp.style.advanced.overrideLess{/lang}</legend>
 545
 546                                 <dl class="wide">
 547                                         <dd>
 548                                                 <textarea id="overrideLess" rows="20" cols="40" name="overrideLess">{$variables[overrideLess]}</textarea>
 549                                                 {if $errorField == 'overrideLess'}
 550                                                         <small class="innerError">
 551                                                                 {lang}wcf.acp.style.advanced.overrideLess.error{/lang}
 552                                                                 {implode from=$errorType item=error}{lang}wcf.acp.style.advanced.overrideLess.error.{$error.error}{/lang}{/implode}
 553                                                         </small>
 554                                                 {/if}
 555                                                 <small>{lang}wcf.acp.style.advanced.overrideLess.description{/lang}</small>
 556                                         </dd>
 557                                 </dl>
 558                         </fieldset>
 559                         {include file='codemirror' codemirrorMode='text/x-less' codemirrorSelector='#individualLess, #overrideLess'}
 560
 561                         {event name='syntaxFieldsets'}
 562                 </div>
 563
 564                 {event name='tabMenuContents'}
 565         </div>
 566
 567         <div class="formSubmit">
 568                 <input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
 569                 <input type="hidden" name="tmpHash" value="{$tmpHash}" />
 570                 {@SECURITY_TOKEN_INPUT_TAG}
 571         </div>
 572 </form>
 573
 574 {include file='footer'}