[Вопрос] Добавить границу элемента

08-03-2013, 09:38 AM

Не могу понять, где это можно сделать. Искала. Мне необходимо заключить поле для ввода логина и пароля в рамку:

Спасибо.

08-03-2013, 09:51 AM

посмотреть в деббаггере лисы или оперы элемент (ПКМ => проинспектировать элемент) и его класс, если есть, класс изменить по своему усмотрению, если нет, создать в настройках CSS

08-03-2013, 10:05 AM

В дебаггере, если всё правильно поняла, отображается только класс всего блока - toplinks. Он прописан в header-e, а дальше... не хватает понимания. Если можно, толкните на любую подобную тему.

08-03-2013, 10:20 AM

Ну все правильно, открывй свой additional.css, ищи .toplinks form input, и смотри что там у тебя за border. Должен быть примерно такой: border: #cccccc 1px solid;

08-03-2013, 10:45 AM

Quote:

Originally Posted by ChiefMate

Ну все правильно, открывй свой additional.css, ищи .toplinks form input, и смотри что там у тебя за border. Должен быть примерно такой: border: #cccccc 1px solid;

Там пусто. Я вношу изменения в стиль, созданный на основе дефолтного.
Мне не хватает понимания, как это работает, поэтому не смогла сделать как посоветовал kerk.
Но благодаря подсказке, нашла .toplinks form input в vbulletin-chrome.css, добавила границу.
Спасибо

08-03-2013, 11:17 AM

Quote:

Originally Posted by Svetlana

нашла .toplinks form input в vbulletin-chrome.css, добавила границу.

Как пожелаешь. Но я бы этого не делал. В твой пустой additional.css вписал бы

Code:

.toplinks form input {
    border: #cccccc 1px solid;
    font-size: 11px;
    margin: 3px 0 0;
    padding: 1px;
    vertical-align: baseline;
}

и выглядело бы получше, и измывайся над ним как хочешь. Зачем без особой на то необходимости мучать vbulletin-chrome.css.

08-03-2013, 12:42 PM

Да какое там "пожелаешь"

Когда не до конца понимаешь суть, как это работает, очень трудно выбирать. Я понимаю, из сказанного здесь как минимум три решения были правильными. Проблема не в лени - в непривычности терминов, в неумении ими пользоваться. Поэтому ценишь советы, которые вопреки всему настойчиво тыкают: "правильнее и корректнее именно так, а не иначе".
Если можно, почему так? Как я могла узнать о существовании .toplinks form input, чтобы прописать это в additional.css?

Svetlana добавил 03.08.2013 в 12:42
P.S. Переделала как советуете. Получилось, спасибо.

08-03-2013, 02:03 PM

Quote:

Originally Posted by Svetlana

Если можно, почему так? Как я могла узнать о существовании .toplinks form input

Это ты сама узнала с подачи kerk,

Quote:

Originally Posted by Svetlana

чтобы прописать это в additional.css?

Конкретно уже не помню где там в админке тройки были основная и дополнительная таблица CSS, но точно знаю, что для таких случаев в четверке используется Редактор перемененных стиля и additional.css. Так что все (по возможности) изменения в своем стиле пихай в этот шаблон (без фанатизма, хотя бы коментами разделяй).
Оффтоп

08-03-2013, 02:17 PM

@Svetlana, если открыть страничку в опере, навести курсор на нужный элемент и по правой кнопке выбрать Просмотр кода элемента, то можно увидеть его в исходном коде, а справа будет таблица со всеми стилями, относящимися к данному элементу.
Если бегать по исходному коду мышью, то на страничке будут подсвечиваться соответствующие элементы. Очень-очень удобно.
Я хотела ролик делать про это, но кто-то выкладывал подробную инструкцию в картинках (к сожалению, не смогла её найти).

08-03-2013, 02:50 PM

Quote:

Originally Posted by ChiefMate

Конкретно уже не помню где там в админке тройки были основная и дополнительная таблица CSS, но точно знаю, что для таких случаев в четверке используется Редактор перемененных стиля и additional.css. Так что все (по возможности) изменения в своем стиле пихай в этот шаблон (без фанатизма, хотя бы коментами разделяй).

Попробовала установить четвёрку, потому что там есть CMS. Совет поняла, спасибо.

Quote:

Originally Posted by Abraxas

@Svetlana, если открыть страничку в опере, навести курсор на нужный элемент и по правой кнопке выбрать Просмотр кода элемента, то можно увидеть его в исходном коде, а справа будет таблица со всеми стилями, относящимися к данному элементу.
Если бегать по исходному коду мышью, то на страничке будут подсвечиваться соответствующие элементы. Очень-очень удобно.
Я хотела ролик делать про это, но кто-то выкладывал подробную инструкцию в картинках (к сожалению, не смогла её найти).

Спасибо, я так и пыталась делать. Непонятно, как узнать о конкретной переменной (вроде .toplinks form input), которой нет ни в шаблоне элемента, ни в изменённом стиле. Как это видит движок? Эти переменные нужно определять, или просто знать? Я хочу понять алгоритм своих действий в подобных случаях, если это возможно.