Inter-Net.PRO

Новогодняя гирлянда для сайта Joomla

  • 404 104
24 дек 2018 22:43 #81 от Inter-Net PRO
А можете сейчас включить модуль в эту позицию чтоб гирлянда была в самом верху на всю ширину?
Спасибо сказали: Наташа Мойко

  • 404 104
24 дек 2018 23:12 #82 от Inter-Net PRO

Наташа Мойко пишет: Я от css далека ... подскажите что надо вписать в настройках модуля чтобы сдвинуть весь сайт вниз относительно гирлянды... или гирлянду поднять

Да, не успел я вас застать.
В настройках модуля где поле Пользовательский CSS добавьте это:
body{margin-top: 65px;}
По идее это должно сработать. Если нужно выше или ниже, то можно цифру 65 изменить. Если увеличивать значение - блок сайта будет опускаться вниз, если увеличивать - то будет подниматься вверх.

Если не сработает, то можно попробовать так:
#at-main {margin-top: 65px;}
Спасибо сказали: Наташа Мойко

24 дек 2018 23:20 - 24 дек 2018 23:22 #83 от Наташа Мойко
включила 
работает это 
#at-main {margin-top: 65px;}

супер :)

  • 404 104
24 дек 2018 23:48 #84 от Inter-Net PRO
Ага, вижу. Исправьте значение на 85px
#at-main {margin-top: 85px}
У вас там сразу меню идёт, а его слой гирлянды перекрывает. Визуально не видно, но курсор мышки не находит пунктов меню. На них прозрачный слой герлянды налазит. Может даже лучше навсякий случай 90px сделать, я в гугл-хроме смотрю, как в других браузерах поведение курсора будет не знаю.
Спасибо сказали: Наташа Мойко

24 дек 2018 23:56 - 24 дек 2018 23:59 #85 от Наташа Мойко
- ниже линии там понизу кнопки активничают - так прикольнее . П.С. - по поводу второй части модуля - могу мужа припахать порисовать на тему хеллоуина... только растолкуйте что и как фотошопить :) - а то смотрела мышек - там в одном файле разные   и по очереди выводятся как я поняла.... 
Вложения:

  • 404 104
25 дек 2018 00:34 #86 от Inter-Net PRO

Наташа Мойко пишет: ниже линии там понизу кнопки активничают - так прикольнее . П.С. - по поводу второй части модуля - могу мужа припахать порисовать на тему хеллоуина... только растолкуйте что и как фотошопить :) - а то смотрела мышек - там в одном файле разные   и по очереди выводятся как я поняла.... 

Ну как знаете. То что красивее когда на блок налазит - не спорю, но с доступностью к меню я считаю что есть проблемы. Я приоритет отдаю новигации, а не украшениям.

по поводу второй части модуля

В модуле будет не две части, я его планирую расширять. Сейчас уже присматриваю тематику к 8-му марта. Но пока идей нет.
Так же ищу траурную свечку, для грустных событий. Раньше много видел и встречал, а как начал искать - что то всё не то. Когда найду - добавлю в модуль.

смотрела мышек - там в одном файле разные   и по очереди выводятся как я поняла

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

Кстати, в той же записи есть картинка как со стилями из браузера работать. Правда там в мозиле показано, в хроме всё тоже самое, только в контекстном меню пункт называется Просмотреть код.
Может поймёте и увидите где происходят изменения, как это работает и сможете самостоятельно двигать блок сайта от гирлянды.
Логика простая - в браузере подбираются стили, а потом вручную переносятся в CSS. 

  • 404 104
25 дек 2018 01:35 #87 от Inter-Net PRO

Наташа Мойко пишет: могу мужа припахать порисовать на тему хеллоуина... 

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

Но от любой помощи не откажусь: идеи, критику и замечания, переводы на языки - всё принимаю. У модуля даже логотипа нет - тоже беру если кто предложит. Зато страницу модуля уже начал писать с описанием и инструкциями. Пока модуль распространяется со страницы старой гирлянды.

  • 7 2
