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

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

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

Указать ширину в процентах и не указывать высоту. Тогда картинка изменится пропорционально своему размеру.
Но НЕЛЬЗЯ растянуть картинку без потери качества... если ширина картинки 300px, растянув ее на 1024 по ширине, вы получите туманный эффект на ней.

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

Могу подсказать, только если увижу конкретный код, а так это гадание на кофейной гуще.

 

[koil]

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

"не указывать" это значит в кавычках поставить "0"? или просто оставить кавычки ""? Или удалить сам тег?

Но НЕЛЬЗЯ растянуть картинку без потери качества...

да это понятно.. если картинка изначально имеет слишком высокое качество, то растяжение не помешает..
Главная "потеря качества" это искажение от нарушения пропорций..
Тут даже и высокое качество не поможет.

Могу подсказать, только если увижу конкретный код, а так это гадание на кофейной гуще.

имел в виду вот этот момент

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

 

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

"не указывать" это значит в кавычках поставить "0"? или просто оставить кавычки ""? Или удалить сам тег?

Удалить тег.

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

Или слишком большой размер... но тут другой минус - она будет тяжелой

имел в виду вот этот момент

Его не видно, потому что вы убрали его код из шапки... он там "не вызывается" - других причин не вижу.

 

[koil]

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


У меня стоит так

<td width="50%">
<img src="https://lumtu.com/images/logos/logon2.gif" width="100%" border="1">
</td>

<td width="50%">
<img src="https://lumtu.com/images/logon/log3.png" width="100%" border="1">
</td>

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

ширина картинок одинаковая.. 500пикселей..
по идее должно ужать и ужимает.. по высоте искажений нет, все пропорционально.

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

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

В хроме все отлично срабатывает. И выравнивание и размеры и растяжение..

 

[koil]

Похоже сегодня ни у кого нет времени..

 

[Grande1]

Как сменить?



Как сменить на серый дизайн?)

Добавлено через 16 минут
и также сменить цвет писание по умолчанию с серого на белый?

 

[Wmboard]

Админка, ваш шаблон, все опции стиля и вперед к победе

 

[inso]

Продолжаю учиться с нуля. Разрешите задавать вопросы по мере их возникновения.

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

Сделал как описано, вот только на форуме я теперь и сам не могу смотреть свой эксперементальный стиль. Может что то не то сделал? Или его можно где то в админке смотреть?

 

[Льюви]

Сделал как описано, вот только на форуме я теперь и сам не могу смотреть свой эксперементальный стиль. Может что то не то сделал? Или его можно где то в админке смотреть?

можно смотреть по ссылке из админки, управление стилями - подводите курсор к названию стиля, всплывает подсказка "посмотреть форум в этом стиле"

а насчёт "не могу смотреть" - если Вы

И в админке поставил, чтобы пользователи не могли менять стили.

то меню выбора стиля не будет ни у кого, даже у админа

 

[inso]

можно смотреть по ссылке из админки, управление стилями - подводите курсор к названию стиля, всплывает подсказка "посмотреть форум в этом стиле"

а насчёт "не могу смотреть" - если Вы

то меню выбора стиля не будет ни у кого, даже у админа

Спасибо за ответ, но я понял что мне еще рано лезть в создание индивидуальных стилей. С шаблоном и то разобраться не получается.

 

[Прометей]

Так на этом и учится все: изменяя под себя какой либо из дизов скачанных из интернета. И только потом, делают своё, с нуля.

 

[koil]

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


Сперва на быструю руку просто закрасил края картинки полоской белого цвета. Все хорошо.
Теперь взялся основательно. Покопался изменил table border="0"
выставил нужную ширину и теперь любая картинка выравнивается правильно, но.. это место закрасилось другим цветом. По диогонали серо-черным..
менял cellpadding="0" но картинка ужимается внутрь
Поменял cellspacing="0" - то что нужно, но...
появилась полоска в центре, между картинками. И это понянто. Бордюр ведь вокруг картинки. Выравнивание влево-вправо непомогает.
Похоже надо вернуться к "table border", но как убрать закрашенность?..

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

 

[Wmboard]

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

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

 

[koil]

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

С этим не спорю, на дефолте все правильно..
Просто "индивидуальный дизайн" шапки диктует свое.
Здесь это не заметно, черное на черном и краев не видно..
не очень заметно как буква W из логотипа слегка вываливается налево.
А тестовом форуме очень грамотно подравняли с белым краем фона.

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


вот в каком случае шапка смотрится более аккуратно?

первый вариант

второй вариант

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

Добавлено через 59 минут

Здесь ничего не вылезает за край

в качестве совета, только для пробы..
попробуйте в админке, в стилях..
там где Body и есть окошко "Дополнительные атрибуты CSS"
выставить "border: 1px solid #FFCC00;"
во-первых будет красивее (имхо)
во-вторых увидите разницу между "краем" и логотипом..

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

 

