Re:design anitokyo. tv - о том, как открыть новый мир

1. 

   Оффлайн 29

   Arksault

   Тёнин

   Анимешники

   Сообщений: 891

    Для начала узнаем, что же такое Редизайн?

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

   
   

    Как установить Редизайн?

   
   1.Для начала необходимо скачать расширение Stylish и установить его, для этого нужно определится с браузером и выбрать нужный вариант для:
   
   

   Google Chrome и Яндекс.Браузер* | Firefox*

   
   
   * некоторые браузеры используют ядро Google Chrome, поэтому расширение может заработать (пример тому браузер от Яндекса) и в вашем невиданном браузере, можно попробовать установить расширение через магазин Chrome Store.
   
   или просто перейти по этому линку и нажать соответствующую кнопку "Install Firefox/Google Chrome/Yandex.Browser".
   

   

   
   2. После всех проделанных манипуляций, необходимо установить сам
   

   Редиз

   
   3. После, нажимаем на кнопку "Install Style". Готово, редиз установлен.
   

    Пример

   

   
   

   
   Выбираем понравившиеся из списка ниже.
   

   
   

    F.A.Q

   
   V. Если я поставлю редиз, скажется ли это на продолжительности загрузки страниц и сайта в целом?
   O. Возможно, и если, то незначительно.
   
   V. Как создать свой стиль?
   O. Если вы владеете знаниями HTML, CSS и немного графикой, то вы сами всё знаете. Если же нет, то в скором времени я добавлю небольшую инструкцию о том, как создать свой редизайн сайта.
   
   V. Будут ещё редизайны от меня?
   O. Нет.
   
   V. Исправление найденных багов/обновление существующих редизов?
   O. Если будет время на них.
   

   
   

    Внимание!!!

   
   Ахтунг, пупсики!!
   
   к всеобщему сожалению, наше любимое расширение под названием Stylish было замечено в слежке за пользователями. Не так давно разработчик продал расширение компании, которая занимается аналитикой в мировой паутине и разумеется им было выгодно купить его)) сейчас в этом приложении есть код ,который отслеживает посещённые пользователям сайты с привязкой по IP, уникальному иду. Если кому-то из вас нечего скрывать и ему плевать на анонимность, то можете пользоваться расширением и дальше, если же вы хотите остаться анонамистом , то прошу использовать альтернативное решение, а называется оно Stylus это расширение пока ещё не следит за пользователям и не передаёт какую-либо информацию 3-им лицам. Конечно решение не очень удобное в сравнение с предшествинником, но и не сложное. У него нет своей базы, как у Stylish, но и не нужно))) оно использует их базы , так что вы без труда сможете установить редизы / стили из библиотек Stylish. Ниже инструкция по установке нового расширения и редизайна / стиля для сайта.
   
   1. переходим на офф. страницу с расширением;
   
   

   

   
   
   2. выбираем нужную кнопку опираясь на браузер, который вы используете. (у меня Google Chrome соответственно я выберу первую кнопку);
   
   3. после, вас переносит на страницу с расширением. (для Google/Яндекс, для Firefox, Opera)
   
   

   

   
   
   4. нажимаем на кнопку установить, соглашаемся с установкой и ждём, когда расширение загрузится а после, установится;
   
   

   

   
   
   5. закрываем вкладку с расширением и переходим на сайт Anitokyo.TV;
   
   6. далее, нажимаем на иконку с нашим расширением, как показано на скрине ниже, после нажимаем на кнопку "Найти стили";
   
   7. расширение найдёт все когда-либо созданные стили для этого сайта (напомним ,что расширение использует базы Stylish. Так что, все редизы / стили можно использовать вновь;
   
   

   

   
   
   удачи, пупсики!! да прибудет с вами пупсяковость, АМЫН.
   

   
   

   —————————— Редизы ——————————

   
   

    Anitokyo.tv Pink^^4life v1.0

   
   

   установить

   
   

   

   
   

    Скриншоты

   
   Главная страница
   

   

   
   Полная новость
   

   

   
   Профиль пользователя
   

   

   
   

   
   

    Anitokyo.tv ~AKAI HOSHI~ v1.0

   
   

   установить

   
   

   

   
   

    Скриншоты

   
   Главная страница
   

   

   
   Полная новость
   

   

   
   Профиль пользователя
   

   

   
   

   
   

   
   

    Anitokyo Monogatari Dark Theme

   
   

   установить

   
   

   

   
   

   
   

    Anitokyo.tv Night Theme v2.0 from ©alburn

   
   

   Установить

   
   

   

   
   

    Скриншоты

   
   

   

   
   

   
   

   
   

   ______________________________
   ________________________

   
   P.S. О всех найденных багах, прошу писать в этой теме.
   На этом всё. Удачки, пупсики

   Magatsukami, Alphawerewolf, Svital789 v. 2.1 и ещё 4 нравится это сообщение.

   Сообщение отредактировал Alphawerewolf_〆(￣ー￣ ) 2 ноября 2018 - 02:01

   а сейчас, поведай мне о пустоте своих мыслей

   12 мая 2018 - 16:06 / #1
2. 

   Оффлайн 17

   OldSchool

   Семпай

   Анимешники

   Сообщений: 358

   Arksault,
   Картинки абсолютно идентичны, а base64 использую так как отклик моментальный, пробовал хостинг который ты использовал, не понравилась секундная задержка
   24 ноября 2018 - 21:13 / #121
3. 

   Оффлайн 29

   Arksault

   Тёнин

   Анимешники

   Сообщений: 891

   OldSchool, в любом случае будет замедление, ибо base64 на 32% увеличивает вес. чем больше размер файла-стилей, тем медленнее будет загрузка.
   
   OldSchool,
   в

   body .story .story_b .rcol.back a {

   
   
   замени это

   border: 1px solid rgba(0, 0, 0, 0);

   на это

   border: 1px solid #202020;

   а сейчас, поведай мне о пустоте своих мыслей

   24 ноября 2018 - 21:15 / #122
4. 

   Оффлайн 17

   OldSchool

   Семпай

   Анимешники

   Сообщений: 358

   Arksault,
   Про base64 я обратное читал, что она даже уменьшает вес... Вот и верь интернету
   Arksault,
   Спасибо, помогло, а собственно почему так?
   24 ноября 2018 - 21:28 / #123
5. 

   Оффлайн 29

   Arksault

   Тёнин

   Анимешники

   Сообщений: 891

   OldSchool, нет) попробуй конвертировать не картинку, а текст и сам это увидишь. тут несколько причин и да, отчасти из-за браузера, но это не баг)

   а сейчас, поведай мне о пустоте своих мыслей

   25 ноября 2018 - 04:04 / #124
