Перейти к публикации
Дизайн и модификация IPS Community IPBSkinsBETA
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...
Fisana

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

Рекомендованные сообщения

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

Поделиться сообщением


Ссылка на сообщение

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

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

Поделиться сообщением


Ссылка на сообщение

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

Поделиться сообщением


Ссылка на сообщение

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

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

Поделиться сообщением


Ссылка на сообщение

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

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

Сверху:

 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;

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

Поделиться сообщением


Ссылка на сообщение

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

 

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

 

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

 

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

Поделиться сообщением


Ссылка на сообщение

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

 

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

Поделиться сообщением


Ссылка на сообщение

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

 

 

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

Поделиться сообщением


Ссылка на сообщение

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

 

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

 

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

Поделиться сообщением


Ссылка на сообщение

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение

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

 

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

 

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

Поделиться сообщением


Ссылка на сообщение

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

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

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

Поделиться сообщением


Ссылка на сообщение

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

Design Admin

 

 

Группа: Root Admin

Сообщений: 588

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

Из: Russia

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

 

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

Поделиться сообщением


Ссылка на сообщение

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

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

 

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

Поделиться сообщением


Ссылка на сообщение

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

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

post-1887-1163247897_thumb.png

Поделиться сообщением


Ссылка на сообщение

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...