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

1.1.2 Проблема с кнопками после обновления шаблонов

Тема в разделе "Вопросы по стилям, изменения в CSS и шаблонах", создана пользователем Nicolayka, 08.04.2012.

Загрузка
  1. Nicolayka

    Nicolayka Местный

    Регистрация:
    25.02.12
    Сообщения:
    70
    Симпатии:
    13
    Версия XF:
    1.4.4
    Кнопки изменились...только когда навожу на них курсор, они меняются как и положено. Помогите исправить..
    [​IMG]

    Все кнопки такими стали...не могу найти css стиль...
     
    Nicolayka, 08.04.2012
    #1
  2. carliker

    carliker Местный

    Регистрация:
    03.10.11
    Сообщения:
    274
    Симпатии:
    114
    Версия XF:
    1.1.1
    Дай ссылку на свой сайт. У меня такая же проблема была, я ее быстро решил. Только вот не помню что делал.
     
    carliker, 10.04.2012
    #2
  3. Nicolayka

    Nicolayka Местный

    Регистрация:
    25.02.12
    Сообщения:
    70
    Симпатии:
    13
    Версия XF:
    1.4.4
    Он на localhost
     
    Nicolayka, 10.04.2012
    #3
  4. carliker

    carliker Местный

    Регистрация:
    03.10.11
    Сообщения:
    274
    Симпатии:
    114
    Версия XF:
    1.1.1
    Вот, смотри:
    sshot-1.png

    Если выключить вот эту строку:
    Код:
    background: url("styles/baisik/xenforo/gradients/highlight_faint.png") repeat-x scroll center top #323232;
    То кнопки станут работать также как у тебя.
    Преполагаю, что этой строчки у тебя просто нет.

    Вот в этом шаблоне посмотри
    form.css
    Мой код
    Код:
    /** Forms **/
 
.xenForm
{
    margin: 10px auto;
    width: @formWidth;
}
 
    .xenOverlay .xenForm
    {
        width: @overlayFormWidth;
    }
 
.xenForm .ctrlUnit dd
{
    width: {xen:calc '@formWidth - @ctrlUnitLabelWidth'}px;
}
 
    .xenOverlay .xenForm .ctrlUnit dd
    {
        width: {xen:calc '@overlayFormWidth - @ctrlUnitLabelWidth'}px;
    }
 
.xenForm .ctrlUnit dd .textCtrl
{
    width: {xen:calc "@formWidth - @ctrlUnitLabelWidth - @textCtrl.border-left-width - @textCtrl.border-right-width - @textCtrl.padding-left - @textCtrl.padding-right - @ctrlUnitEdgeSpacer"}px;
}
 
    .xenOverlay .xenForm .ctrlUnit dd .textCtrl
    {
        width: {xen:calc "@overlayFormWidth - @overlayCtrlUnitLabelWidth - @textCtrl.border-left-width - @textCtrl.border-right-width - @textCtrl.padding-left - @textCtrl.padding-right - @ctrlUnitEdgeSpacer"}px;
    }
 
.xenForm .ctrlUnit dd li > ul .textCtrl
{
    width: {xen:calc "@formWidth - @ctrlUnitLabelWidth - @textCtrl.border-left-width - @textCtrl.border-right-width - @textCtrl.padding-left - @textCtrl.padding-right - @ctrlUnitEdgeSpacer - @formCtrlIndent"}px;
}
 
    .xenOverlay .xenForm .ctrlUnit dd li > ul .textCtrl
    {
        width: {xen:calc "@overlayFormWidth - @overlayCtrlUnitLabelWidth - @textCtrl.border-left-width - @textCtrl.border-right-width - @textCtrl.padding-left - @textCtrl.padding-right - @ctrlUnitEdgeSpacer - @formCtrlIndent"}px;
    }
 
.xenForm .ctrlUnit.fullWidth dd .textCtrl,
.xenForm .ctrlUnit.fullWidth dd .explain,
.xenForm .ctrlUnit.fullWidth dd .mceLayout
{
    margin-left: @ctrlUnitEdgeSpacer;
}
 
