0 Пользователей и 1 Гость просматривают эту тему.
  • 12 Ответов
  • 3343 Просмотров
*

bayersoff

  • Захожу иногда
  • 81
  • 0 / 0
Здравствуйте!

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

HTML код кнопки

Код
<button class="mail-btn" type="submit">send</button>


CSS кнопки

Код
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800,400);
*, *:before, *:after {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
HTML,
body {
  width:100%;
  height:100%;
}
body {
  overflow-x:hidden;
  text-align:center;
  background:#2980b9;
  font-family: 'Open Sans', sans-serif;
}
.mail-btn {
  position:relative;
  top:35%;
  display:inline-block;
  padding:0.5rem 1rem;
  border:2px solid rgba(255,255,255,0.5);
  background:none;
  outline:none;
  -webkit-appearance: none;
  font-size:2rem;
  color:rgba(255,255,255,1);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.5rem;
  text-indent:0.5rem;
  cursor:pointer;
  transition:
    color 1.5s .5s,
    border 3s 1s;
 
}
.mail-btn:before,
.mail-btn:after {
  content:'';
  position:absolute;
  opacity:0;
  backface-visibility:visible;
  transform-style:preserve-3d;
  perspective:400px;
  transform-origin:50% -50%;
  transform:rotateX(360deg) rotateY(0) translateX(-50%) translateY(0) scale(0.2);
  transition:all 0.5s;
}
.mail-btn:before {
  top:5px;
  left:50%;
  height:3rem;
  background:white;
  border-top:2rem solid #2980b9;
  border-right:3rem solid transparent;
  border-left:3rem solid transparent;
}
.mail-btn:after {
  top:0;
  left:50%;
  border-top:2rem solid white;
  border-right:3rem solid transparent;
  border-left:3rem solid transparent;
}
.mail-btn:hover {
  color:rgba(255,255,255,0);
  border:2px solid rgba(255,255,255,0);
  transition:
    color .25s,
    border .25s;
}
.mail-btn:hover:before,
.mail-btn:hover:after {
  opacity:1;
  transform:rotateX(0) rotateY(-10deg) translateX(-50%) translateY(0) scale(1);
}
.fly {
  color:rgba(255,255,255,0);
  border:2px solid rgba(255,255,255,0);
  animation:sended 4s 0.8s forwards;
}
@keyframes sended {
  0% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid white;
    border-left:10px solid white;
    opacity:0;
    transform:rotate(-45deg) translateX(300%) translateY(-500%);
  }
  5% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid white;
    border-left:10px solid white;
    opacity:1;
    transform:rotate(-45deg) translateX(0) translateY(0);
  }
  78% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid white;
    border-left:10px solid white;
    opacity:1;
    transform:rotate(-45deg) translateX(0) translateY(0);
  }
  79% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid white;
    border-left:10px solid white;
    opacity:0;
    transform:rotate(-45deg) translateX(0) translateY(0);
  }
  80% {
    height:auto;
    width:auto;
    color:rgba(255,255,255,0);
    border:2px solid rgba(255,255,255,0);
    opacity:0;
    transform:rotate(0) translateX(0) translateY(0);
  }
  100% {
    height:auto;
    width:auto;
    color:rgba(255,255,255,1);
    border:2px solid rgba(255,255,255,0.5);
    opacity:1;
    transform:rotate(0) translateX(0) translateY(0);
  }
}
.fly:before,
.fly:after {animation:flyout .6s forwards;}
@keyframes flyout {
  0% {
    opacity:1;
    transform:rotateX(0) rotateZ(0) translateX(-50%) translateY(0) scale(1);
  }
  33% {
    opacity:0.66;
    transform:rotateX(0) rotateZ(-5deg) translateX(-100%) translateY(0) scale(1);
  }
  100% {
    opacity:0;
    transform:rotateX(0) rotateZ(0) translateX(1000%) translateY(0) scale(1);
  }
}

JS кнопки

Код
$(".mail-btn").on("click touchstart", function () {
    $(this).addClass("fly");
    that = this
    setTimeout(function() {
        $(that).removeClass("fly");
    }, 5400)
});


   
*

effrit

  • Легенда
  • 9851
  • 1091 / 13
  • effrit.com
здра.
стиль и js-код подключаются или переименованием файлов в custom.css и custom.js  и копированием их в соответствующие папки шаблона, если шаблон поддерживает такой вариант (если такие файлы уже есть, то надо просто скопировать туда ваш код).
или же index.php шаблона их подключаете по аналогии с уже существующими файлами.

далее для нужных вам кнопок вы должны добавить класс mail-btn, соответственно надо переопределять шаблон нужных модулей и компонентов.
делается через админку - Шаблоны-Шаблоны, выбрать ваш шаблон, выбрать Создать переопределение и в списке выбрать нужный модуль. После чего в папке шаблона в подпапке HTML появится шаблон вывода модуля, в котором нужно найти родную кнопку и добавить ей ваш класс mail-btn
*

bayersoff

  • Захожу иногда
  • 81
  • 0 / 0
Что-то не так пошло. Кнопка выводится в футере главной страницы.

Я сделал следующее. В файле index.php по пути protostar/tempates/index.php внутри тега <head> вставил этот код
Код
<head><meta charset="UTF-8">
  <title>Animated Mail Button</title>
