Ten artykuł jest również dostępny w:
Ten artykuł został przetłumaczony przy użyciu tłumaczenia maszynowego. Może zawierać błędy lub dziwnie brzmiące tłumaczenia. Mimo to uważamy, że warto go przeczytać w swoim ojczystym języku. Daj nam znać, czy ten artykuł okazał się pomocny, lub przekaż inne uwagi u dołu artykułu.

W planach Corporate i Enterprise Owl możliwa jest edycja CSS treści nauczania.

Możesz chcieć zmienić czcionki, kolory, kształty przycisków, tło swoich testów i materiałów szkoleniowych kursy utworzonych za pomocą Easy LMS. Jednym ze sposobów, aby to zrobić jest dostosowanie ustawień w zakładce Stylizacja ale być może będziesz chciał dokonać jeszcze więcej zmian niż te bezpośrednio dostępne.

Dostęp do CSS pozwala na zmianę sposobu prezentacji treści online, takich jak kolory, czcionki, rozmiary czcionek, kształty przycisków itp. Aby mieć dostęp do tej funkcji, musisz mieć plan Plan korporacyjny lub Enterprise Owl.

W zależności od Twoich umiejętności w zakresie CSS, możesz dokonać wielu zmian w interfejsie swoich testów. Mieliśmy klientów, którzy zmienili wygląd paska timera, dodali animowane przejścia i inne wspaniałe rzeczy poprzez własny CSS.
Quizy, Oceny, i Kursy

Jeśli chcesz dostosować CSS dla swoich Quiz, Ocena, lub Kurs, wyślij nam wiadomość. Jeśli zmiana jest prosta (np. zmiana rozmiaru czcionki), możemy ją wprowadzić od razu.

Zmiany w CSS mogą być zastosowane, w szczególności do Quiz, Ocena, lub Kurslub na całym koncie (jeśli chcesz używać tych samych ustawień dla każdej tworzonej przez siebie treści). CSS może być zapisany jako lista w notatniku i wysłany do nas. Następnie zaimplementujemy go na Twoim koncie.
Egzaminy

Możesz edytować CSS swojej strony Egzamin bezpośrednio z Twojego konta. Wejdź na swoją Egzamin > Utwórz > Stylizacja > Własny CSS:



Na stronie Menedżer plików możesz również przesłać swoje czcionki i obrazy do użycia w arkuszu stylów CSS (sprawdź ten artykuł, aby dowiedzieć się więcej):



Dla przykładu, jest to link do strony Egzamin, która została wystylizowana za pomocą ustawień dostępnych w Dashboardzie:
https://www.onlineexambuilder.com/ocean-sailor-exam/exam-70792



A to jest ta sama strona Egzamin, ale teraz z niestandardową stylizacją CSS
https://www.onlineexambuilder.com/ocean-sailor-exam-css/exam-93757



Wszystkie zmiany dokonane w zakładce Styling będą od tego momentu zastosowane do Twojej strony Egzamin, nawet jeśli jest ona już istniejąca lub jeśli jest osadzona na stronie internetowej.

Własny arkusz CSS

Nasi ukochani projektanci podzielili się kilkoma fragmentami kodu, których możesz użyć do stworzenia swojego arkusza CSS. Sprawdź je poniżej.
1. Egzamin , Quiz, i Ocena
Zmiana rodziny czcionek

Wszystkie czcionki Google są teraz dostępne dla Egzaminy.
Jeśli chcesz zmienić typ czcionki w swoich stronach Ocena i Quiz, zapoznaj się z listą Web Safe Fonts, lub zobacz Google Fonts. Nie zapomnij zaimportować czcionki do Menedżer plików (w Egzaminy > Styling), a następnie skopiuj i wklej ścieżkę czcionki do swojego arkusza CSS.

Nagłówki

Obejmuje to pytania.

h1, h2, h3, h4, h5, h6, caption, *[ class*=heading_h], .examquestion>strong { font-family: Georgia, serif;}

* **Tekst korpusu**

