Создание скинов ipb для чайников (меняем css) - Дизайн и модификация Invision Power Board

Перейти к содержимому

 

Правила форума

Здесь обсуждаются вопросы оформления форумов IPB 2.x.
Пожалуйста, не оффтопьте, если зашли сюда случайно, и обратите внимание на соседние разделы.
Оформление форумов IPB 3.x.
Настройка форумов, включая установку и техническую настройку скинов.
Размещение рекламы на форумах.
SEO оптимизация форума.
Техническая поддержка наших скинов и модов.

СвернутьПрикрепленные теги

background css logostrip

  • 19 Страниц +
  • 1
  • 2
  • 3
  • Последняя »
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в этой теме

Создание скинов ipb для чайников (меняем css) Все вопросы по css для версий 2.x

#1 Пользователь не на сайте   Fisana ответил: »

 
 
  • На PM не отвечаю
  • Смотреть галерею
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 13 191
  • Регистрация: 21-Ноябрь 05
  • Репутация: 698
  • Откуда:Из интернетов
  • IPB version:3.1.x
 

Отправлено 06 Май 2006 - 09:30

В этой теме попробую по-русски описать значение и возможности классов css (каскадный стиль) в ipb. Их много, поэтому описывать буду постепенно и с перерывами.
0

#2 Пользователь не на сайте   Fisana ответил: »

 
 
  • На PM не отвечаю
  • Смотреть галерею
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 13 191
  • Регистрация: 21-Ноябрь 05
  • Репутация: 698
  • Откуда:Из интернетов
  • IPB version:3.1.x
 

Отправлено 06 Май 2006 - 09:45

Итак, открываем расширенный режим в настройках дефолтного стиля и по-порядку..
1.
 html{
	overflow-x: auto; /* fixes MSIE scrollbar bug DO NOT REMOVE, has no effect in Mozilla, or Opera */
}


Обозначает параметры скроллинга. Предполагается, что ширина картинки на экране уже автоматически задается разрешением Вашего монитора, отсюда и параметр auto.
В этом классе можно написать больше свойств скроллинга, например, сделать его разноцветным. Но заметят раскрашивание только пользователи с MSIE. Другие браузеры пестроту проигнорируют.
Пример - forums.crash-cars.ru
0

#3 Пользователь не на сайте   Fisana ответил: »

 
 
  • На PM не отвечаю
  • Смотреть галерею
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 13 191
  • Регистрация: 21-Ноябрь 05
  • Репутация: 698
  • Откуда:Из интернетов
  • IPB version:3.1.x
 

Отправлено 06 Май 2006 - 10:22

2.
body{ 
	background: #FFF;
	color: #222;
	font-family: Verdana, Tahoma, Arial, Trebuchet MS, Sans-Serif, Georgia, Courier, Times New Roman, Serif;
	font-size: 11px;
	line-height: 135%;
	margin: 0px;
	padding: 0px; /* required for Opera to have 0 margin */
	text-align: center; /* centers board in MSIE */
}

Здесь задается фон, на котором расположены все таблицы форума, а также свойства элементов без привязки к другим классам или если у этих классов недостаточно собственных параметров. Например от класса body берется в дефолтном скине цвет надписи над фотографией, если Вы откроете ее из списка пользователей.
background в body может быть однотонным, тогда в его параметрах указывается цвет. В дефолтном стиле он белый.
Может быть с фоновой картинкой, которая, повторяясь, распространяется на весь background. В качестве картинки используются файлы gif, jpg, реже png (устаревшими браузерами это расширение может не поддерживаться). Главное, чтобы текстура картинки при повторении создавала целостную картину без обрывов.

 background: #fff url(<#IMG_DIR#>/fon.gif);

0

#4 Пользователь не на сайте   Fisana ответил: »

 
 
  • На PM не отвечаю
  • Смотреть галерею
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 13 191
  • Регистрация: 21-Ноябрь 05
  • Репутация: 698
  • Откуда:Из интернетов
  • IPB version:3.1.x
 

Отправлено 18 Июнь 2006 - 12:53

К сожалению, не было времени... Заказы, подготовка портала и другие дела, не связанные с форумами....
Надеюсь, в августе по возвращении из экспедиции смогу продолжить...
0

#5 Пользователь не на сайте   Fisana ответил: »

 
 
  • На PM не отвечаю
  • Смотреть галерею
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 13 191
  • Регистрация: 21-Ноябрь 05
  • Репутация: 698
  • Откуда:Из интернетов
  • IPB version:3.1.x
 

Отправлено 23 Август 2006 - 06:39

Если Вы хотите, чтобы картинка не распространялась на весь фон форума, придется дописать дополнительные параметры.
Что-то вроде орнамента.
Сверху:
 background: #fff url(<#IMG_DIR#>/fon.gif) top repeat-x;

Снизу:
 background: #fff url(<#IMG_DIR#>/fon.gif) bottom repeat-x;

Слева:
 background: #fff url(<#IMG_DIR#>/fon.gif) left repeat-y;

Справа:
 background: #fff url(<#IMG_DIR#>/fon.gif) right repeat-y;

Если вы не хотите повторять картину, используйте по аналогии:
no-repeat top right и т.д.
Кроме того, можно задать положение картинки фона. Тогда в класс body добавляем координаты.Например:
 
position: absolut;
padding-right: 10px;
padding-top: 50px;

В этом случае картинка будет расположна сверху справа с заданным расстоянием от краев.
0