25 дек 2018 18:38 #88 от anurik
Все равно снежинки половинчатые
Вложения:

  • 404 104
25 дек 2018 19:06 - 25 дек 2018 19:35 #89 от Inter-Net PRO
У вас jchoptimize джаваскрипт закешировал - я смотрю он у вас все скрипты собирает в один файл и минимизирует, добавляя файл в кеш. Размеры снежинок с прошлой версии скрипта.
Нужно кеш почистить.

26 дек 2018 20:15 #90 от Наташа Мойко

как вариант логотипа... 
Вложения:
Спасибо сказали: Inter-Net PRO

  • 404 104
27 дек 2018 09:29 #91 от Inter-Net PRO

Наташа Мойко пишет: как вариант логотипа... 

Спасибо! Симпотичненький логотипчик.

31 дек 2018 12:00 #92 от Григорий
Добрый день. joomla.3.9 гирлянда со звуками работает, а снег нет. В чем может быть проблема?

  • 404 104
10 янв 2019 08:54 #93 от Inter-Net PRO

Григорий пишет: Добрый день. joomla.3.9 гирлянда со звуками работает, а снег нет. В чем может быть проблема?

Нужно смотреть нет ли ошибок в консоли браузера.

20 мая 2019 19:42 #94 от Олександр Мойко
Сорри за офтоп, но думаю автору будет интересно в плане развития модуля.

Есть еффекты для картинок построенные на CSS . Выглядят вот так www.jm-experts.com/sample/index.html
Там же можно скачать модуль , но он работает на Джумле 2.5 ... Можно ли адаптировать под Джумлу 3? Соеденить скажем с гирляндой и 
Хеллоуном сделав дин плагин для украшения сайта ? 

  • 404 104
22 мая 2019 11:12 - 22 мая 2019 11:17 #95 от Inter-Net PRO

Олександр Мойко пишет: Есть еффекты для картинок построенные на CSS .
...
 Можно ли адаптировать под Джумлу 3?

Не уверен что будет понятно, но постараюсь объяснить.
Это просто обычные CSS-эффекты их можно куда угодно адаптировать. Для этого не нужны никакие модули и плагины, движки и прочее.

Просто к изображению добавляется атрибут class с названием стиля, и в файл css прописывается это название стиля со свойствами. Можно прописывать прям в css файл шаблона или создать новый css файл и подключить его к шаблону сайта, это несложно.

Вот вы пишите статью в визуальном редакторе и вставляете изображение. Если переключить редактор на режим HTML, то увидим что изображение вставляется следующим кодом:
<img src="/images/name.png" alt="Текстовое описание картинки"/>
Тэг img говорит браузеру что это изображение
Атрибут src указывает путь к изображению (можно относительный путь указать, можно полный с http или https).
Атрибут alt - текстовое описание изображения (для тех у кого в браузере отключена загрузка изображений из за медленного интернета или дорогого трафика).

Так вот, к тегу img добавляется атрибут class. Например дам имя классу effect:
<img class="effect" src="/images/name.png" alt="описание"/>
Теперь нужно в файле css добавить этот класс:
.effect {
   /* тут свойства */
}
В свойствах можно добавить рамку для изображения, закругление углов, цвет фона если картинка с прозрачностью, отступы и многое другое чтоб стилизовать изображение у которого будет добавлен данный класс.

Можно вообще этот класс не добавлять, а к примеру чтоб сделать как на этом сайте на главной https://inter-net.pro/ вверху в блоке Новые записи при наведении курсора мышки увеличивалось изображение, добавить сразу эффект при наведении (к классу через двоеточие добавляется псевдо-элемент hover).
Получится:
.effect:hover {
   transform: scale(1.5);
}
Теперь при наведении курсора мышки на изображение, картинка будет увеличиваться в полтора раза.