To zawiera odpowiedzi.
body { font-family: Arial, Helvetica, sans-serif;}```

Przyciski

.container .button, .container input[type=submit], .container input[type=button], .container button, .container .gameisrunning .continue { font-family: Arial, Helvetica, sans-serif;}

* **Wszystko (ta sama czcionka)**
body, h1, h2, h3, h4, h5, h6, caption, [ class=heading_h], .examquestion>strong,.container .button, .container input[type=submit], .container input[type=button], .container button, .container .gameisrunning .continue { font-family: Arial, Helvetica, sans-serif;}
Zmiana rozmiaru czcionki

Nagłówki

h1 { font-size: 28px;}h2, caption, .heading_h2, .examquestion>strong { font-size: 21px;}h3, .heading_h3 { font-size: 16.8px;}h4 { font-size: 15.4px;}h5 { font-size: 14px;}h6 { font-size: 11.2px;}

Tekst główny

body { font-size: 13px;}

Przyciski

.container .button, .container input[type=submit], .container input[type=button], .container button, .container .gameisrunning .continue { font-size: 13px;}

* **Pytania**
#questioncontainer h1 { font-size: 28px;}

Odpowiedzi

.answers label, .answers label span, .answerinput * { font-size: 13px;}
#### Dodawanie obrazka tła

Na stronie Egzaminymożesz to zrobić bezpośrednio przez pulpit nawigacyjny w **Stylizacja > Motyw > Ciemne tło zdjęcia.**

Jednakże, dla **Oceny** oraz **Quizy** potrzebne są następujące linie kodu:

`` html { background: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]') no-repeat center center fixed; background-size: cover;}html body { background: none rgba(59,59,59,0.7);}

|| Aby dodać obrazek tła, musisz najpierw przesłać go na nasze serwery. Możesz to zrobić poprzez dodanie ich do Menedżera plików w jednym z Twoich Egzaminy. Po przesłaniu ich tam, ścieżka CSS zostanie wygenerowana w zakładce **Stylizacja > Własny CSS** zakładka. Możesz następnie skopiować ścieżkę do obrazu/czcionki w swoim arkuszu CSS.
![](https://storage.crisp.chat/users/helpdesk/website/444e0482dab53800/191f704e-8ffa-424c-8fb1-6e4104_sn865.png)
### 2. Kursy
#### Zmiana rodziny czcionek

Jeśli chcesz zmienić rodzaj czcionki w swojej witrynie Kurs, zapoznaj się z listą [Web Safe Fonts](https://www.w3schools.com/cssref/css_websafe_fonts.asp), lub zob [Google Fonts](https://fonts.google.com/). Nie zapomnij zaimportować czcionki do **Menedżer plików** (w **Egzaminy > Styling**), a następnie skopiuj i wklej ścieżkę czcionki do swojego arkusza CSS.

* **Nagłówki**
h1, h2, h3, h4, h5, h6, caption, [ class=heading_h], .examquestion>strong { font-family: "Droid Serif", serif;} * **Tekst korpusu** body { font-family: "Open Sans", sans-serif;}```

Przyciski

button, .button { font-family: "Open Sans", sans-serif;}

Wszystko (ta sama czcionka)

body, h1, h2, h3, h4, h5, h6, caption, *[ class*=heading_h], .examquestion>strong, button, .button { font-family: "Open Sans", sans-serif;}
#### Zmiana wielkości czcionki

* **Nagłówki**

Rozmiary nagłówków są różne dla różnych rozmiarów ekranu

**Tablet i komputer stacjonarny**
@media only screen and (min-width: 40,0625em) { h1 { font-size: 2,55556rem; } h2 { font-size: 2,11111rem; } h3 { font-size: 1,66667rem; } h4 { font-size: 1,11111rem; } h5 { font-size: 1rem; } h6 { font-size: 1rem; }}```

Mobile

h1 { font-size: 1,88889rem;}h2 { font-size: 1,55556rem;}h3 { font-size: 1,22222rem;}h4 { font-size: .77778rem;}h5 { font-size: 1rem;}h6 { font-size: 1rem;}

Wszystkie rozmiary ekranu

h1 { font-size: 1,88889rem;}h2 { font-size: 1,55556rem;}h3 { font-size: 1,22222rem;}h4 { font-size: .77778rem;}h5 { font-size: 1rem;}h6 { font-size: 1rem;}@media only screen and (min-width: 40,0625em) { h1 { font-size: 2,55556rem; } h2 { font-size: 2,11111rem; } h3 { font-size: 1,66667rem; } h4 { font-size: 1,11111rem; } h5 { font-size: 1rem; } h6 { font-size: 1rem; }}

Tekst główny

p, li, th, td, label, input, select, textarea, .qtype, .errorMessage, .assessboard p, .assessboard li, .contentcontainer .col12 .singleaxisscorecard p, .contentcontainer .col12 .singleaxisscorecard li {font-size: 1rem;}

Przyciski

button, .button { font-size: .88889rem;}

Pytania

#questioncontainer h1 { font-size: 28px;}

* **Odpowiedzi**
.answers label>span, .answers label { font-size: .8rem;}```
Dodawanie tła

