Jump to content
Mreco

Zmiana koloru ikony

Recommended Posts

Witam. Jak zmienić kolor dodanej ikony do modułu bezpieczeństwo klienta (blockreassurance)? Moduł pobiera sobie kolor ikony z szablonu jednak nie mam pojęcia co zmienić i gdzie szukać. Chodzi mi o tą 4 ikonę informującą o ratach. Kolor nieznacznie różni się od pozostałych ikon które są w standardowym szablonie.

Clipboard01.jpg

Share this post


Link to post
Share on other sites

A wystarczyło odpalić tryb developerski w przeglądarce i wyciągnąć sobie ścieżkę do tej ikonki. Następnie dopisać polecenie w CSS...

#block-reassurance > ul:nth-child(1) > li:nth-child(4) > div:nth-child(1) > img:nth-child(1) 
{
 	opacity: .8!important; 
}

A tu masz źródełko swoich problemów :


... themes/xxxxxx/assets/css/theme.css
#block-reassurance img {
    opacity: .7; /* ------------ ta część odpowiada za przeźroczystość i to ona steruje kolorem tej ikonki */
    width: 1.563rem;
    margin-right: .625rem;

[Kliknij i przeciągnij, by przenieść.]

 

Share this post


Link to post
Share on other sites
12 hours ago, () Maciej () said:

#block-reassurance > ul:nth-child(1) > li:nth-child(4) > div:nth-child(1) > img:nth-child(1) 

Chryste Panie :D Nie używaj nigdy tak długich selektorów bo na nasze nieszczęście przeglądarki czytają kod CSS od tyłu co mniej więcej oznacza, że przeglądarka po odpaleniu strony i budowie drzewa CSSOM robi coś takiego tą komendą:

Sprawdź wszytkie zdjęcia na stronie, znajdź pierwsze z nich, następnie sprawdź wszystkie divy (!) i wybierz pierwszy ale tylko ten który po sprawdzeniu wszystkich gałęzi li na stronie który jest 4 dzieckiem itd itp.

Takie wskazanie elementu jest cholernie obciążające przeglądarkę i wykonuje się znacznie dłużej niż bezpośrednie odwołanie się do klasy lub id. Lepiej edytować .tpl, dodać klasę i dodać ją bezpośrednio do css.

Też kiedyś tak pisałem :P

 

 

  • Like 1

Share this post


Link to post
Share on other sites

To jest selektor bezpośredni to konkretnego obiektu na stronie. Wiem, że nie jest to najbardziej elegancka forma, ale jak potrzebujesz zmienić jeden konkretny element bez większych zmian w kodzie to jest to najszybsza metoda.

 

W tym przypadku klasę ma dziedziczoną, więc zmiana nadrzędnej spowoduje zmianę we wszystkich pozostałych obrazkach powyżej.

Ogólnie ustawienie przeźroczystości na 0 (albo całkowite jej wywalenie) daje efekt jaki planuje autor tematu, czyli wszystkie ikonki są w tym samym odcieniu (w tym przypadku czarnym), który można sobie zmienić też na inny kolor (np szary i efekt będzie bardzo zbliżony do obecnego).

Share this post


Link to post
Share on other sites
19 minut temu, hakeryk2 napisał:

Lepiej edytować .tpl, dodać klasę i dodać ją bezpośrednio do css.

Fakt, te rozwiązanie jest najlepsze, ale nie zawsze masz czas, czy umiejętności do odszukania odpowiedniego TPLa :)

Share this post


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

×

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More