1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - коммерческий форумный движок от бывших создателей vBulletin, написанный на PHP.

Красим кнопки в админке

Тема в разделе "Модификации шаблонов", создана пользователем arelav, 18.07.2011.

Загрузка
  1. arelav

    arelav Местный

    Регистрация:
    07.06.11
    Сообщения:
    166
    Симпатии:
    355
    Версия XF:
    1.1.0 Final
    Красим кнопки в админке

    1.png
    Меня давно раздражал текущий стиль кнопок в админке, ну не любитель я таких изваяний с текстом, что его прочесть трудно. В общем пока случайно не тыцнул в стили и не увидел где их заменить можно... В общем если ваш вкус совпадает с моим, - тогда можно читать далее, если нет, - а на нэт и суда нэт ;)

    За основу я взял внешний вид кнопок Mac OS Lion, набросав их состояния в CSS и удостоверившись, что все устраивает, взялся красить админку... Посмотреть можно рабочие кнопки здесь: http://aquasys.com.ua/test/

    Заметка: первое, что хочу сказать, - любые изменения и эксперименты Вы легко сможете вернуть до исходного состояния нажав галку в боксе (когда что-то меняли), и жмем кнопу сохранить изменения...

    2.png

    И так к делу: чтобы добраться до этих опций, Вам необходимо перевести форум в режим разработки, для этого необходимо в файле /library/config.php вписать строчку
    PHP:
    $config['debug'] = true;
    После чего у Вас в админке появится закладка Разработка. Вот ее и жмем, в ней выбираем Настройки стиля панели а там уже и Кнопки...

    4.png

    Далее в разделах основных состояний кнопок вычищаем все поля, либо заполняем их на основании стилей, ниже. Но чтобы долго не заполнять, ведь в сущности это одно и тоже, можно попросту настройки стилей поместить в последнее поле... Даже если вверху будет подобный параметр, и совпадет с параметрами помещаемыми в последннее поле этой формы, - эти настройки будут проигнорированы, так как параметр будет принят следующий в списке. Дубляж не страшен...
    3.png

    Ниже представлены коды для замены для разный состояний кнопок (см. подчеркнутые разделы):

    Кнопка (общие параметры):
    Код:
        outline:none;
        font-weight:bold;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #050505;
        padding: 3px 12px;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        background: -moz-linear-gradient(
            top,
            #ffffff 0%,
            #F0F0F0 50%,
            #EDEDED 50%,
            #F2F2F2);
        background: -webkit-gradient(
            linear, left top, left bottom,
            from(#ffffff),
            color-stop(0.50, #F0F0F0),
            color-stop(0.50, #EDEDED),
            to(#F2F2F2));
        background:    -o-linear-gradient(#ffffff, #F0F0F0 50%, #EDEDED 50%, #F2F2F2 );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F2F2F2');
        border: 1px solid #949494;
        -moz-box-shadow:  0px 1px 0px rgba(190,190,190,0.3);
        -webkit-box-shadow: 0px 1px 0px rgba(190,190,190,0.3);
    
    Кнопка (focus и hover):
    Код:
        background: -moz-linear-gradient(
            top,
            #E2F6FD 0%,
            #A4CFF7 50%,
            #89C3F6 50%,
            #D2F5FD);
        background: -webkit-gradient(
            linear, left top, left bottom,
            from(#E2F6FD),
            color-stop(0.50, #A4CFF7),
            color-stop(0.50, #89C3F6),
            to(#D2F5FD));
        background:    -o-linear-gradient(#E2F6FD, #A4CFF7 50%, #89C3F6 50%, #D2F5FD );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E2F6FD', endColorstr='#D2F5FD');
        border-top: 1px solid #5E5DAD;
        border-bottom: 1px solid #52526D;
        border-left: 1px solid #585794;
        border-right: 1px solid #585794;
        -moz-box-shadow:  0px 1px 0px rgba(190,190,190,0.3);
        -webkit-box-shadow: 0px 1px 0px rgba(190,190,190,0.3);
    
    Кнопка (active):
    Код:
        background: -moz-linear-gradient(
            top,
            #BCD6EE 0%,
            #6C9FE6 50%,
            #4E91E5 50%,
            #ACD4ED);
        background: -webkit-gradient(
            linear, left top, left bottom,
            from(#BCD6EE),
            color-stop(0.50, #6C9FE6),
            color-stop(0.50, #4E91E5),
            to(#ACD4ED));
        background:    -o-linear-gradient(#BCD6EE, #6C9FE6 50%, #4E91E5 50%, #ACD4ED );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#BCD6EE', endColorstr='#ACD4ED');
        border-top: 1px solid #5252A8;
        border-bottom: 1px solid #45456F;
        border-left: 1px solid #4B4A8D;
        border-right: 1px solid #4B4A8D;
        -moz-box-shadow:  0px 1px 0px rgba(190,190,190,0.3);
        -webkit-box-shadow: 0px 1px 0px rgba(190,190,190,0.3);
    
    Вот состояние disabled не нашел, и стиль класса .spinBoxButton, может кто находил его?! дайте знать если что... Докрашу...

    Код кнопки для состояния disabled, но как говорил выше, не нашел...
    Код:
        color: #919191 !important;
        background: -moz-linear-gradient(
            top,
            #F1F1F1 0%,
            #EDEDED 50%,
            #EDEDED 50%,
            #E9E9E9) !important;
        background: -webkit-gradient(
            linear, left top, left bottom,
            from(#F1F1F1),
            color-stop(0.50, #EDEDED),
            color-stop(0.50, #EDEDED),
            to(#E9E9E9)) !important;
        background:    -o-linear-gradient(#F1F1F1, #EDEDED 50%, #EDEDED 50%, #E9E9E9 ) !important;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F1F1F1', endColorstr='#E9E9E9') !important;
        border-top: 1px solid #D9D9D9 !important;
        border-bottom: 1px solid #D1D1D1 !important;
        border-left: 1px solid #D5D5D5 !important;
        border-right: 1px solid #D5D5D5 !important;
        box-shadow:  0px 1px 0px rgba(240,240,240,0.2) !important;
        -moz-box-shadow:  0px 1px 0px rgba(240,240,240,0.2) !important;
        -webkit-box-shadow: 0px 1px 0px rgba(240,240,240,0.2) !important;
    
    ПЫСЫ: все это для нормальных браузеров, с ИЕ сюда ваще лучше не соваться :)
     
    TheShack, Romchik®, Gatses и ещё 1-му нравится это.
  2. infis

    infis Местный

    Регистрация:
    27.06.11
    Сообщения:
    5 966
    Симпатии:
    3 548
    Версия XF:
    1.5.9
    Красиво оформлено. Кстати, чем делали?
    Поиск в шаблонах не пробовали использовать? Там замечательно находится в том числе и слово "spinBoxButton" :)
     
    MODDERN, Traffic и arelav нравится это.
  3. arelav

    arelav Местный

    Регистрация:
    07.06.11
    Сообщения:
    166
    Симпатии:
    355
    Версия XF:
    1.1.0 Final
    В закладке Разработка нет поиска по шаблонам... Это шаблоны админки... Боюсь, что если spinBoxButton есть в общих шаблонах, то изменения повлияют на внешний вид, а я же крашу админку...

    5.png

    Что значит чем делал?! -CSS, собственно далее текстовый редактор :)

    --- добавлено : 18 июл 2011 в 04:01 ---

    В общем в общих шаблонах нашел form.css и дописал немножко класс .button.spinBoxButton (последние три строчки), а то кнопки превратились в КНОПАКИ ;) Помогло... спасибо infis, натолкнул на мысль, хотя я бы там и не искал...
    Код:
    .button.spinBoxButton
    {
        font-family: @body.font-family;
        font-size: 11pt;
        height:24px;
        width:24px;
        padding:0px;
    }
    ПЫСЫ: на внешней стороне вродибы не испортил...
     
  4. arelav

    arelav Местный

    Регистрация:
    07.06.11
    Сообщения:
    166
    Симпатии:
    355
    Версия XF:
    1.1.0 Final
    Управляющие элементы (только для Google Chrome)

    Предисловие: Я использую браузер Google Chrome по нескольким причинам: он самый быстрый, так как его движок работает в многопоточном режиме, а также потому, что дает максимум свободы для разработчика. Поскольку данная модификация не влияет на пользовательскую сторону отображения, я смог расслабиться и забить на другие браузеры, в любом случае многие или не умеют совсем, либо частично отображать то, что мне нужно, либо я не умею, или не хочу плясать под них с бубном :) ...

    Что получим в результате после установки: это стилизованные элементы управления под Mac OS Lion (select, checkbox, radio, button.disabled)

    b.png
    a.png

    Установка: открываем в админке шаблон form.css, и добавляем вниз (картинки включены в код):

    Код:
    /*Управляющие элементы Mac OS Lion
    (только для G-Хрома)
    элементы: select, checkbox, radio, button.disabled
    версия альфа
    */
    .Admin select {outline:none;-webkit-appearance: button;-webkit-user-select: none;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADESURBVHjaYvj//z8DCHd1df2HsXFhgABiYgCCtWvX/t+zZw/D6tWr/zPgAQABxPT8+fP/y5cvZ+Dl5WVYuXIlA4iPSzFAADHNmDGDgYmJiYGTkxNMT506FafJAAHECHILsQAggJgYSAAAAUSSYoAAYiwpKfl/7tw5BkZGRnDwGBgYMPT29jJiUwwQQEzZ2dkMEhISDEJCQmA6NzcXp8kAAcSkoKDAGBISwsDOzs4QFBTEAOLjUgwQQPDYmTBhAsEYBAgwAKE8a5mop3s0AAAAAElFTkSuQmCC"), -webkit-linear-gradient(#ffffff 0%, #F0F0F0 50%,#EDEDED 50%, #F2F2F2);background-position: center right;background-repeat: no-repeat;border: 1px solid #949494;border-radius: 4px;-webkit-border-radius: 4px;-webkit-box-shadow: 0px 1px 0px rgba(190,190,190,0.3);color: #555;font-family: tahoma,arial, sans serif;text-shadow:none;font-size: 11px;margin: 0;overflow: hidden;padding-right: 10px;padding-left: 3px;padding-top: 2px;padding-bottom: 2px;text-overflow: ellipsis;white-space: nowrap;}
    .Admin input[type=checkbox], .Admin input[type=radio] {display: inline-block;font-size: 15px;line-height: 1em;margin: 1px 0 0 -5px;padding: 0;width: 1.25em;height: 1.25em;-webkit-border-radius: 0.25em;-webkit-appearance: none;vertical-align: text-top;outline:none;}
    .Admin input[type=checkbox] {margin: 0 0 0 -2px;}
    .Admin input[type=checkbox]:checked {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAARCAYAAAACCvahAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAALdSURBVHjaYvj//z8DKfjYybNbNaz8/4cmFf8HCCBGkAApQN8h5P+Vm/cYFGQkGQACiOX+/edbjx9/5nXhwmuGVy+/4dX44NUpBpBGEGguz9wGEECMSxaf+v/ozS8GEzslBjVNCQZmZgYGRkZGBkaoBpC7QK67d+8xg6tbCMOf338YLPSNGY7umM0IEEAs5y8+Y7ANNmUQlZZg+PQZqJEJiBlQvQLiFRc3gDUK8PMx6Ks6gMUBAojl+fMPDIISYgzffvwC2sgAshZuKwxs3LCB4dy5C2B2ZUUJw/k9b8FsgABi+v/vF8PXX/8YvgFxWUkZg4udPcOBg0cYfvz+D8ZPnr1imD5pClixvb01g7mDOwNIDwgABBATw/8/YEXf/zAyPLh3l+HHj58MbY0NDLfvP2T49oeBob+nm+Hzly8M3FxcDCXllQxvvv5jAOkBAYAAAmr+xfDtNwNQMwNDS1srAwcHO8NXoOLW6kqGTUDnnjhyGKwwtyCX4TubEFgtSA8IAAQQ0z+G3wyPPv5neADEXwXVGUpr68ESjx/eZ5jd3wlm6xgYMKjaBjLcff8frBakBwQAAojp///fDGysTGD85z8Tg7KpM0NadjY8sNjYWBnyK2oZPgEtg6kD6QEBgABiYWD4xcDHxcjAAowiJiagBDCofaPiGT68fc2wYd16htLKCgYucVkGZqC3/v37x/DnHyguIM4GCCCW/0AGDycjA9BAeAIBmZtTXsZQVVPG8PrHf7Ct7Gz/Gf7+Bcr9A6UCiGaAAGIRE+Vl+PbyAYOMsjwDK9B6JiZIPIPC8x0wYJnZGBkE2EC2/mf4/ecvw5O7DxhAekAAIIBY9PWVGO6fOMrAx/6fQUFLCWfy/PsXGKjXHgDVHmMA6QEBgABisbXVT/l/6NycA4tXMLx48RZvxpCQEGbQ11NhAOkB8QECCJwlnz9/nvz7929wgOADoABlZWVlkJSUnAviAwQYAJ6cQs6djiKaAAAAAElFTkSuQmCC") no-repeat center center;-webkit-background-size: 15px 17px;}
    .Admin input[type=checkbox]:disabled {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAARCAYAAAACCvahAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAEISURBVHjaYvz//z8DuQAggJgYKAAAAcQCIiZNmqQFpIyBmIOA+l9AfDYvL+8KiAMQQIwTJ050U1ZWttDX12dgY2PDq/P3798MV65cYbh58+ZpoAHbAQIIZLOJu7s7AwsLC1FOlZKSYrh7964p0LW7AQIIpIOFiYmJ4d+/f8QHFBM4qFgAAghsHSkakQFAAFGkGSCAwJr//v1LlmaAAKJIM0AAUaQZIIDI0gxL0gABxILMIRUABBBYMzMzM0maGBkZwTRAAIE0v/z27Zu4sLAwURq/fPkCTqagdA4QQCDNZ9avX+9NrOZ3796BvLkXmLb/AQQQI8i/wHQKcrcYka5+DdT4B8QACDAAoeVXwA4LG1AAAAAASUVORK5CYII=") no-repeat center center;-webkit-background-size: 15px 17px;}
    .Admin input[type=checkbox] {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAARCAYAAAACCvahAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAE+SURBVHjaYvz//z8DuQAggJgYKAAAAcTy7Nkz43v37jE8ffr0zKdPn/Aq5uPjY5CWljZRUlJikJKSOgsQQCx3795l+Pr16xkbGxuQBF7NQAsYLl++fAaoxwSomQEggJgePnx4RldXl6BGEACpAakF6QHxAQKI6cOHD0RpRDYApAcEAAKI5d+/fwwgTAqAqQcIIBYYh1gDmJgQEQQQQHDNf//+ZSAU54yMjCh8gAACa/716xcYE6OZjY0NzgcIIIoSCUAAMcFMRHcSLpuR1QEEEAuyICED0NUABBATLy8vw/Pnz8GhCMLIBiFjmDxILUgPCAAEEIuMjIzJ9evXz4ACS0JCAmeggQx48eIFw40bNxhAekBiAAHEoqyszHD79m2Tw4cPn/n8+TNeZ4NsBKZpE5AeEAAIIEZK8jNAgAEAJr50KaAjHQ4AAAAASUVORK5CYII=") no-repeat center center;-webkit-background-size: 15px 17px;}
    .Admin input[type=radio]:checked {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAM6SURBVHjaYvz//z8DMjh27M7/mzfeMTx48JnhxcsvYDEJcR4GBQVeBnUNIQYrKxVGZPUAAcQIM+D27af/Dx9+wnD/yWcGJS1JBiVVEQZpeUGw3NOH7xnu3X7DcO/acwZFGV4GW1sZBlVVabBBAAEENuD27Sf/t269w/CXi5PBzFadQVSCn+H/PxSHMTAyMTC8fvGR4dThmwzM374zeHurAA2RYQQIICaQ5KFDDxh+srEzWLobMHAJ8DN8+f6P4cuPPwxfoRjEBomB5EBqQGpBekAAIICYjh698f/Www8M6mYaDH//MzN8+/mL4fuvPww/f/9j+AHFIDZIDCQHUgNSC9ID0gsQQCzXrj5jEFYQZ+AQ4GX49vsvAyPQZyDP/fr5k+HwgX1gW6zsHBg4OTkZQKH1//9fsFqQHpBegABiuXf/JYO8rSrQhr8MTIz/gQYwMvz8/p2hNDOZ4fHD+2ADpOUWMvTOmM/ADjIEGGb/gIbwSUgw3Dt8hwEggJhevnjHwCEiyPDzz3+Gn38ZwPjAvt1wzeBYePQQLAaTB6kF6QHpBQgglv8Mfxgev//HwMb9H+gCBrAXfv1jZkAHILGHH/9DXQDkf/3HANILEEBMoqJcDD8/vGZgAephZWEEY3N7ZwYFJUW4Zll5ebAYTB6kFqQHpBcggFgUFIQYHrx6xMCtIs3AzMzEwMQExIzcDNPmL2A4Bg1Eawcnhqc/ORl4gDb/+/eP4e/ffwwvgXpAegECiEVTU4bh6vZLDH8/qzPwiYsCDWEAB+QXRi4GK3cfsAGffzMwcHMwgJ3/9y8jw/uX7xi+Pr7DoOmpxwAQQEyOjuaMWvI8DE/Pn2RgZvjJwMXOwMADVMzJwcjwjxmCQWyQGEgOpAakFqRHW1uRASCAwCnR3s6AgffHG4Zru3cy/Pr4ioGHk4GBjwuIuRkhGMgGiYHkQGpAakF6xMTEGAECCJ6ZLl+69v/AwbMM919+YJDTVGeQ11BkkFKQBss9e/CU4eGN+wyPrt9kUBQXYHCwN2bQ1dMCZyaAAGJEz867dh38f+PmA4YH958zvH79DiwmKirEoKAoyaChrsCgq6vGICkpCc/SAAEGALI/T/MNSjK5AAAAAElFTkSuQmCC") no-repeat center center;-webkit-background-size: 16px 16px;}
    .Admin input[type=radio]:disabled {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAIoSURBVHjaYvz//z8DMpgyZQozkDIBYk0glgZiFiB+AcR3gfh0Tk7OR2T1AAHEiGwAULMBIyOjv56eHoOSkhKDuLg4AwsLC8ObN28YHj58yHD27FmGX79+7QMachimByCA4AYANbsICAhYu7i4gDViA1+/fmU4dOgQw717984ADdkKEgMIILABkyZN0hcWFg4ICgpiYGNjYyAE9uzZw3D79u1jQEN2AwQQE9gURkYTR0dHojSDgL29PQMnJ6cV0NVcAAHELCQkJCclJWVvZGTEAHINMZiJiYnhx48fDM+ePfsJEEAgFyhLS0sz/P37lyQsJycHcow6QACxAE0U4ObmZkCPTkKAg4MD5HUegAACxfG/P3/+MPz7948kA4DRCaYAAogFqPkFKJ6VlZVJMgCkB+iV1wABxPTu3bvrjx8/BvuL2EAEYVDCAgbkdYAAYj58+PAvOzs7HnZ2dilJSUlwCBPCr1+/Zjh58uSTsrKyPQABxAQ07f+jR4+OXLx4EWwqKOniwx8/fmQ4cOAAw/fv38+Cwg8ggMApERiajHV1dUrA2DDV19dXt7W1ZQC6CMXPIHXnzp1jOHPmDMOHDx92VVdXnwSK/QMIIHheAJoBShMsra2tzvz8/GZiYmIMoqKi4NT56tUrMH779u3Fu3fvHpk7d+47kGaQPoAAQsmNIJcAKSZgWLCFh4dLAw2SAPqZ7dOnTy+uXLnydOfOnV+B8n//I2kCCDAAX9VDSEQy7MQAAAAASUVORK5CYII=") no-repeat center center;-webkit-background-size: 16px 16px;}
    .Admin input[type=radio] {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAInSURBVHjaYvz//z8DMpgyZQorkEoAYi8gNgRiDiC+AsT7gXhBTk7OU2T1AAHEiGwAUHM4IyPjRD09PQYlJSUGcXFxBhYWFoY3b94wPHz4kOHs2bMMv3796gAaMgGmByCA4AYANVcLCAjkuri4gDViA1+/fmU4dOgQw71790AuqQCJAQQQ2IBJkyaFCQsLTwoKCmJgY2NjIAT27NnDcPv27WlAQ5oAAogJbAojY7yjoyNRmkHA3t6egZOTMwvoamGAAGIWEhIyl5KSKjIyMmIAuYYYzMTExPDjxw+GZ8+efQIIIJALHKSlpRn+/v1LEpaTkwM5xh0ggFiAJspwc3MzoEcnIcDBwQHyuhhAALEA2X+AgOHfv38kGQCMTnDEAAQQC1DzVVA8Kysrk2QASA/QK7cAAojp3bt32x4/fgz2F7GBCMKghAUMyK0AAcR8+PDhr3Z2dqLs7Oz6kpKS4BAmhF+/fs1w8uTJM2VlZc0AAcQENO3fo0ePJl+8eBFsKijp4sMfP35kOHDgAMP3798Xg8IPIIDAKREYmkx1dXV2wNhI1NfXd7e1tWUAugjFzyB1586dYzhz5gzDhw8f6qurq+cCxf4ABBA8LwANYQbFTmtraxU/P3+ymJgYg6ioKDh1vnr1Cozfvn276u7du5Pmzp37AKQZpA8ggFByI9AQRiDFCgwLrvDwcEOgQbpAP3N/+vTp8pUrVy7s3LnzDSgGQd6G6QEIMAA0xENAxgs90QAAAABJRU5ErkJggg==") no-repeat center center;-webkit-background-size: 16px 16px;}
    .Admin input.button.disabled, .Admin a.button.disabled, .Admin input.button.primary.disabled, .Admin a.button.primary.disabled .Admin input[type="submit"]:disabled, .Admin input[type="button"]:disabled, .Admin input[type="reset"]:disabled {color: #919191 !important;background: -webkit-gradient(linear, left top, left bottom, from(#F1F1F1),color-stop(0.50, #EDEDED),color-stop(0.50, #EDEDED),to(#E9E9E9)) !important;border-top: 1px solid #D9D9D9 !important;border-bottom: 1px solid #D1D1D1 !important;border-left: 1px solid #D5D5D5 !important;border-right: 1px solid #D5D5D5 !important;box-shadow: 0px 1px 0px rgba(240,240,240,0.2) !important;-webkit-box-shadow: 0px 1px 0px rgba(240,240,240,0.2) !important;}
    .Admin a.button:active {background: -moz-linear-gradient(top,#BCD6EE 0%,#6C9FE6 50%,#4E91E5 50%,#ACD4ED);background: -webkit-gradient(linear, left top, left bottom, from(#BCD6EE),color-stop(0.50, #6C9FE6),color-stop(0.50, #4E91E5),to(#ACD4ED));background:-o-linear-gradient(#BCD6EE, #6C9FE6 50%, #4E91E5 50%, #ACD4ED );filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#BCD6EE', endColorstr='#ACD4ED');border-top: 1px solid #5252A8;border-bottom: 1px solid #45456F;border-left: 1px solid #4B4A8D;border-right: 1px solid #4B4A8D;-moz-box-shadow: 0px 1px 0px rgba(190,190,190,0.3);-webkit-box-shadow: 0px 1px 0px rgba(190,190,190,0.3);}
    .Admin .button.spinBoxButton {height:24px;width:24px;padding:0px;}
    .Admin label.prefixCtrl input[type="checkbox"], .Admin label.propertyHeaderExtra input[type="checkbox"],.Admin .propertyEditorFields label input[type="checkbox"]{margin:-3px 0 0 -2px;}
    
    ПЫСЫ: вживую можно поклацать тут: http://aquasys.com.ua/test/ , но только под хромом...
     
    Jumper и JorJe нравится это.
  5. arelav

    arelav Местный

    Регистрация:
    07.06.11
    Сообщения:
    166
    Симпатии:
    355
    Версия XF:
    1.1.0 Final
    дополнил последний код
     
  6. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5 746
    Симпатии:
    5 311
    Версия XF:
    1.5.18
    Сходил по ссылке. Ужасно не хватает в стилях :)
    Код:
    cursor:pointer;
     
    arelav нравится это.
  7. arelav

    arelav Местный

    Регистрация:
    07.06.11
    Сообщения:
    166
    Симпатии:
    355
    Версия XF:
    1.1.0 Final
    Дык дело в том, что это стандартные элементы input , у них "стрелка" курсор по умолчанию ... Это уже добавляют сами к кнопками и другим ui "руку"...
     
  8. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5 746
    Симпатии:
    5 311
    Версия XF:
    1.5.18
    Ну да, это понятно. Просто стрелка дает ощущение, что кнопка неактивна.
    Во всяком случае так должно быть, ибо привычно.
     
    arelav нравится это.
  9. arelav

    arelav Местный

    Регистрация:
    07.06.11
    Сообщения:
    166
    Симпатии:
    355
    Версия XF:
    1.1.0 Final
    Я не против :) , просто "руку" добавить проще простого, мне интересно было перекрасить, некоторых параметров я не знал, так как они почти не документируют такие штуки, а сегодня разобрал хром и там много чего полезного нарыл :)
     
    Romchik® нравится это.
  10. infis

    infis Местный

    Регистрация:
    27.06.11
    Сообщения:
    5 966
    Симпатии:
    3 548
    Версия XF:
    1.5.9
    Да я об оформлении скриншотов, собственно :)
     
  11. arelav

    arelav Местный

    Регистрация:
    07.06.11
    Сообщения:
    166
    Симпатии:
    355
    Версия XF:
    1.1.0 Final
    фотошоп + это :)
     
  12. infis

    infis Местный

    Регистрация:
    27.06.11
    Сообщения:
    5 966
    Симпатии:
    3 548
    Версия XF:
    1.5.9
    А я-то думал... :(
    Просто влом делать скриншоты и вручную их обрабатывать. Думал, что, может быть, есть нормальный софт под это дело. Хотя... У Вас, как я понимаю, не винда и не линуха.
     
  13. arelav

    arelav Местный

    Регистрация:
    07.06.11
    Сообщения:
    166
    Симпатии:
    355
    Версия XF:
    1.1.0 Final
    я давно понаписывал макросов, поэтому все полуавтоматичкски... быстро...
     
  14. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Совет по синтаксису градиентов:
    filter:
    linear-gradient()
    -o-linear-gradient()
    -ms-linear-gradient()
    -moz-linear-gradient()
    -webkit-gradient(linear,) /* для старых версий, убогий */
    -webkit-linear-gradient()
     
    arelav нравится это.
  15. arelav

    arelav Местный

    Регистрация:
    07.06.11
    Сообщения:
    166
    Симпатии:
    355
    Версия XF:
    1.1.0 Final
    спасибо, я это знаю , но в целом только градиентов недостаточно, поэтому я делал только под хром, так как только его и использую в админке... Если кому нужно, могут усовершенствовать, хотя в той же мозиле будет сумасшедший расход памяти при использовании последних да еще теней... Поэтому не вижу смысла...

    Решений конечно же имеется много, еще если js задействовать... , и по большому счету можно добиться отображения во всех браузерах (немалой кровью), но смысла нет...
     
  16. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    В таком случае костыль в виде -webkit-gradient можно не использовать, а применить нормальный -webkit-linear-gradient. В таком случае не придётся разрабатывать альтернативу под старый вебкит.
    Насчёт тормозов в FF не могу ничего сказать. box-shadow при высоких значениях тормозит везде, но вот чтобы на низких - ни разу не встречал.

    Идеальный вариант: background-image: в base64, а затем градиенты. Тем самым имеем поддержку браузеров даже без градиентов (которые понимаю base64)
     
    arelav нравится это.
  17. arelav

    arelav Местный

    Регистрация:
    07.06.11
    Сообщения:
    166
    Симпатии:
    355
    Версия XF:
    1.1.0 Final
    делал ночью :) не обращая внимания на старые/новые методы, там еще много подчищать надо и оптимизировать, я же и назвал АЛЬФА версия ...

    Что меня подтолкнуло, - это чекбоксы и радиокнопки, я просто не знал, что с ними можно бороться при помощи только цсс, вот и вырисовался стиль контролов, над которыми можно поработав, получить неплохую альтернативу для админки.. так как стандартные мне очень не нравились... А картинки закодировал, чтобы меньше писать в обяснении, что куда разместить надо :) Вообще когда буду делать чистовик, то склеенным блоком все вместе и позиционировать координатно, так быстрее работать будет...
     

Поделиться этой страницей