CSS-club – настройка внешнего вида сайта

КлубыCSS-club – настройка внешнего вида сайта
Пользовательские скрипты
Что такое юзерскрипты?

Кратко: юзерскрипт — это программа, написанная на языке JavaScript, хранящаяся на компьютере пользователя и подключаемая браузером на определенных страницах. Юзерскрипт представляет собой файл с расширением .user.js (именно по расширению браузеры понимают, что файл является юзерскриптом), содержащий метаданные и непосредственно javascript-код.


Подключение юзерскриптов:



Инструкции
Как создать юзерскрипт
Для создания скрипта необходимо кликнуть по иконке Greacemonkey и выбрать пункт «Создать скрипт...»
Далее можно задать любое название, пространство имен, описание и включения, так как в скрипте все эти настройки уже предусмотрены.
395x498
После чего откроется окно для ввода скрипта. Весь код в окне необходимо удалить и вставить любой скрипт из списка готовых, после чего нажать «Сохранить» и обновить страничку сайта.
557x294 544x297
Как добавить скрипт на эту страницу
Если вы хотите опубликовать свой скрипт на этой странице, для начала максимально протестируйте свой скрипт, а затем опубликуйте на гитхабе или на других сайтах, ссылки на которые есть на этой странице. Напишите grin3671grin3671 в ЛС ссылку на скрипт, название и описание скрипта (не забывайте: краткость — сестра таланта), а также приложите скриншоты, если его работу можно показать.



Список готовых юзерскриптов

Отключение пользовательских стилей

код скрипта
// ==UserScript==
// @name         Shiki User Style Remove
// @namespace    https://www.tampermonkey.net
// @version      1.0
// @description  Disabled Shiki User Styles
// @author       kaur
// @match        *://shikimori.one/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=shikimori.one
// @grant        none
// ==/UserScript==

const func = () => $('#custom_css').remove();

$(document).ready(func);
$(document).on('page:load', func);
$(document).on('turbolinks:load', func);

Старая версия
// ==UserScript==
// @name         Shiki User Style Remove
// @namespace    http://shikimori.me/
// @version      1.0
// @description  Disabled Shiki User Styles
// @updateURL    https://openuserjs.org/meta/kaur/Shiki_User_Style_Remove.meta.js
// @author       kaur
// @match        http://shikimori.me/*
// @match        https://shikimori.me/*
// @grant        none
// ==/UserScript==

var func = function() {
  $('#custom_css').remove();
};

$(document).ready(func);
$(document).on('page:load', func);
$(document).on('turbolinks:load', func);

Автор: kaurkaur


Реальный рейтинг Shikimori

Небольшая математика считает оценки пользователей в правом меню и показывает среднее арифметическое. (По умолчанию отображается рейтинг MAL)
318x181
Последняя версия и обсуждение в отдельной теме

Автор: Oniii-chanOniii-chan


Отображение дат в истории

1184x249
Для отображения даты на русском заменить en-GB на ru-RU.
код скрипта
// ==UserScript==
// @name         Shiki History Dates
// @namespace    http://shikimori.me/
// @version      1.1.0
// @description  Dates in history on shikimori.me
// @author       ImoutoChan
// @match        https://shikimori.me/*
// @match        http://shikimori.me/*
// @grant        none
// ==/UserScript==


var func = function() {
    'use strict';

    $(".date").text(function() {
        return (new Date($(this).attr("datetime")).toLocaleDateString('en-GB', {
            day : 'numeric',
            month : 'short',
            year : 'numeric',
            hour : 'numeric',    
            minute : 'numeric'
        }));
    });
};

$(document).ready(func);
$(document).on('page:load', func);
$(document).on('turbolinks:load', func);
$(document).on('postloader:success', func);

Автор: Oniii-chanOniii-chan


Возвращение к позиции нажатия кнопки «наверх»