В файле css необязательно прописывать только один класс. Можно сразу прописать класс с какими то базовыми стилями и эффект при наведении. Оставлю ещё такой пример с комментариями:
.effect {
   float: left;            /* выровняет изображение по левому краю (текст будет обтекать справа) */
   margin-right: 10px;      /* Отступ справа 10 пикселей */
   border: solid 3px #ffa500; /* Рамка изображения толщиной 3 пикселя оранжевого цвета */
   border-radius: 5px;      /* Закругление углов по 5 пикселей*/
}
.effect:hover {
   transform: scale(2);   /* При наведении курсора размер изображения увеличится в два раза */
   border-color: #008000;   /* При наведении курсора цвет рамки изменится на зелёный */
}
Эффекты делать несложно. Тут желательно иметь редактор кода (я пользуюсь VSCode) с настроенным подключением к сайту по FTP, чтоб быстро редактировать. Эти все эффекты - это обычный css: добавляется к элементу класс, который описывается в файле стилей.
В гугле по стилям можно всё что угодно найти, можно на любом форуме спросить - css это легко и вам везде подскажут. Тот же ютуб набит видео.

А добавлять это к модулю не совсем разумно, тем более со вставкой через шорткод.
Надеюсь хоть немного понятно из того что я написал.
Спасибо сказали: Олександр Мойко

  • 404 104
22 мая 2019 11:33 #96 от Inter-Net PRO
Забыл добавить.
В атрибуте class можно устанавливать через пробел сразу несколько классов (неограниченное количество).
Пример:
<img class="effect brd" src="/images/name.png" alt="описание"/>
Свойства обоих классов будут применены к изображению.

Можем css (то что было выше с комментариями) теперь так написать:
.effect {
   float: left;
   margin-right: 10px;
}

.effect:hover {
   transform: scale(2);
}

.brd {
   border: solid 3px #ffa500;
   border-radius: 5px;
}

.brd:hover {
   border-color: #008000;
}
Будет всё то же самое, только теперь мы можем любому другому элементу на странице в HTML прописать class="brd" и к него будет оранжевая рамка толщиной 3 пикселя с закруглением по углам.
Спасибо сказали: Олександр Мойко

22 мая 2019 11:54 - 22 мая 2019 12:22 #97 от Олександр Мойко
Я так понимаю в папке с шаблоном в папку сss ставим файл со стилями. Дальше в его надо в index.php шаблона как то вызвать? У меня в этом и затык....  Я нкопал стили - и более менее понял как оно работает... а вот как его в джумле в шаблон впихнуть - без понятия...  
Вложения:

22 мая 2019 11:59 #98 от Олександр Мойко
Если несложно просто ткните носом куда что прописать в шаблоне - стили я накопаю сам :)

22 мая 2019 12:12 - 22 мая 2019 12:14 #99 от Олександр Мойко
И потом в статье вставляем рисунок и в свойствах прописываем стиль?
Вложения:

  • 404 104
22 мая 2019 16:00 #100 от Inter-Net PRO

Олександр Мойко пишет: без понятия...

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

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

Затем в файл index.php который лежит внутри папки шаблона сайта подключаем наш файл css.
Если файл в корневой папке css:
$doc->addStyleSheetVersion($this->baseurl . '/css/style.css');
Если файл в папке css в шаблоне:
$doc->addStyleSheetVersion($this->baseurl . '/templates/шаблон/css/style.css');
Проверьте чтобы в файле было объявлено:
$doc = JFactory::getDocument();
это обычно почти в самом начале файла прописывают.

А место подключение стилей, попробуйте Ctrl + F и поиском по файлу найти addStyleSheetVersion надеюсь что стили шаблона подключены по такому правилу.
Если нет, то можно в блоке HTML между тегами head (они уже прописаны) подключить:
<head>
   <!-- тут что то уже подключается... -->
   <link rel="stylesheet" href="/css/style.css" type="text/css">
</head>
Если по такому принципу подключен css файл шаблона, то сразу же после него подключайте.

Авторизация

Войти через соцсети: