» »

Читабельный режим чтения для сайта uCoz


Читабельный режим чтения для сайта uCoz

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

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

Установка:

Зайдите в ПУ > Управления дизайном > Страница материала и комментария к нему и добавьте в удобное место, где было бы удобно видеть кнопку, ставим следующий код:

Код
<div class="read_mode" onclick="$('.read_mode_on').show();$('html, body').css('overflowY','hidden');"></div>  
   
  <div class="read_mode_on" style="display:none">  
  <div class="read_mode" id="off" onclick="$('.read_mode_on').hide();$('html, body').css('overflowY','auto');"></div>  
  <div class="mess fix">$MESSAGE$</div>  
  </div>


Таблица стилей (CSS)

Код
.read_mode {top: 10vh; left: 100px;} /* Position */  
  .read_mode {width: 30px; height: 30px; position: fixed; background: #ddd url('http://zornet.ru/Ajaxoskrip/Aster/rd_ico.png') no-repeat center / 24px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(34,34,34,.02) inset;}  
  .read_mode:hover {opacity: .7;}  
  .read_mode_on {width: 100%; height: 100%; z-index: 9999; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(34,34,34,.95); box-shadow: 0 0 5px 0 #343434;}  
  .read_mode_on .mess {width: calc(80% - 40px); height: calc(80% - 20px); margin: 5% auto; padding: 10px 20px; background: #343434; color: #fff; font-size: 15px; line-height: 1.5; overflow-x: hidden; overflow-y: auto;}  
  .read_mode_on .mess.fix img, .read_mode_on .mess iframe, .read_mode_on .mess video {max-width: 100%;}


Так мы видим реально.

Режим чтения для uCoz

Теперь подключаем код, и уже видим как все изменилось.

Скрипт на улучшение чтение на сайте

Просто всегда считалось. что на темном фоне, светлый шрифт намного лучше смотрится, если он еще немного под градиентом, и не сильно яркий, то здесь по сути намного лучше варианта не придумать.

Есть сайт под DEMO

Источник: Pandora.clan.su
13.07.2016 Просмотров: 398 Комментарий: (7)

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

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

Комментарий: 7
Сопрано
Сопрано 13.07.2016 23:071
0
Интересно придумано, это видно, что не для всех сайтах можно увидеть. вообще в первые на Демо вижу, и так точно удобнее читать.
Kosten
Kosten 13.07.2016 23:203
0
Но вот сам в первые увидел, здесь еще нужно правильно вывести саму кнопку, чтоб она рядом с описанием была а не на нем, так возможно кому то пригодиться, для того и сделано, что кому то как раз нужно, другой даже смотреть не будет.
tsakonter
tsakonter 13.07.2016 23:162
0
Но если у тебя вверх сайта, весь построен на формате GIF и там все пляшет, приходилось видеть такой, ха очень хорошей скорости еле загрузился. То здесь этот скрипт подойдет, а так считаю лишним его, но не говорю что он не нужен. просто может где то на блоге и он хорошо бы в строился, но только не на таких пабликах.
Kosten
Kosten 13.07.2016 23:214
0
Так понятно, что не на таком сайте, здесь мало статей, а если мы возьмем сайты, где примеру статьи на 10 тыс и больше, скажем небольшие историй, то большая вероятность поставить такой скрипт предусмотрена.
Kosten
Kosten 13.07.2016 23:345
0
А вообще из за этого, чтоб один материал с контейнером оставлялся, поставил операторы, что шапка - вверх сайта, только на главной идет, на остальных нет.
feliksteg
feliksteg 14.07.2016 00:116
0
Здесь просто убирает лишнее и оставляет только одну информацию и потому ставят скрипт в комментарий материала. Но есть и другой код по читабельности, где вы просто шрифт увеличивает, но этот больше понравился.
FeStemBer
FeStemBer 14.07.2016 00:447
0
Что то перепутали, где увеличивается шрифт, сделано для слабовидящих пользователей. Да и простых, кто хорошо видит, если много читать, то лучше увеличить а не напрягать глаза.
avatar