Stylik - визуальный редактор CSS стилей 2.X

1297
Всем привет,

Это первый компонент из серии (Шаблон + Лендинг + Редактор). Он позволяет кастомизицировать любой шаблон под InstantCMS 2. Поддерживает InThemer, InStyler, Конструктор Лендингов (на видео показал в конце). Можно менять как глобальные настройки, так и типовые страницы (Типы контенты: Список записей) или только конкретные страницы (включая страницы фильтров и тд).



-----------------------------

В качестве основы компонента используется PRO версия платного плагина под Wordpress Yellow Pencil, для чего была приобретена Extended License, дающая право на использование плагина в одном платном продукте.

Сам плагин для wordpress можно скачать бесплатно на сайте wordpress.org. Или приобрести PRO версию на сайте авторов.

-----------------------------

Кратко о возможностях:

1. Более 90 стилей CSS для редактирования
2. 50 вариантов анимации
3. Выбор для правки любой страницы (страницы как в админке на "Виджетах и страницах")
4. Вариант просмотра страниц под гостем - например, для стилизации регистрации и авторизации.
5. Стилизация 404 страницы
6. Экспертный режим работы в редакторе кода - кликаем на селектор и сразу вводим руками код.
6. Широкие возможности для адаптивного дизайна - выбор любых разрешений больше или меньше заданной ширины
7. Переход в редактор с любой страницы или через ввод ее адреса в самом редакторе.
8. Просмотр всех сделанных изменений в админке
9. Добавлены специальные шаблоны для всех типов контента (Типы контента: все страницы, Типы контента: Список записей и тд..)

Код открыт, можно использовать на всех своих сайтах. Если нужно перенести код в свой шаблон, то сделать это можно либо в виде CSS файлов, либо с и помощью Site Kreator.

Первые 10 покупателей получат скидку 40% на "Bootstrap конструктор шаблонов " и "Конструктор Лендингов" - они появятся следом через некоторое время. Больше информации по ним в этом же блоге.

Демо сайт - можно увидеть под гостем. Работают все функции кроме загрузки фонового изображения и записи стилей в базу данных.

PS Большое спасибо Алексею Тимофееву за тестирование компонента и поиск багов, а так же за конструктивные предложения по доработке функционала. Без этой работы результат был бы немного другим и багов побольше.
Smart Шаблон на Bootstrap 4, Первое знакомство
Комментарии (46)
Александр 12 января 2019 в 17:18 0
Очень хорошо на первый взгляд, как говорят - то что доктор прописал.
Олег Васильевич я 12 января 2019 в 18:56 0
Пока просто посмотрел видео.
В очередной раз удивила способность разработчика предусмотреть буквально всё! shock
Жаль, пока не имею возможности "пощупать" демку (а руки уже чешутся, да и в заветную 10-ку (на скидку) хочется попасть).
@Milyana 12 января 2019 в 19:47 0
Оно точно будет работать например на шаблоне «компакт»? И это самостоятельное дополнение? Не будет ли оно нуждаться в приобретение, например, конструктора тем или других редакторов css?
@SmartControl 12 января 2019 в 20:22 +1
1. Точно будет работать на шаблоне Компакт (и на любых других)
2. Это полностью самостоятельное дополнение, ничего дополнительно не требуется
letsgo 12 января 2019 в 21:05 0
Наконец то взяты возможности визуальных конструкторов ВП и сделаны под Instant. Давно пора было. Это отличная разработка +++ Всё давно придумано, надо только брать и внедрять к Инстанту.
Василич 12 января 2019 в 21:08 0
Уже около трёх визуальных редакторов и ни одного мультишоп-а )
Хорошо работает, плюс однозначно.
Jestik 13 января 2019 в 00:04 0
потому что мультишоп нафиг никому не нужен
неужели данунафиг 13 января 2019 в 00:50 0
А кто этот никто, от которого все зависит? Ткните в него пальцем. Или нет, лучше плюньте ему в рожу.
Василич 13 января 2019 в 17:02 0
потому что мультишоп нафиг никому не нужен
т.е. целый компонент, чтоб подправить визуально цвет вооон той кнопочки тем самым компенсировать своё незнание самого простого ксс людям нужен, а нормальный мультимагазин не нужен, да?
Это просто великолепно.
@SmartControl 13 января 2019 в 17:19 +2
а нормальный мультимагазин не нужен, да?
Да всё нужно, но не всем - и кнопочки не всем, и магазин не всем. Я тоже начинал делать "торговую площадку" - нечто бОльшее, чем просто мультимагазин. Но уперся в некоторые моменты, которые мешали нормально реализовать все. Это достаточно долгий процесс. И надо сразу делать лучше, чем есть.

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