.xenForm .ctrlUnit.fullWidth dd .textCtrl,
.xenForm .ctrlUnit.fullWidth dd .mceLayout
{
    width: {xen:calc "@formWidth - @textCtrl.border-left-width - @textCtrl.border-right-width - @textCtrl.padding-left - @textCtrl.padding-right - 2 * @ctrlUnitEdgeSpacer"}px;
}
 
    .xenOverlay .xenForm .ctrlUnit.fullWidth dd .textCtrl,
    .xenOverlay .xenForm .ctrlUnit.fullWidth dd .mceLayout
    {
        width: {xen:calc "@overlayFormWidth - @textCtrl.border-left-width - @textCtrl.border-right-width - @textCtrl.padding-left - @textCtrl.padding-right - 2 * @ctrlUnitEdgeSpacer"}px;
    }
 
    .xenForm .ctrlUnit dd > select.textCtrl
    {
        min-width: 150px;
    }
 
    .xenForm .ctrlUnit dd .textCtrl[size],
    .xenForm .ctrlUnit dd .textCtrl.autoSize,
    .xenForm .ctrlUnit.fullWidth dd .textCtrl[size],
    .xenForm .ctrlUnit.fullWidth dd .textCtrl.autoSize,
    .xenOverlay .xenForm .ctrlUnit dd .textCtrl[size],
    .xenOverlay .xenForm .ctrlUnit dd .textCtrl.autoSize,
    .xenOverlay .xenForm .ctrlUnit.fullWidth dd .textCtrl[size],
    .xenOverlay .xenForm .ctrlUnit.fullWidth dd .textCtrl.autoSize
    {
        width: auto !important;
        min-width: 0;
    }
 
    .xenForm .ctrlUnit dd .textCtrl.number
    {
        width: 150px;
    }
 
 
.xenForm .sectionHeader:first-child
{
    margin-top: 0;
}
 
/** Sections **/
 
.xenForm fieldset
{
    border-top: 1px solid @primaryLighterStill;
    margin: 20px auto;
}
 
.xenForm > fieldset:first-child
{
    border-top: none;
    margin: auto;
}
 
.xenForm .PreviewContainer + fieldset
{
    border-top: none;
}
 
.xenForm fieldset + .ctrlUnit,
.xenForm .submitUnit
{
    border-top: 1px solid @primaryLighterStill;
}
 
.xenForm fieldset + .ctrlUnit
{
    padding-top: 10px;
}
 
.xenForm .primaryContent + .submitUnit,
.xenForm .secondaryContent + .submitUnit
{
    margin-top: 0;
    border-top: none;
}
 
.xenForm .ctrlUnit.submitUnit dd
{
    /*url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;*/
    /*background: @primaryLightest;
 
    border: 1px solid @primaryLighterStill;
    border-bottom-color: @primaryLighter;
    border-top: none;
    padding-left: 10px;
 
    width: {xen:calc '@formWidth - @ctrlUnitLabelWidth - @ctrlUnitEdgeSpacer - 10 - 2'}px;
 
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;*/
 
    padding-top: 5px;
    padding-bottom: 5px;
}
 
/* now undo that */
 
.xenOverlay .ctrlUnit.submitUnit dd,
.Menu .ctrlUnit.submitUnit dd,
#QuickSearch .ctrlUnit.submitUnit dd
{
    border: none;
    background: none;
}
 
.xenForm .ctrlUnit
{
    @property "ctrlUnit";
 
    @property "/ctrlUnit";
}
 
    /** Sections Immediately Following Headers **/
 
    .xenForm .sectionHeader + fieldset,
    .xenForm .heading + fieldset,
    .xenForm .subHeading + fieldset
    {
        border-top: none;
        margin-top: 0;
    }
 
 
/** *********************** **/
/** TEXT INPUTS            **/
/** *********************** **/
 
.textCtrl
{
    @property "textCtrl";
    font-size: 13px;
    font-family: Calibri, 'Trebuchet MS', Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: @textCtrlText;
    background-color: @textCtrlBackground;
    padding: 3px;
    margin-bottom: 2px;
    border: 1px solid #ccc;
    border-radius: 3px;
    outline: 0;
    @property "/textCtrl";
}
 
