Масштабируемый (резиновый) логотип в шапке форума

Масштабируемый (резиновый) логотип в шапке форума

Написано Май 17th, 2007 Fisana 13 комментариев

Как заставить лого растягиваться на всю ширину в резиновых скинах, независимо от разрешения экрана

Масштабируемый (резиновый) логотип, все версии IPB

Пример: стиль Mystic Cafe Skin
Эффект станет понятен при изменении размера окна.

1. Папки форума на сервере */style_images/, */cache/ и */cache/skin_cache/ должны быть доступны для записи и изменения, CHMOD (права доступа) должен иметь значение 0777.

2. Подбираем картинку размером приблизительно 1000-1200 на 100-200 px и заменяем ею файл logo4.gif (или свое название и расширение, допустимо также jpg и png). Кириллические символы в имени файла недопустимы. Также следите за регистром. Если в имени файла есть ПРОПИСНЫЕ символы, то и в коде его название должно быть соответствующим. Иначе Unux сервера файл не узнают.

3. Открываем расширенный режим редактирования css
Находим id #logostrip
Где

height: 68px;

Заменяем на

height: auto;

4. Теперь открываем редактирование HTML шаблонов > skin global > global_board_header

Находим

img src=’style_images/<#IMG_DIR#>/logo4.gif’ style=’vertical-align:top’ alt=’IPB’ border=’0′

Заменяем на

img src=’style_images/<#IMG_DIR#>/logo4.gif’ style=’vertical-align:top’ alt=’IPB’ border=’0′ width=’100%’

И проверяем эффект на экране

Еще статьи:
1. Масштабируемый (резиновый) логотип для IP.Board 3.0 1. Готовим длинную картинку (примерно 1200 на 150px). Сохраняем ее на сервер в папку графики нужного скина как logo.png, заменив старый файл. Если вес файла большой, выбираем расширение .jpg. В этом случае открываем Внешний вид > Ваш скин > редактирование...
Маленькие секреты css, Модификации IPB, Редактирование шаблонов IPB, Технические вопросы css, FAQ, логотип, скины, стили, шаблоны
13 responses to “Масштабируемый (резиновый) логотип в шапке форума”
- Gabanapronx Март 21st, 2009 в 00:42
  
  У меня rugray стоит-это с блогом под рекламу слева.
  Не удалось поменять логотип резиновый! И обратно не вернуть)) Теперь Логотипа нет совсем, просто узкая полосочка стандартной шапки 3рх.
  До настроек в css и html новый логотип был виден. разве, что криво стоял, но после уже вышеописано.
  css)—-
  #logostrip{
  background: #fff url(style_images//tile_back.png);
  border: 0; height: auto; margin: 0; padding: 0;
  text-align: left;
  html. <div id=\
- Fisana Март 21st, 2009 в 20:35
  
  На том скине все должно работать. Он простой.
  Отмените все изменения в шаблоне, и пропишите код снова. Лучше вручную, потому что здесь почему-то портится код. Кавычки «» неправильными могут быть.
- Gabanapronx Март 22nd, 2009 в 15:32
  
  в принципе получилось спс.
  но не полностью растягивается. Как выбрать правильное соотношение сторон(размеры) сейчас 1200х200
- Fisana Март 22nd, 2009 в 15:40
  
  Только методом проб и ошибок. Попробуйте 1250px например. И растягиваться лого должно полностью не смотря ни на что, если правильно делали.
  Новый логотип надо вручную залить на сервер, и ни в коем случае не пользоваться инструментом Быстрой смены логотипа, так как это отменит все изменения в skin_global_header. В нашем случае убьется параметр ширины 100% для растягивания.
- Gabanapronx Март 22nd, 2009 в 20:01
  
  1250*200 встало как родное. спасибо
- Prophet_2110 Апрель 8th, 2009 в 11:18
  
  скажите пожалуйста как на на сайтах укозы можно так сделать?
- Fisana Апрель 8th, 2009 в 12:09
  
  Думаю, что примерно также, если есть возможность редактировать css и html.
  Иначе называется класс css и другой путь к картинке (вместо style_images/< #IMG_DIR#>/).
  Тут ключевое: высота (height: auto;) в классе для шапки в css и ширина (width=»100%») в свойствах картинки логотипа в html.
  Работать резиновая шапка будет на всех движках сайтов и форумов.
- Prophet_2110 Апрель 8th, 2009 в 15:27
  
  там CSS подругому както сделано)) там нет #logostrip
- Fisana Апрель 8th, 2009 в 15:30
  
  Ну и что, что нет. Все равно должен быть какой-то класс для шапки. Вы в исходном html коде браузером посмотрите, что вообще за шапку отвечает и как она устроена.
  А еще можно спросить на юкозовском форуме поддержки.
- не пойму... Ноябрь 21st, 2009 в 16:10
  
  Я не могу сделать 4-й пункт! там просто такого нет (у меня ipb 2.3.6)
  Похожее… точнее связано с logo4 – style_images/ip.boardpr/logo4.gif’ alt=’IPB’ style=’vertical-align:top’ border=’0′
- Fisana Ноябрь 23rd, 2009 в 13:12
  
  В скинах код может чуть отличаться. Инструкция писалась для стандартного.
- Марсель Май 27th, 2010 в 15:17
  
  Все сделал как написано. Растягивается только в Firefox. Пробую в других браузерах – опера, ие, хром – не растягивается ((( в чем косяк?
- Fisana Май 27th, 2010 в 22:20
  
  Синтаксис проверяйте.
  Не копируйте отсюда код, а вручную прописывайте.
Оставить реплику

Имя (обязательно)

E-mail (не публикуется) (обязательно)

Сайт

Впишите в строку 5 символов с картинки, содержащей цифры от 0 до 9, а также латинские буквы от A до F, и нажмите кнопку "Отправить".

Я не могу прочесть символы на картинке. Пожалуйста, сгенерируйте