Уважаемые пользователи!
C 7 ноября 2020 года phpBB Group прекратила выпуск обновлений и завершила дальнейшее развитие phpBB версии 3.2.
С 1 августа 2024 года phpBB Group прекращает поддержку phpBB 3.2 на официальном сайте.
Сайт официальной русской поддержки phpBB Guru продолжит поддержку phpBB 3.2 до 31 декабря 2024 года.
С учетом этого, настоятельно рекомендуется обновить конференции до версии 3.3.

Как сделать такую рамку?

Есть любые вопросы, связанные со стилями/темами для phpBB 3.1.x? Задайте их здесь!
Правила форума
Местная Конституция | Шаблон запроса | Документация (phpBB3) | Мини [FAQ] по phpBB3.1.x | FAQ-3 (phpbb3) | Как задавать вопросы | Как устанавливать расширения

Ваш вопрос может быть удален без объяснения причин, если на него есть ответы по приведённым ссылкам (а вы рискуете получить предупреждение ;) ).
Аватара пользователя
Russlav
phpBB 1.4.3
Сообщения: 79
Стаж: 8 лет 8 месяцев
Благодарил (а): 10 раз
Поблагодарили: 1 раз

Как сделать такую рамку?

Сообщение Russlav »

Вот моя рамка:
[фото пропало]
Мне нужно, чтобы у форумов была не синяя рамка, а вот такая (выше). Помогите!
Аватара пользователя
Sheer
Former team member
Сообщения: 12113
Стаж: 17 лет 1 месяц
Откуда: Калининград не Кенигсберг
Благодарил (а): 54 раза
Поблагодарили: 2752 раза
Контактная информация:

Re: Как сделать такую рамку?

Сообщение Sheer »

Меняй

Код: Выделить всё

.forabg {
    background-color: #0076B1;
    background-image: url("./images/bg_list.gif");
}
Изображение
Общие ошибки новичков (07.11.2005) & Как задавать вопросы
Мини FAQ
Если ничто другое не помогает, прочтите, наконец, инструкцию!
"Никакая инструкция не может перечислить всех обязанностей должностного лица, предусмотреть все отдельные случаи и дать вперёд соответствующие указания, а поэтому господа инженеры должны проявить инициативу и, руководствуясь знаниями своей специальности и пользой дела, принять все усилия для оправдания своего назначения".
Циркуляр Морского технического комитета №15 от 29.11.1910 г.
Аватара пользователя
Russlav
phpBB 1.4.3
Сообщения: 79
Стаж: 8 лет 8 месяцев
Благодарил (а): 10 раз
Поблагодарили: 1 раз

Re: Как сделать такую рамку?

Сообщение Russlav »

Sheer, а можно как-нибудь указать для каждой стороны определённое изображение, то есть для верхней одна, для полос по краям другая и по нижней полосе другая?
Аватара пользователя
LavIgor
Former team member
Сообщения: 3468
Стаж: 9 лет 11 месяцев
Благодарил (а): 41 раз
Поблагодарили: 932 раза

Re: Как сделать такую рамку?

Сообщение LavIgor »

В идеале можно было бы освоить http://htmlbook.ru/css/border-image.
Можно и другими способами, конечно.
Аватара пользователя
Russlav
phpBB 1.4.3
Сообщения: 79
Стаж: 8 лет 8 месяцев
Благодарил (а): 10 раз
Поблагодарили: 1 раз

Re: Как сделать такую рамку?

Сообщение Russlav »

LavIgor писал(а): В идеале можно было бы освоить http://htmlbook.ru/css/border-image.
Вы имеете в виду писать так:

Код: Выделить всё

.forabg {
 border-top: 22px;
	border-image: url("./images/verx.png");
}
Аватара пользователя
LavIgor
Former team member
Сообщения: 3468
Стаж: 9 лет 11 месяцев
Благодарил (а): 41 раз
Поблагодарили: 932 раза

Re: Как сделать такую рамку?

Сообщение LavIgor »

Russlav писал(а): так
Так, как Вы написали, не получится.
Поэтому я и сказал, что свойство нужно освоить, материал по ссылочке почитать.
Иначе для реализации хотелки можно возиться с несколькими обёртками (wrappers) и/или с плавающими элементами и другими блоками.
Аватара пользователя
Russlav
phpBB 1.4.3
Сообщения: 79
Стаж: 8 лет 8 месяцев
Благодарил (а): 10 раз
Поблагодарили: 1 раз

Re: Как сделать такую рамку?

Сообщение Russlav »

LavIgor, в инструкции рамка из изображения, которое много раз повторяется. Но мне нужно, чтобы верхняя часть рамки была из определённого изображения и с остальными частями тоже самое. Скрин:
[фото пропало]

Отправлено спустя 14 минут 56 секунд:
В хроме всё выглядит вот так:
[фото пропало]
Когда такой код:

Код: Выделить всё

.forabg {
    border: 11px solid #475247;
	-moz-border-image: url("./images/verx.png") 11 round;
	-webkit-border-image: url("./images/verx.png") 11 round;
	-o-border-image: url("./images/verx.png") 11 round;
	border-image: url("./images/verx.png") 11 round;
}
Я не понимаю, почему между самим форумом и рамкой белый отступ? :shock:

Отправлено спустя 5 минут 39 секунд:
В ферефоксе так:
[фото пропало]
Аватара пользователя
LavIgor
Former team member
Сообщения: 3468
Стаж: 9 лет 11 месяцев
Благодарил (а): 41 раз
Поблагодарили: 932 раза

