Замена фона рамки тёмно-синих блоков

Список разделов phpBBex 1.x (поддерживается) Мастерская 1.x

Описание: Только готовые решения! Статьи, заметки, моды и другие полезности для phpBBex 1.x и phpBB 3.0.x.
Модератор: Поддержка

Сообщение #1 JoteRuso » 24.04.2013, 19:55

Как Вы уже знаете, в папке стиля prosilver есть папка theme, в которой, помимо css-файлов, есть ещё и папка images, содержащая в себе (помимо прочих) рисунки, используемые для заполнения установленной по умолчанию шапки форума и окрашивания всех форумных блоков.

Изображение
Это "летние" файлы bg_header.png + bg_list.png и их "зимние" братья - bg_header_snow.png + bg_list_snow.png

Спросите, почему первые такие тонкие, а вторые - такие широкие? Ответ прост. На первых - кроме вертикального градиента ничего больше нет. А на вторых - нарисованы замечательные снежинки, создающие зимой на форуме "зимнее" настроение. Естественно, для этих снежинок нужно место.
На первых - нет никаких дополнительных рисунков, поэтому они совершенно спокойно клонируют своих тонких 5-пиксельных собратьев от 160 до 390 раз (а то и больше - это уже зависит он указанной вами ширины форума) , заполняя своими копиями фон шапки и блоков без видимых глазу границ переходов. То есть, если Вы возьмёте рисунок bg_header.png и размножите его, поставив его копии вплотную справа от него, то увидите сплошную и как бы цельную шапку форума. А второй - "зимний" - рисунок сделает тоже самое, но гораздо реже. При его ширине в 800 пикселей ему будет достаточно поставить рядом с собой лишь свою половинку, чтобы обеспечить заполнение фоном и снежинками шапку форума с шириной в 1280 пикс.
Пока всё понятно? :wink:
Тот же принцип используется при заполнении блоков форума рисунком bg_list.png - но тут есть одна небольшая хитрость - этот рисунок заполняет собой лишь верхнюю часть блока. И если блок по своей высоте оказывается больше высоты этого рисунка (92 пикселя), то вся нижняя часть блока уже заполняется назначаемым цветом, который должен совпадать с цветом нижней части рисунка bg_list.png. Тогда Вы просто не увидите границы перехода и заливка блока будет выглядеть абсолютно ровной.

Но рассмотрим всё это на примере.
Исходя из общего фонового окружения (фон за форумом + шапка)
Изображение
я в фотошопе (Вы можете это сделать и в любом другом графическом редакторе) делаю себе замену для файла bg_list.png.
И это будет вот этот рисунок:
Изображение

Я дал ему те же 92 пикселя высоты, что и у оригинала, но сделал его чуть толще =) Ну... захотелось мне так )))
Перевёл его в формат .png , дал ему то же самое название и заменил им оригинальный файл.

В результате получаем вот такую картину:
Блок меньшей высоты полностью заливается этим рисунком, а всё что превышает его вертикальный размер (92 пикселя) остаётся закрашенным назначенным по умолчанию цветом.
Вобщем, тихий ужас )))
Изображение Изображение

Но всё это исправляется очень просто.

С помощью программульки Pixie мы узнаём какой цвет присутствует в самой нижней части моего рисунка. И копируем его.
Затем идём в файл colours.css и ищем в нём строки:
Код: Выделить всё
.forabg, .forumbg {
   background-color: #092147;
   background-image: url("{T_THEME_PATH}/images/bg_list.png");
}
где мы видим подлежащий замене цвет #092147 (тёмно-синий) и ссылку на наш файлик (которую мы не трогаем, так как в этом сейчас нет необходимости).
Меняем цвет заполнения на тот, что мы скопировали с нижней части рисунка...
и получаем уже совсем другую "картину маслом"!

Изображение Изображение

Тот же принцип действует и при замене "зимних" рисунков.
Логика абсолютно та же самая.
И результаты - такие же стабильные!

Если Вы вдруг не знаете, как вам поменять формат рисунка на .png - не расстраивайтесь.
Ваш форум спокойно скушает и любой другой распространённый формат изображений.
Если у Вы сохранили свой рисунок в другом формате, то просто укажите это в ссылке на этот рисунок.
Например, если у Вас получился рисунок bg_list.gif или bg_list.jpg
то в указанном выше месте смените расширение .png на Ваше.
То есть, у Вас должно получиться:
background-image: url("{T_THEME_PATH}/images/bg_list.gif");
или
background-image: url("{T_THEME_PATH}/images/bg_list.jpg");