textarea.textCtrl
{
    word-wrap: break-word;
}
 
    .textCtrl:focus,
    .textCtrl.Focus
    {
        @property "textCtrlFocus";
        background-color: @textCtrlBackground;
        border: 1px solid #bbb;
        box-shadow: inset rgba(0,0,0,0.1) 0px 1px 4px;
        @property "/textCtrlFocus";
    }
 
    textarea.textCtrl:focus
    {
        @property "textCtrlTextareaFocus";
 
        @property "/textCtrlTextareaFocus";
    border: 1px solid #bbb;
    box-shadow: inset rgba(0,0,0,0.1) 0px 1px 4px;
    }
 
    input.textCtrl.disabled,
    textarea.textCtrl.disabled,
    .disabled .textCtrl
    {
        @property "textCtrlDisabled";
        font-style: italic;
        color: rgb(100,100,100);
        background-color: rgb(245,245,245);
        @property "/textCtrlDisabled";
    }
 
    .textCtrl.prompt
    {
        @property "formElementPrompt";
        font-style: italic;
        color: rgb(160,160,160);
        @property "/formElementPrompt";
    }
    .textCtrl:-moz-placeholder
    {
        /* needs to be in its own rule due to weird selector */
        @property "formElementPrompt";
        font-style: italic;
        color: rgb(160,160,160);
        @property "/formElementPrompt";
    }
 
    .textCtrl::-webkit-input-placeholder
    {
        /* needs to be in its own rule due to weird selector */
        @property "formElementPrompt";
        font-style: italic;
        color: rgb(160,160,160);
        @property "/formElementPrompt";
    }
 
    .textCtrl.autoSize
    {
        width: auto !important;
    }
 
    .textCtrl.number,
    .textCtrl.number input
    {
        text-align: right;
        width: 150px;
    }
 
    .textCtrl.fillSpace
    {
        width: 100%;
        box-sizing: border-box;
        _width: 95%;
    }
 
    .textCtrl.code,
    .textCtrl.code input
    {
        @property "textCtrlCode";
        font-family: Consolas, "Courier New", Courier, monospace;
        white-space: pre;
        word-wrap: normal;
        direction: ltr;
        @property "/textCtrlCode";
    }
 
    input.textCtrl[type="password"]
    {
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
 
    input[type="email"],
    input[type="url"]
    {
        direction: ltr;
    }
 
    .textCtrl.titleCtrl,
    .textCtrl.titleCtrl input
    {
        font-size: 18pt;
    }
 
textarea.textCtrl.Elastic
{
    /* use for jQuery.elastic */
    max-height: 300px;
}
 
/* for use with wrapped inputs */
.textCtrlWrap
{
    display: inline-block;
}
 
.textCtrlWrap input.textCtrl
{
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}
 
/** *********************** **/
/** BUTTONS                **/
/** *********************** **/
 
.button
{
    font-style: normal;
 
    @property "button";
    font-size: 12px;
    font-family: Calibri, 'Trebuchet MS', Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #fff;
    background: #323232 url('@imagePath/xenforo/gradients/highlight_faint.png') repeat-x top;
    padding: 0px 6px;
    border: 1px solid #2b2b2b;
    border-radius: 3px;
    text-align: center;
    box-shadow: rgba(0,0,0,0.43) 0px 1px 3px;
    text-shadow: #2b2b2b 0px -1px 0px;
    outline: none;
    line-height: 26px;
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
    height: 26px;
    @property "/button";
}
 
.button.smallButton
{
    font-size: 11px;
    padding: 0px 4px;
    line-height: 24px;
    height: 24px;
    border-radius: 3px;
}
 
.button.primary
{
    /*background-color: @primaryLighter;*/
}
 
input.button.disabled,
a.button.disabled,
input.button.primary.disabled,
a.button.primary.disabled
{
    color: #fff;
    text-shadow: none;
    background-color: #c1c1c1;
    border-color: #bbbbbb;
    box-shadow: 0 0 0 transparent;
}
 
    .button::-moz-focus-inner
    {
        border: none;
    }
 
    a.button
    {
        display: inline-block;
        color: @button.color;
    }
 
    .button:hover,
    .button[href]:hover,
    .buttonProxy:hover .button
    {
        @property "buttonHover";
        color: #fff;
        text-decoration: none;
        background-color: #454545;
        @property "/buttonHover";
    }
 
    .button:focus
    {
        @property "buttonFocus";
        /*border-color: @primaryLight;*/
        @property "/buttonFocus";
    }
 
    .button:active,
    .button.ToggleButton.checked,
    .buttonProxy:active .button
    {
        @property "buttonActive";
        color: #fff;
        background-color: #222;
        outline: 0;
        @property "/buttonActive";
        /*position: relative;
        top: 2px;*/
    }
 
    .button.ToggleButton
    {
        cursor: default;
        width: auto;
        color: @button.border-bottom-color;
    }
 
    .button.ToggleButton.checked
    {
        background-color: #555555;
    }
 
    .button.inputSupplementary
    {
        width: 25px;
        position: absolute;
        top: 0px;
        right: 0px;
    }
 
    .button.inputSupplementary.add
    {
        color: green;
    }
 
    .button.inputSupplementary.delete
    {
        color: red;
    }
 
    .submitUnit .button
    {
        min-width: 100px;
        *min-width: 0;
    }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/** Control Units **/
 
.xenForm .ctrlUnit
{
    position: relative;
    margin: 10px auto;
}
 
{xen:helper clearfix, '.xenForm .ctrlUnit'}
 
.xenForm .ctrlUnit.fullWidth
{
    overflow: visible;
}
 
/** Control Unit Labels **/
 
.xenForm .ctrlUnit dt
{
    @property "ctrlUnitLabel";
    padding-top: 4px;
    padding-right: 15px;
    text-align: right;
    vertical-align: top;
    @property "/ctrlUnitLabel";
    width: {xen:calc '@ctrlUnitLabelWidth - @ctrlUnitLabel.padding-left - @ctrlUnitLabel.padding-right'}px;
    float: left;
}
 
/* special long-text label */
.xenForm .ctrlUnit dt.explain
{
    font-size: 11px;
    text-align: justify;
}
 
    .xenOverlay .xenForm .ctrlUnit dt
    {
        width: {xen:calc '@overlayCtrlUnitLabelWidth - @ctrlUnitLabel.padding-left - @ctrlUnitLabel.padding-right'}px;
    }
 
.xenForm .ctrlUnit.fullWidth dt,
.xenForm .ctrlUnit.submitUnit.fullWidth dt
{
    float: none;
    width: auto;
    text-align: left;
    height: auto;
}
 
.xenForm .ctrlUnit.fullWidth dt
{
    margin-bottom: 2px;
}
 
    .xenForm .ctrlUnit dt label
    {
        margin-left: @ctrlUnitEdgeSpacer;
    }
 
    /** Hidden Labels **/
 
    .xenForm .ctrlUnit.surplusLabel dt label
    {
        display: none;
    }
 
    /** Section Links **/
 
    .ctrlUnit.sectionLink dt
    {
        text-align: left;
        font-size: 11px;
        padding-top: none;
    }
 
        .ctrlUnit.sectionLink dt a
        {
            margin-left: {xen:calc '10 + 1'}px; /*TODO: sectionHeader padding + border*/
        }   
 
    /** Hints **/
 
    .ctrlUnit dt dfn
    {
        @property "ctrlUnitLabelHint";
        font-style: italic;
        font-size: 10px;
        color: @mutedTextColor;
        margin-left: @ctrlUnitEdgeSpacer;
        display: block;
        @property "/ctrlUnitLabelHint";
    }
 
    .ctrlUnit.fullWidth dt dfn
    {
        display: inline;
        margin: 0;
    }
 
        .ctrlUnit dt dfn b,
        .ctrlUnit dt dfn strong
        {
            color: @dimmedTextColor;
        }
 
    /** Inline Errors **/
 
    .ctrlUnit dt .error
    {
        @property "ctrlUnitLabelError";
        font-size: 10px;
        color: red;
        display: block;
        @property "/ctrlUnitLabelError";
    }
 
    .ctrlUnit dt dfn,
    .ctrlUnit dt .error,
    .ctrlUnit dt a
    {
        font-weight: normal;
    }
 
.xenForm .ctrlUnit.submitUnit dt
{
    height: 19px;
    display: block;
}
 
    .ctrlUnit.submitUnit dt.InProgress
    {
        background: transparent url('@imagePath/xenforo/widgets/ajaxload.info_B4B4DC_facebook.gif') no-repeat center center;
    }
 
/** Control Holders **/
 
.xenForm .ctrlUnit dd
{
    /*todo: kill property */
    @property "ctrlUnitCtrl";
 
    @property "/ctrlUnitCtrl";
    float: left;
}
 
.xenForm .ctrlUnit.fullWidth dd
{
    float: none;
    width: auto;
    padding-left: 0;
}
 
/** Explanatory paragraph **/
 
.ctrlUnit dd .explain
{
    @property "ctrlUnitCtrlExplain";
    font-size: 11px;
    color: @mutedTextColor;
    margin-top: 2px;
    margin-right: @ctrlUnitEdgeSpacer;
    @property "/ctrlUnitCtrlExplain";
    /*TODO:max-width: auto;*/
}
 
    .ctrlUnit dd .explain b,
    .ctrlUnit dd .explain strong
    {
        color: @dimmedTextColor;
    }
 
.ctrlUnit.fullWidth dd .explain
{
    /*TODO:max-width: auto;*/
}
 
/** List items inside controls **/
 
.ctrlUnit dd li
{
    margin: 4px 0 8px;
    padding-left: 1px; /* fix a webkit display bug */
}
 
    .ctrlUnit label.unselectable
    {
        color: @mutedTextColor;
        font-style: italic;
    }
 
.ctrlUnit dd .break
{
    margin-bottom: 0.75em;
    padding-bottom: 0.75em;
}
 
.ctrlUnit dd .rule
{
    border-bottom: 1px solid @primaryLighterStill;
}
 
.ctrlUnit dd .ddText
{
    margin-bottom: 2px;
}
 
/** Hints underneath checkbox / radio controls **/
 
.ctrlUnit dd li .hint
{
    font-size: 11px;
    color: @mutedTextColor;
    margin-left: @formCtrlIndent;
    margin-top: 2px;
}
 
/** DISABLERS **/
 
.ctrlUnit dd li > ul
{
    margin-left: @formCtrlIndent;
}
 
.ctrlUnit dd li > ul > li:first-child
{
    margin-top: 6px;
}
 
/** Other stuff... **/
 
.ctrlUnit dd .helpLink
{
    font-size: 10px;
}
 
.ctrlUnit.textValue dt
{
    padding-top: 0px;
}
 
/*.xenForm .ctrlUnit dt { background-color: #ffffc6; }
.xenForm .ctrlUnit dd { background-color: rgb(235,235,255); }
.xenForm fieldset { background-color: rgb(255,230,180); }*/
 
.button.spinBoxButton
{
    font-family: @body.font-family;
    font-size: 11pt;
}
 
.unitPairsJustified li
{
    overflow: hidden;
}
 
    .unitPairsJustified li .label
    {
        float: left;
    }
 
    .unitPairsJustified li .value
    {
        float: right;
    }
 
<xen:include template="form_date_picker.css" />
<xen:include template="form_auto_complete.css" />
 
/** status editor **/
 
.statusEditorCounter
{
    color: green;
}
 
.statusEditorCounter.warning
{
    color: orange;
    font-weight: bold;
}
 
.statusEditorCounter.error
{
    color: red;
    font-weight: bold;
}
 
.explain .statusHeader
{
    display: inline;
}
 
.explain .CurrentStatus
{
    color: @contentText;
    font-style: italic;
    padding-left: 5px;
}
 
/* BB code-based editor styling */
 
.xenForm .ctrlUnit.fullWidth dd .bbCodeEditorContainer
{
    margin-left: @ctrlUnitEdgeSpacer;
}
 
.xenForm .ctrlUnit.fullWidth dd .bbCodeEditorContainer textarea
{
    margin-left: 0;
    min-height: 200px;
}
 
.bbCodeEditorContainer a
{
    font-size: 11px;
}
 
/*
* Fix silly top padding. This may require additional tags in the padding-top selector.
*/
 
.xenForm .ctrlUnit > dd
{
    padding-top: 4px;
}
 
    .xenForm .ctrlUnit.fullWidth > dd
    {
        padding-top: 0;
    }
 
.xenForm .ctrlUnit > dd > input,
.xenForm .ctrlUnit > dd > select,
.xenForm .ctrlUnit > dd > textarea,
.xenForm .ctrlUnit > dd > ul
{
    margin-top: -4px;
}
 
    .xenForm .ctrlUnit.fullWidth > dd > input,
    .xenForm .ctrlUnit.submitUnit > dd > input,
    .xenForm .ctrlUnit.fullWidth > dd > select,
    .xenForm .ctrlUnit.submitUnit > dd > select,
    .xenForm .ctrlUnit.fullWidth > dd > textarea,
    .xenForm .ctrlUnit.submitUnit > dd > textarea,
    .xenForm .ctrlUnit.fullWidth > dd > ul,
    .xenForm .ctrlUnit.submitUnit > dd > ul
    {
        margin-top: 0;
    }
 
/*
* Multi-column checkboxes
*/
 
.xenForm .checkboxColumns > dd > ul,
ul.checkboxColumns
{
    column-count: 2;
    column-gap: 8px;
}
 
.xenForm .checkboxColumns.multiple > dd > ul
{
    column-count: 1;
    column-gap: 0;
}
 
.xenForm .checkboxColumns.multiple > dd
{
    column-count: 2;
    column-gap: 8px;
}
 
.xenForm .checkboxColumns.multiple > dd > ul
{
    margin-bottom: 18px;
}
     
    carliker, 11.04.2012
    #4
    kovarnyi и Nicolayka нравится это.

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