Создание скинов ipb для чайников (меняем css)

[Fisana 700]

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

[Fisana 700]

Итак, открываем расширенный режим в настройках дефолтного стиля и по-порядку..

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

[Fisana 700]

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);

[Fisana 700]

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

Надеюсь, в августе по возвращении из экспедиции смогу продолжить...

[Fisana 700]

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

Что-то вроде орнамента.

Сверху:

 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;

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

[Alex2003 0]

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

 

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

 

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

 

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

[Fisana 700]

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

 

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

[Alex2003 0]

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

 

 

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

[Alex2003 0]

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

 

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

 

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

[Fisana 700]

В pink - без графики и там не таблица.

Детально - обычная html таблица. В css создаются классы для привязки графики, они в html прописываются.

Таблицей оборачивается код поста в рэндеррое - с начала до конца.

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

Так что сделаете, расскажите.

[Alex2003 0]

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

 

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

 

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

[Fisana 700]

Задала просто двойную линию вместо одинарной и все.

Причем в html стиль вставила, в css новый класс не создавала.

А рамку графикой в том скине - черезчур - там и так ее много.

[Alex2003 0]

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

Design Admin

 

 

Группа: Root Admin

Сообщений: 588

Регистрация: 22.11.2005

Из: Russia

Пользователь №: 1

 

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

[Fisana 700]

Это блочная верстка. И тоже без графики.

Здесь новые классы в css + блоки в html

 

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

[serg74 0]

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

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