Много что останавливает, в том числе и хорошее проработанное ТЗ. Которое нужно еще придумать, чтобы все было максимально универсально и подходило под любые ниши и тематики.
Василич 13 января 2019 в 19:33 0
Из коробки конечно можно, но это что-то самое простое и особо способствовать продажам и привлекать нужный трафик как отдельная "фишка" не будет. Будет всего-лишь дополнением к какому-либо существующему ресурсу, не более.
ТЗ мы запилим на форуме, что ещё нужно?
Разработка от вас такого рода будет отличным дополнением для инстанта.
Саня 12 января 2019 в 21:14 +1
Приветствую, не много не понял а в чём отличие этого компонента от InStyler? Особые отличия есть? Вроде там всё тоже самое...
@SmartControl 12 января 2019 в 21:24 +1
Посмотрите выше список из 9 пунктов - это и есть отличия. Ещё конкретней скажет тот, у кого есть опыт работы с Инстайлером, с моей стороны будет не совсем корректно оценивать.

У вас есть возможность вживую попробовать и этот компонент, и Инстайлер и выбрать что удобнее именно вам (демки есть общедоступные).
Fuze 12 января 2019 в 22:12 +4
В том, что InStyler R2 написал сам, а этот компонент, уже по классике, @SmartControl благополучно позаимствовал тут. И конечно же об этом ни слова joke

Я конечно всё понимаю, адаптация под InstantCMS плагина WP. Но если честно, я слабо могу понять тягу @SmartControl где-то взять бесплатно и после продавать.
Алексей Тимофеев 12 января 2019 в 22:27 +1
Коммент конечно же не буду минусовать как некоторые. Предложу следующее - снять с продаж, а распространять по запросу.
Fuze 12 января 2019 в 22:33 +2
Коммент конечно же не буду минусовать как некоторые.
Народ любит лёгкие деньги нынче. Вот сопереживают автору, ставят минус на обоснованный комментарий smile

Предложу следующее - снять с продаж, а распространять по запросу
Из под полы, ага.

Сделали адаптацию чужого плагина - ради бога. Ну распространяйте вы также. Указывайте, чья основная часть функционала и как она распространяется. Указывайте, что денег хотите за адаптацию к InstantCMS. И вопросов не будет никогда. Иными словами, поступайте справедливо и по честному.
@SmartControl 12 января 2019 в 22:55 +1
Предложу следующее - снять с продаж, а распространять по запросу.

Extended лицензия позволяет продавать его легально, но дополнительное описание к нему стоит добавить - завтра оно появится. Пока с документацией и описанием есть недочеты.
@SmartControl 12 января 2019 в 22:52 +5
Но если честно, я слабо могу понять тягу @SmartControl где-то взять бесплатно и после продавать.
Специально для разработки была приобретена Extended License на плагин для Wordpress. Разработчики оригинального плагина дают возможность другим разработчикам его использовать.

Она дает право использовать этот плагин в одном платном продукте.



Но продается, конечно, не плагин к wordpress - он есть в бесплатном и платном варианте и его можно установить и без меня. Продается адаптация его к InstantCMS. И это, конечно, не просто адаптация - это расширение его возможностей с учетом движка с более сложной структурой.

Сам плагин для вордпресс можно скачать бесплатно тут.
Или купить PRO версию тут
Fuze 12 января 2019 в 23:03 0
Специально для разработки была приобретена Extended License на плагин для Wordpress. Разработчики оригинального плагина дают возможность другим разработчикам его использовать.
Если это так, нет вопросов, хотя и на официальном сайте об этом нет информации. Указывайте эту информацию в посте и в каталоге дополнений.

