1. Styly pro barvu ikon

    Článek: AN0002464Aktualizováno:: 03.07.2021

    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.

    Nastavení webpartu menu - třída s CSS styly

     

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

    Barvy svg ikon podle stylů

    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;

×