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

Поделиться1Ср, 13 Фев 2019 13:52:59

Автор: Maquis
Модератор
Зарегистрирован: Чт, 5 Ноя 2009
Сообщений: 1938
Уважение: +1962
Позитив: +1658
Предупреждения: ‡
Последний визит:
Сб, 26 Фев 2022 23:41:00

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


Инструменты для поиска и редактирования стиля (скриптов).	Как с помощью браузера можно определить элемент дизайна.
Каталог скриптов/CSS	Полезные скрипты, необходимые темы для новичков, а также ссылки на сайты рассказывающие что такое HTML и CSS.
Типовые Вопросы (ЧаВо)	Ответы на часто задаваемые вопросы.
Как задавать вопросы! Разница между стилем и скриптом. ( Советы)	Плюс к названию темы еще и Памятка.

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

+4

Поделиться521Ср, 13 Ноя 2019 12:47:16

Автор: Arlekina
Заслуженный
Зарегистрирован: Пт, 16 Дек 2016
Сообщений: 111
Уважение: +14
Позитив: +43
Пол: Женский
Последний визит:
Сб, 4 Май 2024 12:34:05

Вопрос решен

Отредактировано Arlekina (Ср, 13 Ноя 2019 14:00:45)

0

Поделиться522Ср, 13 Ноя 2019 12:56:50

Автор: Mirra Bell
Модератор
Зарегистрирован: Чт, 3 Апр 2014
Сообщений: 2184
Уважение: +1880
Позитив: +2475
Пол: Женский
Последний визит:
Чт, 2 Май 2024 20:17:10

Income
Это код для тем.

Как я поняла, для форумов тут стоит вот что
tr#forum_f24 .icon {
background: rgba(0, 0, 0, 0) url(https://forumstatic.ru/files/0000/14/1c/86633.png) no-repeat scroll -3px -140px !important;
}
Картинка - спрайт. координаты прокрутки выбирают какую конкретно для какого форума нужно

+2

Поделиться523Ср, 13 Ноя 2019 13:32:37

Автор: Income
Заслуженный
Зарегистрирован: Сб, 12 Дек 2015
Сообщений: 237
Уважение: +197
Позитив: +215
Пол: Мужской
Последний визит:
Чт, 3 Фев 2022 18:43:43

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

для форумов тут стоит вот что

Всё, я понял! Я вообще не правильно делал))
Большое Спасибо за подсказку!

+1

Поделиться524Ср, 13 Ноя 2019 16:49:39

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5813
Позитив: +6438
Пол: Мужской
Последний визит:
Вс, 5 Май 2024 22:04:40

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

Это код для тем.

Как я поняла, для форумов тут стоит вот что
tr#forum_f24

Эммм, это разные номера форумов.. В данном случае 24, а вот здесь:

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

tr#forum_f1 div.icon {b

Первый.. Они одинаковые, но номера форумов разные..

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

Картинка - спрайт. координаты прокрутки выбирают какую конкретно для какого форума нужно

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

Отредактировано kolobdur74 (Ср, 13 Ноя 2019 17:06:37)

+1

Поделиться525Ср, 13 Ноя 2019 16:57:00

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5813
Позитив: +6438
Пол: Мужской
Последний визит:
Вс, 5 Май 2024 22:04:40

Mirra Bell, Income и стоит использовать в браузерах: Инструменты для поиска и редактирования стиля (скриптов).

+3

Поделиться526Ср, 13 Ноя 2019 19:54:12

Автор: Moour
Стремящийся
Зарегистрирован: Ср, 13 Ноя 2019
Сообщений: 10
Уважение: +7
Позитив: 0
Последний визит:
Пт, 15 Ноя 2019 23:52:55

Здравствуйте! Работаю с форумом на Community Blue через htlm-верх-низ, не рискуя лезть в графу "Свой стиль". Хочу проставить собственные иконки на разделы и топики, но сколько туториалов не прочёл и сколько разных кодов не юзал, ничего не помогает. В последний раз использовал вот этот код:

Код:

