Jump to content
Дизайн и модификация IPS Community IPBSkinsBETA
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
Fisana

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Сверху:

 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;

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

Share this post


Link to post
Share on other sites

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

 

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

 

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

 

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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

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

 

 

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

Share this post


Link to post
Share on other sites

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

 

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

 

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

 

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

 

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Design Admin

 

 

Группа: Root Admin

Сообщений: 588

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

Из: Russia

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

 

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

Share this post


Link to post
Share on other sites

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

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

 

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

Share this post


Link to post
Share on other sites

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

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

post-1887-1163247897_thumb.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...