Nie jest możliwe użycie CSS do dodania obrazu tła dla Kursy. Będziesz musiał dodać obrazek tła bezpośrednio z Styling zakładki Styling. Aby uzyskać więcej informacji, zapoznaj się z Opcje stylizacji dla Kursy artykułu.


Zmień rozmiar obrazu

Aby użyć logo w Kurs, prawdopodobnie będziesz musiał zmienić jego rozmiar. Dlatego użyj tego narzędzia, aby zmienić rozmiar logo przed załadowaniem go do Amazon: Online Image Resizer.

Prześlij obraz. W razie potrzeby możesz go przyciąć, ale jeśli nie jest to konieczne, przejdź bezpośrednio do kroku 4. . W ostatnim polu wpisz liczbę "108" i zaznacz pole wyboru w ten sposób:



Teraz pobierz logo. PNG jest najlepszym rozwiązaniem.

Załaduj logo

Aby używać logo, musisz wgrać to zdjęcie na nasze serwery. Proszę dodać je do Egzamin > Styling > File manager i skopiuj i wklej ścieżkę CSS na dole zakładki Custom CSS, aby użyć go w swoim Kurs.

Obliczanie właściwej szerokości

W CSS, będziesz musiał określić wysokość i szerokość dodawanego logo. Musisz przestrzegać współczynnika proporcji logo, więc potrzebujesz do tego kalkulatora: Easy Aspect Ratio Calculator. Oto jak go używać:

Znajdź najpierw aktualne wymiary swojego zdjęcia. Przejdź do logo, które właśnie załadowałeś w swoim Eksploratorze, kliknij na nim prawym przyciskiem myszy i kliknij Właściwości. Wybierz zakładkę Szczegóły. Zobaczysz swoje wymiary wyszczególnione na górze
Przejdź do kalkulatora online. Wpisz szerokość i wysokość obrazka (tę we właściwościach), wybierz Nowa wysokość i wpisz nową wysokość (patrz poniżej po background-size, druga wartość to wysokość, którą chcesz).
Kalkulator powie coś w stylu: "Oto nowa szerokość! Nowa szerokość", a twoja liczba jest tam! Zaokrąglij tę liczbę do najbliższego jednego (nie ma czegoś takiego jak pół piksela).
Logo po lewej stronie (obok przycisku menu)

Zwróć uwagę, że poniższy obrazek został wystylizowany bezpośrednio z przycisku menu, a do logo został dodany jednolity kolor tła z wypełnieniem wewnątrz. Jeśli chcesz, aby to było inne, musisz pobawić się z background-size i background-position (zobacz przykład poniżej).

.tab-bar::after { background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]'); background-repeat: no-repeat; background-position: right top; background-size: 156px 51px; content: ''; display: block; position: relative; float: left; width: 156px; height: 51px;}@media only screen and (min-width: 64,063em) { .tab-bar::after { background-size: 165px 54px; width: 165px; height: 54px; }}@media only screen and (max-width: 40em) { .tab-bar::after { width: 138px; height: 45px; background-size: 138px 45px; }}
#### Logo po prawej stronie

Zwróć uwagę, że poniższy obrazek został wystylizowany tak, aby miał lekkie wyściełanie z boku i u góry. Jeśli tego nie chcesz, możesz ustawić wysokość obrazka na 54px dla desktopów i 45px dla mobile i ustawić _background-position_ na _top right_ zamiast tego (zobacz przykład powyżej). Obrazek zajmie całą wysokość górnego paska i będzie się trzymał krawędzi okna.
.tab-bar { background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]'); background-position: top 10px right 10px; background-repeat: no-repeat; background-size: 117px 40px;}@media only screen and (max-width: 40em) { .tab-bar { background-position: right 10px center; background-size: 102px 35px; }} #### Logo na dole po lewej lub prawej stronie

Dostosuj _width_, _height_ i _background-size_ do wymiarów swojego obrazu

W poniższym przykładzie logo jest wyrównane do prawej strony. Aby wyrównać je do lewej strony, zmień _right: 0_ na _left: 0_

Jeśli potrzebujesz, aby logo było trochę od krawędzi, napisz rzeczy takie jak _right: 10px_ i _bottom: 10px_.
.main-section .ui-page::after { content: ''; display: block; width: 102px; height: 35px; background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]'); background-size: 102px 35px; background-repeat: no-repeat; background-position: center; position: absolute; right: 0; bottom: 0; z-index: 99;}```
Czy ten artykuł był pomocny?
Anuluj
Dziękuję!