Создание индивидуального дизайна для vBulletin

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Установив форум, русифицировав его и понаставив необходимых хаков, все админы рано или поздно задумываются о дизайне. Я пока ещё только начинаю вникать в особенности шаблонов vBulletin, но по мере возможности буду выкладывать в эту тему все советы по созданию своего стиля на vBulletin на основе существующих. По мере пополнения темы в первый пост буду добавлять ссылки на нижележащие посты, чтобы не приходилось искать по всей теме.
Вопросы мне задавать пока рано, я сама только осваиваю этот движок, но думаю, что мой опыт верстки поможет мне успешно справиться с этой задачей.
Итак, приступаем к дизайну.

Совет №1.
Не трогайте исходный стиль!

Для того, чтобы создать его копию, над которой можно будет вдоволь поэкспериментировать, достаточно зайти в админ-панель, в левом столбце найти группу ссылок "стили и шаблоны", выбрать пункт "Управление стилями". Под таблицей с имеющимися стилями появится ссылка "создать новый стиль". Создаем.

Теперь мы можем выбрать меню "Все опции стиля" и попробовать создать основу будущего индивидуального стиля.

Примечание: изображения будут использованы те же, что и на основном стиле до тех пор, пока вы не измените пути к ним. Однако, о настройках стиля - позднее.
Повторюсь:
Правило №1: Не трогайте исходный стиль! Создайте новый!


Не думаю, что найдутся те, кто спросит "почему", но я всё же отвечу: испортив дубликат, вам нужно будет всего лишь удалить его и создать ещё один. А ошибки случаются даже у самых опытных профи, так что не лучше ли подстраховаться?

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

Аркадий 10

Пользователь
Регистрация
06.01.12
Сообщения
487
Реакции
83
Баллы
13
Очень актуальная тема, спасибо.
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Очень актуальная тема, спасибо.

Теперь главное найти время и написать всего нужного побольше :)

Итак, стиль для экспериментов создан.
Как сделать так, чтобы создателю в любой момент можно было его просмотреть, но все остальные посетители его бы не видели? Легко.
Идем в админ-панель, Основные настройки-настройки стиля и языка
и проверяем следующие два пункта:
Стиль по умолчанию - ставим какой-то из уже готовых или обычный.
Разрешить пользователям выбирать стиль? - Да.

В опциях экспериментального стиля выбираем пункт "редактировать настройки" и ставим "Нет" в пункте "Разрешить выбор пользователей".
Внизу форума появится возможность одним щелчком менять стиль отображения форума, при этом недоделанные стили обычным пользователям видны не будут. Вуаля!

***
И ещё один момент. Раз уж вы взялись за дизайн, неплохо было бы включить функцию отображения в коде страниц названий шаблонов vBulletin. Делается просто:
Основные настройки-основные настройки (не опечатка, а подраздел основных настроек)
и пункт "добавление названий шаблонов в комментарии HTML..."
Для новичков незаменимое удобство. Как правильно воспользоваться, расскажу в следующий раз.
 
Последнее редактирование:

Boss3

Пользователь
Регистрация
19.06.10
Сообщения
1.683
Реакции
392
Баллы
28
Адрес
Pirate Bay
Разрешить пользователям выбирать стиль? - Да.

Fiesta, а вот это необязательно ;)
Если ты в админке кликнешь на свой экспериментальный стиль (ну это где в стилях и шаблонах список стилей;) ) то на новой вкладке он и откроется. Ты его будешь видеть, а все остальные нет ;)
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Boss, я и это уже нашла, ага, знаю. Только если дополнительных стилей больше, чем один, эта функция становится довольно важной... Вдруг пользователи захотят оставить стандартный стиль, а эксперименты дизайнера им не понравятся? ;) Да и просто в любой момент и на любой страничке переключиться и посмотреть, как это смотрится в свежем/старом стиле, бывает удобно.
 

Boss3

Пользователь
Регистрация
19.06.10
Сообщения
1.683
Реакции
392
Баллы
28
Адрес
Pirate Bay
Вдруг пользователи захотят оставить стандартный стиль

