Собакен говорит по-вашему

[Tenno Seremel]

Это работает только на главной (адаптивного) дневника, потому что только там показывается эпиграф, в который надо вставлять текст. Любой другой текст в эпиграфе никак не мешает работе.

Чтобы Собакен появлялся, ширина экрана должна быть не менее 992 пикселей (так дайри написаны). Позицию блока с текстом устанавливаю в 3 местах, в зависимости от разрешения, потому что положение Собакена меняется в зависимости от размеров экрана.

Если вы напишете слишком много текста, то он наползёт на полосу меню, а верхняя его часть уйдёт за экран. Ничего не поделаешь.

Кстати, я ставлю элементу #page-t стиль position: static, чтобы он не мешал мне позиционировать блок. Надеюсь, это ничего не сломает Вроде пока работает. Если что-то поломается, придётся координаты от другой точки задавать.

Найдёте баги — пишите в комментариях.

<div class="mascot-text"><span class="mascot-text-content">Теперь-то я на своём месте.</span></div>

#page-t
{
	position: static !important;
}
.mascot-text-content
{
	position: absolute;
	left: 0;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
}
@media all and (min-width: 992px) {
	.mascot-text
	{
		position: absolute;
		z-index: 100;
		left: calc(50% + 119px);
		top: 4px;
		box-sizing: border-box;
		width: 133px;
		height: 82px;
		background: #fff;
		color: #000;
		font-size: 12px;
		font-style: normal;
		border-radius: 7px;
	}
}
@media all and (min-width: 1200px) {
	.mascot-text
	{
		left: calc(50% + 219px);
	}
}
@media all and (min-width: 1400px) {
	.mascot-text
	{
		left: calc(50% + 309px);
	}
}
@media not all and (min-width: 992px) {
	.mascot-text
	{
		display: none !important;
	}
}

Результат:



P.S. Если текст находится не по центру облачка, то, возможно, пришло время обновить браузер…

Comments

[adept-13]

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

[Hikedaya]

Не, я все понимаю, маскот сайта и прочее. Но у меня эта собака побанена везде, куда я на регулярной основе захожу. И вот есть вопрос - а админы там не собираются эту собаку убрать из меню на главной и вернуть туда аватар залогиненного пользователя, как это на бете было? XD

[Tenno Seremel]

adept-13, не ходить по x.* Если там мои стили не грузятся, то я с этим вряд ли что могу сделать. А так у меня цвета прописаны. Если только Ctrl+F5. Ну или заходить по обычному домену.

Hikedaya, не в меню, над меню же. А в меню не знаю. Может забили.

[Кошка Хаула]

Hikedaya, вы можете в настройках аватарок поставить любую из них себе на меню вместо собаки
Сорри, что влезла в чужой дневник без спроса

[Tenno Seremel]

Кошка Хаула, о. Щас потыкаем

[adept-13]

странно,что прописанные шрифты так видятся....

[adept-13]

ты на новом дизе? в смысле- на аддитивном?

[Tenno Seremel]

adept-13, адаптивном, да.

Веб-шрифты не подгружаются, хотя должны (опять забыли). Но у меня на компе они есть, потому отображаются нормально. Или в чём вопрос?

Если про цвет, то тут ясно, что ничего не ясно

[adept-13]

я про цвет...потому что если выделить элемент- сама надпись есть.

[Tenno Seremel]

adept-13, через x.* разметка дневника (HTML) от старых дизайнов, очевидно, что что-то будет съезжать. В адаптивном дизайне другая разметка. Суть в том, что возможности ходить по дневникам через x.* вообще быть не должно было. Оно только для служебных страниц.

[Luchiana]

Не знаю, как у тебя на главной, а здесь призрак отца Гамлета Собакена вещает из ниоткуда

[Tenno Seremel]

Luchiana, у тебя баннерорезка скрыла Собакена над меню или он выключен? Интересно, если он выключается, то как мне это детектировать

[Luchiana]

Tenno Seremel, виновата, про АдБлок не подумала, без него нормально всё. Просто я сейчас без АдБлока гулять по Дайри не рискую - звуковая реклама нынче выпрыгивает внезапно и беспощадно

[Tenno Seremel]

Luchiana, у меня ublock origin включён, но Собакен на месте

[Luchiana]

ublock origin

Tenno Seremel, не знаю, что сие за зверь и есть ли он на Опере))

[Tenno Seremel]

Luchiana, годный блокировщик, но есть ли под Оперу я не в курсе

[Hikedaya]

Luchiana, ЗВУКОВАЯ реклама??? Дайры пробили очередное дно...

[Hikedaya]

Кошка Хаула, спасибо

Ткнул туда и... дальше много непечатного в адрес тех, кто это придумал:

[Tenno Seremel]

Hikedaya, так это разные

[Luchiana]

Hikedaya, это не Дайры, у меня сервисы без рекламы проплачены, это какой-то подлый шпиён откуда-то влез))

[Hikedaya]

Tenno Seremel, да я уже понял, что это разные. Но все равно, "так верстают только ..." (с) XD