6. 

   Оффлайн 17

   OldSchool

   Семпай

   Анимешники

   Сообщений: 358

   Можно ли как-то стилизовать тег option? Сколько не искал информацию в интернете, все пишут что только при помощи скриптов, но все эти статьи были опубликованы 3-4 года назад (ничего более свежего не нашел), вот и надеюсь что за это время что-то могло измениться
   26 декабря 2018 - 08:52 / #125
7. 

   Оффлайн 29

   Arksault

   Тёнин

   Анимешники

   Сообщений: 891

   OldSchool,
   нельзя. только jаvascript

   а сейчас, поведай мне о пустоте своих мыслей

   26 декабря 2018 - 11:32 / #126
8. 

   Оффлайн 17

   OldSchool

   Семпай

   Анимешники

   Сообщений: 358

   Arksault,
   Ясно, печалька
   26 декабря 2018 - 11:56 / #127
9. 

   Оффлайн 117

   Aizen

   Император

   Администраторы

   Сообщений: 368

   Arksault Ленивый ты. Немного новогодних украшений для сайта сделал бы.

   Svital789 v. 2.2, Arksault, Мелкая срань нравится это сообщение.

   Сообщение отредактировал Aizen 29 декабря 2018 - 21:24
   28 декабря 2018 - 18:39 / #128
