Читабельный режим чтения для сайта 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%;} Так мы видим реально.  Теперь подключаем код, и уже видим как все изменилось.  Просто всегда считалось. что на темном фоне, светлый шрифт намного лучше смотрится, если он еще немного под градиентом, и не сильно яркий, то здесь по сути намного лучше варианта не придумать. Есть сайт под DEMO Источник: Pandora.clan.su | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 13 | |
| |