[Tenno Seremel]

Hikedaya, а какая альтернатива, продублировать? Не, ну можно, конечно, сделать разные пункты и выбор попапом, как в комментариях, но это придётся переделывать. А тут и без того вагон всего делать надо

[Лис Хикару]

А как белый фон сзади собакена убрать (сделать прозрачным можно? Заменить на другой цвет?)

У меня проплачено отключение рекламы, и ни на одном из устройств пока не вылезало звуковой рекламы (а вот в бородатые годы такое было - баннеры каркали и издалавали непотребные звуки, помню такое))

[Tenno Seremel]

Лис Хикару,

.ads-top {
	background: transparent !important;
}

Вместо transparent можно указать цвет, как обычно, в виде #rrggbb.

[Лис Хикару]

О, спасибо!!!
Кажется, понемногу начинаю понимать...
Кстати о прозрачности (вообще как о таковой) - когда хочется выставить ей проценты, как они прописываются? Например, если сделать полу-прозрачным фон постов.

[Tenno Seremel]

Лис Хикару, да. Берётся основной (непрозрачный) цвет и записывается в формате rgba(red, green, blue, opacity), где:

red — красный компонент цвета (число от 0-255),
green — зелёный компонент цвета (число от 0-255),
blue — синий компонент цвета (число от 0-255),
opacity — непрозрачность (число от 0 до 1).

Например, background: rgba(255, 255, 255, 0.8); для слегка прозрачного белого. Значения red, green, blue обычно можно увидеть в любом графическом редакторе или утилите для выбора цвета.

Есть ещё альтернативный синтаксис, больше похожий на обычное (для веб) написание цвета, но он не везде поддерживается, так что я его приводить не буду.

[Лис Хикару]

Ой, без примеров сложно понять, что куда добавлять... Вот как у вас в эпиграфе этот полупрозрачный белый Если я правильно поняла, это и есть rgba(255, 255, 255, 0.8) ?)в виде полного кода как выглядит (вместе с той частью, куда его вставлять)?
И как обстоит, если я хочу просто сделать с помощью css полупрозрачным уже итак имеющийся элемент (не меняя его цвет), все равно прописывать его цвет ещё раз, или тогда можно только прозрачность указать?

[Tenno Seremel]

Лис Хикару,

.ads-top
{
	background: rgba(255, 255, 255, 0.8) !important;
}

И как обстоит, если я хочу просто сделать с помощью css полупрозрачным уже итак имеющийся элемент (не меняя его цвет), все равно прописывать его цвет ещё раз, или тогда можно только прозрачность указать?

Да. Потому что если указать, например, свойство opacity, то получится, что прозрачность изменится у элемента и всего, что в нём, включая текст. Что в подавляющем большинстве случаев нежелательно.

Вообще, суть записи CSS:

правила, которые указывают на элементы {
	свойство: значение свойства;
}

Правила, указывающие на элементы могут состоять из:

названия элемента: p, div, span, h1, table и т.п.
класса элемента: это одно из слов в атрибуте class какого-либо элемента.
идентификатора элемента: это слово в атрибуте id какого-либо элемента (по идее, значение этого элемента должно быть уникальным для страницы, но это часто нарушается).
* обозначает все элементы.

Есть и другие, но для начала хватит Итак, например, для HTML вида:

<h1 id="s1">Текст заголовка</h1>
<p class="info">Lorem ipsum <a href="http://example.com/">dolor <span>sit</span> amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

На заголовок можно указать как h1 или #s1, на параграфы с текстом — p, но если паграф с текстом Lorem ipsum — .info (либо p.info).

Ещё примеры:

p span — все элементы span, которые находятся внутри содержимого элемента p (там, где слово sit в примере).
p > a — все элементы a, чьим непосредственным предком является элемент p (там, где dolor sit amet в примере).
h1 + p — все элементы p, которые находятся сразу после элементоа h1 (Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.)
h1 ~ p — все элементы p, которые находятся после элемента h1, на одном с ним же уровне (Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.)

Чем больше таких элементов в правиле (спец-символы +, ~ и т.п. не считаются) тем больший вес у этого правила, что важно если несколько правил будут указывать на один элемент. Причём #id всегда более важно всех остальных, затем идут .классы и потом уже просто элементы. !important в правиле перебивает этот вес, такие правила рассматриваются отдельно. Если итоговый вес одинаков, то правила применяются в том порядке, в котором они записаны.

[Лис Хикару]

Спасибо! Хоть немного теперь стала понимать, на что CSS похоже (раньше как-то даже и не задумывалась, что это вообще такое))) С прозрачностью, вроде, везде справилась, только зона с динамичными комментариями упирается, без понятия что я не так делаю. Какой у неё должен быть код (для прозрачности)?

[Tenno Seremel]

Лис Хикару,

.commentsBox
{
	background: rgba(255,255,255,0.3) !important
}
.commentsBox .item
{
	background: transparent !important;
}

rgba(255,255,255,0.3) можно заменить на свой цвет или transparent.