И давайте на будущее не вынуждать писать подобные комментарии.
letsgo 13 января 2019 в 03:35 0
Ничего не понял. Каким образом плагин вп встанет на Instantcms? Тем более если вы покупали расширенную лицензию Евгений, то должны знать, что имеете право использовать в 1 платном продукте неограниченно. То что на скрине не покупка, а просто страница описания лицензий codecanyon, лучше купите официально. 1 продукт это одна разработка с неограниченной продажей. Тем более цена расширенной очень демократичная.

То есть например разработчик шаблона покупает и может свою тему с ним продавать хоть десятки тысяч раз, но только в составе 1 темы. Захотел создать новую тему: купи новую лицензию.
Алексей Тимофеев 12 января 2019 в 21:49 +1
Компонент уже у меня м совсем скоро по нему будут видео уроки, следите за каналом на ютуб.
Все уроки будут тут
GoodMade.ru 12 января 2019 в 23:16 0
Крутил, вертел но так ничего толкового и не сделал )) Потратил бы на основы столько же время, сколько на эти шалости, давно бы уже стал разработчиком ))
Melon 12 января 2019 в 23:23 0
Это за тем самым каналом нужно следить, где вы сообщество инстанта называете "клоунами и троллями", а также рассказываете почему вы уходите с инстанта?
@SmartControl 12 января 2019 в 23:39 +3
не хочу вмешиваться в этот спор..

Но стоит сказать, что Алексей был первым и единственным бета-тестером этой разработки. Без него некоторые функции работали бы не так органично, а багов точно было бы больше.
Loadырь 12 января 2019 в 22:08 +1
Все стили пишет в блоке head, а не в отдельно файле? Не совсем понимаю, зачем подключается библиотека lib/jquery/jquery-3.3.1.min.js. И кстати она ведёт на 404.
@SmartControl 12 января 2019 в 23:34 0
Все стили пишет в блоке head
Тут такой момент.. Надо подумать. С одной стороны - да, пишет в head. С другой - это же для каждой страницы может быть уникальный css файл, а значит их надо будет сохранять очень и очень много. Или не очень, но подумать над логикой. Я на текущий момент не придумал как лучше. В ближайшие дни добавлю вариант с внешними файлами.

Не совсем понимаю, зачем подключается библиотека lib/jquery/jquery-3.3.1.min.js. И кстати она ведёт на 404.
Это ошибка в интеграции с "Конструктором Лендингов". Конечно, еще одна библиотека jquery там не нужна. Но если бы она подключилась успешно - сайт бы развалился и я бы сам заметил)

Ошибка исправлена, она больше не подключается.
Melon 12 января 2019 в 23:26 0
Полезное решение от хорошего разработчика - это всегда хорошо, но его стоит рассматривать именно как одну из составляющих серии дополнений, так что однозначно плюс.
Олег Васильевич я 13 января 2019 в 00:30 0
Попросил автора дать поюзать по полной.
Результат юзания (стили заранее не заготавливались, делались только глобальные стили) под спойлером.
Спойлер
В нескольких случаях нужный элемент выделить не удалось (к примеру, пункты списка) и приходилось назначать их ручками.
Либо не нашёл, либо таки её нет, но мне очень не хватало пипетки.
Дополнительные селекторы элементам не присваиваются. Подсветка синтаксиса в редакторе великолепная. Код генерируется внятный (если автор разрешит, выложу его (код) на ваше обозрение).
Первое впечатление - своих денег стоит.
@SmartControl 13 января 2019 в 01:27 0
Дополнительные селекторы элементам не присваиваются.
Все верно, верстка не меняется. Компонент лишь добавляет новые стили.

