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

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

Кратко: юзерскрипт — это программа, написанная на языке 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


ShikiUtils

Полезные утилиты для шикимори
В меню расширения можно выбрать только необходимые функции:
569x528

1)Copy comment link button - кнопка рядом с комментарием, чтобы скопировать ссылку на комментарий.
928x83

2)Copy user ID button - кнопка под аватаркой пользователя, чтобы скопировать его ID.
3)Copy user CSS button - кнопка под аватаркой пользователя, чтобы скопировать его CSS.
204x283

4)Copy club CSS button - кнопка над аватаркой клуба, чтобы скопировать его CSS.
298x457

5)Copy image code button - кнопка на изображении, чтобы скопировать код изображения.
345x282

6)Shikimori rating filter - дополнительный фильтр, сортирующий аниме по рейтингу Shikimori.
7)Studios filter - дополнительный фильтр для сортировки аниме по студии.
252x526

8)Friends' average score - показывает среднюю оценку среди друзей.
255x162

9)Automatically hides images under a spoiler - скрывает все изображения под спойлером.
904x618

10)Multiple selection for history - позволяет выбрать несколько записей в истории Shikimori и удалить их.
1208x110

11)Hides news from blocked users - скрывает новости от заблокированных пользователей.

12)Removes restriction on choosing year of birth - убирает ограничение на выбор года рождения в настройках профиля.

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

Автор: LifeHLifeH
Комментарии
Скрыть 181 комментарий
Показать 181 комментарий
Загрузить ещё 20 из 181 комментариев
chsa13
chsa13#
Всем привет!
Представляю свой юзерскрипт, который добавляет плеер и просмоторщик манги с ранобе с сайтов семейства lib.social.
Короче плеер с mangalib, ranobelib, anilib.
Чтобы запустить плеер нужно нажать на кнопку читать/смотреть под меню выбором оценки.
Приветствую все замечания и предложения.
update.greasyfork.org/scripts/503677/shikiPlus.user.js
Nomad_N
Nomad_N#
Для Оперы не нужно скачивать расширение или что? Ссылки заметил только для Фокса и хрома.
@nikola2222, @grin3671
nikola2222
nikola2222#
@Nomad_N, как ты без расширения установишь скрипт?
grin3671
grin3671#
@Nomad_N, различия есть только между двумя браузерами. Если у вас любой основанный на chromium браузер, вроде Opera или Yandex, то ищите в своём магазине расширений Tampermonkey. Ссылки для каждого браузера указываться не будут — их слишком много.
yokarniy babay
yokarniy babay#
можно ли сейчас как-то на своей страничке сделать счетчик посещений? несколько лет назад уже было такое, теперь html-код со сторонних сайтов не отображается в виде картинки в разделе "о себе"
Na4eZ
Na4eZ#
как сдлеть чтоб были видны анимехи которым сайт выдал 18+ типо седзе-ай
@nikola2222
nikola2222
nikola2222#
@Na4eZ, зачем тебе это?
@Na4eZ
Na4eZ
Na4eZ#
@nikola2222, из-за этого пропустил 100500 (3) тайтла по типу этого "Я предпочитаю злодейку"
как теперь жить в душе не е
WhizkidAnime
WhizkidAnime#
Всем привет. Есть ли у кого-нибудь скрипт, который присылает браузерные уведомления о новых сообщениях в диалоге с шикимори? В настройках есть галочка только получать на почту, но работает как-то через раз и неудобно.
@nikola2222, @pirate-, @Nightfall_013
nikola2222
nikola2222#
@WhizkidAnime, зачем тебе это?
@WhizkidAnime
WhizkidAnime
WhizkidAnime#
@nikola2222, окей, не нужно
Ладащка
Ладащка#
@pirate-, ого, сам бота создавал или есть готовый?
@WhizkidAnime, @pirate-, @Nightfall_013
WhizkidAnime
WhizkidAnime#
@Ладащка, судя по его профилю - сам создавал + продаст за какую-то сумму, наверное.
pirate-
pirate-#
@Ладащка, сам создал.
pirate-
pirate-#
@Nightfall_013, не он, это его @v666ad
p.s он не работает.

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