#6 Пользователь не на сайте   Alex2003 ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 29
  • Регистрация: 29-Сентябрь 06
  • Репутация: 0
 

Отправлено 04 Октябрь 2006 - 17:29

Fisana не подскажешь как наиболее проще отделать постинг графической рамкой?

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

если через post1 и post 2 получится только фон постинга

А если только к borderwrapm привязать картинку, то что попало получится.
0

#7 Пользователь не на сайте   Fisana ответил: »

 
 
  • На PM не отвечаю
  • Смотреть галерею
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 13 191
  • Регистрация: 21-Ноябрь 05
  • Репутация: 698
  • Откуда:Из интернетов
  • IPB version:3.1.x
 

Отправлено 04 Октябрь 2006 - 17:33

Построить таблицу в html в шаблоне renderrow просмотра темы и привязать картинки.

Вскоре весь оффтоп из этой темы уберу в другую.
0

#8 Пользователь не на сайте   Alex2003 ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 29
  • Регистрация: 29-Сентябрь 06
  • Репутация: 0
 

Отправлено 04 Октябрь 2006 - 17:44

А почему не в announcement_show используя <img src="{ipb.vars['img_url']}/spacer.gif" alt="" width="160" height="1" /><br />


A то renderrow не только постинг зацепит
0

#9 Пользователь не на сайте   Alex2003 ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 29
  • Регистрация: 29-Сентябрь 06
  • Репутация: 0
 

Отправлено 04 Октябрь 2006 - 17:55

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

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

Ты более детальней можешь расcказать если тебе не трудно?
0

#10 Пользователь не на сайте   Fisana ответил: »

 
 
  • На PM не отвечаю
  • Смотреть галерею
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 13 191
  • Регистрация: 21-Ноябрь 05
  • Репутация: 698
  • Откуда:Из интернетов
  • IPB version:3.1.x
 

Отправлено 04 Октябрь 2006 - 18:09

В pink - без графики и там не таблица.
Детально - обычная html таблица. В css создаются классы для привязки графики, они в html прописываются.
Таблицей оборачивается код поста в рэндеррое - с начала до конца.
Но это теоретически, а практически я этого никогда не делала. Подозреваю, что будет много подводных камней. Нужно пробовать и разбираться, а не теоретизировать.
Так что сделаете, расскажите.
0

#11 Пользователь не на сайте   Alex2003 ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 29
  • Регистрация: 29-Сентябрь 06
  • Репутация: 0
 

Отправлено 04 Октябрь 2006 - 18:16

А как тогда у тебя рамка постига получилась, двойными прямыми линиями в PINK, ведь как то ты сделала это?

Вот если бы сделала рамку графикой, то получился бы как объемный постинг.

Например вогнутый, было бы красивей.
0

#12 Пользователь не на сайте   Fisana ответил: »

 
 
  • На PM не отвечаю
  • Смотреть галерею
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 13 191
  • Регистрация: 21-Ноябрь 05
  • Репутация: 698
  • Откуда:Из интернетов
  • IPB version:3.1.x
 

Отправлено 04 Октябрь 2006 - 18:21

Задала просто двойную линию вместо одинарной и все.
Причем в html стиль вставила, в css новый класс не создавала.
А рамку графикой в том скине - черезчур - там и так ее много.
0

#13 Пользователь не на сайте   Alex2003 ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 29
  • Регистрация: 29-Сентябрь 06
  • Репутация: 0
 

Отправлено 04 Октябрь 2006 - 19:00

А как тогда сделала, что
Design Admin


Группа: Root Admin
Сообщений: 588
Регистрация: 22.11.2005
Из: Russia
Пользователь №: 1

Рамкой не обводится?
0

#14 Пользователь не на сайте   Fisana ответил: »

 
 
  • На PM не отвечаю
  • Смотреть галерею
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 13 191
  • Регистрация: 21-Ноябрь 05
  • Репутация: 698
  • Откуда:Из интернетов
  • IPB version:3.1.x
 

Отправлено 04 Октябрь 2006 - 19:03

Это блочная верстка. И тоже без графики.
Здесь новые классы в css + блоки в html

Да.. Здесь еще условие на php писала, иначе бы под гостем вся эта фигня сплющенной висела и у тех, у кого какого-то пункта нет - он бы тоже висел узкой полосой из 4-х линий.
0

#15 Пользователь не на сайте   serg74 ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 10
  • Регистрация: 11-Ноябрь 06
  • Репутация: 0
 

Отправлено 11 Ноябрь 2006 - 15:23

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

Вложений

  • Вложение  image.gif (37,92К)
    Количество загрузок: 616

0

Сообщить об этой теме:


  • 19 Страниц +
  • 1
  • 2
  • 3
  • Последняя »
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в этой теме

1 пользователей читают эту тему
0 зарегистрированных, 1 гостей, 0 скрытых


Контактная информация

Вопросы по работе сайта

+7 (917) 501-4765
C 10 до 20 в рабочие дни (время московское)

Техническая поддержка

Контактные данные специалистов

Дизайн форумов

IPB 3.x ¦ IPB 2.x

Бесплатные шаблоны

IPB 3.2 – 3.4 ¦ IPB 3.1 ¦ IPB 3.0 ¦ IPB 2.2 – 2.3 ¦ IPB 2.1 ¦ Клипарт
Лицензия на использование ¦ Ваша поддержка ¦ О проекте
Copyright © 2005-2017 IPBSkins.ru Team
При копировании материалов с сайта
прямая ссылка на источник обязательна