:D А юзерам не хрен в стилях ковыряццо :D
Есть один общий и хорош :D


Fiesta, кста. Есть куча хаков которые требуют изменения шаблона. И? Ты будешь десять шабов ковырять чтоб хак поставить? ;)

Вот эсли это форум разработчиков стиля на воблу, то да. Для демок самое оно. Хочешь шаблон, выбрал - посмотрел. Да и вааще. В плане узнаваемости форум должен иметь лицо :gent:
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Fiesta, кста. Есть куча хаков которые требуют изменения шаблона. И? Ты будешь десять шабов ковырять чтоб хак поставить?

Я сначала поставила все необходимые хаки, если вы обратили внимание, а потом уже взялась за дизайн. А клонируя измененные шаблоны, автоматически для этих стилей подключаются и хаки. По крайней мере у меня всё работает.
Да, если потом надумаю ставить ещё что-нибудь, буду вручную, куда деваться...

В плане узнаваемости форум должен иметь лицо
Он и будет иметь, просто пользователи могут выбрать и другой стиль, если захотят. К Новому году я их буду радовать снежным, а летом... хотела сказать "солнечным" но передумала - лучше прохладным... :)


Но вернусь к теме.

Цвета своего экспериментального стиля все и без моих подсказок найдут, где изменить (Админ-панель --> стили и шаблоны --> Управление стилями --> Все опции стиля.)
Вообще там очень много интересного можно задать. Например, отдельные директории для изображений стиля, это пригодится, если вы надумаете менять иконки. Чтобы у разных стилей они не дублировали друг-друга, смените в опциях стиля директории, не забыв создать нужные папки на хостинге и залить в них нужные изображения.

Кстати, об иконках сегодня и хотела немного рассказать.
С иконками на разделы очень просто - есть куча хаков, предлагающих индивидуальные иконки каждому разделу и даже категориям. Гораздо хуже с иконками тем. Нет, не с теми, что можно поменять через Админ-панель --> Иконки для сообщений --> Управление иконками сообщений (меняйте-меняйте, это тоже придаст вашему форуму индивидуальности), а теми унылыми конвертиками, что по умочанию украшают все темы в разделах и оповещают нас о наличии новых сообщений в той или иной теме.
Единственное, что я откопала в сети в отношении их - это совет заменить файлы на сервере другими, но тоже в формате ".gif".
"Не хочу" - подумала я и решила написать о том, что их можно и нужно менять на красивые, объемные, с тенями и градиентами ".png" .
Никакого хака на этот счет не нашла, поэтому будем править шаблоны вручную. Для начала приготовьте все необходимые иконки на замену конвертиков, и обязательно с теми же названиями:

thread_dot.png
thread_lock.png
thread_hot.png
thread_hot_new.png
thread_new.png

и все остальные...
Ищутся в папке /images/statusicon/

и так далее... а я подожду денек, может быть, e Boss'а и на это случай имеется какой-нибудь хак?) Если не имеется, то расскажу, как это сделала я.

А пока два маленьких секрета для предыдущих этапов, наработанных за несколько лет сайтостроительства:
1) Вам пригодится программка Pixie, найдите и скачайте, это очень удобное средство чтения цвета с экрана. Вам понравился основной цвет какого-нибудь сайта? Не теряйтесь и не лазьте по вражеской CSS, просто скопируйте этот цвет с помощью Pixie прямо с любого места экрана. Вам нужно в фотошопе задать цвет букв в точности, как на том градиенте с кнопок? без проблем! Ctrl+Alt+C и цвет уже в буфере обмена, откуда легко копируется в форму фотошопа. Программка крошечная, много места и памяти не займет, но вы скоро так привыкнете к этой малышке... что-то я разошлась))) Мне в рекламные агенты пора переквалифицироваться ;)
2) Вы не дизайнер, но хотите, чтобы цвета вашего сайта гармонично сочетались? Самое известное средство - Kuler --> Visit Kuler now от Адоб, но есть еще и наши, отечественные сайты для этой цели, не менее удобные. Например, Цветогенератор. Принцип один - выберите симпатичную вам цветовую схему и придерживайтесь её в своём дизайне.
3) А кнопки где вы делаете? Заказываете знакомому дизайнеру? Выпрашиваете на форумах в разделах дизайна? О, ужас! Любые кнопки на любой вкус могу сделать "генераторы кнопок". Ищите в гугле. Лично я люблюделать их тут.

