Styly pro barvu ikon

Barvu svg ikon webpartu menu můžete definovat pomocí CSS stylů v souborech (pokud je zamýšlíte použít na více stránkách nebo mají být závislé na tématu) nebo přímo ve webpartu Menu (pokud daný styl chcete použít jen v konkrétním webpartu).

Požadovanou barvu nejdříve musíme konvertovat na filtr. K tomu můžeme použít např. službu https://codepen.io/sosuke/pen/Pjoqqp.

Například barvě #00a4d6 odpovídá filtr:

filter: invert(66%) sepia(100%) saturate(3916%) hue-rotate(159deg) brightness(91%) contrast(101%);

V souboru se styly (např. v souboru ThemeStyle.css, který se aplikuje, pokud model nebo uživatel mají nastavené dané téma) můžeme filtr zadat třemi způsoby. Tři níže uvedené způsoby jdou od obecného ke konkrétnímu. Způsob 3 (pro CSS třídu) má přednost před způsobem 2 (pro konkrétní ID webpart).

/* 1. obecný styl pro všechny webparty - uplatní se, pokud nebude nahrazen specifičtějším stylem */
div.cont div.mod_menu img.svg
{
filter: invert(58%) sepia(99%) saturate(4590%) hue-rotate(166deg) brightness(102%) contrast(101%);
}

/* 2. styl pro konkrétní webpart ID 701 */
wpid701 div.cont div.mod_menu img.svg
{
filter: invert(58%) sepia(54%) saturate(3994%) hue-rotate(1deg) brightness(102%) contrast(102%);
}

/* 3. styl pro CSS třídu x1 - uplatní se na webparty, které budou mít v nastavení stylu uvedenou tuto třídu */
.x1 div.cont div.mod_menu img.svg
{
filter: invert(58%) sepia(99%) saturate(4590%) hue-rotate(166deg) brightness(102%) contrast(101%);
}

Styl je možné také uvést přímo ve webpartu Menu a aplikovat ho jen na určité ikony. Tyto styly budou mít přednost před styly uvedenými výše.

Příklad: Nastavení webpartu - v CSS třídě uvádíme x1, což je třída definována v bodu 3 výše. Specifické styly definované přímo ve webpartu jsou ale uvedeny níže v poli Menu definition.

Výsledné zobrazení barev vidíme takto:

Níže si vysvětlíme, proč jsou barvy ikon zobrazeny takto:

cat= |text=

/* výchozí barvou webpartu je barva ze třídy x1 - tu má první položka menu */
page=knowledge_base.show_article|typeUrl=l|text=cs-CZ::Znalostní báze~en-US::KnowledgeBase|img=ImagesData/RemixIcon/System/shield-cross-fill.svg

/* po definici první položky menu uvádíme příkaz nastavující barvu pro položky následující odtud dále, pokud nebudou definovat svoji vlastní barvu - tuto barvu vidíme u druhé a čtvrté položky menu */
svg-style=filter: invert(17%) sepia(94%) saturate(7059%) hue-rotate(2deg) brightness(99%) contrast(117%);
page=it.project_portfolio|typeUrl=l|text=cs-CZ::Service desk portál~en-US::Service desk portal|img=ImagesData/RemixIcon/System/shield-check-fill.svg

/* u třetí poožky menu vidíme, že obsahuje v nastavení příkaz |svg-style=filter... - tato položka má tedy stanovenu svoji vlastní barvu*/
page=it.page_2014_05|typeUrl=l|text=cs-CZ::Přehled manažera~en-US::Manager view|img=ImagesData/RemixIcon/System/shield-cross-line.svg|svg-style=filter: invert(8%) sepia(99%) saturate(7460%) hue-rotate(247deg) brightness(98%) contrast(144%);
page=it.form2|typeUrl=l|text=cs-CZ::Přiřazení obchodních zástupců~de-DE::Zurodnung von Geschäftsvertretern~en-US::Sales assignments|img=ImagesData/RemixIcon/System/settings-4-line.svg;