Перейти к содержанию

Рекомендуемые сообщения

Вношу изменения в цветовую гамму сайта интернет-магазина на OpenCart 3.0 (стандартная тема).

Корректировки преимущественно делал путем простой замены кодов цветов в stylesheet.css и bootstrap.min.css

 

На странице продукта столкнулся с тем, что цвет окантовки кнопки "Купить" при наведении курсора задавался в bootstrap.min.css через -webkit-focus-ring-color, то есть неким системным цветом (синий), который определяется браузером. Его удалось перезаписать, заменив в bootstrap.min.css -webkit-focus-ring-color на green!important. В итоге цвет окантовки поменялся на зеленый.

 

Теперь пытаюсь заменить синие цвета выпадающего меню сортировки на странице категории товаров (см. скрин) с синего на зеленый.

image.jpg.63d302b811be9ab64574550bc2ae0d8c.jpg

 

В коде страницы этот синий цвет также задается -webkit-focus-ring-color, но не могу понять в каком файле это происходит.

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
21 минуту назад, Halonest сказал:

 

В коде страницы этот синий цвет также задается -webkit-focus-ring-color, но не могу понять в каком файле это происходит.

данный цвет берется из браузера и в файлах стилей их нет

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

я могу привести их в порядок за доп плату,
или посмотрите решение тут - можно выдрать а можно использовать и сам шаблон вместо вашего

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, Ptenec сказал:

данный цвет берется из браузера и в файлах стилей их нет

Я понимаю, что в файле стилей цвет не задается кодом. Вопрос в том, каким образом задано, что данный цвет будет определяться браузером, другими словами в каком файле содержится заветный -webkit-focus-ring-color, который я смогу заменить на green!important ;) ?

 

@AWARO спасибо за предложение сделать за доплату правки - я пока что пытаюсь, насколько смогу разобраться сам... Что касается шаблона - выдрать из него я не смогу (не хватит знаний), переключаться на него не хочу - я уже практически привел вид дефолтного шаблона к желаемому, осталось пару штрихов - поэтому и обратился за помощью на форум.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

ну это вам на какой-то форум css, к опенкарту это мало имеет отношения

ну и движок не везде вебкит

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Крепите ссылку на свой магазин, это больше шансов получить ответ.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
12 минут назад, Tom сказал:

Крепите ссылку на свой магазин, это больше шансов получить ответ.

Магазин пока на локальном хостинге

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
25 минут назад, spectre сказал:

ну это вам на какой-то форум css, к опенкарту это мало имеет отношения

ну и движок не везде вебкит

Я описал в первом сообщении, что в одном месте ссылка на -webkit-focus-ring-color находилась в файле bootstrap.min.css, где успешно была заменена на конкретный цвет.
Я понимаю, что описанная ситуация относится в целом к css, а оформление opencart - это частный случай... но тем не менее. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
3 минуты назад, Halonest сказал:

ссылка на -webkit-focus-ring-color находилась в файле bootstrap.min.css

Здесь нельзя менять ничего категорически.

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

я это делал скриптами

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

По поводу bootstrap.min.css
 

2 часа назад, Tom сказал:

Здесь нельзя менять ничего категорически.

Почему? Правил только коды цветов и не к ночи помянутый -webkit-focus-ring-color. Результат получил, все работает...
Я не упрямствую, так как знаний в этой области практически нет. В сети нашел некоторые инструкции, применил, все сработало. Теперь, при столь категорическом мнении - хотел бы понимать, на что могут повлиять подобные правки.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, Halonest сказал:

По поводу bootstrap.min.css
 

Почему? Правил только коды цветов и не к ночи помянутый -webkit-focus-ring-color. Результат получил, все работает...
Я не упрямствую, так как знаний в этой области практически нет. В сети нашел некоторые инструкции, применил, все сработало. Теперь, при столь категорическом мнении - хотел бы понимать, на что могут повлиять подобные правки.

ниначто, но изменения добавляют в stylesheet.css

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
10 часов назад, AWARO сказал:

ниначто, но изменения добавляют в stylesheet.css

Там, где цветовое оформление прописано в stylesheet.css - менял в нем, но цвет некоторых элементов задается исключительно в bootstrap.min.css (в частности цвета при наведении курсора на элемент или при нажатии на кнопку).

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

В таком случае, надо прописывать для нужного элемента стиль, а в конце дописывать !important

Например

.test {

  color: red !important;

}

Есть второй подход:

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

Допустим, стили Бутстрап прописаны для класса

.some-class

А данный элемент находится в блоке с классом .row

Тогда для наших правок мы указываем селектор

.row .some-class

То есть, более сложный селектор перебивает стили более простого.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

@jaffagold Спасибо! Я в бутстрапе менял цвет вебкит именно с !important, без этого замена цвета не срабатывала.

Логика перебивания цвета в целом понятна. Остается неясным, что и где прописать, чтобы перебить стиль.

Если не затруднит, по данному выпадающим меню в категориях, может кто из знающих указать, в каком файле и какой код исправить, чтобы изменить цвет?

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Я перечитал ваше задание.

Дело в том, что есть проблема именно cо стилизацией тега option напрямую через css.

Для его стилизации используются специальные скрипты.

И простой :hover в данном случае не работает. Я как-то с налету не соображу.

Изменено пользователем jaffagold

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.