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

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

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

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

Опять таки при background-position: relative отказывается работать

Но теперь при position: relative картинка не прыгает выше форума, а идёт на одном уровне!

 

Но

1. Опять таки при смищении картинки вниз (top: 50px;) смещается весь форум

2. При смищении вправо или влево происходит смищение относительно экрана но не фона, мне необходимо подвинуть только на фоне ближе к самому форуму без ужимания форума.

Т.е. если я сдвигаю то место слева или справа уменьшается в резултате 2-ая картинка рвёт форум

Нужно чтоб было относительно фона смещение картинки, а сейчас сдвигаясь двигается вся правая или левая часть

 

В css: body{ не трогал вообще

  • Автор

Если установить в css для класса свойство position: absolute;, двигаться относительно краев экрана будет весь элемент (в данном случае тег с классом wrap), а не его фон.

 

При background-position: absolute; фоновая картинка должна жестко привязаться к координатам относительно краев экрана. Только картинка, а не весь элемент.

При background-position: relative; картинка займет позицию относительно краев элемента, а не экрана, как было при absolute.

 

Если все правильно, должно работать.

Может стоит что-то другое поробывать для налажения картинки на фон?

Так как при background-position не смещается вообще ничего

  • Автор

Попробуйте привязать картинку прямо в классе body. Если она одна, wrap не нужен.

К сожалению картинки 2

 

Вот код:

body{ 
background: #FFF url(style_images/<#IMG_DIR#>/fond.gif) repeat-x;
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 */
}

 

Куда тут привязать картинку?

  • Автор

Она тут уже привязана.

Вторую никак.

Ну тут наверно общий фон привязан!

 

Так как я как поставил стиль и ничего не трогал!

 

Стиль: Crysis

IPB: 2.3.6

rss.txt

  • Автор

Cмотреть весь css мне просто некогда.

Вы пробовали к автору обращаться за поддержкой?

Сюда например http://www.invisionpower.eu/index.php?showtopic=69

Или в место, что в копирайтах указано.

 

По виду там ничего особенного нет. Все должно работать с дополнительным враппером.

Спасибо за совет! Пока не спрашивал!

 

Но вот способ нашёл:

.wrap{
background: transparent url(style_images/<#IMG_DIR#>/forum_right_side.png) top right no-repeat;
background-position: relative;
margin-right: 35px;
margin-top: 30px;
}

.wrap2{
background: transparent url(style_images/<#IMG_DIR#>/forum_lerft_side.png) top left no-repeat;
background-position: relative;
margin-left: 35px;
margin-top: 30px;
}

 

Всё прекрасно двигается причём фон остаётся в порядке! (форум не сжимается)

 

Правда как опустить ниже картинки не знаю!

Убрав из кода: top right no-repeat - top картинки опускаются на какой-то стандартный уровень, но больше не куда! (проблема (см. ниже) появляется)

 

А использование background-position: absolute; рвёт форум!

 

margin-top: 30px; - заметил что не работает+смещает форум вместе с картинками ниже

padding-top: 30px; - поднимает картинки выше самого форума (надо ниже)

 

right repeat-y - приводит к тому картинка смещается ниже но на месте откуда она съехала ниже остаются след от неё (белое место)

 

Такой вопрос:

1. Как заставить картинку быть стандартно на одном месте?

Так как в ответе на тему она выше поднята+при большом количестве ответом смещается ещё ниже, в темах форума если их мало отрезает часть картинки!

Нужно что была жёстко на одном месте для любого места форума (с указанными координатами располажения)

При использовании top right no-repeat (т.е. с top) сдвинуть ниже картинки не могу, но зато везде фиксировано находится т.е. надо чтоб она была ниже (задать), но фиксировано!

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

  • Автор

Я запуталась уже.

Координаты задаются относительно края экрана, либо края элемента.

Если должна быть на месте, может быть надо задать свойства для background-attachment ? Вроде fixed ...

Объясню более просто: перекачал с сайта автора стиль (а вдруго пофиксено что-нить)

И начал пробывать: поробывал всё что вы советовали вчера - но всё таже ерунда при background-position не работало вообще и вообщем всё было также!

 

Я увидел тут врезку кода в этой теме (пост №5):

position: absolut;
padding-right: 10px;
padding-top: 50px;

 

Ну и решил попробывать!

Только заменил padding на margin

Но (утачнение по коду с top):

margin-top: 30px; - заметил что не работает+смещает форум вместе с картинками ниже
padding-top: 30px; - поднимает картинки выше самого форума (надо ниже)

 

 

И всё заработало!

А именно:

1. Теперь работает и при background-position (в предыдущем варианте с ней не работала)

2. Теперь картинки двигаются не сжимая форум (в предыдущем - сжимали и поэтоиу форум рвало)

 

 

Теперь мне надо:

Сначала опустить картинку до нужного уровня и там её закрепить (fixed)

 

Да то что вы щас дали её фиксирует, но при этом она фиксируется по бокам экрана (т.е. все данные о смещении игнорируются)

 

В данный момент картинка отоброжается на форуме везде по разному!

  • Автор

Я не знаю, почему она отображается по-разному :(

Тут надо смотреть и пробовать. Удаленно трудно советовать.

Почитайте справочники, пробуйте разные варианты. С чем-нибудь заработает.

Несколько вопросиков (извиняюсь если глупые): :(

1. А за опускание картинок ответственна команда: top: px ? Есть ещё какие-нибудь? (а то у меня весь форум двигается)

2. А есть ли возможность в IPB 2.3.6 сделать так что если разрешение 1024 на 1024 картинка находится в определённом месте, если меньше то в другом месте?

3. Необходимо ли где то что-то прописывать чтобы картинка накладывалась на обе части фона?

Сейчас такая проблема: что сверху всё ок, но снизу картинка ужала нижний фон т.е. сместила фон к центру, а справа и слева за картинкой внизу просто пустота (сверху всё нормально и там фон как положено т.е. картинка на него наложена)

 

P.S. я могу дать ссылку на форум он в интернете (чисто для проверки прежде чем на основной ставить)

Чтоб вы поняли о чём я в вопросе №3

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

  • Автор

1. да, но не только.

2. можно попробовать координаты выставить в процентах, а не в пикселях. right: 10%, вроде этого.

3. Я не могу ответить, так как не знаю этого скина.

 

Не надо, мне некогда сейчас.

А что это даст если я пропишу right: 10% ?

Я имелл виду если у человека разрешение экрана 1024х768 либо не показывалась картинка либо показывалась но в другом месте, а если у человека 1024х1024 показывалась тоже в другом месте (у меня на 1024х1024 норм, а при 1024х768 картинки съежают и внизу чёрные полосы от них)

 

Поясню по 3 вопросу наглядно:

На 2-ом рисунке показан верх форума его фон

На 1-ом рисунке показан низ форума его фон

 

Как видно на 2-ом всё нормально фон проходит под картинкой

А на 1-ом видно что фон низа не проходит сковзь картинку т.е. картинка блочит распостранение фона дальше

Если двигать наложенные картинки то и фон внизу двигается

 

Нужно как-то сделать также как и наверху!

 

Код нижнего фона:

#logobasg{ 
background: url(style_images/<#IMG_DIR#>/logobasg.gif);
border: 1px solid #FFF;
height: 203px;
margin: 0px;
padding: 0px;
}

#logobas{
background: transparent url(style_images/<#IMG_DIR#>/logobas.gif) no-repeat left;
height: 203px;
margin: 0;
padding: 0;
}

 

logobasg - это нижний фон

logobas - картинка по центру внизу (указал и этот код на всякий случай)

post-9949-1251451549_thumb.jpg

post-9949-1251451560_thumb.jpg

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

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

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

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

Аккаунт

Навигация

Поиск

Поиск

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

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