• ДОБРО ПОЖАЛОВАТЬ В КЛУБ ПО WORDPRESS

    Мы активно растущий клуб по WordPress и нам нужна помощь каждого человека, в том числе и Ваша! Не стесняйтесь и станьте частью большого сообщества.
    Мы делимся новостями, отытом и полезными советами! Пройдите простую регистрацию, чтобы пользоваться всеми возможностями нашего клуба.

    Присоединяйтесь к нам, вам обязательно понравится - Присоединится

Вопрос Как сделать красивую кнопку загрузки "Выберите файл" в contact form7 - WordPress

Wildcdu

ЭКСПЕРТ
Wildcdu

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Симпатии
257
#21
Попробуйте просто так сделать
Код:
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.
В имени не указывать ни чего кроме file
 

Wildcdu

ЭКСПЕРТ
Wildcdu

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Симпатии
257
#22
вот ссылка на эту Для просмотра ссылки необходимо: Войти или Регистрация (если нельзя ссылки то сорри)
автор в коментах тоже что то писал
Это устарело ((( это 2014 год и плагин сильно изменился. Вечером дам решение. Сейчас извините ехать нужно. Я забросил все данные на тест площадку и разберу по кускам что как и дам решение
 

Попай

АДМИНИСТРАТОР
Попай

Попай

АДМИНИСТРАТОР
Сообщения
3,001
Симпатии
424
#23

Di Ost

СВОЙ
D

Di Ost

СВОЙ
Сообщения
177
Симпатии
90
#24
Ребят, по мне вы не то делаете, перехват CSS селектора + увеличение приоритета важности и все, самый край скрыть элемент и допилить нужные части с помощью бефор и афтер.
Этот сайт уже опубликован, что бы посмотреть или он на локальном сервере ?
 

Slon444

ПРОВЕРЕННЫЙ
Slon444

Slon444

ПРОВЕРЕННЫЙ
Сообщения
19
Симпатии
4
#25
Это устарело ((( это 2014 год и плагин сильно изменился. Вечером дам решение. Сейчас извините ехать нужно. Я забросил все данные на тест площадку и разберу по кускам что как и дам решение
Ок спасибо большое)
 

Slon444

ПРОВЕРЕННЫЙ
Slon444

Slon444

ПРОВЕРЕННЫЙ
Сообщения
19
Симпатии
4
#26

Slon444

ПРОВЕРЕННЫЙ
Slon444

Slon444

ПРОВЕРЕННЫЙ
Сообщения
19
Симпатии
4
#27
Ребят, по мне вы не то делаете, перехват CSS селектора + увеличение приоритета важности и все, самый край скрыть элемент и допилить нужные части с помощью бефор и афтер.
Этот сайт уже опубликован, что бы посмотреть или он на локальном сервере ?
он скрыт пока что
 

Попай

АДМИНИСТРАТОР
Попай

Попай

АДМИНИСТРАТОР
Сообщения
3,001
Симпатии
424
#28

Wildcdu

ЭКСПЕРТ
Wildcdu

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Симпатии
257
#29
проблему стилизации поля ввода input[type=file]. Суть проблемы заключается в том, что в спецификации HTML нет строгих правил, устанавливающих, как же должен отображаться браузером этот элемент. Более того, для input[type=file] не предусмотрено атрибутов, которые позволили бы изменить его внешний вид, с помощью стилей CSS можно изменить лишь вид его границы и шрифт, а средствами JavaScript, из соображений безопасности, нельзя сымитировать клик по этому элементу, который вызвал бы системное окно для выбора файла.

Есть костыли... но думаю это лишнее.
Не знаю про пример Попай пробовал его вариант во всех ипостасях и не смог добиться такого. Точнее не добился работы этого варианта. Может кто то покажет Вам рабочий вариант
Я лично только могу менять например так
Как сделать красивую кнопку загрузки "Выберите файл" в contact form7 - WordPress Клуб WordPress 2334
С учетом оформления темы
И это работает (цвет размер все меняется)
Стилизовать кнопку отправить не проблема а вот с импутом я проблему описал
Про костыли... есть 3 варианта с ними нужно играться и пробовать, почему играться и пробовать, во первых знаю как на PHP это делать а вот как совместить с Контакт формой... тут вопрос... тут будет сложно точно тк в PHP это просто поле-кнопка ввода-выбора а в контакт форме это шорт код со своим обработчиком получается для совмещения придется еще один костыль строить
 

Попай

АДМИНИСТРАТОР
Попай

Попай

АДМИНИСТРАТОР
Сообщения
3,001
Симпатии
424
#30
Wildcdu, что-то тут мудришь. Надо поставить в нашей песочнице. А то прям проблема раздувается.
 

Slon444

ПРОВЕРЕННЫЙ
Slon444

Slon444

ПРОВЕРЕННЫЙ
Сообщения
19
Симпатии
4
#31
проблему стилизации поля ввода input[type=file]. Суть проблемы заключается в том, что в спецификации HTML нет строгих правил, устанавливающих, как же должен отображаться браузером этот элемент. Более того, для input[type=file] не предусмотрено атрибутов, которые позволили бы изменить его внешний вид, с помощью стилей CSS можно изменить лишь вид его границы и шрифт, а средствами JavaScript, из соображений безопасности, нельзя сымитировать клик по этому элементу, который вызвал бы системное окно для выбора файла.

Есть костыли... но думаю это лишнее.
Не знаю про пример Попай пробовал его вариант во всех ипостасях и не смог добиться такого. Точнее не добился работы этого варианта. Может кто то покажет Вам рабочий вариант
Я лично только могу менять например так
Посмотреть вложение 2033
С учетом оформления темы
И это работает (цвет размер все меняется)
Стилизовать кнопку отправить не проблема а вот с импутом я проблему описал
Про костыли... есть 3 варианта с ними нужно играться и пробовать, почему играться и пробовать, во первых знаю как на PHP это делать а вот как совместить с Контакт формой... тут вопрос... тут будет сложно точно тк в PHP это просто поле-кнопка ввода-выбора а в контакт форме это шорт код со своим обработчиком получается для совмещения придется еще один костыль строить
У меня тоже вот так получается( не скрывается! шаблон битемс
 

Wildcdu

ЭКСПЕРТ
Wildcdu

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Симпатии
257
#32

Wildcdu

ЭКСПЕРТ
Wildcdu

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Симпатии
257
#33
Грубо при попытке изменить кнопку вмешивается user agent и блокирует стили... возможно (я не пробовал) если в браузере отключить агента то будет показываться оформление... не знаю этот момент
 

Попай

АДМИНИСТРАТОР
Попай

Попай

АДМИНИСТРАТОР
Сообщения
3,001
Симпатии
424
#34
Я делал с таким тегом [file wpcf7-file], а с этим тегом [file file-185] стили почему-то не срабатывают до конца. Просто сейчас нет времени смотреть и подправлять стили.

Стили в своем варианте ставил эти:
[CSS].wpcf7-form-control-wrap.wpcf7-file {
display: inline-block;
position: relative;
width: 150px;
height: 40px;
border-radius: 5px;
border: solid 1px #4096ee;
background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%);
color: #FFF;
overflow:hidden;
}

/* Made input big and move it left and top inside wrapper to hide actual control but leave input clickable */
.wpcf7-form-control.wpcf7-file {
position: absolute;
width: 1500px;
height: 1000px;
right: 0;
bottom: 0;
outline: none !important;
}

/* Add button text */
.wpcf7-file:before {
content: "Загрузить файл";
display: block;
width: 150px;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
right: 0;
bottom: 0;
color: #FFF;
font-size: 16px;
}[/CSS]

Под каждый шаблон скорей всего надо подправлять стили CSS.

Вот пример работы Для просмотра ссылки необходимо: Войти или Регистрация
 

Wildcdu

ЭКСПЕРТ
Wildcdu

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Симпатии
257
#35
Я делал с таким тегом [file wpcf7-file], а с этим тегом [file file-185] стили почему-то не срабатывают до конца. Просто сейчас нет времени смотреть и подправлять стили.

Стили в своем варианте ставил эти:
[CSS].wpcf7-form-control-wrap.wpcf7-file {
display: inline-block;
position: relative;
width: 150px;
height: 40px;
border-radius: 5px;
border: solid 1px #4096ee;
background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%);
color: #FFF;
overflow:hidden;
}

/* Made input big and move it left and top inside wrapper to hide actual control but leave input clickable */
.wpcf7-form-control.wpcf7-file {
position: absolute;
width: 1500px;
height: 1000px;
right: 0;
bottom: 0;
outline: none !important;
}

/* Add button text */
.wpcf7-file:before {
content: "Загрузить файл";
display: block;
width: 150px;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
right: 0;
bottom: 0;
color: #FFF;
font-size: 16px;
}[/CSS]

Под каждый шаблон скорей всего надо подправлять стили CSS.

Вот пример работы Для просмотра ссылки необходимо: Войти или Регистрация
И нет отправки файла (
 

Попай

АДМИНИСТРАТОР
Попай

Попай

АДМИНИСТРАТОР
Сообщения
3,001
Симпатии
424
#36
А почему нет отправки файла? Я то правил только стили. Прикрепленный файл в письме подправил.
 

Wildcdu

ЭКСПЕРТ
Wildcdu

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Симпатии
257
#38
подправил письмо и прошла отправка
 

Попай

АДМИНИСТРАТОР
Попай

Попай

АДМИНИСТРАТОР
Сообщения
3,001
Симпатии
424
#39
Вот и я о том же, что шаблон письма надо править.

Единственный минус не видно название файла, когда его прикрепил в форме.
 

Wildcdu

ЭКСПЕРТ
Wildcdu

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Симпатии
257
#40
Вот и я о том же, что шаблон письма надо править.

Единственный минус не видно название файла, когда его прикрепил в форме.
Сравню твой код и то что я мучал... странно то что все совпадает (может где то разница есть не увидел сходу)
Принцип тот же делаем свою форму старую скрываем растягиваем и имитируем в новой клик по старой...
 
Сверху