<link rel="stylesheet" href="templates/protostar/css/style.css"> </head>

Далее все в том же файле index.php добавил код внутри тега <body> следующий код:

Код
<body><button class="mail-btn" type="submit">Отправить</button>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script  src="templates/protostar/js/index.js"></script> </body>

А скаченный файл стилей разместил в папки по по пути templates/protostar/js/index.js и templates/protostar/css/style.css не меняя ничего.

Но теперь, как я уже говорил выше, кнопка отображается на главной странице сайте в позиции футера. А мне нужно, чтобы она была скрыта, и выводилась только по вызову, то есть, только тогда когда я указываю в каких-то модулях класс данной кнопки. Короче, я хочу встроить несколько кнопок в шаблон, и вызывать их при необходимости, так же как и такие кнопки как btn-primary или btn-info. Они скрыты на сайте.     
*

bayersoff

  • Захожу иногда
  • 81
  • 0 / 0
Еще один момент. Я создаю переопределение и в папке HTML создается следующая папка "mod_quickform" но внутри папки пусто. Что дальше то нужно делать? )
*

effrit

  • Легенда
  • 9851
  • 1091 / 13
  • effrit.com
по ходу, вы вообще не понимаете, что вы делаете.
вы вставили пустую кнопку
Код
<button class="mail-btn" type="submit">Отправить</button>
вот она вам и показывается.

и стандартный протостар подхватывает файлы user.css и user.js
так что вам ничего никуда не надо вставлять - только переименовать файлы и скопировать их в папки CSS и js шаблона

если переопределение пустое, то пробуйте из папки с модулем скопировать файл default.php из папки tmpl если она есть
*

bayersoff

  • Захожу иногда
  • 81
  • 0 / 0
1. Я скопировал те файлы, что скачал (файлы кнопки) в папки CSS и JS без переименовании, т.к. у меня не было в этих папках файлы с таким же именем. Файлы называются style.css и index.js

2. Создал переопределение нужного мне модуля, и теперь в папке HTML по пути templates/protostar/html появилась папка mod_quickform но папка пустая.

Я не знаю, что дальше нужно делать. Буду весьма признателен, если вы подскажете ))
*

effrit

  • Легенда
  • 9851
  • 1091 / 13
  • effrit.com
ну камон!
написал же, что если переименовать файлы, то они автоматически подхватятся!
вам религия не позволяет это сделать?

про переопределение ответил выше
*

bayersoff

  • Захожу иногда
  • 81
  • 0 / 0
Я переименовал файлы на Custom.css и custom.js скопировал в нужные папки. Удалил те коды, что выше уже указывал, с файла index.php. Далее сделал переопределение, но папка пустая. Понятие не имею в какой файл теперь нужно вписать mail-btn.
В настройках модуля есть вкладка "указать свой класс" я и указал mail-btn но ничего не изменилась.
*

bayersoff

  • Захожу иногда
  • 81
  • 0 / 0
Файлы кнопки что я скачал с интернета - это style.css, index.js и index.html. С первыми двумя файлами я вроде уже понял что делать, а вот содержание файла index.html понятие не имею куда скопировать и нужно ли вообще куда-то копировать. Вот содержание родного файла кнопки index.html

Код
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Animated Mail Button</title>
 
 
 
      <link rel="stylesheet" href="css/style.css">

 
</head>

<body>

  <button class="mail-btn" type="submit">send</button>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

 

    <script  src="js/index.js"></script>




</body>

</html>
*

effrit

  • Легенда
  • 9851
  • 1091 / 13
  • effrit.com
это же просто пример. вам он не нужен.
про переопределение Я ОТВЕТИЛ.

если переопределение пустое, то пробуйте из папки с модулем скопировать файл default.php из папки tmpl если она есть
*

bayersoff

  • Захожу иногда
  • 81
  • 0 / 0
Спасибо. Сейчас попробую
*

bayersoff

  • Захожу иногда
  • 81
  • 0 / 0
в папке tmpl есть только один файл с названием index.html и файл пустой. Содержит только эти строки <!DOCTYPE html><title></title>
*

effrit

  • Легенда
  • 9851
  • 1091 / 13
  • effrit.com
и опять же, НЕ
Custom.css и custom.js
а user.css и user.js

тогда в самом модуле надо правки делать, предварительно создав копию оригинального файла
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Вопрос по CSS Joomla 3+

Автор HomoSapiens

Ответов: 5
Просмотров: 455
Последний ответ 03.08.2020, 13:13:45
от HomoSapiens
Несколько вопросов про шаблон (Joomla! 3.9.1)

Автор int31

Ответов: 6
Просмотров: 301
Последний ответ 09.02.2020, 20:28:49
от AlexB
Убрать рамки у кнопки

Автор leha111

Ответов: 1
Просмотров: 897
Последний ответ 08.06.2018, 12:56:25
от draff
Автоматическое добавление кнопки подробнее

Автор lexxbry

Ответов: 3
Просмотров: 1004
Последний ответ 27.02.2018, 18:40:58
от beliyadm
Увеличить межстрочный интервал в вертикальном меню Joomla 3

Автор Alan-y

Ответов: 6
Просмотров: 1113
Последний ответ 07.01.2018, 14:07:52
от NewUsers