Poniższy poradnik krok po kroku pokazuje, jak podmienić domyślne logo w interfejsie WWW yoRadio na własne, przygotowane w formacie wektorowym (SVG), oraz jak poprawnie powiązać jego elementy ze zmiennymi kolorów w pliku stylów theme.css.
- program Inkscape (do edycji grafiki wektorowej),
- dowolny program do kompresji obsługujący format GZIP (np. 7-Zip).
Przejdź do katalogu źródłowego interfejsu webowego: yoRadio\data\www.
Odszukaj plik o nazwie logo.svg.gz i rozpakuj go. Otrzymasz edytowalny plik logo.svg.
Otwórz rozpakowany plik logo.svg w programie Inkscape.
Domyślne logo składa się z dwóch oddzielnych ścieżek wektorowych: jednej dla elemntu "yo" i drugiej dla "radio".
`
Zastąp domyślne elementy własnymi ścieżkami w kolorze czarnym.
Ważne: Wszystkie elementy Twojego nowego logo muszą być krzywymi (ścieżkami), a nie obiektami typu tekst czy figury geometryczne. Aby to zrobić:
- Zaznacz swój nowy obiekt.
- Z górnego menu wybierz: Ścieżka > Obiekt w ścieżkę (Path > Object to Path).
Aby przeglądarka potrafiła kolorować odpowiednie części logo na podstawie motywu (theme.css), musisz nadać nowym ścieżkom właściwe etykiety (ID obiektu).
Nadaj swoim ścieżkom następujące etykiety:
- Ścieżka o etykiecie
yo– ten element przyjmie kolor zdefiniowany jako--logo:w plikutheme.css. - Ścieżka o etykiecie
radio– ten element przyjmie kolor zdefiniowany jako--logo-red:w plikutheme.css.
Gdy upewnisz się, że ścieżki mają odpowiednie etykiety, zapisz plik logo.svg (stary plik dla bezpieczeństwa zapisz pod inną nazwą).
Następnie skompresuj nowy plik logo z powrotem do formatu GZIP, tak aby uzyskać plik pod nazwą logo.svg.gz.
Ostatnim etapem jest wgranie zmodyfikowanego pliku do yoRadio.
- Otwórz interfejs WWW swojego yoRadio.
- Przejdź do zakładki: Settings > Update > Board.
- Wgraj utworzony plik
logo.svg.gz.
(Proces ten odbywa się w dokładnie tym samym miejscu, co wgrywanie całego interfejsu WWW, jednak tym razem wysyłasz wyłącznie ten jeden, podmieniony plik).
*Gotowe!
Po odświeżeniu strony w przeglądarce (często wymagane twarde odświeżenie: Ctrl+F5), zobaczysz swoje nowe logo.*