Изменение цвета элементов

[Halonest]

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

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

 

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

 

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

 

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

 

 

[Ptenec]

21 минуту назад, Halonest сказал:

 

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

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

[HyperLabTeam]

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

 

[Halonest]

1 час назад, Ptenec сказал:

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

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

 

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

[spectre]

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

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

[Tom]

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

[Halonest]

12 минут назад, Tom сказал:

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

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

[Halonest]

25 минут назад, spectre сказал:

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

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

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

[Tom]

3 минуты назад, Halonest сказал:

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

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

[HyperLabTeam]

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

[Halonest]

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

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

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

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

[HyperLabTeam]

1 час назад, Halonest сказал:

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

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

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

[Halonest]

10 часов назад, AWARO сказал:

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

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

[jaffagold]

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

Например

.test {

  color: red !important;

}

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

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

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

.some-class

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

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

.row .some-class

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

[Halonest]

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

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

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

 

[jaffagold]

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

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

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

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

Змінено 9 вересня 2018 користувачем jaffagold