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

+23
2.83K
Всем привет,

Это первый компонент из серии (Шаблон + Лендинг + Редактор). Он позволяет кастомизицировать любой шаблон под 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 Большое спасибо Алексею Тимофееву за тестирование компонента и поиск багов, а так же за конструктивные предложения по доработке функционала. Без этой работы результат был бы немного другим и багов побольше.
0
Александр Александр 3 года назад #
Очень хорошо на первый взгляд, как говорят - то что доктор прописал.
0
Олег Васильевич я Олег Васильевич я 3 года назад #
Пока просто посмотрел видео.
В очередной раз удивила способность разработчика предусмотреть буквально всё! shock
Жаль, пока не имею возможности "пощупать" демку (а руки уже чешутся, да и в заветную 10-ку (на скидку) хочется попасть).
0
Milyana Milyana 3 года назад #
Оно точно будет работать например на шаблоне «компакт»? И это самостоятельное дополнение? Не будет ли оно нуждаться в приобретение, например, конструктора тем или других редакторов css?
+1
SmartControl SmartControl 3 года назад #
1. Точно будет работать на шаблоне Компакт (и на любых других)
2. Это полностью самостоятельное дополнение, ничего дополнительно не требуется
0
letsgo letsgo 3 года назад #
Наконец то взяты возможности визуальных конструкторов ВП и сделаны под Instant. Давно пора было. Это отличная разработка +++ Всё давно придумано, надо только брать и внедрять к Инстанту.
0
Василич Василич 3 года назад #
Уже около трёх визуальных редакторов и ни одного мультишоп-а )
Хорошо работает, плюс однозначно.
0
Jestik Jestik 3 года назад #
потому что мультишоп нафиг никому не нужен
Нифигаccе о-го-гошеньки Нифигаccе о-го-гошеньки 3 года назад #
Комментарий удален
0
Василич Василич 3 года назад #
потому что мультишоп нафиг никому не нужен
т.е. целый компонент, чтоб подправить визуально цвет вооон той кнопочки тем самым компенсировать своё незнание самого простого ксс людям нужен, а нормальный мультимагазин не нужен, да?
Это просто великолепно.
+2
SmartControl SmartControl 3 года назад #
а нормальный мультимагазин не нужен, да?
Да всё нужно, но не всем - и кнопочки не всем, и магазин не всем. Я тоже начинал делать "торговую площадку" - нечто бОльшее, чем просто мультимагазин. Но уперся в некоторые моменты, которые мешали нормально реализовать все. Это достаточно долгий процесс. И надо сразу делать лучше, чем есть.

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

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

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

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

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

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

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

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



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

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

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

То есть например разработчик шаблона покупает и может свою тему с ним продавать хоть десятки тысяч раз, но только в составе 1 темы. Захотел создать новую тему: купи новую лицензию.
+1
Алексей Т Алексей Т 3 года назад #
Компонент уже у меня м совсем скоро по нему будут видео уроки, следите за каналом на ютуб.
Все уроки будут тут
0
Денис Васильевич Денис Васильевич 3 года назад #
Крутил, вертел но так ничего толкового и не сделал )) Потратил бы на основы столько же время, сколько на эти шалости, давно бы уже стал разработчиком ))
0
Melon Melon 3 года назад #
Это за тем самым каналом нужно следить, где вы сообщество инстанта называете "клоунами и троллями", а также рассказываете почему вы уходите с инстанта?
+3
SmartControl SmartControl 3 года назад #
не хочу вмешиваться в этот спор..

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

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

Ошибка исправлена, она больше не подключается.
0
Melon Melon 3 года назад #
Полезное решение от хорошего разработчика - это всегда хорошо, но его стоит рассматривать именно как одну из составляющих серии дополнений, так что однозначно плюс.
0
Олег Васильевич я Олег Васильевич я 3 года назад #
Попросил автора дать поюзать по полной.
Результат юзания (стили заранее не заготавливались, делались только глобальные стили) под спойлером.
Спойлер
В нескольких случаях нужный элемент выделить не удалось (к примеру, пункты списка) и приходилось назначать их ручками.
Либо не нашёл, либо таки её нет, но мне очень не хватало пипетки.
Дополнительные селекторы элементам не присваиваются. Подсветка синтаксиса в редакторе великолепная. Код генерируется внятный (если автор разрешит, выложу его (код) на ваше обозрение).
Первое впечатление - своих денег стоит.
0
SmartControl SmartControl 3 года назад #
Дополнительные селекторы элементам не присваиваются.
Все верно, верстка не меняется. Компонент лишь добавляет новые стили.