Да, а иконки в формате .png тоже не просите - всевозможные бесплатные коллекции просто наводнили интернет. Да, у меня, разумеется, есть любимый сайт, где я их выбираю из тысячи коллекций, но... это уже совсем другая тема. Должна же у женщины оставаться загадка? ;)
 

Boss3

Пользователь
Регистрация
19.06.10
Сообщения
1.683
Реакции
392
Баллы
28
Адрес
Pirate Bay
Fiesta, блин :D я думал что все знаю, а век живи век учись :D
Пикси супер! :good:


и так далее... а я подожду денек, может быть, e Boss'а и на это случай имеется какой-нибудь хак?)
Для иконок сообщений нет хака :D
Есть хак для иконок категорий, но с ним могут быть косяки
И есть хак для индивидуальных иконок разделов ;)
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Небольшой обзор возможностей фона вашего стиля:

1. Просто цвет. Задается в Админпанель - Управление стилями - Все опции стиля - вкладка Body или Фон страницы (можно и там и там, у меня, например, они отличаются, если вы хотите прозрачный, укажите вместо цвета параметр transparent)

2. Цвет и картинки.
Возможности безграничны - от маленькой иконки где-нибудь в уголке и до огромных фоновых изображений. Лично я предпочитаю "бордюры", то есть повторяющиеся изображения, подходящие для любой ширины монитора, хотя иногда приходится ставить обычные картинки, увы.
Задается через "Дополнительные определения CSS", подробно расскажу позднее.
При этом, если вы хотите зафиксировать фон (чтобы он не двигался при прокрутке страницы) стоит указать в этих дополнительных определениях:

Код:
html {background-attachment: fixed;}
или
Код:
body {background-attachment: fixed;}

(зависит от того, на какой слой вы поставите картинку)
 
Последнее редактирование:

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Давненько я тут не писала... Сегодня решила вернуться к теме иконок, правда, пока не иконок сообщений, а всего лишь иконок разделов. Не знаю, как вам, а мне удобнее делать их в формате .png, смотрится он лучше, чем .gif и прозрачность не хуже поддерживает... А уж выбор их огромен! Просто заменить их на сервере не получится, нужно править шаблоны. Этим и займемся.
Чтобы понятно было, какие иконки будем менять на .png, откройте главную страницу вашего форума и взгляните на иконки, обозначающие наличие новых тем и сообщений в разделах... Видите? На этом форуме, например, они выглядят так:





Итак, меняем.

Шаг 1.
Приготовим замену иконкам (в формате .png, разумеется), названия оставляем те же самые:
forum_new
forum_old
forum_new_lock
forum_old_lock

Шаг 2.
Заливаем их на сервер, в папку images/statusicon (или любую другую папку с вашим стилем)

Шаг 3.
В шаблоне FORUMDISPLAY и FORUMHOME ищем их названия и меняем расширения на .png
После этого внизу главной страницы (в легенде) их изображения сменятся, но возле форумов будут оставаться прежние иконки.

Шаг 4.
В шаблонах
forumhome_forumbit_level1_post
и
forumhome_forumbit_level2_post

ищем строки:

img src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].gif"

и тоже меняем расширение на нужное.

***
Всё. Ничего не забыла, кажется... Наслаждаемся новыми красивыми иконками!

Один нюанс!
Для особых педантов...
Эти иконки используются еще в одном месте, на странице вв-кодов... Можно заменить их и там:

Шаблон help_bbcodes

заменить расширения на .png (в шаблоне искать по названиям)

Напомню, что страница вв-кодов находится тут:
http://ваш сайт.ru/misc.php?do=bbcode
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Для начала приготовьте все необходимые иконки на замену конвертиков, и обязательно с теми же названиями:
thread_dot.png
thread_lock.png
thread_hot.png
thread_hot_new.png
thread_new.png
и все остальные...
Ищутся в папке /images/statusicon/

