Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


Recommended Posts

Вношу изменения в цветовую гамму сайта интернет-магазина на 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, но не могу понять в каком файле это происходит.

 

 

Link to post
Share on other sites

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

 

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

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

Link to post
Share on other sites

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

 

Link to post
Share on other sites
1 час назад, Ptenec сказал:

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

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

 

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

Link to post
Share on other sites

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

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

Link to post
Share on other sites

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

Link to post
Share on other sites
12 минут назад, Tom сказал:

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

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

Link to post
Share on other sites

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

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

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

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

Link to post
Share on other sites

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

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

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

  • +1 1
Link to post
Share on other sites

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

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

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

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

Link to post
Share on other sites

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

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

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

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

Link to post
Share on other sites
10 часов назад, AWARO сказал:

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

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

Link to post
Share on other sites

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

Например

.test {

  color: red !important;

}

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

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

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

.some-class

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

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

.row .some-class

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

Link to post
Share on other sites

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

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

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

 

Link to post
Share on other sites

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

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

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

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

Edited by jaffagold
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.