Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Общие вопросы по оформлению (65)


Общие вопросы по оформлению (65)

Сообщений 461 страница 480 из 661

1

Инструменты для поиска и редактирования стиля (скриптов).

Как с помощью браузера можно определить элемент дизайна.

Каталог скриптов/CSS

Полезные скрипты, необходимые темы для новичков, а также ссылки на сайты рассказывающие что такое HTML и CSS.

Типовые Вопросы (ЧаВо)

Ответы на часто задаваемые вопросы.

Как задавать вопросы! Разница между стилем и скриптом. ( Советы)

Плюс к названию темы еще и Памятка.

Любой вопрос по оформлению/неполадкам сопровождайте ссылкой на форум, по которому возникли сложности.

+3

461

kolobdur74
Спасибо, я запомню)

+1

462

Добрый день!
Скажите, пожалуйста, как в шапку добавить паралакс?

Код:
<div class="parallax" id="parallax">

	<div class="parallax__layer parallax__layer--deep" style="text-align:center;height:500px;background-image:url(http://i.imgur.com/oA6LjwV.png);background-repeat:no-repeat;background-position:bottom center;"></div>

	<div class="parallax__layer parallax__layer--back" style="text-align:center;height:500px;vertical-align:bottom;background-position:bottom center;background-image:url(http://i.imgur.com/1wWfHa2.png);background-repeat:no-repeat;background-position:bottom center;">

	</div>

	<div class="parallax__layer parallax__layer--base" style="background-image:url(http://i.imgur.com/zfNiiUk.png);
background-repeat:no-repeat;background-position:bottom center;
width:1240px;padding:0;">

</div></div>


Код:
/***********************************
Parallax
************************************/

.parallax  {
position:relative;
height: 100vh;
  perspective: 1px;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform-origin: center;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  height:1052px;
  transform: translateZ(-1px) scale(2);
}
.parallax__layer--deep {
  transform: translateZ(-2px) scale(3);
}

Отредактировано Arlekina (Вс, 3 Ноя 2019 09:22:43)

+1

463

Arlekina
Ccылку на форум, вечером, после 6 по москве гляну...
И ссылку на форум! Зависит от стиля!

Отредактировано Deff (Вс, 3 Ноя 2019 09:24:14)

+1

464

Deff
http://designerforumnews.quadrobb.ru/

+1

465

Arlekina, я не знаю точно какого эффекта вы хотите добиться, но вот такой вариант попробуйте:

Код:
<style>
/***********************************
Parallax
************************************/
 
.parallax  {
  position:relative;
  height: 500px;
  perspective: 1px;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;  //IE 10+
  scrollbar-width: none;
}
.parallax::-webkit-scrollbar { /* WebKit */
  width: 0;
  height: 0;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform-origin: center;
  height: 500px;
  padding: 100px 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
}
.parallax__layer--deep {
  transform: translateZ(-2px) scale(3);
}
</style>

<div class="parallax" id="parallax">
 
<div class="parallax__layer parallax__layer--deep" style="text-align:center;background-image:url(http://i.imgur.com/oA6LjwV.png);background-repeat:no-repeat;background-position:bottom center;padding-top: 0;"></div>
 
<div class="parallax__layer parallax__layer--back" style="text-align:center;background-image:url(http://i.imgur.com/1wWfHa2.png);background-repeat:no-repeat;background-position:bottom center;padding-top: 40px;"></div>
 
<div class="parallax__layer parallax__layer--base" style="text-align:center;background-image:url(http://i.imgur.com/zfNiiUk.png);background-repeat:no-repeat;background-position:bottom center;"></div>

</div>

+1

466

kolobdur74
https://i.imgur.com/NqseTeSm.jpg
А получится вынести в шапку и чтобы он работал при прокрутке форума?

+1

467

Arlekina написал(а):

А получится вынести в шапку и чтобы он работал при прокрутке форума?

Ну, прокрутка работает при наведении на этот блок.. Если вы хотите, чтобы прокрутка работала на весь форум, а не только на шапку - это нужно, чтобы весь форум занимал всю ширину экрана и весь был вовлечен в параллакс с разбитием на группы, но это уже вероятно нужен будет скрипт.. По  поводу отступа - я бы просто на вашем месте его убрал:

#pun {   
margin-top: 280px !important;
}

В принципе у вас и так всё гармонично выходит..

+1

468

kolobdur74
Просто там, где паралакс, я хочу разместить содержимое таблицы.
А сами картинки поднять туда, где я указала стрелкой.


http://designerforumone.quadrobb.ru/
Есть ещё и на другом тестовом такой паралакс