и так далее... а я подожду денек, может быть, e Boss'а и на это случай имеется какой-нибудь хак?) Если не имеется, то расскажу, как это сделала я.

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

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

в шаблоне FORUMDISPLAY ищем полные названия файлов старых иконок:

thread_hot_new.gif
thread.gif
thread_hot.gif
thread_lock.gif
thread_new.gif...

и заменяем расширения на .png

Заменили? Сохраняем. Думаете, всё? А вот не тут-то было! Не отобразятся пока ваши красивые иконки, разве что в легенде.
Почему?
Потому что ещё нужно пойти в шаблон threadbit и там аккуратненько заменить

/thread$thread[statusicon].gif"

на

/thread$thread[statusicon].png"

Только пожалуйста, не трогайте другие gif, которые есть в этом шаблоне...

Если у вас почему-то пропала кнопка "новая тема" - для создания тем, значит, вы заменили newthread.gif на newthread.png... Возвращайтесь и меняйте. B в дальнейшем будьте внимательны...

оффтоп...
Я не знаю, почему я тут пишу таким менторским тоном... простите уж. Мне сегодня поворчать охота)


Но иконочки-то встали, как миленькие! Красивенько стало... :nail:

 
Последнее редактирование:

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
джинася, не наговаривай на себя. Это у меня интернет чудит... Спасибо, поправила.
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Обещала написать статью про шапку, хотелось бы даже на тестовом поставить образцы, но пока с временем туговато... Сделаю краткое руководство для новичков, а по мере добавления материала вынесу в отдельную тему. На самом деле способов много - сейчас самый простой и быстрый.

Резиновая шапка "по-быстрому".

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

В шаблоне header немного модифицируем дефолтную табличку, находящуюся между комментариями

Код:
<!-- logo --> и <!-- /logo -->

То, что ниже - не трогаем.

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


Тем не менее, вернусь к табличке.
Допустим, у нас есть три изображения:
1) левый край шапки (left.png) ширина 100px, высота 30px
2) правый край шапки (right.png) ширина 150px, высота 50px
3) лого в центре (logo.png)

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

Код:
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100">
<img src="ссылка" width="100" height="30" border="0">
</td>
<td style="background: #FFFFFF url(images/logo.png); text-align: center;">
<h1>Название сайта (к примеру)</h1>
</td>
<td width="150">
<img src="ссылка" width="150" height="50" border="0">
</td>
</tr>
</table>


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

Код:
<a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a>

Сам адрес картинки лого прописывается в пункте "Все опции стиля" - "Изображение заголовка" или прямо ссылкой в шапке.

Тогда табличка будет выглядеть так:

Код:
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100">
<img src="ссылка" width="100" height="30" border="0">
</td>
<td style="text-align: center;">
<a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a>
</td>
<td width="150">
<img src="ссылка" width="150" height="50" border="0">
</td>
</tr>
</table>

Вот и всё. С такой шапкой справится даже новичок. Если будут вопросы - пишите!
В дальнейшем сделаю и более сложные макеты шапок, только пинайте :D


Пересмотрела код... Хочу добавить: если logo.png не фон центральной части, а именно картинка, то вставлять её следует так же через тег img.
 
Последнее редактирование:

Автоспец

Пользователь
Регистрация
12.09.12
Сообщения
101
Реакции
1
Баллы
13
Сначала рисуем шапку в фотошопе таким образом, чтобы она состояла как минимум из трех частей: левого края, центрального элемента и правого края, которые могли бы как сближаться, так и удаляться друг от друга.
У меня уже есть цельная картинка, её просто разрезать на три равные части?

Добавлено через 2 минуты
Не изменяйте ничего, предварительно не сохранив исходников, а лучше создайте дочерний стиль и на нем экспериментируйте.
Как создать дочерний стиль?
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
У меня уже есть цельная картинка, её просто разрезать на три равные части?

Нет. Надо смотреть на конкретной картинке, где и как лучше разрезать. Если не хотите показывать на форуме, можете кинуть мне эскиз в ЛС?

Как создать дочерний стиль?

Админка - управление стилями - создать новый стиль. И в окошке родительского указать необходимый.
 

