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

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

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


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


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

Сообщений 1001 страница 1020 из 1335

1

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

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

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

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

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

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

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

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

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

Предыдущая часть темы: Общие вопросы по оформлению (65)

0

1001

Mirra Bell
Тогда извиняйте :dontknow:

0

1002

Mirra Bell написал(а):

Можно ли оставить в его в стиле, пусть это будет без кнопки, но сделать как-то чтобы он мог выравниваться по центру без bb-кодов? И чтобы не резался сверху при увеличении шрифта больше 30.

Поправил:

Код:
<style>
.rainbow-animated p {text-align: center;}
.rainbow-animated span {
  background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, violet);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: rainbow 20s ease infinite;
  animation: rainbow 20s ease infinite;
  font-size: 25px;
  line-height: 25px;
 display: inline !important;
}
 
@-webkit-keyframes rainbow {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
 
@keyframes rainbow {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
</style>
<script type="text/javascript">
FORUM.set('editor.addition.tags.myanimated', {name:'Красивый текст',onclick:function(){bbcode('[block=rainbow-animated]','[/block]');}});
</script>

Стиль не обязательно ставить в НТМЛ верх - можно и в свой стиль при желании, скрипт в НТМЛ верх, если хотите не вручную вставлять.. Пример:
[html]
<style>
.rainbow-animated p {text-align: center;}
.rainbow-animated span {
  background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, violet);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: rainbow 20s ease infinite;
  animation: rainbow 20s ease infinite;
  font-size: 25px;
  line-height: 25px;
display: inline !important;
}

@-webkit-keyframes rainbow {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

@keyframes rainbow {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
</style>
<div class="rainbow-animated" id="block-55-2"><p><span style="font-size: 50px">Привет ляяяяяяя буууу</span></p></div>
[/html]

Шрифт можно менять как в стиле, так и вв-кодом.. В примере, через НТМЛ в посту не по центру, так как скрипт НТМЛ в посту сжимает блок - нужно явную ширину указывать, но в обычном посту должно быть по центру по умолчанию..

Отредактировано kolobdur74 (Ср, 13 Апр 2022 16:37:17)

+4

1003

kolobdur74
Супер! Теперь все получается, спасибо. ) Предлагаю выложить это в скрипты для пользователей.

+3

1004

Mirra Bell написал(а):

Супер! Теперь все получается, спасибо. ) Предлагаю выложить это в скрипты для пользователей.

Меня после публикации там выбивает из всей системы Майбб на 2 часа, так что пускай здесь будет))

+1

1005

Ребзи подсобите 😱 где-то тупанул (и не могу найти косяк)
Короче:
HTML в сообщениях (html) вставляется не на всю ширину поста, а на половину.
Надо всю ширину, а высоту авто
https://i.imgur.com/vZ4PFN5.png
Пример:
[html]<div class="container">
  <img src="https://i.imgur.com/2zbvowm.png" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> Крутой форум</p>
  <p>HTML CSS это основа основ.</p>
</div>

<div class="container">
  <img src="https://i.imgur.com/2zbvowm.png" alt="Avatar" style="width:90px">
  <p><span >Светлана Flex.</span> CEO разработка</p>
  <p>Класный раздел HTML CSS.</p>
</div>
<style>
/* Style the container with a rounded border, grey background and some padding and margin */
.container {
    border: 2px solid #ccc;
    background-color: #eee;
    border-radius: 5px;
    padding: 16px;
    margin: 16px 0;
}

/* Clear floats after containers */
.container::after {
    content: "";
    clear: both;
    display: table;
}

/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.container img {
    float: left;
    margin-right: 20px;
    border-radius: 50%;
}

/* Increase the font-size of a span element */
.container span {
    font-size: 20px;
    margin-right: 15px;
}

/* Add media queries for responsiveness. This will center both the text and the image inside the container */
@media (max-width: auto) {
  .container {
    text-align: center;
  }

  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}
</style>
[/html]
Собственно код:

Код:
<div class="container">
  <img src="https://i.imgur.com/2zbvowm.png" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> Крутой форум</p>
  <p>HTML CSS это основа основ.</p>
</div>

<div class="container">
  <img src="https://i.imgur.com/2zbvowm.png" alt="Avatar" style="width:90px">
  <p><span >Светлана Flex.</span> CEO разработка</p>
  <p>Класный раздел HTML CSS.</p>
</div>
<style>
/* Style the container with a rounded border, grey background and some padding and margin */
.container {
    border: 2px solid #ccc;
    background-color: #eee;
    border-radius: 5px;
    padding: 16px;
    margin: 16px 0;
}

/* Clear floats after containers */
.container::after {
    content: "";
    clear: both;
    display: table;
}

/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.container img {
    float: left;
    margin-right: 20px;
    border-radius: 50%;
}

/* Increase the font-size of a span element */
.container span {
    font-size: 20px;
    margin-right: 15px;
}

/* Add media queries for responsiveness. This will center both the text and the image inside the container */
@media (max-width: 100%) {
  .container {
    text-align: center;
  }

  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}
</style>

Отредактировано МАЧОнаДАЧЕ (Вс, 17 Апр 2022 08:14:03)

0

1006

МАЧОнаДАЧЕ написал(а):

HTML в сообщениях (html) вставляется не на всю ширину поста, а на половину.
Надо всю ширину, а высоту авто

Задавай явную ширину и высоту блоку .container, то есть не в процентах, а в пикселях, в ином случае скрипт НТМЛ в постах сжимает блок..

0

1007

