Осваиваем ярмарку

вторник, 02 июня 2020

00:42

все записи пользователя в сообществе Котики Инсайда

Ешь, молись, собирай ссылки.

Тред для обмена опытом и идеями (а также кодами) верстальщиков на АО3

1. туториал по всплывашкам и сноскам, на АОЗ (англ)
2. Как добавить ссылку, используя разметку HTML? (англ)
3. Как сделать море (рус)
4. Варианты стандартной верстки подложка/тени/рамки (англ)
5. Макет визитки анона с котиками
6. Пример всплывашки на css (рус)
7. Моря с ограничением (рус)
8. Рабочий пример с левым и правым углами (рус)
9. Теги, разрешенные на АОЗ (англ)
10. css свойства, разрешенные на АОЗ (англ)
11. Минигайд анона с котиками
12. сайты, с которых АОЗ поддерживает вставку медиа
13. Как сделать изображения подходящими для мобильных браузеров (англ)

запись создана: 03.03.2020 в 22:04

@темы: Верстка, АО3, Все хорошо

URL

Комментарии

09.03.2020 в 00:09

Гость

А на десктопе не распидорасит?
Прочитай еще раз инструкцию.
+1
но еще раз суть на пальцах: ты задаешь размер картинки, допустим, 700px (или сколько тебе кажется комфортным), но на экранах, которые сами по себе меньше 700px (=мобильники), картинка будет просто на весь экран (=максимальная ширина 100%)

URL

09.03.2020 в 00:09

Гость

Но можно же нажимать "открыть в новом окне"? Если да, то проблема не большая, главное не забывать

URL

09.03.2020 в 00:10

Гость

Но можно же нажимать "открыть в новом окне"? Если да, то проблема не большая, главное не забывать
а чем плохо открывать в том же окне? у тебя кнопка "назад" не работает? :susp:

URL

09.03.2020 в 00:17

Гость

В описанном скине ты прописываешь размер картинки в коде.
т.е. если какой-то чтец принципиально будет отключать скины, то картинку распидорасит? или это не так работает?

URL

09.03.2020 в 00:19

Гость

но еще раз суть на пальцах: ты задаешь размер картинки, допустим, 700px (или сколько тебе кажется комфортным), но на экранах, которые сами по себе меньше 700px (=мобильники), картинка будет просто на весь экран (=максимальная ширина 100%)

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

URL

09.03.2020 в 00:20

Гость

т.е. если какой-то чтец принципиально будет отключать скины
Ну эээ да. Это неизбежно. Поэтому лепить лишние красивости точно не стоит :gigi:

URL

09.03.2020 в 00:38

Гость

а чем плохо открывать в том же окне? у тебя кнопка "назад" не работает?
Неудобно, у меня долго грузит страницы, поэтому мне быстрее открыть несколько вкладок с разными картинками и пускай они погружаются пока я смотрю первую. :-/

URL

09.03.2020 в 00:41

Гость

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

(неиронично, правда сочувствую)

URL

09.03.2020 в 15:40

Гость

а кстати, куда там эти скины лепить? я правильно понимаю, что скины задают как будут выглядеть все твои работы, а в теле каждой уже можно добавлять хтмл? Я вставил картинку с кодом прямо в посте, вышло нормально с превью и полноразмером по клику. Но как пользоваться скинами еще не понял. По-английски не читаю(((

URL

09.03.2020 в 17:04

Гость

скины задают как будут выглядеть все твои работы, а в теле каждой уже можно добавлять хтмл?

Нет. Так как ты хочешь будут выглядеть те работы, где ты укажешь конкретный скин. Они просто упрощают и автоматизирует твою работу. Смотри, ты вставил сейчас картинку просто кодами html. Если захочешь вставить в другой текст, то тебе нужно скопировать твой html код в другую работу. А можно автоматизировать эту процедуру. Для этого надо создать класс в CSS (на русском полно информации как это сделать, это стандартный подход) типа class="все мои картинки выглядят так" и прописать в нем все атрибуты как ты хочешь. Тогда тебе не нужно копировать огромные куски кода html в каждую работу, а просто при вставке указать этот класс (образец оформления) по типу < img src="URL" class="все мои картинки выглядят так">. И все. Ты автоматизировал свою работу. Классов (образцов оформления) ты можешь создать сколько угодно. Потом просто подключать тот или иной образец. Ао3 позволяет работать с классами CSS, их надо прописывать в меню в разделе скин.

URL

09.03.2020 в 20:25

Гость

а где там эти скины создавать? я тупой, абисните куда жмякнуть?

URL

09.03.2020 в 20:50

Гость

Смотри наверху панель, там где Hi, никнейм. Нажимаешь My dashboard. Далее откроется много панелей. Выбираешь Skins. Нажимает. Далее нажимаешь "Create Work Skin". Создатель любое название ему, а внутрь прописываешь свой созданный стиль. Потом submit. И теперь можешь использовать в тексте в кодах html, указывая свой класс.

URL

09.03.2020 в 20:51

Гость

спасибо, анончик, ты зая ))))))