Прометей

Пользователь
Регистрация
15.08.12
Сообщения
913
Реакции
211
Баллы
29
У меня уже есть цельная картинка, её просто разрезать на три равные части?
Не обязательно так делать: посмотрите как это сделано на дефолтном стиле: кликабельная картинка Лого (которая занимает не так много места) и картинка фона. Ширина которого задаётся в процентах. Этим и достигается "резиновость".
 

Boss3

Пользователь
Регистрация
19.06.10
Сообщения
1.683
Реакции
392
Баллы
28
Адрес
Pirate Bay
На дефолтном стиле трешки нет картинки фона.
 

Прометей

Пользователь
Регистрация
15.08.12
Сообщения
913
Реакции
211
Баллы
29
Верно: там картинка vbulletin3_logo_white.gif и фон, цвет которого задан через css. Фон в виде, если Вы это видели когда, вертикальной черты. Длину которой задают через проценты.
 

Автоспец

Пользователь
Регистрация
12.09.12
Сообщения
101
Реакции
1
Баллы
13
Где именно (в каком шаблоне) лежит картинка шапки vbulletin3_logo_white.gif?
 

Wmboard

Пользователь
Регистрация
01.01.70
Сообщения
9.274
Реакции
2.665
Баллы
28
Адрес
На wmboard
Не в шаблоне, а в папке.
\images\misc\
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Автоспец, я же писала выше тот код. что отвечает за лого.

Код:
<img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" />

Шаблон header разумеется. Но ссылки там нет - там только переменная. Хочешь - замени на ссылку.
 

джинася

Пользователь
Регистрация
13.03.12
Сообщения
547
Реакции
229
Баллы
28
Вообще там очень много интересного можно задать. Например, отдельные директории для изображений стиля, это пригодится, если вы надумаете менять иконки. Чтобы у разных стилей они не дублировали друг-друга, смените в опциях стиля директории, не забыв создать нужные папки на хостинге и залить в них нужные изображения.

Пробовала менять конвертики. Сохраняла в .gif
Заливала в папку statusicon нового стиля, а иконки не поменялись.
Что делать?
 

Wmboard

Пользователь
Регистрация
01.01.70
Сообщения
9.274
Реакции
2.665
Баллы
28
Адрес
На wmboard
джинася, сперва подождите немного. Новые иконки бывают появляются не сразу, а через какое то время. Кэш хостинга, кэш провайдера.
Но это при условии, что вы все сделали правильно :)
 

koil

Пользователь
Регистрация
16.01.13
Сообщения
577
Реакции
98
Баллы
13
выбираете пункт "Нет родительского стиля". И ваш клон совершенно отделен и готов к экспериментам.
а если нет?
Дочерний будет влиять на родительский?

Добавлено через 7 минут
Не обязательно так делать: посмотрите как это сделано на дефолтном стиле: кликабельная картинка Лого (которая занимает не так много места) и картинка фона. Ширина которого задаётся в процентах. Этим и достигается "резиновость".
т.е. вместо лого можно поставить любого размера картинку, а картинка фона сама ужмется? Или надо ставить 0% ?

Добавлено через 2 минуты
Автоспец, я же писала выше тот код. что отвечает за лого.

Код:
<img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" />

Шаблон header разумеется. Но ссылки там нет - там только переменная. Хочешь - замени на ссылку.
(какую переменную надо заменить на ссылку?)
другими словами вместо копирования и замены лого, можно просто ссылку на картинку, которая стоит в другом месте?
И в следующий раз, для замены, достаточно поменять картинку на месте ссылки?(и все это не залезая в админку форума)

Добавлено через 10 минут
Сначала рисуем шапку в фотошопе таким образом, чтобы она состояла как минимум из трех частей: левого края, центрального элемента и правого края, которые могли бы как сближаться, так и удаляться друг от друга.
в каком смысле сближаться и удаляться?..
на мониторах в другим разрешением между ними появится щель?
 

Wmboard

Пользователь
Регистрация
01.01.70
Сообщения
9.274
Реакции
2.665
Баллы
28
Адрес
На wmboard
а если нет?
Дочерний будет влиять на родительский?