Вот, собственно, и всё =)
Последний раз редактировалось JoteRuso 22.05.2013, 17:46, всего редактировалось 2 раз(а).
JoteRuso M
Автор темы
Аватара
Откуда: Москва, Россия
Репутация: 541
С нами: 12 лет 5 месяцев

Сообщение #2 DimmmCom » 29.04.2013, 01:59

Предлагаю, кому интересно, поманипулировать параметрами фоновых изображений, которыми заполняются блоки.
К примеру изображение блоков с названиями тем bg_list.png может растягиваться во все стороны. И тогда нет необходимости прописывать цвет заполнителя. Да и выглядет при растяжении приятней.
К примеру мы можем сделать градиентной и нижнюю часть блока. Вот пример http://cavalers.ru/viewforum.php?f=2

Для этого надо в файле colours.css добавить к фоновому изображению несколько атрибутов:
Код: Выделить всё
.forabg, .forumbg {
   background-color: #2C5687;
        background-image: url("{T_THEME_PATH}/images/bg_list.png");
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 100% 100%;
}
Аналогично делаем для шапки
Код: Выделить всё
.headerbar {
   background-color: #2C5687;
   background-image: url("{T_THEME_PATH}/images/bg_header.png");
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 100% 100%;
   color: #FFFFFF;
}

Из плюсов данного способа заполнения, я бы отметил: широкий цветовой диапозон при оформлении блоков. Ведь, как известно, при оформлении блоков при помощи
Код: Выделить всё
background-color: #2C5687;
цветовой диапозон не так велик.
DimmmCom M
Аватара
Откуда: Минск
Репутация: 10
С нами: 11 лет 5 месяцев

Сообщение #3 boofoo » 20.05.2013, 12:59

это к версии 1.6 ? У меня 1.6
Заменяю картинки,то бишь присваиваю им то же имя что и у стандартных картинках,но замена не происходит,не в шапке,не в блоках,что может быть?
boofoo
Репутация: 15
С нами: 11 лет 4 месяца

Сообщение #4 JoteRuso » 20.05.2013, 13:59

boofoo,
Это к любой версии подходит. Обновите страницу (Нажмите F5).
Если не помогло, обновите темы и наборы рисунков в Админке и очистите хэш форума (тоже в Админке). Если и это не поможет, то нажмите Ctrl + F5 (обновите хэш браузера) от одного до 5 раз ))).
JoteRuso M
Автор темы
Аватара
Откуда: Москва, Россия
Репутация: 541
С нами: 12 лет 5 месяцев

Сообщение #5 boofoo » 20.05.2013, 14:49

Спасибо помогло,только вот так и не понял что именно помогло,пару раз по кругу сделал и аж потом заменились :smile:
boofoo
Репутация: 15
С нами: 11 лет 4 месяца

Сообщение #6 modjo » 20.05.2013, 18:01

Ничего не понятно :fie: но тоже хотелось бы как-то разнообразить этот стандартный тёмно-синий шаблон.
modjo M
Репутация: 6
С нами: 11 лет 5 месяцев

Сообщение #7 JoteRuso » 20.05.2013, 18:38

modjo, боюсь, что тогда ничем помочь не смогу.
Если уж тут ничего не понятно, то ещё лучше я объяснить не в состоянии.
JoteRuso M
Автор темы
Аватара
Откуда: Москва, Россия
Репутация: 541
С нами: 12 лет 5 месяцев

Сообщение #8 modjo » 22.05.2013, 16:27

Правильно ли я понимаю: есть некие 4 файла-картинки
Изображение
которые нужно нарисовать точно такого же размера в новых цветах и перезалить поверх тех - так и появится новый стиль?
modjo M
Репутация: 6
С нами: 11 лет 5 месяцев

Сообщение #9 JoteRuso » 22.05.2013, 17:31

modjo, размеры не важны. Просто рисунок со снежинками сделан широким, чтобы эти самые снежинки не повторялись (например) через каждый сантиметр. Если у Вас не будет никакого рисунка на этих картинках, а будет лишь градиент, то их все можно сделать узкими. Высоту тоже определяйте сами. Но пока можете отталкиваться от высоты этих четырёх рисунков.
Здесь лишь надо учитывать принцип, что чем меньше вес изображения, тем быстрее будет грузиться страница.

Либо воспользуйтесь советом DimmmCom по использованию градиентов для заполнения рамок. Это и проще, и меньше телодвижений делать придётся )))
Последний раз редактировалось JoteRuso 22.05.2013, 17:37, всего редактировалось 1 раз.
JoteRuso M
Автор темы
Аватара
Откуда: Москва, Россия
Репутация: 541
С нами: 12 лет 5 месяцев

Сообщение #10 modjo » 22.05.2013, 17:37

