Перейти к публикации
View in the app

A better way to browse. Learn more.

Дизайн и модификация Invision Community

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Создание скинов 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

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

Сейчас на странице 0

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

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.