Скрипт добавляет кнопку в левой части экрана, которая идентична кнопке «наверх», но перемещает вниз к позиции нажатия кнопки «наверх», подобная механика реализована в ленте ВК

дополнительная информация

там, где написано 500 - скорость скроллинга на обратную позицию, 500 я посчитал достаточным
чтобы изменить этот элемент, вроде добавить эффект при hover нужно использовать класс .b-to-back и написать соответствующее правило в CSS
код скрипта
// ==UserScript==
// @name         Back to the last possition:Shikimori
// @namespace    http://shikimori.me/
// @version      1.0
// @description  try to take over the world!
// @author       Dark_zarich
// @match        http://shikimori.me/*
// @match        https://shikimori.me/*
// @grant        none
// ==/UserScript==

var scroll_bottom = 0;
$(".b-to-top").css("z-index", "10");

$(".b-to-top").click(function() {
  scroll_bottom = $("body").scrollTop();
  $("body").append("<div class='b-to-back' style='display: inline-block; position: fixed; top: 0; background: none; width: 120px; height: 100%; cursor: pointer; z-index: 5;'></div>");
  $(".b-to-back").click(function() {
    $('html, body').animate({
        scrollTop: scroll_bottom
    }, 500);
    $(".b-to-back").remove();
  });  
});

Автор: Dark_zarichDark_zarich


Скрывающееся при прокрутке верхнее меню

Меню скрывается при прокрутке вниз. Прокрутка вверх, наведение курсором на вверх станицы и прокрутка до конца страницы заставляет меню снова появится. Установка через сайт greasyfork.org: /ru/scripts/32169-autohidemenu

Автор: grin3671grin3671


Ссылки для поиска в дополнительных источниках

Поиска аниме/манги/ранобэ в таких источниках как Rutracker, Nyaa, RanobeHub и пр.
Установить можно тут: openuserjs.org

Предпросмотр

Автор: ChortowodChortowod


История просмотра друзей

Установить можно тут: openuserjs.org

Предпросмотр

Автор: ChortowodChortowod


Список коллекций

Теперь понравившиеся коллекции можно добавлять в избранное, чтобы потом их быстро найти.
Установить можно тут: openuserjs.org

Предпросмотр

Автор: ChortowodChortowod


Отображение опенингов и эндингов на странице тайтла

Такой скрипт был, и я его чуть переделал для себя, чтобы песню можно было сразу искать на ютубе. К тому же с какого-то времени он перестал работать (видимо что-то изменилось на MAL), и я его (вроде) починил. Не проверял на всех тайтлах, где-то может и не работать, но основную логику и ошибку парсинга исправил.

Установить можно тут: openuserjs.org

Предпросмотр

Автор: ChortowodChortowod


Еще один рейтинг Шикимори

Альтернативный вариант рейтинга от Oniii-chan'а. Средняя оценка отображается рядом с оценками пользователей Шикимори. Так же считает среднюю оценку пользователя в его списках.

Установить можно тут: greasyfork.org

Предпросмотр
Средняя оценка тайтлов
Средняя оценка списков

Автор: grin3671grin3671


История изменений тайтла

Показывает историю изменений списка для каждого отдельного тайтла. На странице тайтлов появится кнопка «История изменений», открывающая окно со списком действий для этого тайтла в вашей истории. Скрины есть по ссылке ниже. ※ Не работает в Greasemonkey!

Установить можно тут: greasyfork.org

Автор: grin3671grin3671


Калькулятор оценки

Методика икалькулятор оценки тайтла
Скачать .js файл можно на Github Gist. Ссылка постоянная, обновляется. Тестил только в Tampermonkey в хроме, но и через другие расширения должно работать.
Предпросмотр
Блок калькулятора добавляется на странице тайтла под обложкой. Оценённые критерии сохраняются в LocalStorage браузера для каждого тайтла. Но итоговую оценку шики, которую видно всем, вы должны поставить сами.
254x280
Описание
Смысл в том, что гораздо проще выбрать 5 раз из 3-х вариантов, чем один раз из десяти.