Родительский будет влиять на дочерний.


(какую переменную надо заменить на ссылку?)
$stylevar[titleimage]


И в следующий раз, для замены, достаточно поменять картинку на месте ссылки?(и все это не залезая в админку форума)
Да


в каком смысле сближаться и удаляться?..
Ну вы же дизайнер говорили... "Резиновость" картинки знаете что такое?
 

koil

Пользователь
Регистрация
16.01.13
Сообщения
577
Реакции
98
Баллы
13
Родительский будет влиять на дочерний.
Тогда связь можно и оставить?
Ведь меняться будет только дочерний.
А если в родительский добавить хаки, то они появятся и в дочернем.
Я правильно понял?

Это интересно.
Можно же наверное наладить что-то типа слайд-шоу..
Каждый день, автоматом новая картинка.. или какая-нибудь фраза.
Можно ли что-то сделать с фразами, но не в виде картинок?
Т.е. смена текста, не картинки.

"Резиновость" картинки знаете что такое?
Теперь сомневаюсь..
Полагаю что любой размер картинки вытянется под размер, разрешение экрана(пропорционально).
Но если есть еще сближение и отдаление частей..
Тогда нужно наверное прижимать "края" к центру?
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Тогда связь можно и оставить?

Можно.

А если в родительский добавить хаки, то они появятся и в дочернем.

Хаки добавляются на все стили сразу. А вот изменения в шаблонах передаются от родительского дочернему, верно.

Можно же наверное наладить что-то типа слайд-шоу..

Есть и такие скрипты... и даже хаки для рыбки. Вы только определитесь, что именно хотите.

Можно ли что-то сделать с фразами, но не в виде картинок?

А что с ними нужно сделать? Зачем? Цель?

Полагаю что любой размер картинки вытянется под размер, разрешение экрана(пропорционально)

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

Тогда нужно наверное прижимать "края" к центру?

Можно и к краям. Зависит от задумки.
 

koil

Пользователь
Регистрация
16.01.13
Сообщения
577
Реакции
98
Баллы
13
Есть и такие скрипты... и даже хаки для рыбки. Вы только определитесь, что именно хотите.

А что с ними нужно сделать? Зачем? Цель?

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

Пример:
"Рисунки" это различные фото на военную тематику,
а "фразы" это высказывания известных людей на тему войны.

Ну или фото природы, а в другой части стихи.

Заготовки допустим лежат где-то в отдельных папках.
Закидать к примеру с запасом на 1 год, и в течении года все будет меняться, каждый день...

Добавлено через 3 минуты
Это как поставить, можно и так, чтобы не тянулся... А если картинка стоит так, что тянется..
аа.. это существенно.
т.е. два варианта.
1. Картинка растягивается под заготовленный размер.
2. Шапка растягивается под размер картинки.

Можно узнать какие теги в каждом случае должны быть?
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
В одной части постоянно сменяется фото, в другой части фразы

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

т.е. два варианта.
1. Картинка растягивается под заготовленный размер.
2. Шапка растягивается под размер картинки.

Можно узнать какие теги в каждом случае должны быть?

Это настолько объемный вопрос, что я сейчас в разделе "начинающего кодера" темку создам. Многим будет полезно. Картинки ведь можно (и нужно) не только через img ставить, но и фоном...
 
Последнее редактирование:
  • Мне нравится
Реакции: koil

Wmboard

Пользователь
Регистрация
01.01.70
Сообщения
9.274
Реакции
2.665
Баллы
28
Адрес
На wmboard
Я правильно понял?
Да, правильно.


Можно же наверное наладить что-то типа слайд-шоу..
Каждый день, автоматом новая картинка.. или какая-нибудь фраза.
Можно ли что-то сделать с фразами, но не в виде картинок?
Т.е. смена текста, не картинки.
Есть хак смены логотипа https://lumtu.com/haki-vbulletin/2558-hak-avtomaticheskoi-smeny-logotipa-na-vbulletin.html
Сделайте текст картинкой и вперед.


