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

Board index phpBBex 1.x Мастерская

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

Post #1by JoteRuso » 24.04.2013, 19:55

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

Image
Это "летние" файлы 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. Тогда Вы просто не увидите границы перехода и заливка блока будет выглядеть абсолютно ровной.

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

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

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

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

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

Image Image

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

Если Вы вдруг не знаете, как вам поменять формат рисунка на .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");

Вот, собственно, и всё =)
Last edited by JoteRuso on 22.05.2013, 17:46, edited 2 times in total.
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 3 months

Post #2by DimmmCom » 29.04.2013, 01:59

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

Для этого надо в файле colours.css добавить к фоновому изображению несколько атрибутов:
Code: Select all
.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%;
}
Аналогично делаем для шапки
Code: Select all
.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;
}

Из плюсов данного способа заполнения, я бы отметил: широкий цветовой диапозон при оформлении блоков. Ведь, как известно, при оформлении блоков при помощи
Code: Select all
background-color: #2C5687;
цветовой диапозон не так велик.
DimmmCom M
Новичок
Avatar
Age: 34
Location: Минск
Reputation: 10
With us: 4 yaers 3 months

Post #3by boofoo » 20.05.2013, 12:59

это к версии 1.6 ? У меня 1.6
Заменяю картинки,то бишь присваиваю им то же имя что и у стандартных картинках,но замена не происходит,не в шапке,не в блоках,что может быть?
boofoo
Бывалый
Reputation: 15
With us: 4 yaers 2 months

Post #4by JoteRuso » 20.05.2013, 13:59

boofoo,
Это к любой версии подходит. Обновите страницу (Нажмите F5).
Если не помогло, обновите темы и наборы рисунков в Админке и очистите хэш форума (тоже в Админке). Если и это не поможет, то нажмите Ctrl + F5 (обновите хэш браузера) от одного до 5 раз ))).
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 3 months

Post #5by boofoo » 20.05.2013, 14:49

Спасибо помогло,только вот так и не понял что именно помогло,пару раз по кругу сделал и аж потом заменились :smile:
boofoo
Бывалый
Reputation: 15
With us: 4 yaers 2 months

Post #6by modjo » 20.05.2013, 18:01

Ничего не понятно :fie: но тоже хотелось бы как-то разнообразить этот стандартный тёмно-синий шаблон.
modjo M
Мастер
Reputation: 6
With us: 4 yaers 4 months

Post #7by JoteRuso » 20.05.2013, 18:38

modjo, боюсь, что тогда ничем помочь не смогу.
Если уж тут ничего не понятно, то ещё лучше я объяснить не в состоянии.
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 3 months

Post #8by modjo » 22.05.2013, 16:27

Правильно ли я понимаю: есть некие 4 файла-картинки
Image
которые нужно нарисовать точно такого же размера в новых цветах и перезалить поверх тех - так и появится новый стиль?
modjo M
Мастер
Reputation: 6
With us: 4 yaers 4 months

Post #9by JoteRuso » 22.05.2013, 17:31

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

Либо воспользуйтесь советом DimmmCom по использованию градиентов для заполнения рамок. Это и проще, и меньше телодвижений делать придётся )))
Last edited by JoteRuso on 22.05.2013, 17:37, edited 1 time in total.
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 3 months

Post #10by modjo » 22.05.2013, 17:37

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

Post #11by JoteRuso » 22.05.2013, 17:40

Если Вы хотите изменить цветовое решение стиля, то Вам сюда.
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 3 months

Post #12by modjo » 22.05.2013, 17:46

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

Added after 2 minutes 29 seconds:
Эх... всё есть, но нет как раз того, о чём я спрашиваю :(

Added after 2 minutes 3 seconds:
А я вот о чём

Image
modjo M
Мастер
Reputation: 6
With us: 4 yaers 4 months

Post #13by JoteRuso » 22.05.2013, 17:52

modjo wrote:А я вот о чём
Так в этой теме именно это и описано.
Два узких рисунка окрашивают "летние" рамки, два других (со снежинками) - зимнюю. Вот их и надо менять на свой вкус.
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 3 months

Post #14by modjo » 22.05.2013, 18:00

По сути 2 рисунка сделать другого цвета/градиента, заменить их на сервере под теми же именами и всё? :wink: я правильно понимаю?
modjo M
Мастер
Reputation: 6
With us: 4 yaers 4 months

Post #15by JoteRuso » 22.05.2013, 18:01

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

Added after 3 minutes 52 seconds:
modjo wrote:заменить их на сервере под теми же именами и всё?
Почти всё. Потом, скорее всего, придётся подправить цвет, заполняющий нижнюю часть рамок.
В первом сообщении всё это описано.
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 3 months

Post #16by forekko » 27.03.2014, 22:34

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

Обязательно всем покажу, когда доделаю и появятся первые пользователи (с новым контентом!), сейчас показывать нечего.
forekko M
Новичок
Avatar
Age: 24
Location: Белгород
Reputation: 3
With us: 3 yaers 4 months

Post #17by darkxakep1 » 18.04.2014, 11:14

и так собственно проблема...
Code: Select all
.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
Бывалый
Age: 30
Location: Оренбург
Reputation: 14
With us: 3 yaers 10 months

Post #18by Sumanai » 18.04.2014, 15:15

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

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

Где вы этот код нашли? В инструкции чётко прописан код и файл, который нужно менять.
В случаи монотонной заливки картинку можно вообще убрать, оставить только саму заливку. Будет быстрее грузится страница.
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M
Гуру
Avatar
Reputation: 1581
With us: 4 yaers 6 months

Post #19by darkxakep1 » 18.04.2014, 15:33

Sumanai wrote:Я за вас полработы так сделаю))
ну так бывает чё,вам огромный респект=))
darkxakep1 M
Бывалый
Age: 30
Location: Оренбург
Reputation: 14
With us: 3 yaers 10 months

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

Post #20by Борис » 01.08.2014, 21:05

Как изменять цвет категории.
Attachments
Снимок.PNG
Борис M
Новичок
Location: Амурка
Reputation: -1
With us: 3 yaers 1 month

Next

Return to Мастерская