Фиксированная картинка сбоку сайта.

[Envy]

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

 

Спасибо.

[PurpleNut]

В globalTemplate добавьте перед открывающим или закрывающим тегом body

<div class="worm"></div>

В ipb_styles.css добавьте

.worm {
    /* Укажите путь к своей картинке  */
    background: url("{style_images_url}/worm.png") left top no-repeat;
    display: none;
    /* Укажите высоту фонового изображения */
    height: 200px;
    left: 0;
    position: fixed;
    /* Укажите расстояние от верхнего края окна браузера */
    top: 200px;
    /* Укажите ширину фонового изображения */
    width: 95px;
    z-index: 100;
}
/* Фикс, когда свободного пространства по бокам
   становится слишком мало, прячем картинку с
   червяком. Ширина определяется визуально:
   сужайте окно браузера, пока картинка с червяком
   не станет "наползать" на контент на странице.
   Потом через Firebug или его аналог для
   вашего браузера можно узнать значение оной. */
@media all and (min-width: 1070px) {
    .worm {
        display: block;
    }
}

Хотя нет, неправильно, сначала впишите просто

.worm {
    /* Укажите путь к своей картинке  */
    background: url("{style_images_url}/worm.png") left top no-repeat;
    /* Укажите высоту фонового изображения */
    height: 200px;
    left: 0;
    position: fixed;
    /* Укажите расстояние от верхнего края окна браузера */
    top: 200px;
    /* Укажите ширину фонового изображения */
    width: 95px;
    z-index: 100;
}

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

@media all and (min-width: 1070px) {
    .worm {
        display: block;
    }
}

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

display: none;

таким вот образом должно всё получиться:

.worm {
    /* Укажите путь к своей картинке  */
    background: url("{style_images_url}/worm.png") left top no-repeat;
    display: none;
    /* Укажите высоту фонового изображения */
    height: 200px;
    left: 0;
    position: fixed;
    /* Укажите расстояние от верхнего края окна браузера */
    top: 200px;
    /* Укажите ширину фонового изображения */
    width: 95px;
    z-index: 100;
}
/* Фикс, когда свободного пространства по бокам
   становится слишком мало, прячем картинку с
   червяком. Ширина определяется визуально:
   сужайте окно браузера, пока картинка с червяком
   не станет "наползать" на контент на странице.
   Потом через Firebug или его аналог для
   вашего браузера можно узнать значение оной. */
@media all and (min-width: 1070px) {
    .worm {
        display: block;
    }
}

Изменено 23 апреля, 2015 пользователем PurpleNut

[Envy]

В globalTemplate добавьте перед открывающим или закрывающим тегом body

<div class="worm"></div>

В ipb_styles.css добавьте

.worm {
    /* Укажите путь к своей картинке  */
    background: url("{style_images_url}/worm.png") left top no-repeat;
    display: none;
    /* Укажите высоту фонового изображения */
    height: 200px;
    left: 0;
    position: fixed;
    /* Укажите расстояние от верхнего края окна браузера */
    top: 200px;
    /* Укажите ширину фонового изображения */
    width: 95px;
    z-index: 100;
}
/* Фикс, когда свободного пространства по бокам
   становится слишком мало, прячем картинку с
   червяком. Ширина определяется визуально:
   сужайте окно браузера, пока картинка с червяком
   не станет "наползать" на контент на странице.
   Потом через Firebug или его аналог для
   вашего браузера можно узнать значение оной. */
@media all and (min-width: 1070px) {
    .worm {
        display: block;
    }
}

Хотя нет, неправильно, сначала впишите просто

.worm {
    /* Укажите путь к своей картинке  */
    background: url("{style_images_url}/worm.png") left top no-repeat;
    /* Укажите высоту фонового изображения */
    height: 200px;
    left: 0;
    position: fixed;
    /* Укажите расстояние от верхнего края окна браузера */
    top: 200px;
    /* Укажите ширину фонового изображения */
    width: 95px;
    z-index: 100;
}

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

@media all and (min-width: 1070px) {
    .worm {
        display: block;
    }
}

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

display: none;

таким вот образом должно всё получиться:

.worm {
    /* Укажите путь к своей картинке  */
    background: url("{style_images_url}/worm.png") left top no-repeat;
    display: none;
    /* Укажите высоту фонового изображения */
    height: 200px;
    left: 0;
    position: fixed;
    /* Укажите расстояние от верхнего края окна браузера */
    top: 200px;
    /* Укажите ширину фонового изображения */
    width: 95px;
    z-index: 100;
}
/* Фикс, когда свободного пространства по бокам
   становится слишком мало, прячем картинку с
   червяком. Ширина определяется визуально:
   сужайте окно браузера, пока картинка с червяком
   не станет "наползать" на контент на странице.
   Потом через Firebug или его аналог для
   вашего браузера можно узнать значение оной. */
@media all and (min-width: 1070px) {
    .worm {
        display: block;
    }
}

Попробую и отпишу. Спасибо!

[Envy]

Попробую и отпишу. Спасибо!

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

[WOLF]

top: 200px;

заменяем на 

  bottom: 0px;

P.S. я думал человек  с таким опытом, должен подобные вещи знать... 

[Envy]

top: 200px;

заменяем на 

  bottom: 0px;

P.S. я думал человек  с таким опытом, должен подобные вещи знать... 

 

Спасибо, должен. Дело в том, что последний раз я трогал ipb и хтмл вообще тогда, когда последний раз заходил сюда по серьезке) ~1,5 года назад.

WOLF, а как сделать этот див ссылкой не подскажешь?

[WOLF]

див?

[Envy]

WOLF, ну картинку льва

[WOLF]

<a href="ссылка"> <div class="worm"></div> </a>