Разобраться в моде simpleads

Василич · 31 октября 2018, 21:57:37

Цитата: S.T.A.L.K.E.R. от 30 октября 2018, 20:33:16Первое это стили.Ими задаете положение каждого блока,border,background и прочее индивидуально.Все это туда же куда и вставляли.
Блоков стиля можно задавать 2-3-4...Сколько нужно.

Всё дошло ! Заработало ! Клинило меня долго ...

Спасибо огромное !

Василич · 31 октября 2018, 23:15:07

Цитата: S.T.A.L.K.E.R. от 30 октября 2018, 20:33:16float:right , float:left

Вправо , влево понятно ... А как отцентрировать ?

Например , третий блок по вашему примеру сделал , а как поставить его по центру не понимаю ...

Yarik · 01 ноября 2018, 06:47:43

Цитата: Василич от 31 октября 2018, 23:15:07Вправо , влево понятно ... А как отцентрировать ?

Например , третий блок по вашему примеру сделал , а как поставить его по центру не понимаю ...

margin-left:auto;margin-right:auto

Василич · 01 ноября 2018, 10:21:49

Супер!

Василич · 03 ноября 2018, 08:36:34

Цитата: S.T.A.L.K.E.R. от 01 ноября 2018, 06:47:43margin-left:auto;margin-right:auto

Вижу на этом форуме слайдер с рекламой ... В каком редакторе замутить безопасный слайдер и как его вставить в мод рекламы ? С картинками и видео разобрался благодаря вам по полной , теперь со слайдером ...

Еще видел такую фишку :

Два окна - в левом слайдер например из 5 картинок , а в правом 5 текстовых ссылок на эти картинки ... Нажал на строчку Вася Пупкин в правом окне , в левом показалась фотка Васи Пупкина ... Как это замутить?

Спасибо!

Yarik · 03 ноября 2018, 10:05:35

Цитата: Василич от 03 ноября 2018, 08:36:34Еще видел такую фишку :

Два окна - в левом слайдер например из 5 картинок , а в правом 5 текстовых ссылок на эти картинки ... Нажал на строчку Вася Пупкин в правом окне , в левом показалась фотка Васи Пупкина ... Как это замутить?

Это сам рекламный блок такой.

Василич · 03 ноября 2018, 10:40:06

Цитата: S.T.A.L.K.E.R. от 03 ноября 2018, 10:05:35Это сам рекламный блок такой.

Понял ... А сам слайдер в каком редакторе сделать ? И как воткнуть в SimpleAds...

Yarik · 03 ноября 2018, 12:58:58

Цитата: Василич от 03 ноября 2018, 10:40:06Понял ... А сам слайдер в каком редакторе сделать ? И как воткнуть в SimpleAds...

Можно CSS и HTML - https://habr.com/post/324034/
Можно JS.

Василич · 03 ноября 2018, 13:44:01

Цитата: S.T.A.L.K.E.R. от 03 ноября 2018, 12:58:58Можно CSS и HTML - https://habr.com/post/324034/
Можно JS.

Спасибо ... Почитал немного - часто народ использует NoScript, вырезающим весь JS-код ... Один раз с таким сталкивался ... Решил пока замутиться на CSS и HTML ...

До последнего вашего сообщения я накопал КОД простенького слайдера , если его тупо вставить в окно для кода (мод SimpleAds) и указать место на форуме (в настройках мода) , то высвечивается миленький слайдер с природой ... А дальше фотки меняешь на свои и все работает и на 2.0.13 и на 2.0.15

Но есть одно но ... Он работает только в "ручном-педальном" режиме ... Плиз , помогите в этот код засунуть также автоматическое переключение ...

Спасибо ...

<style type="text/css">

/*задаём фиксированные размеры контейнера*/

.sliderA {
width: 400px;
height: 250px;
border: 1px solid #888;
position: relative;
text-align: center;
}

/* Отображение радиокнопок нам не нужно, скрываем их*/

.sliderA > input {
display: none;
}

/*Оформляем метки-кнопки*/