(если автор разрешит, выложу его (код) на ваше обозрение).
Автор стилей вы, конечно выкладывайте если хотите) С глобальными все просто, а вот чтобы полноценно все страницы настроить и перенести на другой сайт - это надо туда нормальный экспорт-импорт добавить. Тогда можно будет делиться "набором стилей". Это будет, но я не стал оттягивать первую версию..
0
Олег Васильевич я Олег Васильевич я 3 года назад #
Все верно, верстка не меняется. Компонент лишь добавляет новые стили.
Именно об этом я и говорил (имхо, это плюс)
0
Олег Васильевич я Олег Васильевич я 3 года назад #
Вот файл стилей о котором говорил выше
+3
Алексей Т Алексей Т 3 года назад #
Результат быстрого тестинга компонента тут http://1-1.iscms.ru
Ну и видео
Melon, если я вас чем то обидел или оскорбил примите мои извинения.
0
Алексей Т Алексей Т 3 года назад #
Ах да, у кого есть Site Kreator, то можно создать скин вот с этими стилями что на демо. Сами стили тут /users/files/download7065.html
Удачи в сайтостроении.
0
alexandr22 alexandr22 3 года назад #
Здравствуйте, а можно в нем менять вот такие параметры
+1
Алексей Т Алексей Т 3 года назад #
+1
ХурумБурум ХурумБурум 3 года назад #
А вот это уже интрига! При просмотре видео у меня сложилось впечатление что компонент что-то вроде разукрашки. Оказывается можно и блоки перемещать.
0
Алексей Т Алексей Т 3 года назад #
Там много что можно делать- уроки по нему тоже будут.
0
Алексей Т Алексей Т 3 года назад #
Дергайте Демо
+1
SmartControl SmartControl 3 года назад #
перемещать в коде (в верстке), нельзя. Но средствами CSS перемещать их куда угодно можно.

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

На текущий момент в версии для первой ветки не реализована админка компонента, загрузка фоновой иллюстрации и типовые страницы (хотя бы в виде компонентов это можно сделать - стили для форума, стили для клубов и тд).
0
Melon Melon 3 года назад #
А поддержка стилей для InstantMaps планируется?
+1
SmartControl SmartControl 3 года назад #
Уже сейчас есть поддержка всего чего только можно.. Компонент будет работать с любым шаблоном и любым компонентом. Все сформированные в нем стили дополнительно подключаются к шаблону и применяются к элементам на странице. Какой-то дополнительной работы по поддержке InstantMaps не требуется.
0
Shevan Shevan 3 года назад #
Добрый день. Обновил инсту до InstantCMS v2.12.0 и Стайлик при открытии с раздела Компоненты отображается так

Когда адаптировал страницу сайта под мобильные версии Стайлик перестал отвечать (стала неактивная кнопка Адаптивный режим в левой панели)
Откатил на сутки назад еще раз попробовал, повторилось тоже самое. Попробовал Стайлик установить на InstantCMS v2.11.0 всё нормально стало и в компонентах открывается без нижней панели (скрин).
Хотелось бы обновлений под обновления Инстанты.
0
Anselmo Anselmo 3 года назад #
Жаль, конечно, что не релизнули на несколько дней раньше. Пару дней назад купил инстайлер
0
Алексей Т Алексей Т 3 года назад #
Ни в коем случае не жалейте. У каждого компонента есть плюсы и минусы.
Инсталлер отличный инструмент. Даже если вы ошиблись и жалеете о покупке знайте, кто не ошибается тот не идет вперед.
Ели для Вас это действительно важно вы ни в коем случае не остановитесь и будите познавать новое в сайтостроении. И только слабый опускает руки и проклинает всех и вся, думая что его как то обманули и нагрели. Поверьте то кто что то делает для Инстант тот тоже пробует свои силы и та плата которую вы платите лишь подогревает его идти дальше и делать еще лучше. Это я знаю на 100%.
Удачи вам и нам в сайтостроении.
0
MiMoHOD MiMoHOD 3 года назад #
@SmartControl:
Это первый компонент из серии (Шаблон + Лендинг + Редактор)
Скоро ли появятся эти компоненты и будет ли у них ограничение по количеству доменов?
0
Shevan Shevan 3 года назад #
Здравствуйте. Как по совместимости с InstantCMS 2.12.0?
После обновления движка начал Стайликом редактировать под разные разрешения страницу https://portalrk.ru/shop стайлик ловит стопор после разрешения 500px
Кнопка "Адаптивный режим" становится не активной. Может я много точек останова делаю не знаю... подскажите в чем затык?
+1
Shevan Shevan 3 года назад #
ЧТО ...Stylik - умер (не работает, зависает, не корректно отображается в админке? ) для обновлений InstantCMS 2.12.0.
Всё таки я купил расширение.. и при обновлении Инстанты Стайлик стал несовместим.
Разработчик, напишите хоть что ни буть? Будут обновления или просто у вас не покупать больше ваши продукты... т.к. ответа не даждешься от вас ответа как с форума так и со странице продажи ваших компонентов.

Еще от автора

Smart Шаблон на Bootstrap 4, Первое знакомство
Приветствую. В этом шаблоне нет привычной заранее заданной схемы позиций. Любая схема создается вручную за пару минут.
Черная пятница (-30% на всё)
Приветствую, присоединяюсь к распродаже. Ниже полный список. Для большинства дополнений на странице каталога выложено видео о его работе.
Загрузка с Google Images и Релевантные видео Youtube
Приветствую, В этом посте расскажу сразу про две доработки.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.