Wróć do https://sugester.pl ↩ Sugester - Baza Wiedzy
Logowanie | Rejestracja
Dodaj sugestię +
  1. Sugester - Baza Wiedzy
  2. Pierwsze kroki w konfiguracji
  3. Customizacja konta
  4. Sugester w kolorach Twojej firmy i z Twoim logo

Sugester w kolorach Twojej firmy i z Twoim logo

Utworzono: 2015-10-06
Ostatnia aktualizacja: 2023-02-08

Liczba odwiedzin posta: 8152
Sugester posiada możliwość rebrandingu/personalizacji, która jest dostępna od planu Max. W tej chwili istnieje możliwość podmiany logotypu w pasku nawigacyjnym systemu, a także zmiany kolorystyki.


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:

kustomizacja   →  acme logo sugester

2. Wejść w Ustawienia -> Ustawienia konta -> Zaawansowane -> HTML wstawiany do Panelu Admina i wkleić jeden z poniższych kodów, w zależności od tego, jaki efekt chcemy uzyskać


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; }

W miejscu URL_TWOJEGO_LOGO należy wkleić url wklejonego do Plików loga firmowego.



Jeśli nie mamy logo animowanego, należy w drugiej części kodu, w miejscu URL_TWOJEGO_LOGO_ANIMOWANEGO wkleić jeszcze raz link z URL_TWOJEGO_LOGO.


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>

W miejscu COLOR FIRST, COLOR SECOND i COLOR THIRD należy wpisać wartości kolorów, np. #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ę.
 

Zarządzaj całą swoją firmą w jednej aplikacji. Wypróbuj Sugester przez 30 dni za darmo!

Rozpocznij darmowy okres testowy


Powrót

Komentarze

Dodaj komentarz


« powrót

Najnowsze z tej kategorii

Myślisz o systemie CRM dla Twojej firmy?

Wypróbuj Sugester!

Rozpocznij 30-dniowy darmowy okres testowy.

Zarejestruj się za darmo