Полагаю что любой размер картинки вытянется под размер, разрешение экрана(пропорционально).
Размер любой, но не любая картинка
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Размер любой, но не любая картинка

Да и картинка любая (если правильно поставить), просто не любая после этого будет нормально смотреться...
[OFF]Написала начало статьи (с картинками), иду класть... и картинки грузить))[/OFF]

Добавлено через 3 минуты
Хак автоматической смены логотипа на vBulletin

А я и забыла, что он у нас тут лежит)) Спасибо...
 

Wmboard

Пользователь
Регистрация
01.01.70
Сообщения
9.274
Реакции
2.665
Баллы
28
Адрес
На wmboard
Юль, в резиновой картинке должно быть место где она может тянуться. То есть фон. Ты же не сможешь, например заставить тянуться лошадь, или авто, или тело человека. Ведь в таком случае он потеряет пропорции. А вот небо тянуться может. Поле для гольфа. Море, река и тд.
Например есть картинка, есть разные разрешения мониторов. Нам нужно чтобы картинка смотрелась на всю ширину монитора, как 800 пх, так и 1280 пх. Значит нам ее нужно растянуть по горизонтали почти в полтора раза. А чтобы картинка смотрелась со всеми пропорциями, когда мы рисуем хедер мы предусматриваем место где она будет растягиваться. Понимаешь? :)
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Veter, я-то понимаю... Но лично я для резиновой картинки (вообще термин некорректен, это по сути резиновая шапка, а не картинка) беру фон, который можно не тянуть, а повторять по горизонтали... Бордюр, по простому...
Ты же понимаешь, что так всё равно лучше...
 

Wmboard

Пользователь
Регистрация
01.01.70
Сообщения
9.274
Реакции
2.665
Баллы
28
Адрес
На wmboard
а повторять по горизонтали...

Может по вертикали повторять... :sorry: Если по горизонтали тянуть...

Ты же понимаешь, что так всё равно лучше...

Наверное разные случаи бывают. Где то бордюр лучше, а где-то тянуть фоном...

Добавлено через 1 минуту
это по сути резиновая шапка, а не картинка)

Не, ну подожди :) Ну шапка. А что такое шапка? Та же картинка. А чуть раньше - PSD в слоях, или рисунок в векторе. :)
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Наверное разные случаи бывают.

Этим пронизана вся вёрстка... Нет единого рецепта. Нельзя задать универсальный код шапки. подходящий на все случаи жизни... Мы. наверное, правда, имеем ввиду разное)) Ой дойдут руки - на тестовом сделаю резиновую шапку)) Картинки с тебя ;) Так быстрее придем к консенсусу)))
 

Wmboard

Пользователь
Регистрация
01.01.70
Сообщения
9.274
Реакции
2.665
Баллы
28
Адрес
На wmboard
Ой дойдут руки - на тестовом сделаю резиновую шапку))

На каком из них? Их же три уже :)
Если на vb, то дефолтный стиль и так резиновый :D

Можно провести эксперимент. Дать тебе не резиновую картинку, а ты из нее сделаешь резиновую шапку. А? ;)
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Если на vb, то дефолтный стиль и так резиновый

Он не показательный. Мы говорим о картинке из нескольких частей, с независимым фоном...

Можно провести эксперимент. Дать тебе не резиновую картинку, а ты из нее сделаешь резиновую шапку. А?

Зависит от картинки. Если картинка позволяет разрезание и подстановку фона - да, сделаю.
Жду картинку)
 
Последнее редактирование:

Wmboard

Пользователь
Регистрация
01.01.70
Сообщения
9.274
Реакции
2.665
Баллы
28
Адрес
На wmboard

koil

Пользователь
Регистрация
16.01.13
Сообщения
577
Реакции
98
Баллы
13
А он обновлен?
http://pcvector.ru/t3359/
там написано:
"Все кто скачал хак до 26 февраля 2012 года, скачайте архив заново и импортируйте продукт с перезаписью!"

Добавлено через 55 минут
Верно: там картинка vbulletin3_logo_white.gif и фон, цвет которого задан через css. Фон в виде, если Вы это видели когда, вертикальной черты. Длину которой задают через проценты.
еще раз.. для тупых..
как фон заменить на картинку?
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
как фон заменить на картинку?