Re: Как сделать такую рамку?

Сообщение LavIgor »

Значит, не всю инструкцию читали.
Приведённые примеры совсем не означают, что можно только так и всегда так.
По умолчанию никакого повторения картинки нет. Изображение просто растягивается до нужных размеров.
А какими будут верхняя, нижняя и боковые границы - Вы задаёте сами.
Т.е. у Вас должна быть подходящая картинка (примерно такая, как в первом сообщении этой темы), для которой Вы сами задаёте размеры границ с помощью чисел (или процентов).
Простейший пример: border-image: url("./images/picture.png") 10;, т.е. каждый кусок картинки от края до центра толщиной 10 пикселей считается границей, которая будет применена к элементу.

При необходимости можно также дополнительно задать толщину каждой границы, но это не обязательно.

=================================================================

Смотрю, Вы уже немного разобрались.
Попробуйте явно задавать толщину границ (как указано в описании).
Chrome вообще часто требует особых доработок.
Аватара пользователя
Russlav
phpBB 1.4.3
Сообщения: 79
Стаж: 8 лет 8 месяцев
Благодарил (а): 10 раз
Поблагодарили: 1 раз

Re: Как сделать такую рамку?

Сообщение Russlav »

LavIgor, понял. Вот, что у меня получилось:
Изображение
Только вот у меня не получается изменять ширину определённых сторон. Я пишу:

Код: Выделить всё

border-width: 27px 7px 11px 7px;
Но вот только получается не то, что нужно. Вроде бы ширина верхней полосы 27px, ширина полос по краям 7px, ширина нижней полосы 11px. Но получается не так!
Аватара пользователя
LavIgor
Former team member
Сообщения: 3468
Стаж: 9 лет 11 месяцев
Благодарил (а): 41 раз
Поблагодарили: 932 раза

Re: Как сделать такую рамку?

Сообщение LavIgor »

Russlav писал(а): Но вот только получается не то, что нужно.
А что нужно и как получается?
Аватара пользователя
Russlav
phpBB 1.4.3
Сообщения: 79
Стаж: 8 лет 8 месяцев
Благодарил (а): 10 раз
Поблагодарили: 1 раз

Re: Как сделать такую рамку?

Сообщение Russlav »

LavIgor писал(а): А что нужно и как получается?
Нужно, чтобы края были такими, которые я указал в коде. Но вот только всё не так! Было так (без кода):
[фото пропало]
Стало так (с кодом):
[фото пропало]
Аватара пользователя
Sheer
Former team member
Сообщения: 12113
Стаж: 17 лет 1 месяц
Откуда: Калининград не Кенигсберг
Благодарил (а): 54 раза
Поблагодарили: 2752 раза
Контактная информация:

Re: Как сделать такую рамку?

Сообщение Sheer »

Ну задай border-radius: 7px;
Изображение
Общие ошибки новичков (07.11.2005) & Как задавать вопросы
Мини FAQ
Если ничто другое не помогает, прочтите, наконец, инструкцию!
"Никакая инструкция не может перечислить всех обязанностей должностного лица, предусмотреть все отдельные случаи и дать вперёд соответствующие указания, а поэтому господа инженеры должны проявить инициативу и, руководствуясь знаниями своей специальности и пользой дела, принять все усилия для оправдания своего назначения".
Циркуляр Морского технического комитета №15 от 29.11.1910 г.
Аватара пользователя
Russlav
phpBB 1.4.3
Сообщения: 79
Стаж: 8 лет 8 месяцев
Благодарил (а): 10 раз
Поблагодарили: 1 раз

Re: Как сделать такую рамку?

Сообщение Russlav »

Sheer,
Мне нужно отрегулировать толщину краёв рамки. ;)
Аватара пользователя
Sheer
Former team member
Сообщения: 12113
Стаж: 17 лет 1 месяц
Откуда: Калининград не Кенигсберг
Благодарил (а): 54 раза
Поблагодарили: 2752 раза
Контактная информация:

Re: Как сделать такую рамку?

Сообщение Sheer »

Код: Выделить всё

padding: 27px 7px 11px 7px;
Изображение
Общие ошибки новичков (07.11.2005) & Как задавать вопросы
Мини FAQ
Если ничто другое не помогает, прочтите, наконец, инструкцию!
"Никакая инструкция не может перечислить всех обязанностей должностного лица, предусмотреть все отдельные случаи и дать вперёд соответствующие указания, а поэтому господа инженеры должны проявить инициативу и, руководствуясь знаниями своей специальности и пользой дела, принять все усилия для оправдания своего назначения".
Циркуляр Морского технического комитета №15 от 29.11.1910 г.
Аватара пользователя
Russlav
phpBB 1.4.3
Сообщения: 79
Стаж: 8 лет 8 месяцев
Благодарил (а): 10 раз
Поблагодарили: 1 раз

Re: Как сделать такую рамку?

Сообщение Russlav »

Sheer писал(а): padding: 27px 7px 11px 7px;
Работает! Только вот я не понимаю, почему ширина регулируется с помощью padding, ведь он вроде бы указывает внутренний отступ. И ещё, появилась проблемка, я никак не могу сделать округлённые края у рамки. Код такой

Код: Выделить всё

	
	border-radius: 6px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px; 
Закрыто

Вернуться в «Стили для phpBB 3.1.x»