<style type="text/css">
Div.icon {
background-image : url(http://i.piccy.info/i9/3ee2732a3bbc66b58039cd1eae4ac30a/1573579721/19144/1347308/ykon.png);
background-repeat: no-repeat;
}
TR.inew Div.icon {
background-image : url(http://i.piccy.info/i9/e9b3f11f52eff461461ee6d89a9bc543/1573579708/19267/1347308/Ykonka.png);
background-repeat: no-repeat;
}
TR.isticky Div.icon {
background-image : url(http://i.piccy.info/i9/e9b3f11f52eff461461ee6d89a9bc543/1573579708/19267/1347308/Ykonka.png);
background-repeat: no-repeat;
}
TR.iclosed Div.icon {
background-image : url(http://i.piccy.info/i9/3ee2732a3bbc66b58039cd1eae4ac30a/1573579721/19144/1347308/ykon.png);
background-repeat: no-repeat;
}
</style>

Но ничего не работает. Хотел бы узнать, как через html-верх-низ проставить иконки на разделы? Может это я ничего не понял и изначально делал что-то не так? Буду счастлив получить помощь!

Отредактировано Moour (Ср, 13 Ноя 2019 19:59:49)

+1

Поделиться527Ср, 13 Ноя 2019 20:06:45

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11603
Последний визит:
Сегодня 18:14:49

Moour
В HTML верх:

<style>

/* CS4.1 */
div.icon {
background: url(../../img/Community_Blue/icon.png) no-repeat scroll -3px -62px !important;
opacity: 0.3;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}

div.inew, div.icon.icon-new, tr.inew div.icon {
background: url(../../img/Community_Blue/icon.png) no-repeat scroll -3px -62px !important;
opacity: 0.7;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

tr.isticky:not(.inew) div.icon, tr.iclosed.isticky:not(.inew) div.icon {
background: url(../../img/Community_Blue/icon.png) no-repeat scroll -3px -31px !important;
opacity: 0.3;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}

tr.inewisticky div.icon, tr.inew.isticky div.icon, tr.inew.iclosed.isticky div.icon {
background: url(../../img/Community_Blue/icon.png) no-repeat scroll -3px -31px !important;
opacity: 0.7;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

tr.iclosed:not(.inew) div.icon {
background: url(../../img/Community_Blue/icon.png) no-repeat scroll -3px 0 !important;
opacity: 0.4;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}

tr.inew.iclosed div.icon {
background: url(../../img/Community_Blue/icon.png) no-repeat scroll -3px 0 !important;
opacity: 0.9;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
</style>

Cсылки меняете на свои

0

Поделиться528Ср, 13 Ноя 2019 20:27:34

Автор: Moour
Стремящийся
Зарегистрирован: Ср, 13 Ноя 2019
Сообщений: 10
Уважение: +7
Позитив: 0
Последний визит:
Пт, 15 Ноя 2019 23:52:55

Deff

Прописал всё в точности так, как Вы и порекомендовали. Из изменений - иконка теперь вообще не отображается. Даже стандартная стилевая. Просто пустое место вместо самой иконки. Я снова сделал что-то не так?..

Код:

<style>

/* CS4.1 */
div.icon {
  background: url(http://i.piccy.info/i9/e9b3f11f52eff461461ee6d89a9bc543/1573579708/19267/1347308/Ykonka.png) no-repeat scroll -3px -62px !important;
  opacity: 0.3;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
  }

div.inew, div.icon.icon-new, tr.inew div.icon {
  background: url(http://i.piccy.info/i9/e9b3f11f52eff461461ee6d89a9bc543/1573579708/19267/1347308/Ykonka.png) no-repeat scroll -3px -62px !important;
  opacity: 0.7;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  }

tr.isticky:not(.inew) div.icon, tr.iclosed.isticky:not(.inew) div.icon {
  background: url(http://i.piccy.info/i9/e9b3f11f52eff461461ee6d89a9bc543/1573579708/19267/1347308/Ykonka.png) no-repeat scroll -3px -31px !important;
  opacity: 0.3;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
  }

tr.inewisticky div.icon, tr.inew.isticky div.icon, tr.inew.iclosed.isticky div.icon {
  background: url(http://i.piccy.info/i9/e9b3f11f52eff461461ee6d89a9bc543/1573579708/19267/1347308/Ykonka.png) no-repeat scroll -3px -31px !important;
  opacity: 0.7;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  }

tr.iclosed:not(.inew) div.icon {
  background: url(http://i.piccy.info/i9/3ee2732a3bbc66b58039cd1eae4ac30a/1573579721/19144/1347308/ykon.png) no-repeat scroll -3px 0 !important;
  opacity: 0.4;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
  }

tr.inew.iclosed div.icon {
  background: url(http://i.piccy.info/i9/3ee2732a3bbc66b58039cd1eae4ac30a/1573579721/19144/1347308/ykon.png) no-repeat scroll -3px 0 !important;
  opacity: 0.9;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
  }
</style>

+1

Поделиться529Ср, 13 Ноя 2019 20:41:51

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11603
Последний визит:
Сегодня 18:14:49

Moour
Ccылку на сайт с проблемой

0

Поделиться530Ср, 13 Ноя 2019 20:43:48

Автор: Moour
Стремящийся
Зарегистрирован: Ср, 13 Ноя 2019
Сообщений: 10
Уважение: +7
Позитив: 0
Последний визит:
Пт, 15 Ноя 2019 23:52:55

Deff
http://wordlofavatar.rusff.ru/

+1

Поделиться531Ср, 13 Ноя 2019 20:53:58

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11603
Последний визит:
Сегодня 18:14:49

Moour
Замените на такое:

Код:

<style>
/* CS4.1 */
div.icon {
  background: url(http://i.piccy.info/i9/e9b3f11f52eff461461ee6d89a9bc543/1573579708/19267/1347308/Ykonka.png) no-repeat!important;
  opacity:.8;
  }

div.inew, div.icon.icon-new, tr.inew div.icon {
  background: url(http://i.piccy.info/i9/e9b3f11f52eff461461ee6d89a9bc543/1573579708/19267/1347308/Ykonka.png) no-repeat!important;
  opacity:.8;
  }

tr.isticky:not(.inew) div.icon, tr.iclosed.isticky:not(.inew) div.icon {
  background: url(http://i.piccy.info/i9/e9b3f11f52eff461461ee6d89a9bc543/1573579708/19267/1347308/Ykonka.png) no-repeat!important;
  opacity:.8;
  }

tr.inewisticky div.icon, tr.inew.isticky div.icon, tr.inew.iclosed.isticky div.icon {
  background: url(http://i.piccy.info/i9/e9b3f11f52eff461461ee6d89a9bc543/1573579708/19267/1347308/Ykonka.png) no-repeat!important;
  opacity:.8;
  }

tr.iclosed:not(.inew) div.icon {
  background: url(http://i.piccy.info/i9/3ee2732a3bbc66b58039cd1eae4ac30a/1573579721/19144/1347308/ykon.png) no-repeat!important;
  opacity:.8;
  }

tr.inew.iclosed div.icon {
  background: url(http://i.piccy.info/i9/3ee2732a3bbc66b58039cd1eae4ac30a/1573579721/19144/1347308/ykon.png) no-repeat!important;
  opacity:.8;
  }
</style>

+2

Поделиться532Ср, 13 Ноя 2019 20:54:45

Автор: Moour
Стремящийся
Зарегистрирован: Ср, 13 Ноя 2019
Сообщений: 10
Уважение: +7
Позитив: 0
Последний визит:
Пт, 15 Ноя 2019 23:52:55

Deff
Заработало! Огромное Вам спасибо!

+1

Поделиться533Ср, 13 Ноя 2019 22:41:57

Автор: Moour
Стремящийся
Зарегистрирован: Ср, 13 Ноя 2019
Сообщений: 10
Уважение: +7
Позитив: 0
Последний визит:
Пт, 15 Ноя 2019 23:52:55

Возникла ещё одна проблема. Когда я прописываю фон для форума, в компьютерной версии форума он отображается весьма корректно, но вот в мобильной при отключеной адаптации под мобильные устройства - нет. Во время листания я вижу не один цельный фон, а несколько таких же, склеенных между собой. Это выглядит примерно так:

Пикча:

Как мне исправить это и сделать так, чтобы одна картинка фона отображалась на весь экран корректно?

На данный момент код такой:

Код:

<style type="text/css">
html, body {background-image: url(http://i.piccy.info/i9/7959d18589ae0949ab883864442c8a20/1573579443/129080/1347308/Snymok.jpg); background-attachment: fixed; background-repeat: repeat;}
</style>

0

Поделиться534Ср, 13 Ноя 2019 23:14:11

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11603
Последний визит:
Сегодня 18:14:49

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

На данный момент код такой:

Ни знаю... - Попробуйте заменить Ваш код, на такой:

Код:

<style type="text/css">
html, body {
  background: url(https://forumstatic.ru/files/0012/d8/04/15710.jpg) left bottom  fixed no-repeat,
  url(https://forumstatic.ru/files/0012/d8/04/64323.jpg) right bottom  fixed no-repeat #5381B5;
}
</style>

Поправил

Поправил Eщё раз!

Отредактировано Deff (Ср, 13 Ноя 2019 23:24:07)

0

Поделиться535Ср, 13 Ноя 2019 23:19:12

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11603
Последний визит:
Сегодня 18:14:49

Там не убирайте картинки ( картинка разрезана на левую и правую часть
Я поправил верх... ну или нужно чуть увеличить обе картинки по высоте

Отредактировано Deff (Ср, 13 Ноя 2019 23:20:23)

0

Поделиться536Ср, 13 Ноя 2019 23:19:49

Автор: Moour
Стремящийся
Зарегистрирован: Ср, 13 Ноя 2019
Сообщений: 10
Уважение: +7
Позитив: 0
Последний визит:
Пт, 15 Ноя 2019 23:52:55

Deff
Не работает. Вообще не отображает фон.

0

Поделиться537Ср, 13 Ноя 2019 23:21:03

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11603
Последний визит:
Сегодня 18:14:49

Moour
Вы просто не спешите - а несколько раз обновляйте страницу!!!
Ибо изо долго грузится и кешируется

0

Поделиться538Ср, 13 Ноя 2019 23:26:07

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11603
Последний визит:
Сегодня 18:14:49

Moour
Сами картинки у Вас видны ? https://forumstatic.ru/files/0012/d8/04/15710.jpg https://forumstatic.ru/files/0012/d8/04/64323.jpg

Код заменяйте целиком ( не меняя картинки на свою

Отредактировано Deff (Ср, 13 Ноя 2019 23:26:36)

0

Поделиться539Ср, 13 Ноя 2019 23:28:42

Автор: Moour
Стремящийся
Зарегистрирован: Ср, 13 Ноя 2019
Сообщений: 10
Уважение: +7
Позитив: 0
Последний визит:
Пт, 15 Ноя 2019 23:52:55

Не помогло. Отображает пикчи в самом конце страницы, когда захожу с телефона. Сверху - синий фон вместо пикчи.

+1

Поделиться540Ср, 13 Ноя 2019 23:36:13

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11603
Последний визит:
Сегодня 18:14:49

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

Не помогло. Отображает пикчи в самом конце страницы, когда захожу с телефона. Сверху - синий фон вместо пикчи.

Понял, тады так:

Код:

<style type="text/css">
html, body {
  background: url(https://forumstatic.ru/files/0012/d8/04/15710.jpg) left top  fixed repeat-y,
  url(https://forumstatic.ru/files/0012/d8/04/64323.jpg) right top  fixed repeat-y #5381B5;
}
</style>

Ещё поправил

Отредактировано Deff (Ср, 13 Ноя 2019 23:37:23)

0

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

Меню навигации

Пользовательские ссылки

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

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

Сообщений 521 страница 540 из 2001

Поделиться1Ср, 13 Фев 2019 13:52:59

Поделиться521Ср, 13 Ноя 2019 12:47:16

Поделиться522Ср, 13 Ноя 2019 12:56:50

Поделиться523Ср, 13 Ноя 2019 13:32:37

Поделиться524Ср, 13 Ноя 2019 16:49:39

Поделиться525Ср, 13 Ноя 2019 16:57:00

Поделиться526Ср, 13 Ноя 2019 19:54:12

Поделиться527Ср, 13 Ноя 2019 20:06:45

Поделиться528Ср, 13 Ноя 2019 20:27:34

Поделиться529Ср, 13 Ноя 2019 20:41:51

Поделиться530Ср, 13 Ноя 2019 20:43:48

Поделиться531Ср, 13 Ноя 2019 20:53:58

Поделиться532Ср, 13 Ноя 2019 20:54:45

Поделиться533Ср, 13 Ноя 2019 22:41:57

Поделиться534Ср, 13 Ноя 2019 23:14:11

Поделиться535Ср, 13 Ноя 2019 23:19:12

Поделиться536Ср, 13 Ноя 2019 23:19:49

Поделиться537Ср, 13 Ноя 2019 23:21:03

Поделиться538Ср, 13 Ноя 2019 23:26:07

Поделиться539Ср, 13 Ноя 2019 23:28:42

Поделиться540Ср, 13 Ноя 2019 23:36:13