Пример некоторой подгонки стиля

Есть любые вопросы, связанные со стилями/темами для phpBB 2.0.x? Ишите ответы здесь!
Мариша
phpBB 1.4.3
Сообщения: 76
Зарегистрирован: 26.05.2007 23:10

Пример некоторой подгонки стиля

Сообщение Мариша » 14.12.2007 1:02

Подскажите как сделать,чтоб шапка форума менялась в зависимости от разрешения экрана...у меня она выглядит красиво,а у некоторых последнее слово просто напросто не влезает :(

Аватара пользователя
Rayden
Former team member
Сообщения: 3739
Зарегистрирован: 27.06.2005 1:07
Поблагодарили: 44 раза
Контактная информация:

Сообщение Rayden » 14.12.2007 1:39

Мариша
Это еще что, а у меня она влезает два раза:

Добавлено спустя 5 минут 38 секунд:

Я бы посоветовал разделить цветочный фон и надпись.
Надпись сделать отдельным гифом и положить сверху, выравнивая по центру.
Вложения
for_guru4.gif
phpBB2 FAQ
phpBB3 FAQ

Аватара пользователя
RedNaxi
Former team member
Сообщения: 916
Зарегистрирован: 21.02.2007 2:05
Откуда: BeBoss.ru
Поблагодарили: 4 раза

Сообщение RedNaxi » 14.12.2007 2:46

я бы посоветолвал всю шапку переделать - ссылки сделать нормально текстом, там картинки ни к чему, большую картинку просто вырезхать из нее кусочек и сделать рипит, а надпись поверх просто текстом, ну и вообще уменьшить шрифт на странице а то гигантский какой то имхо.

Мариша
phpBB 1.4.3
Сообщения: 76
Зарегистрирован: 26.05.2007 23:10

Сообщение Мариша » 14.12.2007 12:40

по поводу инфобокса-это да...достал перебоями в работе :(

по поводу шрифта
уменьшить шрифт на странице
-подправила
:oops:

а по поводу шапки спасибо за советы,многое не поняла-ушла разбираться :D (если кто подскажет где можно об этом почитать подробнее ,буду признательна)

Добавлено спустя 14 минут 9 секунд:
Rayden писал(а):Мариша
Плюс пункты верхнего меню выполнены разным шрифтом - не комильфо.
я не волшебник,я только учусь (с)
:D

зато у Вас красиво сделано...
в соседней теме уже отметилась по поводу кнопочек

Аватара пользователя
Rayden
Former team member
Сообщения: 3739
Зарегистрирован: 27.06.2005 1:07
Поблагодарили: 44 раза
Контактная информация:

Сообщение Rayden » 14.12.2007 15:32

а чего там учиться? Загоняешь все кнопки в фотошоп, делаешь одновременно, одним и тем же шрифтом. И обязательно сглаживание шрифта включи, а то драные буквы получаются.

По поводу шапки все просто. У тебя сейчас в качестве шапки огромная картинка с цветами и надписью. Раздели ее. Отрежь от нее самое начало, примерно квадратик, там как раз повторяющийся рисунок - и пусти его фоном. Он будет повторяться по горизонтали и засеет всю шапку ромашками.
А надпись Lucky fam... сделай или как я советовал - гифом с прозрачностью, или как RedNaxi советовал - обычной строкой огромным шрифтом, и выведли отдлельным блоком поверх ромашек.
phpBB2 FAQ
phpBB3 FAQ

Аватара пользователя
Палыч
Former team member
Сообщения: 9683
Зарегистрирован: 24.05.2006 23:20
Откуда: Питер
Благодарил (а): 3 раза
Поблагодарили: 453 раза
Контактная информация:

Сообщение Палыч » 14.12.2007 15:40

Rayden писал(а):Загоняешь все кнопки в фотошоп
Мариша Вот здесь почитайте http://www.phpbbguru.net/community/view ... hp?t=14854
Rayden писал(а):Отрежь от нее самое начало, примерно квадратик, там как раз повторяющийся рисунок - и пусти его фоном
Только там придётся немного покумекать с ячейками-строками-таблицами. У вас сейчас этот рисунок идёт как фон ячейки (в которой таблица, у которой две строки, в верхней Регистрация, в нижней меню).
Rayden писал(а):А надпись Lucky fam... сделай или как я советовал - гифом с прозрачностью, или как RedNaxi советовал - обычной строкой огромным шрифтом
Лучше рисунком, так как шрифт красивый сложнее подобрать (если текстом).
Не все то WINDOWS, что висит... phpBB только учусь.
ICQ, email, ЛС - только для личных сообщений. Вопросы по phpbb только на форумах. По найму не работаю.

Аватара пользователя
PhoeNiXX
phpBB 1.4.0
Сообщения: 31
Зарегистрирован: 07.12.2007 2:20
Откуда: Питер

Сообщение PhoeNiXX » 14.12.2007 15:55

Я делал шапку так: в фотошопе нарисовал шапку таким образом, чтобы основное название сайта и логотип был слева, далее идет некий фон (не обязательно один цвет, главное, чтоб он был однородным), далее справа конец шапки - тоже рисунок, который как бы вытекает из этого фона. В итоге все выглядит как единое целое. Далее вырезаешь левую часть (для нормального отображения под все обычные разрешения экрана я сделал его шириной 660 pix), вырезаешь повторяющийся кусок (у меня например он шириной 3 pix), и вырезаешь правую часть шапки (у меня получилось 86 pix). Потом в overall_header.tpl занес все это такимп образом:

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

<table  width="80%" height="110" cellspacing="0" cellpadding="0" border="0" align="center" background="templates/SubSilver/images/Forum_Header_sp3_ed.jpg"> 
	<tr><td align="left">
<IMG SRC=templates/SubSilver/images/head_l.jpg border=no></td>
<td align="right"><IMG SRC=templates/SubSilver/images/head_r.jpg border=no></td></tr></TABLE>
Forum_Header_sp3_ed.jpg - фон таблицы = повторяющийся кусочек
head_l.jpg - левая часть шапки
head_r.jpg - правая часть шапки
В итоге - при любых разрешениях экрана - шапка выглядит единым целым - увеличивается только повторяющаяся область.
Важно нарисовать все это таким образом, чтобы эта повторяющаяся область не бросалась в глаза и все выглядело единым целым.
P.S. - ширина таблицы у меня 80% - можно задать нужное тебе значение. Для твоего сайта 100% надо ставить.

Аватара пользователя
Rayden
Former team member
Сообщения: 3739
Зарегистрирован: 27.06.2005 1:07
Поблагодарили: 44 раза
Контактная информация:

Сообщение Rayden » 14.12.2007 16:10

Мариша
Можно ваш overal_header? Только вчерашний, плиз. И картинку с ромашками.
На самом деле там всего три-четыре шага надо сделать, не сложных.

Добавлено спустя 3 минуты 8 секунд:
Палыч писал(а): Только там придётся немного покумекать с ячейками-строками-таблицами. У вас сейчас этот рисунок идёт как фон ячейки (в которой таблица, у которой две строки, в верхней Регистрация, в нижней меню).
Нет проблем, делаем третью, посередине и в нее надпись вставляем.
Палыч писал(а):
Rayden писал(а):А надпись Lucky fam... сделай или как я советовал - гифом с прозрачностью, или как RedNaxi советовал - обычной строкой огромным шрифтом
Лучше рисунком, так как шрифт красивый сложнее подобрать (если текстом).
Добавлено спустя 2 минуты 50 секунд:

PhoeNiXX
Не путай человека, ей нужно с конкретной шапкой разобраться.
Последний раз редактировалось Rayden 14.12.2007 16:11, всего редактировалось 1 раз.
phpBB2 FAQ
phpBB3 FAQ

Аватара пользователя
RedNaxi
Former team member
Сообщения: 916
Зарегистрирован: 21.02.2007 2:05
Откуда: BeBoss.ru
Поблагодарили: 4 раза

Сообщение RedNaxi » 14.12.2007 16:15

я бы эти кнопки таки просто текстом пустил, там в принципе красивый особо шрифт ни к чему а фон там однотонный...
тогда и с фотошопом мучится не надо будет.

Мариша
phpBB 1.4.3
Сообщения: 76
Зарегистрирован: 26.05.2007 23:10

Сообщение Мариша » 14.12.2007 16:26


Аватара пользователя
RedNaxi
Former team member
Сообщения: 916
Зарегистрирован: 21.02.2007 2:05
Откуда: BeBoss.ru
Поблагодарили: 4 раза

Сообщение RedNaxi » 14.12.2007 16:30

советую удалить код из сообщения, а овералл хидер и картинки которые к нему относятся выложить в архиве. если бы нажмете ответить а не будете пользоваться быстрым ответом вы увидете что на этом форуме есть возможность прикреплять файлы к сообщениям.

Аватара пользователя
Rayden
Former team member
Сообщения: 3739
Зарегистрирован: 27.06.2005 1:07
Поблагодарили: 44 раза
Контактная информация:

Сообщение Rayden » 14.12.2007 17:28

Ну поехали...
1. Отрезаем от ромашек повторяющийся рисунок, у меня получилось 105х80 пикселей. Вот он - lucky2.jpg

Добавлено спустя 6 минут 19 секунд:

2. в хидере заменяем старую картинку на новую:
Находим строчку (у меня 244)
<td width="98%" valign="top" background="templates/skyLineOrange/images/lucky.gif">
и меняем на
<td width="98%" valign="top" background="templates/skyLineOrange/images/lucky2.jpg">
Должно получиться что-то типа этого:

Добавлено спустя 7 минут 22 секунды:

Так, дальше пока сделаю паузу. Попробую разобраться, зачем там аж ЧЕТЫРЕ вложенных таблицы. У меня руки тянуться выкинуть их и вставить одну. Сейчас поэкспериментирую.

Добавлено спустя 14 минут 48 секунд:

4. В районе 270 строки находим такой код:

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

</table> 
</td> 
</tr> 
</table> </td> 
</tr> 
<tr> 

<td height="28" background="templates/skyLineOrange/images/panel_2_bg.gif">
И добавляем еще одну ячейку. Именно в ней и будет Главная Надпись. Пока это просто Lucky Families Piter :

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

</table> 
</td> 
</tr> 
</table> </td> 
</tr> 
<tr align="center">
<td align="center">Lucky Families Piter 
</td>
</tr> 
<tr>
<td height="28" background="templates/skyLineOrange/images/panel_2_bg.gif">
Добавлено спустя 14 минут 26 секунд:

5. Ну просто надпись шрифтом, как заметил Палыч (он умный, он тоже с Питера :D ), не слишком хороша, поэтому создаем lfp.gif в котором только одна надпись и вставляем его в созданную нами ячейку:

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

</table> 
</td> 
</tr> 
</table> </td> 
</tr> 
<tr align="center"> 
<td align="center"><img src="templates/skyLineOrange/images/lfp.gif">
</td> 
</tr> 
<tr> 
<td height="28" background="templates/skyLineOrange/images/panel_2_bg.gif">
Добавлено спустя 5 минут 42 секунды:

Уф... мастер-класс окончен. Конечно же это все не слишком изящно, конечно же это все надо посмотреть, как будет показываться в разных браузерах на разных разрешениях, конечно же кое-что надо вынести в стили, но на первый взгляд должно работать.
Критика принимается, но хочу заметить перед нами стояла конкретная задача - сделать, чтоб название форума в шапке видно было всем.

Кнопками займется позже - кофетайм.
Вложения
lfp.gif
lfp.gif (2.72 КБ) 4875 просмотров
for_guru5.gif
lucky2.jpg
lucky2.jpg (3.28 КБ) 4892 просмотра
phpBB2 FAQ
phpBB3 FAQ

Мариша
phpBB 1.4.3
Сообщения: 76
Зарегистрирован: 26.05.2007 23:10

Сообщение Мариша » 14.12.2007 19:01

спасибо за труды


http://forum.luckyfamilies.ru
вот результат....
жаль только что надпись всё так же мала :( ...так и должно быть?

только сейчас заметила :shock: ...ячейки все стали вкривь вкось...что я опять натворила? :(

Аватара пользователя
Rayden
Former team member
Сообщения: 3739
Зарегистрирован: 27.06.2005 1:07
Поблагодарили: 44 раза
Контактная информация:

Сообщение Rayden » 14.12.2007 19:12

ээээ... ты не прочла пятого пункта. Там я заменил текстовую надпись картинкой - lfp.gif

Какие ячейки? В разделах? Они и вчера разные были, глянь на мой скриншот вчерашний.
phpBB2 FAQ
phpBB3 FAQ

Мариша
phpBB 1.4.3
Сообщения: 76
Зарегистрирован: 26.05.2007 23:10

Сообщение Мариша » 14.12.2007 19:20

ого...и правда...значит вчера ошиблась при установке мода
Glance...

а с шапкой опять беда какая-то :cry: ...можно её поуже сделать, а то она в ширину разошлась? так чтоб она была как и раньше вровень с логотипом

Закрыто

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