URL

09.03.2020 в 20:59

Гость

Забыл написать. После создания файла скина с прописанными в нем классами, их можно использовать в своих работах в кодах html. Только надо не забыть подключить скин к работе! Т.е. указать, что вот этот класс описан там. Делается так. У любой твоей работы есть кнопка или панель "Associations". Выбираешь в ней название своего файла скина через "Select Work Skin".

Если что не сработает, пиши. Вот тут простой пример есть с классом letter к div
archiveofourown.org/works/11549178/chapters/259...

URL

09.03.2020 в 22:26

Гость

спасииииибо! ты няшная няша :inlove:

URL

09.03.2020 в 22:44

Гость

Бля, то есть стандартное превью со ссылкой на полноразмер тоже пилить нельзя?
Можно, просто будет открываться в том же окне.
помню, как совсем недавно аноны бились головой о стену, что у дайрей все ссылки автоматически таргет бланк. Даже немного умиляет этот разговор сейчас

URL

10.03.2020 в 01:21

Гость

Анончик, большое тебе спасибо, я только добрался до треда, а ты уже все объяснил :heart:

завтра буду пробовать
анон который первый спрашивал

URL

11.03.2020 в 13:28

Гость

Пришел еще раз сказать спасибо анону который выше объяснял :red:

После недолгих туплений в его слова и объяснение анона с котиками :heart:

у меня наконец получилось сделать скин фона себе и натянуть на саму работу внутри. Попутно выяснилось, что публичные скины работ надеваются на все, включая шапку, и мой фон с тенюшкой сейчас торчит внутри скина хоумстак, который не убирается))) Интересно, а можно ли как-то надеть верстку и на шапку тоже?

URL

11.03.2020 в 16:03

Гость

Интересно, а можно ли как-то надеть верстку и на шапку тоже?
надо смотреть, какие там классы в шапке, и их нагибать. в публичном все это должно быть.

URL

11.03.2020 в 16:59

Гость

а как понять, какой код именно за шапку отвечает?

URL

12.03.2020 в 10:21

Гость

анон, ну по классам же смотреть.
например наступаешь правой клавишей на страницу и жмешь на "исходный код страницы". или клацаешь на f12, чтобы врубить режим отладки. и там смотришь, во что завернута шапка и ее элементы. находишь эти классы в коде публичного скина, смотришь как они перекурочены, перекурочиваешь по-своему.
это долго, нудно, но другого пути нет.

URL

12.03.2020 в 10:22

Гость

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

URL

12.03.2020 в 10:25

Гость

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

URL

12.03.2020 в 16:45

Гость

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

URL

12.03.2020 в 16:57

Гость

Даже интересно стало что такое хотел анон с шапкой сделать, что в ней вообще верстать можно?

URL

12.03.2020 в 17:10

Гость

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

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

URL

12.03.2020 в 17:32

Гость

хотя она страшненькая, конечно
А что именно тебе в ней не нравится? У меня реально нет идей.

URL

12.03.2020 в 17:34

Гость

А что именно тебе в ней не нравится? У меня реально нет идей.
я бы подчёркивание ссылок убрал, просто сделал бы их другим цветом, а то от полосатости в глазах рябит

URL

12.03.2020 в 17:46

Гость

я бы подчёркивание ссылок убрал, просто сделал бы их другим цветом, а то от полосатости в глазах рябит

анон не версталь, анон фотошопер, тупо замазал полоски и перекрасил, и так мне больше нравится