.sliderA > input + label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 8px;
background: rgba(90, 90, 90, 0.;
border: 2px solid rgba(190, 190, 190, 0.;

cursor: pointer;

z-index: 100;
position: relative;

margin-right: 4px;
top: 90%;

transition: background 0.8s ease-out 0s;
}
.sliderA > input + label:hover {
background: rgba(250, 250, 250, 0.;
}
.sliderA > input:checked + label {
background: rgba(220, 220, 220, 0.;
}

/*Добавляем стили для div-ов, в которых будет находиться содержимое кадра */

.sliderA > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 0;
}

/*показ и скрытие кадров в зависимости от нажатой кнопки*/

.sliderA > div {
visibility: hidden;
opacity: 0;
transition: opacity 0.8s ease-out 0.1s, visibility 0.1s ease-out 0.9s;
}
.sliderA > input:checked + label + div {
visibility: visible;
opacity: 1;
transition: opacity 0.8s ease-out 0.1s, visibility 0.1s ease-out 0s;
}

/*правило для тега p внутри кадра, чтобы сделать подписи к картинкам*/

.sliderA > div > p {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
text-align: center;
color: #fff;
text-shadow: 1px 1px 2px #000;
}

</style>

<body>
<div class='sliderA'>
<input type="radio" name="slider1" id="slider1_1" checked="checked">
<label for="slider1_1"></label>
<div>
<p>Восход над островом</p>
<img src='https://lh3.googleusercontent.com/-XGgw41OSARk/VePicTdAdgI/AAAAAAAAAS4/WeBbxp4ebQg/s400-Ic42/00099_manaisland_1920x1200.jpg'; alt=''>
</div>

<input type="radio" name="slider1" id="slider1_2">
<label for="slider1_2"></label>
<div>
<p>Озёрный край</p>
<img src='https://lh3.googleusercontent.com/-aafAKIoTkT4/VePihWk2BHI/AAAAAAAAATA/zQVtiYD_eDc/s400-Ic42/00201_lakejipe_1920x1200.jpg'; alt=''>
</div>

<input type="radio" name="slider1" id="slider1_3">
<label for="slider1_3"></label>
<div>
<p>Закатная синева</p>
<img src='https://lh3.googleusercontent.com/-ikbDMRhLc_I/VePkT4XLFtI/AAAAAAAAATg/qaHqQk89RAw/s400-Ic42/00744_laclahachesunset_1920x1200.jpg'; alt=''>
</div>

<input type="radio" name="slider1" id="slider1_4">
<label for="slider1_4"></label>
<div>
<p>Сельский пейзаж</p>
<img src='https://lh3.googleusercontent.com/-BLXeHJNyOqw/VePimp_e_wI/AAAAAAAAATQ/BVw_9LFehyU/s400-Ic42/00442_pyrenees_1920x1200.jpg'; alt=''>
</div>
</div>
<p></p><p></p><p></p>
</body>

Василич · 04 ноября 2018, 00:03:12

Цитата: S.T.A.L.K.E.R. от 03 ноября 2018, 12:58:58Можно CSS и HTML - https://habr.com/post/324034/

Что-то не запускается , рамка висит и все ... Плиз , хелп ми...

Василич · 10 ноября 2018, 17:06:35

Цитата: S.T.A.L.K.E.R. от 31 октября 2018, 19:57:20Вы в моде создаете блок,куда Вы раньше вставляли рекламу,или сейчас стоит.А теперь вы вместо кода рекламы вставляете
<style type="text/css">
.block1{width:200px;padding:5px;float:right}
.block2{width:200px;padding:5px; float:left}
</style>
<body>
<div class="block1">И вставляете сюда код рекламного блока правого</div>
<div class="block2">А сюда вставляете код рекламного блока левого.</div>
</body>
Стилями выше прямо при создании и редактировании файлов можно задать стили для этих двух блоков.
Я делаю так,вставляю и вывожу рекламу.Смотрю что не так,правлю стили открыв инструмент разработчика в браузере.Потом копирую код стилей,иду в мод,выбираю редактировать блок и вставляю код стилей скопированных.Смотрю что вышло,если нужно то корректирую дальше.

S.T.A.L.K.E.R. , спасибо все работает ОК благодаря вашей помощи ...

Вопрос может глупый ... Я просто не знаю как в поиске по форуму это забить ...

Как доработать данный код , чтобы окна (блоки) пересекались ? Чтобы один блок не сдвигал другой , ,а как бы частично сверху ... Или ссылку , если это на форуме обсуждалось ...

Спасибо ...

Василич · 11 ноября 2018, 03:00:30

Цитата: Василич от 10 ноября 2018, 17:06:35Как доработать данный код , чтобы окна (блоки) пересекались ? Чтобы один блок не сдвигал другой , ,а как бы частично сверху ... Или ссылку , если это на форуме обсуждалось ...

Прошу прощения актуально ...

Yarik · 11 ноября 2018, 09:46:29

Цитата: Василич от 11 ноября 2018, 03:00:30Прошу прощения актуально ...

Приболел я,глаза болят от монитора.
Пробовать использовать http://htmlbook.ru/css/z-index .

Василич · 12 ноября 2018, 18:20:41

Цитата: S.T.A.L.K.E.R. от 11 ноября 2018, 09:46:29Приболел я,глаза болят от монитора.
Пробовать использовать http://htmlbook.ru/css/z-index .

Спасибо , для начала понял ...

А можете привести код самого простенького примера двух окон(блоков)-слоев с использованием z-index ...

Так уж получается , что ваши варианты наиболее понятны мне и работоспособны ...

Yarik · 12 ноября 2018, 18:59:06

Цитата: Василич от 12 ноября 2018, 18:20:41А можете привести код самого простенького примера двух окон(блоков)-слоев с использованием z-index ...

В теже самые блоки просто добавляете в один
z-index:999;
второй
z-index:1000;
У блока у которого выше значение z-index: тот будет распологаться поверху блока у которого ниже это значение.Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

Код Выделить

position: relative; 
top: -55px;
left: 5px;
z-index:999;

Позиционирование блоков относительно друг друга уже задаете самим стилями.

Василич · 12 ноября 2018, 21:20:02

Цитата: S.T.A.L.K.E.R. от 12 ноября 2018, 18:59:06Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

А если не задано position ? Я пока запускаю через мод рекламы , то что обсуждали ...

Yarik · 12 ноября 2018, 21:47:44

Цитата: Василич от 12 ноября 2018, 21:20:02А если не задано position ? Я пока запускаю через мод рекламы , то что обсуждали ...

Попробуйте просто,но лучше задавать.

Василич · 21 апреля 2020, 21:02:38

Разбужу тему только один вопрос :

Как этом моде вставить код PHP ?

Yarik · 22 апреля 2020, 08:53:15

В SimpleAds?
Никак

Василич · 22 апреля 2020, 09:42:48

Цитата: S.T.A.L.K.E.R. от 22 апреля 2020, 08:53:15В SimpleAds?
Никак

Понял , спасибо ...

Разобраться в моде simpleads

Yarik

Yarik

Yarik

Yarik

Yarik

Yarik

Yarik