Критерии:
Всего 5 критериев, полученных в ходе долгого исследования других сайтов, умных статей и опросов знакомых.
1. Концепция
Основная идея тайтла: жанр, мир, сеттинг, лор, о чем и о ком он в целом. Типа «кун переродился, но вместо именного предмета забрал с собой в новый мир богиню» или «всемогущий князь тьмы влюбился в лоли-эльфийку»
2. Сюжет
Насколько интересно? Есть ли интрига, которая заставляет смотреть дальше? Не затянуто ли? Все ли логично?
3. Персонажи
Насколько раскрыты персонажи? Адекватно ли себя ведут? Нравится ли кто-то очень сильно? Сопереживаете ли вы им?
4. Исполнение
Насколько качественно технически сделан тайтл: рисовка, музыка, анимации, эффекты, слог автора (в случае манги), общая атмосфера и прочее? Насколько легко и приятно смотреть или читать?
5. Концовка
Нравится ли как закончилось? Хочется ли продолжения? Оправдала ли она ваши ожидания?

Оценки:
Каждый критерий оценивается по одинаковой шкале:
0. Плохо — есть то, что вам явно не нравится в критерии и вызывает негативные эмоции
1. Нейтрально — средне, не плохо, но и не отлично
2. Хорошо — нет вопросов, все на уровне ожиданий или выше ожиданий, т.е. очень понравилось
В сумме получается заветные 10 баллов. Где 10 — это когда идеально абсолютно все, а 5 — когда совершенно всё средне.
Проверил на многих знакомых, все подтвердили, что так удобнее и объективность повышается.

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

Автор: TalleyranTalleyran


ShikiPlus

Скрипт встраивает на страницу тайтла плеер с сайта anilib или читалку с сайтов mangalib и ranobelib, после нажатия на кнопку смотреть/читать под выбором оценки:
Предпросмотр
Кнопка
Плеер
Установить можно тут: greasyfork.org

Автор: chsa13chsa13


ShikiPrettier

Добавляет кнопку "Prettier" для красивого форматирование кода. Работает на основе PrettierAPI.
1198x131

Установить можно тут: openuserjs.org.

Автор: DedonychDedonych


Link Formatter & Counter

Форматирует ссылки и показывает количество символов и слов в текстовом поле. НЕ РАБОТАЕТ с новым WYSIWYG текстовым редактором.
Описание работы форматирования ссылок
Скрипт автоматически конвертирует вставляемую ссылку на тайтл или персонажа в BBCode для внутренних ссылок, если выделен текст.

Скопируйте ссылку на аниме, выделите в поле ввода нужное слово, к примеру, «Калитка» и нажмите Ctrl + V — выделенный текст автоматически заменится на короткий код [anime=9253]Калитка[/anime]. Таким же образом скрипт конвертирует обычные ссылки в формат [url].
1191x170 1200x821

Установить можно тут: greasyfork.org

Автор: LifeHLifeH


Contests helper

Показывает количество кандидатов из турнира есть в твоих списках.
305x527

Установить можно тут: greasyfork.org

Автор: LifeHLifeH
Комментарии
201
Скрыть 198 комментариев
Показать 198 комментариев
Загрузить ещё 10 из 198 комментариев
котёнок в кедах
котёнок в кедах#
Код отключения пользовательских стилей не работает
@grin3671
котёнок в кедах
котёнок в кедах#
ShikiPlus тоже
@grin3671
grin3671
grin3671#
@котёнок в кедах, обновил код. В настройках внешнего вида сайта есть пункт «Применять пользовательские стили» отвечающий за тоже самое без лишних юзерскриптов.
@котёнок в кедах, обращайтесь к автору ShikiPlus @chsa13.
@Соnnоisseur_desu, если вы про рейтинг от Oniii-chan, то он работает. Проверьте инструкцию по установке, включите режим разработчика — возможно причина в этом.
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть
примеры BBCode