Zmiana logo w pasku nawigacyjnym aplikacji
Aby samodzielnie podmienić logo Sugestera na firmowe, należy: 1. Wgrać do Plików w Sugesterze logo (najlepiej w wersji kwadratowej), które będzie nie mniejsze niż 60 px szerokości na 50 px wysokości. Plik powinien być w formacie jpg lub png. Logo zostanie umieszczone w pasku górnym:
A. Podmiana na logo firmowe
.top-navigation #application-spinner.navbar-brand {
background:transparent url(URL_TWOJEGO_LOGO) no-repeat 0 0;
background-size: contain; }
html .top-navigation #application-spinner.navbar-brand span{
background:transparent url(URL_TWOJEGO_LOGO_ANIMOWANEGO) no-repeat 0 0;
background-size: contain; }
B. Podmiana na logo z przezroczystym tłem
:root { --main-sugester-color: GŁÓWNYKOLOR; }
.top-navigation #application-spinner.navbar-brand {
background:transparent url("URL_TWOJEGO_LOGO") no-repeat 0 0;
background-color:var(--main-sugester-color)
background-size: contain;
}
html .top-navigation #application-spinner.navbar-brand span{
background:transparent url("URL_TWOJEGO_LOGO_ANIMOWANEGO") no-repeat 0 0;
background-color:var(--main-sugester-color);
background-size: contain;
}W miejscu GŁÓWNYKOLOR należy wpisać wybraną wartość koloru (patrz poniżej: Zmiana kolorystyki aplikacji) np. #ff0000
Ważne: Trzeba otoczyć kod <style></style>
Zmiana logo w panelu logowania
Sugester umożliwia też samodzielną zmianę logo firmowego w oknie logowania. Wystarczy wejść w Ustawieniach konta i w polu Logo wgrać plik z grafiką. Plik powinien być nie mniejszy niż 250 na 250px, w formacie jpg lub png.Zmiana kolorystyki aplikacji
Poniższy kod dotyczy zmiany koloru paska nawigacyjnego, przycisków oraz tekstu na przyciskach. Jest to szablon ogólny, w którym wystarczy podmiana kolorów, by uzyskać kolorystykę Sugestera w firmowych barwach. Aby zmienić kolor aplikacji należy wejść w Ustawienia -> Ustawienia konta -> Zaawansowane -> HTML wstawiany do Panelu Admina i wkleić poniższy kod:<style>
/* kolory */
:root {
--main-sugester-color:COLOR FIRST;
--secondary-sugester-color:COLOR SECOND;
--sugester-text-color:COLOR THIRD; /* kolor tekstu na przyciskach */
}
.btn.btn-primary.btn-block,[class="btn btn-success"]{
background-color:var(--main-sugester-color);
border-color:var(--main-sugester-color);
color:var(--sugester-text-color)
}
.btn-success.btn-outline{
border-color:var(--secondary-sugester-color);
color:var(--secondary-sugester-color)
}
.dotted-link,table.new-table a,.main-button-inside .btn + .btn,.main-button-inside button + button,a{
color:var(--main-sugester-color);
border-color:var(--main-sugester-color)
}
a:focus,a:hover{
color:var(--secondary-sugester-color);
border-color:var(--secondary-sugester-color)
}
html .form-control:focus,html .single-line:focus{
border-color:var(--secondary-sugester-color)!important
}
table.new-table a:hover{
color:var(--secondary-sugester-color)
}
.btn-circle.circle-sm i{
color:var(--sugester-text-color)
}
.btn-white {
border: 1px solid var(--secondary-sugester-color);
color: var(--secondary-sugester-color);
}
input#q1 + div > .btn.text-xs:hover,input#q1:link + div > .btn.text-xs,input#q1:hover + div > .btn.text-xs,input#q1:focus + div > .btn.text-xs,input#q1:active + div > .btn.text-xs,html .btn.btn-sm.btn-rounded.btn-white.text-xs:hover,html .btn-white:hover{
border:1px solid var(--main-sugester-color);
background-color:var(--main-sugester-color);
color:var(--sugester-text-color)
}
.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active,.open .dropdown-toggle.btn-success,.btn-success:active:focus,.btn-success:active:hover,.btn-success.active:hover,.btn-success.active:focus,.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary,.btn-primary:active:focus,.btn-primary:active:hover,.btn-primary.active:hover,.btn-primary.active:focus{
background-color:var(--secondary-sugester-color);
border-color:var(--secondary-sugester-color);
color:var(--sugester-text-color)
}
.btn-primary{
background-color:var(--main-sugester-color);
border-color:var(--main-sugester-color);
color:var(--sugester-text-color)
}
#navbar ul,#navbar,.top-navigation .nav > li > a{
background:var(--sugester-text-color);
color:var(--secondary-sugester-color)
}
#navbar ul,#navbar,.top-navigation .nav > li > a:hover{
color:var(--main-sugester-color)
}
.top-navigation .navbar-nav .open .dropdown-menu > li > a:hover,.top-navigation .navbar-nav .open .dropdown-menu .dropdown-header{
color:var(--secondary-sugester-color)
}
.top-navigation .navbar-brand{
background:var(--sugester-text-color);
color:var(--secondary-sugester-color)
}
.navbar-header.sugester_admin_menu1_left a{
background-color:var(--main-sugester-color)
}
[class="btn btn-success"]{
background-color:var(--main-sugester-color);
border-color:var(--main-sugester-color);
color:var(--sugester-text-color)
}
.dotted-link,table.new-table a,.main-button-inside .btn + .btn,.main-button-inside button + button,a{
border-color:transparent transparent transparent var(--main-sugester-color)
}
table.new-table td > a:hover{
color:var(--main-sugester-color);
border-bottom:1px solid var(--main-sugester-color)
}
</style>#ff0000 #bd0000 #fff
Uwaga! Należy pamiętać, że kod musi być rozpoczety i zakończony tagiem <style> </style>
Jeśli użyjemy kilku kodów, to mogą być one otoczone wspólnym tagiem.
Poniżej dostępna jest strona, gdzie w łatwy sposób można znaleźć kolor, którego użyjemy przy zmianie kolorystyki
https://www.w3schools.com/colors/colors_picker.asp
Z artykułu Sugester pod własną domeną dowiesz się, jak podpiąć system pod własną domenę.