10. 

    Оффлайн 29

    Arksault

    Тёнин

    Анимешники

    Сообщений: 891

    OldSchool,
    ай-яй-яйц, нельзя быть таким ленивым не попадёшь ты в мир фэнтези

    а сейчас, поведай мне о пустоте своих мыслей

    29 декабря 2018 - 02:18 / #129
11. 

    Оффлайн 17

    OldSchool

    Семпай

    Анимешники

    Сообщений: 358

    Arksault,
    Мне бы хоть что-то доделать, при этом не разбив монитор об стену

    Arksault нравится это сообщение.
    29 декабря 2018 - 09:10 / #130
12. 

    Оффлайн 29

    Arksault

    Тёнин

    Анимешники

    Сообщений: 891

    Отключаем снег на сайте: тем, кому он не нужен и тем, кому он не нужен
    
    многих интересует вопрос, как отключить снег на сайте.
    
    для начала, скачем расширение и установим его. для хрома и яндекса(и других кто могёт в хром сторе)
    
    после, находясь на сайте кликаем на иконку расширения User CSS(синенькая такая ).
    
    далее, в поле ввода вставляем этот код:
    
    

    body .snow-snow {display:none!important;opacity:0;z-index:-999;width:0;heig
    ht:0;}

    
    
    нажимаем ещё раз на иконку расширения User CSS(не забываем, она синенькая такая), чтобы закрыть окно с расширением, и усё! снега нет.
    
    санта не пропустит вас в рай санты! помните, отключив снег -вы обрекаете себя на вечное страдание...

    а сейчас, поведай мне о пустоте своих мыслей

    5 января 2019 - 02:18 / #131
13. 

    Оффлайн 17

    OldSchool

    Семпай

    Анимешники

    Сообщений: 358

    Стоит ли переделывать все иконки с png в svg?
    14 января 2019 - 17:14 / #132
14. 

    Оффлайн 29

    Arksault

    Тёнин

    Анимешники

    Сообщений: 891

    OldSchool, каким образом ты будешь их использовать, через css? доступа к html у тебя нет, а способ через css не очень. можешь использовать шрифты-иконок, что тоже так себе... да и зачем?
    
    png

    а сейчас, поведай мне о пустоте своих мыслей

    14 января 2019 - 18:02 / #133
15. 

    Оффлайн 17

    OldSchool

    Семпай

    Анимешники

    Сообщений: 358

    Arksault,
    При помощи вот этого, а для чего... Проще наверное будет на примере объяснить
    Сейчас для анимации картинок (плавно подсвечиваются при наведении) я использую такой код:
    

     Показать / Скрыть текст

    body .comm-plus {background: url("Картинка с серым цветом");transition: background .4s;}
    body .comm-plus:hover {background: url("Картинка с белым цветом");transition: background .4s;}

    
    Все бы ничего, но в Мазиле transition для картинок не работает, поэтому я хочу прибегнуть к svg чтобы добиться того же эффекта, но только при помощи одной ссылки на картинку и свойства opacity (с png такой метод крайне криво выглядит из-за низкого разрешения). Да и к тому же большинство иконок я беру с сайта, где есть вариант скачать их в svg.
    14 января 2019 - 18:58 / #134
16. 

    Оффлайн 29

    Arksault

    Тёнин

    Анимешники

    Сообщений: 891

    OldSchool,

    -moz-transition: value;

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

    #pupsik img {
        position: relative;
        top: 0;
    
        margin-left: 8px;
    
        cursor: pointer;
        -webkit-transition: all .1s ease;
           -moz-transition: all .1s ease;
            -ms-transition: all .1s ease;
                transition: all .1s ease;
    }
    
    #pupsik img:hover {
         top: -5px;
    }

    
    
    а теперь, ознакомься с минусами SVG в IMG или background-image
    
    -нельзя менять свойства элементов SVG через CSS или JS.
    -не поддерживаются интерактивные анимации.
    -для IE 8 и ниже необходима замена на растровое изображение.
    
    решай сам. пупсик

    а сейчас, поведай мне о пустоте своих мыслей

    14 января 2019 - 19:10 / #135