(если автор разрешит, выложу его (код) на ваше обозрение).
Автор стилей вы, конечно выкладывайте если хотите) С глобальными все просто, а вот чтобы полноценно все страницы настроить и перенести на другой сайт - это надо туда нормальный экспорт-импорт добавить. Тогда можно будет делиться "набором стилей". Это будет, но я не стал оттягивать первую версию..
Олег Васильевич я 13 января 2019 в 01:54 0
Все верно, верстка не меняется. Компонент лишь добавляет новые стили.
Именно об этом я и говорил (имхо, это плюс)
Олег Васильевич я 15 января 2019 в 13:26 0
Вот файл стилей о котором говорил выше
Алексей Тимофеев 13 января 2019 в 01:21 +3
Результат быстрого тестинга компонента тут http://1-1.iscms.ru
Ну и видео
Melon, если я вас чем то обидел или оскорбил примите мои извинения.
Алексей Тимофеев 13 января 2019 в 01:52 0
Ах да, у кого есть Site Kreator, то можно создать скин вот с этими стилями что на демо. Сами стили тут https://instantcms.ru/users/files/download7065.html
Удачи в сайтостроении.
@alexandr22 13 января 2019 в 14:48 0
Здравствуйте, а можно в нем менять вот такие параметры
Алексей Тимофеев 13 января 2019 в 15:29 +1
ХурумБурум 13 января 2019 в 16:00 +1
А вот это уже интрига! При просмотре видео у меня сложилось впечатление что компонент что-то вроде разукрашки. Оказывается можно и блоки перемещать.
Алексей Тимофеев 13 января 2019 в 16:08 0
Там много что можно делать- уроки по нему тоже будут.
Алексей Тимофеев 13 января 2019 в 16:10 0
Дергайте Демо
@SmartControl 13 января 2019 в 16:39 +1
перемещать в коде (в верстке), нельзя. Но средствами CSS перемещать их куда угодно можно.

Записал видео для первой ветки, все делалось на последней сборке.
Спойлер
Посмотреть можно на демо.
Melon 13 января 2019 в 21:04 0
Для 1 ветки это отдельный компонент или он включает в себя и для 1, и для 2 версии?
@SmartControl 13 января 2019 в 21:27 +2
Для первой ветки это отдельный компонент (компонент + плагин). Это же по сути разные движки, в них мало общего - вторая ветка написана с нуля. А вот функционал редактора стилей почти на 100% совпадает. Вот только не получится сделать такие же продвинутые настройки для типовых страниц - в первой ветке этого нет.

На текущий момент в версии для первой ветки не реализована админка компонента, загрузка фоновой иллюстрации и типовые страницы (хотя бы в виде компонентов это можно сделать - стили для форума, стили для клубов и тд).
Melon 13 января 2019 в 21:56 0
А поддержка стилей для InstantMaps планируется?
@SmartControl 13 января 2019 в 22:41 +1
Уже сейчас есть поддержка всего чего только можно.. Компонент будет работать с любым шаблоном и любым компонентом. Все сформированные в нем стили дополнительно подключаются к шаблону и применяются к элементам на странице. Какой-то дополнительной работы по поддержке InstantMaps не требуется.
Anselmo 13 января 2019 в 20:01 0
Жаль, конечно, что не релизнули на несколько дней раньше. Пару дней назад купил инстайлер
Алексей Тимофеев 14 января 2019 в 22:56 0
Ни в коем случае не жалейте. У каждого компонента есть плюсы и минусы.
Инсталлер отличный инструмент. Даже если вы ошиблись и жалеете о покупке знайте, кто не ошибается тот не идет вперед.
Ели для Вас это действительно важно вы ни в коем случае не остановитесь и будите познавать новое в сайтостроении. И только слабый опускает руки и проклинает всех и вся, думая что его как то обманули и нагрели. Поверьте то кто что то делает для Инстант тот тоже пробует свои силы и та плата которую вы платите лишь подогревает его идти дальше и делать еще лучше. Это я знаю на 100%.
Удачи вам и нам в сайтостроении.
DzurDzuk 17 января 2019 в 15:05 0
@SmartControl:
Это первый компонент из серии (Шаблон + Лендинг + Редактор)
Скоро ли появятся эти компоненты и будет ли у них ограничение по количеству доменов?