Отредактировано Arlekina (Пн, 4 Ноя 2019 10:46:58)

+1

469

Arlekina
o.O  :canthearyou:  сорри - загрузили по-полной, возможно сегодня вечером гляну...

+1

470

Arlekina написал(а):

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

Так а кто мешает это соединить? После картинок поставить вашу таблицу..

Arlekina написал(а):

Есть ещё и на другом тестовом такой паралакс
Почему-то картинки обрезаются о.О

Регулируйте отступами от верха (top:) через #bg1-1, #bg1-2, #bg1-3, #bg2-1 и т.д... Кстати, там используется скрипт..

Отредактировано kolobdur74 (Пн, 4 Ноя 2019 10:56:55)

0

471

Здравствуйте.
Ставлю:

Код:
<style>
#pun * {
    font-family: "Agency FB Cyrillic" !important;
}
</style>

Для замены шрифта на всем форуме http://sg.uploads.ru/t/3fLKS.png
Когда добавляю размер шрифта:

Код:
<style>
#pun * {
    font-family: "Agency FB Cyrillic" !important;
    font-size : 16px;
}
</style>

То расползается минипрофиль, как побороть?
http://s7.uploads.ru/t/wC5PZ.png

Отредактировано ACT3255 (Пн, 4 Ноя 2019 12:57:39)

0

472

ACT3255 написал(а):

#pun *

А зачем звездочка? Вообще стандартная установка шрифта на весь форум на Майбб вот такая:

/* A3.2 */
.punbb {
  font: normal 68.75% tahoma, verdana, arial, helvetica, sans-serif;
  }

В вашем случае можно так:

Код:
/* A3.2 */
.punbb {
  font: normal 16px Agency FB Cyrillic;
  }
ACT3255 написал(а):

То расползается минипрофиль, как побороть?

А адрес на форум?

+1

473

kolobdur74 написал(а):

А адрес на форум?

http://nude-celebrity.ru

0

474

ACT3255, с установленным кодом, который вызывает проблему..

0

475

kolobdur74

Код:
<style>
.punbb {
  font: normal 16px Agency FB Cyrillic;
  }
</style>

Поставил так, очень широкий минипрофиль получается и шрифт Agency FB Cyrillic в форме ответа не по умолчанию.
http://nude-celebrity.ru/viewtopic.php? … =71#p22514
http://s8.uploads.ru/t/aw79N.png
Со шрифтом в форме ответа по умолчанию разобрался
http://s9.uploads.ru/t/N5dqn.png

Отредактировано ACT3255 (Пн, 4 Ноя 2019 13:27:07)

0

476

ACT3255, для сдвига по центру мнипрофиля, поставьте:

Код:
.UL {text-align: center;}

Это:

li.pa-zwezda {
    position: relative;
    width: 200px!important;
    white-space: pre-wrap;
    z-index: 100;
    margin-top: -5px;
    margin-bottom: -0px;
    margin-left: 3px;

    color: red;
}

Замените на:

Код:
margin: -5px auto 0 auto;

Для уменьшение ширины минипрофиля добавьте:

.punbb .post .post-author {width: 19em;}
.punbb .post-body {margin-left: 19em;}

Значение ставите свое одинаковое..

+1

477

kolobdur74
я не пользуюсь "своим стилем" так что не понимаю где это менять.
я ковыряю HTML верх-низ  :confused:

Отредактировано ACT3255 (Пн, 4 Ноя 2019 13:42:38)

0

478

kolobdur74 написал(а):

.punbb .post .post-author {width: 19em;}
.punbb .post-body {margin-left: 19em;}

Поправка, полный код (добавить в НТМЛ верх) - менять в трех местах на одинаковое число:

Код:
<style>
.punbb .post .post-author {width: 19em;}
.punbb .post-body {margin-left: 19em;}
.punbb .post h3 span {margin-left: 19em;}

.UL {text-align: center;}
</style>
ACT3255 написал(а):

я не пользуюсь "своим стилем" так что не понимаю где это менять.

Я понял - это все с НТМЛ верхом, вот это:

kolobdur74 написал(а):

li.pa-zwezda {
    position: relative;
    width: 200px!important;
    white-space: pre-wrap;
    z-index: 100;
    margin-top: -5px;
    margin-bottom: -0px;
    margin-left: 3px;

    color: red;
}

Найдите в НТМЛ верху и замените выделенное красным на:

kolobdur74 написал(а):

margin: -5px auto 0 auto;

+1

479

kolobdur74
Спасибо!!! Все получилось.

+2

480

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

0


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Общие вопросы по оформлению (65)