Да я как бы не о снежках (сам глянул в теме где эти файлы.... не то это похоже о чём я спрашиваю).
Хотелось бы тот фон, что под Объявления, Активные темы... вот его сменить. Так то он синий. А у человека вообще там картинка с облаками. Мне бы хотя бы или другого цвета или картинкой другой.
Даже дизайнера напряг, он что-то нарисовал, а что теперь с этим делать - не знаю :(
modjo M
Репутация: 6
С нами: 11 лет 5 месяцев

Сообщение #11 JoteRuso » 22.05.2013, 17:40

Если Вы хотите изменить цветовое решение стиля, то Вам сюда.
JoteRuso M
Автор темы
Аватара
Откуда: Москва, Россия
Репутация: 541
С нами: 12 лет 5 месяцев

Сообщение #12 modjo » 22.05.2013, 17:46

Благодарчик :hi: почитаю.

Добавлено спустя 2 минуты 29 секунд:
Эх... всё есть, но нет как раз того, о чём я спрашиваю :(

Добавлено спустя 2 минуты 3 секунды:
А я вот о чём

Изображение
modjo M
Репутация: 6
С нами: 11 лет 5 месяцев

Сообщение #13 JoteRuso » 22.05.2013, 17:52

modjo:А я вот о чём
Так в этой теме именно это и описано.
Два узких рисунка окрашивают "летние" рамки, два других (со снежинками) - зимнюю. Вот их и надо менять на свой вкус.
JoteRuso M
Автор темы
Аватара
Откуда: Москва, Россия
Репутация: 541
С нами: 12 лет 5 месяцев

Сообщение #14 modjo » 22.05.2013, 18:00

По сути 2 рисунка сделать другого цвета/градиента, заменить их на сервере под теми же именами и всё? :wink: я правильно понимаю?
modjo M
Репутация: 6
С нами: 11 лет 5 месяцев

Сообщение #15 JoteRuso » 22.05.2013, 18:01

modjo,
Правильно. :smile:

Добавлено спустя 3 минуты 52 секунды:
modjo:заменить их на сервере под теми же именами и всё?
Почти всё. Потом, скорее всего, придётся подправить цвет, заполняющий нижнюю часть рамок.
В первом сообщении всё это описано.
JoteRuso M
Автор темы
Аватара
Откуда: Москва, Россия
Репутация: 541
С нами: 12 лет 5 месяцев

Сообщение #16 forekko » 27.03.2014, 22:34

Во, хорошая, годная информация!
Сейчас взял Chrome и встроенным инструментом «Проверить этот элемент» вычислил цвета и градиенты шаблона.
Редактором Notepad++ и поиском по папке с шаблоном нашёл эти значения, в основном, все они в файле colours.css.
Убрал градиенты, поправил цветовую схему слегка (из синей заливки в тёмно-серую, при наведении на ссылки не красный, а зелёный) — привожу в соответствие с расцветкой основного сайта (блог WordPress).

Обязательно всем покажу, когда доделаю и появятся первые пользователи (с новым контентом!), сейчас показывать нечего.
forekko M
Аватара
Откуда: Белгород
Репутация: 3
С нами: 10 лет 6 месяцев

Сообщение #17 darkxakep1 » 18.04.2014, 11:14

и так собственно проблема...
Код: Выделить всё
.forabg, .forumbg {
   background-color: #b3b3b3;
   background-image: url("{T_THEME_PATH}/images/bg_list.png");
    background-position: center center;
   background-repeat: no-repeat;
   background-size: 100% 100%
}
собственно сменил на серый,а осталось всё равно синим....
кэш и тд обязательно чистится.
следовательно вопрос,как исправить??
darkxakep1 M
Откуда: Оренбург
Репутация: 15
С нами: 11 лет

Сообщение #18 Sumanai » 18.04.2014, 15:15

Я за вас полработы так сделаю))

darkxakep1:и так собственно проблема...

Где вы этот код нашли? В инструкции чётко прописан код и файл, который нужно менять.
В случаи монотонной заливки картинку можно вообще убрать, оставить только саму заливку. Будет быстрее грузится страница.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 8 месяцев

Сообщение #19 darkxakep1 » 18.04.2014, 15:33

Sumanai:Я за вас полработы так сделаю))
ну так бывает чё,вам огромный респект=))
darkxakep1 M
Откуда: Оренбург
Репутация: 15
С нами: 11 лет

Как изменить цвет категории

Сообщение #20 Борис » 01.08.2014, 21:05

Как изменять цвет категории.
Вложения
Снимок.PNG
Борис M
Откуда: Амурка
Репутация: -1
С нами: 10 лет 2 месяца

След.

Вернуться в Мастерская 1.x