Jump to content
  • разработка интернет магазинов на opencart
  • доработка интернет магазинов на opencart

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


 Share

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 comment
Share on other sites


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

 

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

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

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

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

 

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

Link to comment
Share on other sites


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

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

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

Link to comment
Share on other sites


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

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

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

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

Link to comment
Share on other sites


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

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

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

  • +1 1
Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites


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

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

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites


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

Например

.test {

  color: red !important;

}

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

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

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

.some-class

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

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

.row .some-class

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

Link to comment
Share on other sites


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

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

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

 

Link to comment
Share on other sites


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

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

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

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

Edited by jaffagold
Link to comment
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
 Share

×
×
  • 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.