[Wmboard]

но первый вариант мне кажется более лучше

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

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

Спасибо Нам пожалуй такое дизайнерское решение не подойдет

Я вообще заметил, что у нас с вами очень разное видение дизайна

 

[koil]

Спасибо Нам пожалуй такое дизайнерское решение не подойдет

а попробовали?.. Хотя бы краем глаза взглянуть.. на пару сек.. )

Я вообще заметил, что у нас с вами очень разное видение дизайна

и это хорошо.. новое всегда рождается только на стыке..

Добавлено через 22 минуты

Если вам так больше нравится, то переверстывайте шаблон

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

А вам нравится второй вариант?

 

[Wmboard]

а попробовали?

Конечно.

А вам нравится второй вариант?

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

 

[Viuga]

Не знаю, как вам, а мне удобнее делать их в формате .png, смотрится он лучше, чем .gif и прозрачность не хуже поддерживает... А уж выбор их огромен! Просто заменить их на сервере не получится, нужно править шаблоны.

Png красивее gif, однозначно. Первый раз на старом шаблоне я все делала по твоей инструкции, Ночная странница.
Каждую новую кнопку в пнг меняла в шаблонах. Потом захотела сменить стиль, и начались эксперименты.
Я наваяла новых красивых кнопок в пнг, и решила посмотреть, насколько они потеряют качество, если я сделаю вот как:
Готовые кнопки в png я прямо в файлзилле переименовывала в gif, и тут же заливала на сервер.
Каково же было мое удивление, когда я увидела красивые кнопки с тенями, с градиентами, с другими прибамбасами без потери качества
Я и так, и сяк разглядывала их чуть ли не под лупой, - точно, качество png
Все остальные кнопки, иконки я делала без правки шаблонов.
Наверняка, все давно об этом знают, давно и благополучно используют, а вот для меня это стало открытием

Кто не верит - ставлю эксперимент на живом форуме.
Вот кнопка в png

Заменяю свою кнопку...скажем, новая тема в разделе

Вот она в Файлзилле в формате png,


тут же переименовываю ее в gif и закидываю на сервер.

Вот результат, она же без потери качества



Знаете, вот скрин не очень оставлю ненадолго кнопку вместо старой, заходите, сами посмотрите - http://muz-forum.com/forumdisplay.php?f=99

 

[Wmboard]

Наверняка, все давно об этом знают, давно и благополучно используют, а вот для меня это стало открытием

В некоторых стилях есть такое. Тупо измененные расширения кнопок, иконок. Но это как бы неправильно...

 

[Viuga]

Тупо измененные расширения кнопок

Тупо, говоришь. Ну ок. Не поленюсь, поставлю на живой форум еще десяток стилей и в каждый тупо загружу новые кнопки - посмотрим.
От стиля ли это зависит?

 

[Wmboard]

От стиля ли это зависит?

Нет от стиля это не зависит. Будет работать на любом.

 

[Viuga]

В некоторых стилях есть такое.

Нет от стиля это не зависит.

я не так поняла?

 

[Wmboard]

Наверное не так поняла. В некоторых паблик стилях сделано так, как ты описала.

 

[Льюви]

тут же переименовываю ее в gif и закидываю на сервер.

Вот результат, она же без потери качества

браузер всё равно знает, что это PNG
в былые годы ишак бы взбрыкнул
как новые ишаки на такие подмены реагируют - хз...

 

[inso]

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

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

 

[Wmboard]

Не делать стиль дочерним.

 

[inso]

Переделываю стиль. Столкнулся с такими вопросами:

1. В селекторе body значение фона указано

#292929 url(images/картинка.png) repeat-x top left

Т.е. визуально это выглядит как полоса в самом верху форума. Как сделать, чтобы данная полоса продублировалась в самом низу форума? HTML освоил довольно легко, а вот с CSS у меня туго, к тому же не совсем понимаю как правильно записать код в селектор настроек стиля.

2. Логотип сайта расположен в левом верхнем углу. Как его продублировать в правый нижний ?

Стиль дефолтный, если что.

 

[Apchi1]

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

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

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

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

.

Все прочитал, ничего не понял
Зашел в header, но там мне не дает код править, только можно прописать адрес к картинке, прописываю но не открывается
Короче явно я что-то не то делаю

 

[Wmboard]

Зашел в header, но там мне не дает код править

Это как? Не дает...

Короче явно я что-то не то делаю

Может неполные админские права?

 

[Льюви]

Может неполные админские права?

тогда не зашёл бы

 

[Wmboard]

Ну почему? Если урезанные права? На шаблоны и на хаки нет прав вот и все.

 

[Gospod1]

Вопрос решен)