koil, я создала обещанную тему про вставку картинок.... Будет что-то непонятно - спрашивайте.

Сегодня я расскажу, как перенести строку с названием колонок на главной под название категорий. Вот что я имею ввиду:

ДО (дефолтный вариант):



ПОСЛЕ:



Теперь сам процесс пошагово:

Идем в шаблон FORUMHOME
находим там

Код:
<thead>	<tr align="center"> <td class="thead"> </td> <td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td> <td class="thead">$vbphrase[last_post]</td> <td class="thead">$vbphrase[threads]</td> <td class="thead">$vbphrase[posts]</td> <if condition="$vboptions['showmoderatorcolumn']"> <td class="thead">$vbphrase[moderator]</td> </if>	</tr>
</thead>

Вырезаем этот кусочек.
Сохраняем шаблон.

Затем идем в шаблон forumhome_forumbit_level1_nopost
ищем там $childforumbits
и перед ним вставляем

Код:
 <tr align="center"> <td class="thead"> </td> <td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td> <td class="thead">$vbphrase[last_post]</td> <td class="thead">$vbphrase[threads]</td> <td class="thead">$vbphrase[posts]</td> <if condition="$vboptions['showmoderatorcolumn']"> <td class="thead">$vbphrase[moderator]</td> </if>	</tr>

В нестандартных шаблонах код может несколько отличаться.
Всё!
Будут какие-то "косяки" при нестандартной структуре форумов - пишите, но на локали никаких проблем я не обнаружила...
 

Wmboard

Пользователь
Регистрация
01.01.70
Сообщения
9.274
Реакции
2.665
Баллы
28
Адрес
На wmboard

Наверное нет... я не зарегистрирован на форуме Вектора, но если мне не изменяет память там не было дыр. По-моему там был исправлен какой-то мелкий баг, и решение по нему было в нашей теме.
 

koil

Пользователь
Регистрация
16.01.13
Сообщения
577
Реакции
98
Баллы
13
В шаблоне header немного модифицируем дефолтную табличку, находящуюся между комментариями

Код:
<!-- logo --> и <!-- /logo -->


Код:
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100">
<img src="ссылка" width="100" height="30" border="0">
</td>
<td style="background: #FFFFFF url(images/logo.png); text-align: center;">
<h1>Название сайта (к примеру)</h1>
</td>
<td width="150">
<img src="ссылка" width="150" height="50" border="0">
</td>
</tr>
</table>


Вот и всё. С такой шапкой справится даже новичок. Если будут вопросы - пишите!
Что-то у меня ничего не получилось..
Создал папку images/logo куда закинул "лого" с произвольным названием.
Путь images/logo/лого.gif поставил везде есть слово ссылка
к примеру вместо "<img src="ссылка" wid.."
<img src="images/logo/лого.gif" wid.."

Там где "заголовок шапки" в опциях, путь указал с названием лого.

Теги все заменил в хейдере.. между <!-- logo --> и <!-- /logo -->

Шапка не сменилась..
Ну хотя бы наперекосяк, три одинаковые картинки..больше или меньше должны были появится думаю..
даже надписи "здесь должно быть название" не появилось..
Делал в "дочерней"..
Что еще забыл сделать?

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

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Шапка не сменилась..
Делал в "дочерней"..

А что в шапке? дефолтный лого или вообще пустое место? или "схлопнулось"?

к примеру вместо "<img src="ссылка" wid.."
<img src="images/logo/лого.gif" wid.."

попробуй указать полные , а не относительные ссылки и заодно так проверится доступность файлов.
 

koil

Пользователь
Регистрация
16.01.13
Сообщения
577
Реакции
98
Баллы
13
А что в шапке?..
все получилось..
оказыватся забыл ткнуть на сам стиль..

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

Да и кстати что с "заголовком изображения"?
Там указан старый файл, и он лежит на месте.
Почему ж его нигде не видно?
 
Последнее редактирование:

Статистика форума

Темы
200.635
Сообщения
380.523
Пользователи
327.875
Новый пользователь
fora777
Сверху Снизу