Перейти к содержимому
Русский язык для Invision Community 5

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

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

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

какие классы отвечают за вкладки в профайле? и можно ли туда вставить картинки?

  • Автор
какие классы отвечают за вкладки в профайле? и можно ли туда вставить картинки?

А точнее?

Какие именно вкладки?

Если можно, приведите пример из профиля с url хотя бы на этом форуме.

все понятно что ничего не понятно))) вернулся к нулевому варианту и решил начать с верхней картинки. если я использую ее как фон и пишу в классе ipbwrapper, то она не раздвигается на весь экран, а занимает установленный width. (у меня он 92%) а если вставлять картинку через тег в HTML шаблон, то вставляется нормально и занимает всю площадь, но сразу же и таблицы раздвигаются на полную, хотя я width в классах не трогаю...

 

так разобрался потихоньку, добавил класс ipbwrapper2, вписал его в HTML. в свойствах класса первого ширину поставил 100 а второго 92 - получилось)))

 

прем дальше

Изменено пользователем KEFIROFFU4

подогнал центральную картинку, но она все равно вылезает из \-за сабменю и активюзерс - поставлю черный фон.

добавил ipbwrapper3 (после закрытия двух первых div) и вставил третью картинку - нижнюю, но почему то она вставляется не целиком а только нижний ее край.

вот что получилось

форум, CSS, HTML

 

это надо как то исправить)))

пока пойду дальше

  • Автор

Для начала осознайте, что центральная картинка ну никак не может не вылезать, поскольку она в самом нижнем слое - body, на который все накладывается с собственными параметрами, никак от фона не зависящими.

Картинку огромной по высоте сделали, а про то, что шапка короткая, забыли.

В css увеличьте высоту в классе #logostrip. Она по дефолту 68px, а фоновая картинка явно больше...

А точнее?

Какие именно вкладки?

Если можно, приведите пример из профиля с url хотя бы на этом форуме.

ну по середине вкладке при просмотре профиля. "Темы", "сообещния" "блог" и тд...

 

я туда хочу снег сверху добавить)

порезал margin у всех ipbwrapper и все стало на свои места.

submenu и userlinks залил черным, но - как изменить цвет сылок в userlinks?

в submenu всу поменялось без проблем а в юзерлинкс меняется цвет текста (Вошли как...) а цвет ссылок остается прежним

  • Автор
ну по середине вкладке при просмотре профиля. "Темы", "сообещния" "блог" и тд...

 

я туда хочу снег сверху добавить)

Если снег в полосу заголовка всех вкладок, это:

.pp-tabclear,
.pp-maintitle

А выше расположены кнопки.

Достаточно править

.pp-tabon

А также

.pp-taboff,

.pp-tabshaded

 

порезал margin у всех ipbwrapper и все стало на свои места.

submenu и userlinks залил черным, но - как изменить цвет сылок в userlinks?

в submenu всу поменялось без проблем а в юзерлинкс меняется цвет текста (Вошли как...) а цвет ссылок остается прежним

Ссылки в юзерлинках задаются общим классом со всеми ссылками форума практически

a:link,
a:visited,
a:active

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

А иначе надо будет создавать дополнения к классу юзерлинков.

спасибо

А иначе надо будет создавать дополнения к классу юзерлинков.

раскажите как привильно синтаксически создать дополнение к классу userlinks?

Сейчас код выглядит так

#userlinks,
#userlinksguest{ 
margin: 0px 0 0px 0;
padding: 0 40px 0 40px;
clear: both;
	 background: #FFF;
	 color: #FFFF99;
}

#userlinksguest{ 

}

и еще

1. как использовать вместо стандартных ссылок в userlinks картинки, например готовые кнопки?

2. как редактировать ссылки submenu, userlinks - ну чтоб помимо обычных стандартных добавить какие нибудь свои? или удалить несколько ненужных стандартных.

3. какие еще параметры кроме border может иметь граница блоков? (ну например типы линии - двойная или прерывистая, или цвет линии)

 

P.S. Большое спасибо за своевременные ответы)) они очень помогают в освоении форумстроительства.

как изменить фон основных полей форума?

в maintitle получилось, а вот с subtitle не выходит, пишу transparent - 0 реакции, класы row1, row2 вообще не могу найти)

сейчас код выглядит так

а сам ворум так

с цветом ссылок в юзерлинкс разобрался сам) создал дополнительный класс

  • Автор

По порядку вопросы бы задавали...

Это не относится, кстати, к вопросам по css.

О сабменю. Как добавить новые ссылки форума - читайте.

 

Чтобы слова меню заменить кнопками, достаточно вместо Названий меню прописать картинки (кнопки) в тегах

 

Про css:

Обычная линия: solid; Двойная линия: double (yтолстить ее надо при этом минимум до 3px); прерывистая: dashed; точечная: dotted;

C цветами линий разберетесь сами.

Многие видимые линии в таблицах по дефолту задаются не контуром, а промежутком в таблицах - это тоже вопрос не по css, а html: cellspacing="1".

скрин

в каких HTML шаблонах настраиваются строка быстрого поиска, навигация внизу и выбор скина юзером? Можно ли настраивать их цветовую гамму в CSS? Можно ли их убрать совсем и как?

  • Автор

Можно.

Найдите в css заголовок

/* 
* ========================================
* form styles 
* ========================================
*/

Все, что ниже, касается оформления мелких форм ввода или скроллинг-списков.

Попробуйте отредактировать классы:

select

 

.textarea,

.searchinput

 

Убрать совсем в css нельзя, можно только убрать фон и контур.

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

Важная информация

При использовании данного сайта, вы согласаетесь с Условия использования и Чтобы сделать этот веб-сайт лучше, мы разместили cookies на вашем устройстве. Вы можете изменить свои настройки cookies, в противном случае мы будем считать, что вы согласны с этим..

Аккаунт

Навигация

Поиск

Поиск

Настроить push-уведомления браузера

Chrome (Android)
  1. Нажмите на иконку замка рядом с адресной строкой.
  2. Нажмите Права доступа -> Уведомления.
  3. Измените свои настройки.
Chrome (компьютер)
  1. Нажмите на иконку замка в адресной строке.
  2. Выберите Настройки сайта.
  3. Найдите Уведомления и измените свои настройки.