ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создать свой хинт для сайта uCoz

Создать свой хинт для сайта uCoz

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

Вот если прописаны title, по обязательно появиться подсказка и к примеру возьмем мини профиль. И вот какой он будет изначально.

Красивый хинт для uCoz

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

Код

Не забываем после установки все сохранить.

Теперь переходим к главному, это выстраиваем дизайн его, а значит стили в CSSнужно поставить.

Код

/*=== Hint ZorNet.Ru ===*/
#easyTooltip{
padding:3px 10px;
border:1px solid #1443c9;
background:#212224;
color:#fff;
-moz-border-radius: 5px; /* Firefox */
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-khtml-border-radius: 5px; /* KHTML */
border-radius: 5px;
opacity: 0.75;
z-index:999;
  border: 1px solid #1b9ef1;
}
/*=== END ===*/

И здесь разберемся, что за что будет отвечать.

В самом верху находим:

padding:3px 10px; - первая, это ширина его и вторая цифра, как поняли длинна.

Теперь в самом низу:

border: 1px solid #1b9ef1; - это окантовка или обвод, 1px - ширина его и дальше идет, каким цветом он будет.

И почти тоже в самом верху находим:

background:#212224; - отвечает за оттенок цвета, это может тыть темный или синим, какой сами выставите.

color:#fff; - отражать надпись в таком цвете, здесь выставлен белый, так как темная основа.

border-radius: 5px; - закругляем углы, чем меньше тем острее, чем больше то и область закругление увеличивается.

И давайте разберемся с прозрачностью.

opacity: 0.75; - если выставить 0.99, то прозрачности вообще не будет, нам она нужна но не слишком большая.

Вот основные стили, которые если вы начнете менять, то дизайн хитр кардинально измениться.

2015-11-11 Просмотров: 2680 Комментарий: (19)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарий: 19
Порядок вывода комментариев: Kolinkor 2015-11-11 05:45¹ 0 Но этот настроен нормально, имею виду его отображение. Что в правой стороне и немного ниже клика. То бывает такое, что наводишь и вылазит хинт и реально не видишь куда навел, да можно прочесть по нему, но лучше еще и сам клик визуально наблюдать. Kosten 2015-11-11 05:50² 0 Brung, некоторые есть в низу или вверху, как выстроить его. Просто мне ближе простые а не верченные, здесь можно все сделать и настроить самому, если что то не хватает в стилях, добавить. Здесь он был с углами, но почему бы не поставить закругление и это было сделано. Но если нравиться тебе эти угры, или поставь на нем ноль или убери стиль, есть выбор. AnTron 2015-11-11 06:13⁷ 0 Так статья про то что вы теперь сами можете его настроить. кто не знал. FeStemBer 2015-11-11 06:14⁸ 0 Здесь просто написаны основные принципы по дизайну и больше не чего не нужно, скрипт отвечает за вывод, стили за дизайн. Kosten 2015-11-11 06:21¹¹ 0 Все правильно, просто стили все понятные, а в сам код не лез, как не понимаю в нем не чего, посмотрел, чтоб не было не какого спама и все. FeStemBer 2015-11-11 05:55³ 0 Вот один хинт хотел поставить, он простой, только вот 2 скрипта, которые можно поставить вверх или вниз сайта. И на старом шаблоне он отлично работал, как переставил на новый, ставлю его, не то что он не показывает, он даже не дает стандартным появляться. Kosten 2015-11-11 06:08⁵ 0 Там не 2 скрипта, один стили идут. Просто давно стоял этот хинт и также хотел поставить, точно зная он рабочий. Но оказалось на новом шаблоне отказался работать и все также и стандартные не выводил. Понимаю, если стандартные выводит, можно сказать, что не работает или просто не правильно установлен был, а здесь реально не чего не появляется. AnTron 2015-11-11 06:00⁴ 0 Tventum, в таком случай основном говорят, что система обновилась и теперь не подходит, хотя думаю есть какая то истина в этих словах. Простой конфликт происходит, это не у вас такого одного, лично было несколько раз. И только поставил нашел тот, который идет отдельно стили, как представлено здесь и тогда начал он показывать. А есть еще те, которые нужно загружать, не имею ввиду коды, а реальный дизайн и здесь только могу улыбнуться и спросить, зачем. Kosten 2015-11-11 06:20¹⁰ 0 Все может быть и от системы обновленной, но это как само успокоение. Основном, просто не работает может на этом CMC хотя вряд ли, здесь даже точно не скажешь в чем может такая быть причина, но явно в коде или стили, который до него уже стоит. ZruBkul 2015-11-11 06:11⁶ 0 Что то слышал, но читал, что этот хинт на ранжирование сайта влияет и могут запросы из за него ниже стоять как должны. Хотя считаю, что это мало вероятно, причем здесь этот код, но он все таки на главной стоит и значит на всем материале будет, если поставить вверх или в низ его. Kosten 2015-11-11 06:17⁹ 0 На счет, что хинт влияет на ранжирование сайта в поисковой системе, только от вас услышал. Но всегда коды немного но мешают роботам поисковым. И в таком случай основном главную страницу не нагружают всякими информерами, все должно в меру. Dimstrik 2015-11-11 16:10¹² 0 Думаю у него обводка уж сильно выделяется чем сам фон, да ну ладно каждый сделает как ему по нраву. Но я на тестовый установил и у меня он не работает не фига! Kosten 2015-11-11 18:01¹³ 0 Dimstrik, просто старался подробней описать, как можно изменить. Kosten 2015-11-15 04:49¹⁴ 0 Dimstrik, как не работает, на сайте его оставил и как видишь хинт батрачит как нужно. Dimstrik 2015-11-15 05:26¹⁵ 0 Не спорю может он не пошёл так как я на дизайнерский дизайн ставил. Dimstrik 2015-11-15 05:30¹⁶ 0 Ну правильно, когда я пробовал скрипта не было в материале! Ты указал только стили! Kosten 2015-11-15 05:43¹⁷ 0 Было дело, вовремя почти увидел. moroz_anna1987 2015-12-13 15:35¹⁸ 0 Очень красивый. Может кто знает что в js поменять чтоб он высвечивался снизу слева, а не справа ? workman 2015-12-13 18:08¹⁹ +1 Менять нужно не в JS а в стилях