kolobdur74
Это я понял.... Пасиб.
А вот как изночально поставить ширину "avto"? (дабы ширина была 100%//////если не указана в html или в скрипте ////именно в посте)
Это же не бодю ктмл?

0

1008

МАЧОнаДАЧЕ написал(а):

А вот как изночально поставить ширину "avto"? (дабы ширина была 100%//////если не указана в html или в скрипте ////именно в посте)
Это же не бодю ктмл?

Что именно? Если через скрипт НТМЛ в посту, то никак..

+1

1009

kolobdur74
Пасиб 👍 Понял

+1

1010

Будьте добры сообщить размер иконок типа "Новое сообщение" "Закрытая тема" для форума http://ecumene.forumrpg.ru/

0

1011

touareg

Такие пойдут?
https://forum.wowcircle.com/images/wow-circle/statusicon/thread_old-30.png- есть новые посты
https://forum.wowcircle.com/images/wow-circle/statusicon/thread_new-30.png - нет новых постов
https://forum.wowcircle.com/images/wow-circle/statusicon/thread_lock-30.png - тема закрыта

https://forum.wowcircle.com/images/wow-circle/statusicon/thread_hot-30.png - важная тема есть новые посты
https://forum.wowcircle.com/images/wow-circle/statusicon/thread_hot_new-30.png - важная тема нет новых постов
https://forum.wowcircle.com/images/wow-circle/statusicon/thread_hot_lock-30.png - важная тема закрыта

И продолжайте писать в этой теме, та совсем не про это.

Отредактировано Mirra Bell (Чт, 28 Апр 2022 08:22:26)

+2

1012

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

Будьте добры сообщить размер иконок типа "Новое сообщение" "Закрытая тема" для форума http://ecumene.forumrpg.ru/

Они могут быть любого размера, главное его вписать. Те, что я выложила, размером 48*48

0

1013

Mirra Bell написал(а):

Такие пойдут?

Нормалёк. А как их встроить?

0

1014

touareg
Вам же Мачо написал вчера. Берете то, что он написал, вставляете куда он написал, и ставите ссылки на эти картинки. Взять ссылку можно нажав на картинку правой кнопкой мыши и в меню выбрать "скопировать URL картинки".

Отредактировано Mirra Bell (Чт, 28 Апр 2022 13:16:14)

+1

1015

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

Будьте добры сообщить размер иконок типа "Новое сообщение" "Закрытая тема" для форума http://ecumene.forumrpg.ru/

Mirra Bell написал(а):
touareg написал(а):

Будьте добры сообщить размер иконок типа "Новое сообщение" "Закрытая тема" для форума http://ecumene.forumrpg.ru/

Они могут быть любого размера, главное его вписать. Те, что я выложила, размером 48*48

На всякий случай уточню автору вопроса, что сейчас общие скорость интернета и мощности железа допускают использование картинок большего размера, чем нужно контейнеру (в пределах разумного, конечно).
Просто в стилях нужно использовать параметр background-size: contain, тогда картинки можно не подгонять вручную в редакторе совсем пиксель в пиксель.

+2

1016

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

На всякий случай уточню автору вопроса,

Весьма признателен за уточнение.

0

1017

Что-то поставить иконки сообщений на форуме http://ecumene.forumrpg.ru/ оказалось нетривиальной задачей: вроде всё вписала, но я их не вижу не только на главной, но и в коде страницы. Раньше они формировались символами, не картинками. Это я закомментировала, поставила картинки, но они куда-то деваются.

0

1018

Mirra Bell написал(а):

Что-то поставить иконки сообщений на форуме http://ecumene.forumrpg.ru/ оказалось нетривиальной задачей: вроде всё вписала, но я их не вижу не только на главной, но и в коде страницы. Раньше они формировались символами, не картинками. Это я закомментировала, поставила картинки, но они куда-то деваются.

Полоса пунктирная лишняя:

----------------------
/* ИКОНКИ СООБЩЕНИЙ */

Ну, и ширину с высотой задать надо..

0

1019

Ну, и полный набор для иконок:

Код:
/* Старое сообщение */
.icon {
  background: url(своя картинка);
  background-repeat: no-repeat;
  background-position:  center center;
  }
  
/* Новое сообщение */
.inew .icon {
  background: url(своя картинка);
  }
  
/* Закрытая тема */
.iclosed .icon {
  background: url(своя картинка);
  }
 
/* Важная тема */
.isticky .icon {
  background: url(своя картинка);
  }
  
/* Важная закрытая тема */
.iclosed.isticky .icon {
  background: url(своя картинка);
  }
 
/* Закрытая тема новое сообщение */
.inew.iclosed .icon {
  background: url(своя картинка);
  }
 
/* Важная тема новое сообщение */
.inew.isticky .icon {
  background: url(своя картинка);
  }
  
/* Важная закрытая тема новое сообщение */
.inew.iclosed.isticky .icon {
  background: url(своя картинка);
  }
  
/* Перенесенная тема */
.iredirect .icon {
  background: url(своя картинка);
  }

Можно еще и для форумов с подфорумами..

+3

1020

kolobdur74
Deff
Убрала линию, поставила все иконки и задала им размер. Теперь я их вижу, но на главной название форума уезжает вниз, будто там стоит перевод строки. И никак не получается его сдвинуть. И еще для старых и новых сообщений отображается одна и та же иконка, хотя картинки проставлены разные.

И еще я в скриптах включила отображение кол-ва новых постов, но оно не отображается.
http://ecumene.forumrpg.ru/

Отредактировано Mirra Bell (Пт, 29 Апр 2022 11:47:47)

0


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