Jump to content

Анимация кнопки джумла


Livandey
 Share

Recommended Posts

Доброго времени суток! Учусь делай сайты на Джумла, сейчас переделываю свой. Скачала шаблон, установила, мне все нравится.
Только возникла небольшая проблема с анимацией. Вроде и понимаю что нужно дописать.. но не понимаю как и куда. При помощи Firebug нашла где что находится и почти сделала как нужно.. только вот анимацию не могу добавить.
Установила для пользователей community builder и там другая форма входа была (не такая красивая). 
 
Верхняя форма - новая.
Нижняя оригинальная. Мне нужно чтобы в новой форме при наведении тоже кнопочка меняла цвет на фиолетовый.
Скрин

В коде это выглядит так:

та что не меняет цвет:

body, select, input, textarea, button {    font-family: "DroidSerifRegular";}button, input[type="button"], form.style input[type="submit"] {    background-color: #f0f0f0;    border-color: #d3d3d3;    border-radius: 5px;    border-style: solid;    border-width: 1px;    color: #68615d;    padding: 7px;}select, input, textarea, button {    font: 12px Arial,sans-serif;}button, input[type="button"], input[type="reset"], input[type="submit"] {    cursor: pointer;}*::-moz-selection {    background: none repeat scroll 0 0 #95add4;    color: #fff;

та что меняет цвет:

form.box fieldset, form.style input, form.style textarea, form.style select, form.style button, form.style input[type="button"] {    border-color: #d3d3d3;}form.style input, form.style textarea, form.style select, form.style button, form.style input[type="button"] {    color: #68615d;}form.style button, form.style input[type="button"], form.style input[type="submit"] {    background-color: #f0f0f0;}form.style input, form.style textarea, form.style select, form.style button {    border-color: #ebebeb;    border-radius: 5px;    border-style: solid;    border-width: 1px;    padding: 7px;}body, select, input, textarea, button {    font-family: "DroidSerifRegular";}button, input[type="button"], form.style input[type="submit"] {    background-color: #f0f0f0;    border-color: #d3d3d3;    border-radius: 5px;    border-style: solid;    border-width: 1px;    color: #68615d;    padding: 7px;}select, input, textarea, button {    font: 12px Arial,sans-serif;}button, input[type="button"], input[type="reset"], input[type="submit"] {    cursor: pointer;}*::-moz-selection {    background: none repeat scroll 0 0 #95add4;    color: #fff;

а это код самой анимации:

form.style input,form.style select,form.style textarea,form.style button:hover,form.style input[type="button"]:hover,form.style input.button:hover,form.style #submit:hover {-webkit-transition:color 0.25s ease-in-out,border-color 0.25s ease-in-out,background 0.25s ease-in-out;-moz-transition:color 0.25s ease-in-out,border-color 0.25s ease-in-out,background 0.25s ease-in-out;-o-transition:color 0.25s ease-in-out,border-color 0.25s ease-in-out,background 0.25s ease-in-out;transition:color 0.25s ease-in-out,border-color 0.25s ease-in-out,background 0.25s ease-in-out;}

в общем.. я что-то дико туплю и не понимаю куда чего надо добавить =(((((

 

Link to comment
Share on other sites

А html дай. Там всего то надо прописать только :hover 

я не знаю как найти именно html этого плагина. точнее как понять какой от него код =((
Firebug только путь к css показывает. 
Link to comment
Share on other sites

 

Firebug только путь к css показывает.
  Дык и пропишите в css    hover вашей кнопки , он берется или из шаблона или из собственного css стиля. не думаю что разработчики дошли до тогочтоб прописывать стили прямо в код html
Link to comment
Share on other sites

Обновился этот модуль и настройки сбросились, сделала все по-новой.. но вот в чем проблема, теперь и стиль прописан там в html а я понятия не имею как найти файл который нужен для редактирования! Я готова заплатить немножко если поможете.... уж очень нужно.

Вот скрин.
1 - кнопка которую меняю.
2 - Код который задает свой стиль, аннулируя стиль который обведен рядом с цифрой 3. 

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

 

БлагоДарю!

Link to comment
Share on other sites

Открываешь по одному все файлы и ищешь form-login-remember.

 

А лучше забить на CMS и нормально изучить HTML, CSS, JS, PHP и MySQL, а то так всю жизнь будешь мучатся из-за таких мелочей.

Edited by DivMan
Link to comment
Share on other sites

Сам код модуля этого будет в /modules/mod_login скорее всего, но Вам нужен лишь его шаблон вывода modules/mod_login/tmpl/default.php

Вам надо его переопределить в своём шаблоне. Вот хорошая статья - http://zaurmag.ru/joomla/pereopredelenie-shablonov-v-joomla.html.

В Joomla 3 переопределение можно осуществить из админки.

И изменить html код, добавив к нему свой класс или что другое.

Так же иногда бывает полезным в TotalCommander осуществить поиск по классу или id блока.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By RaiderCoder
      Здравствуйте , сделал макет сайта для интернет магазина . Но столкнулся с проблемой при верстке кнопок на главной странице и не нашел информации как можно уместить текст + несколько картинок в одну кнопку. Знает кто решение и реалезуемо оно вообще ?

    • By Jasahd0307
      Как сделать анимацию как на этом сайте https://travelshift.com/
      Если зажать мышку то картинки меняются анимировано можете мне с этим помочь
    • By Andrey_Afonchenko
      Здравствуйте! Помогите, пожалуйста!
      Есть два блока (div): один с картинкой, а другой с текстом.
      Нужно реализовать: сначала блок с картинкой должен перекрывать блок с текстом, а потом блок с текстом должен перекрывать блок с картинкой.
      Для этого я делал в попытке реализации данного эффекта:
      .image
      {
          display: inline-block;
          Position: absolute;
          z-index: 1;
      }
      @Keyframes block_overlap
      {
          from
          {
              z-index: 0;
          }
          to
          {
              z-index: 2
          }
      }
      .text
      {
          display: inline-block;
          position: absolute;
          animation-name: block_overlap;
          animation-duration: 1s;
      }
      Данный код не привёл к решению проблемы.
       
    • By Vic-Tor
      Всем привет!
      Может кто помочь, всунуть языковую кнопку на сайт. Сайт делал из шаблона, в html соображаю не очень сильно.
      Я так понимаю, можно сделать типа поддомен для другого языка или как проще?  Сайт ТУТ.
      Спасибо!
    • By Traktorist
      Кто-то создавал на Джумле интернет-магазины с большим количество страниц? Я имею ввиду более 10 млн. Хочу создать на Джумле онлайн-магазин запчастей, и для этого, я как прочитал, нужна база ТекДок, но далеко не каждая ЦМС ее потянет из-за большого объема. Справиться ли с этими Джумла и какая версия тогда? Заранее благодарю за ответы.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy