Skip to content

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

post-15820-1203821401.gifМеня интересует вопрос как сделать верх, где находятся названия тем, форумов и тому подобного из трех картинок? Например даже как на этом форуме!

Edited by BGD

Featured Replies

Очень просто. Нужно перестроить заголовки, заменив таблицей блоки с

...

Здесь еще в эту таблицу включен дополнительный ряд для нижней части. Иногда она пустая.

 

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

Надеюсь, что принцип верстки сразу станет очевиден.

Это не сложнее, чем верстать то же самое на сайте - см. http://ipbskins.ru/

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

К сожалению, встроенный редактор админцентра – это тот же блокнот..

Ну есль форум фиксирован по ширине то можно сделать монолитную картинку которая будет бэкграундом)

Можно.

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

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

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

Не всегда можно. Иногда ширина все-таки немного меняется.

Есть же блоги, архивы, галереи, где использован класс maintitle.

Новые классы придется в css под каждую разную ширину создавать, а потом все равно прописывать их в шаблонах.

В архиве скин purple под 2.1, где целыми плашками сделаны заголовки, но все равно пришлось графические кончики правые прописать, чтобы короткие заголовки не обрывались.

И в итоге те же таблицы...

  • Author

Подскажите что куда вставлять! В КСС и какой шаблон ворошить!

Там штук 200 шаблонов ворошить надо.

Все перечислять, или догадаетесь средствами админки в скине поиском поискать по ключу "maintitle".

В css придется создать новые классы, разумеется.

И картинки рисовать.

 

Рекомендую потренироваться на кошках. Сверстайте страничку html с нужным оформлением, потом на форум его..

  • Author

http://big-world.ru/forum/

Как сдесь с одной стороны под нозваниями разделов имеется еще одна картинка как это реализовать!

Скачать мой скин Prestige из нашего архива и расковырять.

А вообще нет ничего проще

.maintitle{background: #нужный цвет url(style_images/<#IMG_DIR#/картинка) no-repeat top left);
...........}

  • Author

.maintitle,

.maintitlecollapse{

background: url(style_images/<#IMG_DIR#>/tile_cat.gif);

border: 1px solid #4a4949;

border-bottom: 1px solid #454545;

color: #c5cacb;

font-size: 12px;

font-weight: bold;

margin: 0px;

padding: 8px;

}

 

Подскажи что и как надо прописать! Что-бы старый бэкграунд сохранился а поверх его слева еще картиночка появилась!

background: url(style_images/<#IMG_DIR#>/tile_cat.gif);

заменить на

background: #цвет url(style_images/<#IMG_DIR#>/tile_cat.gif) left top no-repeat;

  • Author
background: url(style_images/<#IMG_DIR#>/tile_cat.gif);

заменить на

background: #цвет url(style_images/<#IMG_DIR#>/tile_cat.gif) left top no-repeat;

Пасибо по левой стороне картинка появилась! А основной Бэкграунд исчез, подскажите как его тоже добавить?

Основной никак.

Там же цвет просто.

  • Author
Основной никак.

Там же цвет просто.

А цвет картинкой заменить не получится?

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

Edited by BGD

Именно так.

В скине Prestige одна картинка в майнтитлах.

Не надо париться с HTML, а выглядит как нечто сложное.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.