Ten artykuł jest również dostępny w:
Dzięki planom Corporate i Enterprise Owl, możliwa jest edycja CSS Twoich treści nauczania.

Możesz chcieć zmienić czcionki, kolory, kształty przycisków i tło swoich testów i kursów stworzonych za pomocą Easy LMS. Jednym ze sposobów jest dostosowanie ustawień w zakładce Stylizacja** na stronie , ale możesz chcieć wprowadzić 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 uzyskać dostęp do tej funkcji, należy posiadać plan Firmowy lub Enterprise Owl Plan.

W zależności od Twoich umiejętności CSS, istnieje wiele zmian, które możesz wprowadzić do interfejsu Twoich testów. Mieliśmy klientów, którzy zmienili wygląd paska czasowego, dodali błyskotliwe animowane przejścia i inne świetne rzeczy poprzez niestandardowy CSS.

Quizy, oceny i kursy

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

Jeśli potrzebujesz więcej zmian, wyślemy Ci plik 📂 do dostosowania, abyś mógł go odesłać do nas, a następnie zastosujemy zmiany na Twoim koncie. Prosimy o wysłanie prośby za pośrednictwem czatu.

Zmiany w CSS mogą być zastosowane w szczególności do Quizu, Oceny lub Kursu pod adresem , lub na całym koncie (jeśli chcesz użyć tych samych ustawień dla każdej treści, którą tworzysz). CSS może być zapisany jako lista w dokumencie notatnika i wysłany do nas. Następnie zaimplementujemy go na Twoim koncie.

Egzaminy

Możesz edytować CSS Twojego egzaminu bezpośrednio z Twojego konta. Wejdź na swoją stronę Egzamin > Stwórz > Stylizacja > Własny CSS:



W zakładce Menedżer plików można również przesłać swoje czcionki i obrazy do wykorzystania w arkuszu stylów CSS (sprawdź ten artykuł, aby dowiedzieć się więcej):



Dla przykładu, jest to link do Egzaminu, który został wystylizowany z dostępnymi ustawieniami w Dashboardzie:
https://www.onlineexambuilder.com/general-knowledge-exam-no-css/exam-319288

I to jest ten sam przykład, ale teraz z niestandardową stylizacją CSS:
https://www.onlineexambuilder.com/general-knowledge-exam-css/exam-276765

Wszystkie zmiany dokonane w zakładce Stylizacja będą od tego momentu stosowane do Twojego egzaminu, nawet jeśli jest on już istniejący lub jest osadzony na stronie internetowej.

Niestandardowy arkusz oszustwa CSS

Nasi ukochani projektanci podzielili się fragmentami kodu, które możesz wykorzystać 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 Exams.
Jeśli chcesz zmienić typ czcionki dla swojej Oceny i Quizu, zobacz listę Czcionek bezpiecznych w sieci, lub zobacz Czcionki Google. Nie zapomnij zaimportować czcionki do menedżera plików (w Exams > Styling), a następnie skopiuj i wklej ścieżkę czcionki do swojego arkusza CSS.

Nagłówki

Dotyczy to również pytań.

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

Tekst źródłowy

To obejmuje odpowiedzi.

Ciało: 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, podpis, *[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 {rozmiar czcionki: 28px;}h2, podpis, .heading_h2, .examquestion>strong {rozmiar czcionki: 21px;}h3, .heading_h3 {rozmiar czcionki: 16.8px;}h4 {rozmiar czcionki: 15.4px;}h5 {rozmiar czcionki: 14px;}h6 {rozmiar czcionki: 11.2px;}

Tekst źródłowy

{ rozmiar czcionki: 13px;}

Przyciski

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

Pytania

#questioncontainer h1 { rozmiar czcionki: 28px;}

Odpowiedzi

.answers label, .answers label span, .answerinput * { rozmiar czcionki: 13px;}

Dodawanie obrazu tła

W przypadku Egzaminów można to zrobić bezpośrednio przez deskę rozdzielczą w Stylizacja > Temat > Ciemne tło zdjęciowe.

Jednak w przypadku oceny i Quizów potrzebne są następujące wiersze kodu:

html { background: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_the_file_you_have_uploaded]') centrum bez powtórzeń stałe; rozmiar tła: 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ć dodając je do Menedżera Plików w jednym z Twoich Examsów. Po przesłaniu ich tam, ścieżka CSS zostanie wygenerowana na stronie Stylizacja > Własny CSS. Następnie możesz skopiować i wkleić ten obrazek/czcionkę do swojego arkusza CSS.


2. Kursy

Zmiana rodziny czcionek

Jeśli chcesz zmienić typ czcionki w swoim kursie, zobacz listę Czcionek bezpiecznych w sieci, lub zobacz Czcionki Google. Nie zapomnij zaimportować czcionki do File Manager (w Exams > Styling), a następnie skopiuj ścieżkę czcionki do swojego arkusza CSS.

Nagłówki

h1, h2, h3, h4, h5, h6, podpis, *[class*=heading_h], .examquestion>strong { font-family: "Droid Serif", szeryf;}

Tekst źródłowy

{\i1}Ciało.{\i0} {\i1}Rodzina: "Open Sans", bezszeryfowa.{\i0}

Przyciski

...przycisk, .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 rozmiaru czcionki

Nagłówki

Rozmiary nagłówków różnią się w zależności od wielkości ekranu.

Tablet i biurko

@media only screen and (min-width: 40.0625em) { h1 { rozmiar czcionki: 2.55556rem; } h2 { rozmiar czcionki: 2.11111rem; } h3 { rozmiar czcionki: 1.66667rem; } h4 { rozmiar czcionki: 1.11111rem; } h5 { rozmiar czcionki: 1rem; } h6 { rozmiar czcionki: 1rem; }}

Mobile

h1 { rozmiar czcionki: 1.88889rem;}h2 { rozmiar czcionki: 1.55556rem;}h3 { rozmiar czcionki: 1.22222rem;}h4 { rozmiar czcionki: .77778rem;}h5 { rozmiar czcionki: 1rem;}h6 { rozmiar czcionki: 1rem;}

Wszystkie rozmiary ekranu

h1 {rozmiar czcionki: 1.88889rem;}h2 {rozmiar czcionki: 1.55556rem;}h3 {rozmiar czcionki: 1.22222rem;}h4 {rozmiar czcionki: .77778rem;}h5 {rozmiar czcionki: 1rem;}h6 {rozmiar czcionki: 1rem;}@media tylko ekran i (min. szerokość: 40.0625em) {h1 {rozmiar czcionki: 2,55556rem; } h2 {rozmiar czcionki: 2,11111rem; } h3 {rozmiar czcionki: 1,66667rem; } h4 {rozmiar czcionki: 1,11111rem; } h5 {rozmiar czcionki: 1rem; } h6 {rozmiar czcionki: 1rem; }}

Tekst źródłowy

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

{ rozmiar czcionki: .88889rem;}

Pytania

#questioncontainer h1 { rozmiar czcionki: 28px;}

Odpowiedzi

.answers label>span, .answers label { rozmiar czcionki: .8rem;}

Dodanie tła

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

|Żeby dodać obrazek tła, musisz najpierw przesłać go na nasze serwery. Możesz to zrobić dodając je do Menedżera Plików w jednym z Twoich Examsów. Po przesłaniu ich tam, ścieżka CSS zostanie wygenerowana w zakładce Stylizacja > Własny CSS. Następnie możesz skopiować i wkleić ten obrazek/czcionkę do swojego arkusza CSS.

Dla lepszej czytelności, można dodać kolor nakładki pomiędzy obrazem tła a treścią. Zmień ostatnią cyfrę dla krycia; 0,5 oznacza 50% przezroczystości).

Dla czarnej nakładki:

.off-canvas-wrap { tło: rgba(0, 0, 0, 0.5);}

Dla białej nakładki:

.off-canvas-wrap { tło: rgba(255, 255, 255, 0.5);}



Zmień rozmiar obrazu

Aby użyć logo w Kursie, prawdopodobnie trzeba będzie zmienić jego rozmiar. Dlatego też, proszę użyć tego narzędzia do zmiany rozmiaru logo przed przesłaniem 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. Umieść numer "108" w ostatnim polu i zaznacz pole wyboru, w ten sposób:



Teraz pobierz logo. PNG to Twój najlepszy zakład.

Prześlij logo

Aby skorzystać z logo, należy przesłać ten obraz na nasze serwery. Proszę dodać je do Exam > Styling > File manager i wkleić ścieżkę CSS na dole Subdabu Custom CSS, aby użyć go w swoim Kursie.

Obliczanie właściwej szerokości

W CSS będziesz musiał określić wysokość i szerokość dodawanego logo. Musisz respektować proporcje obrazu logo, więc do tego potrzebny jest kalkulator: Easy Aspect Ratio Calculator. Oto jak go używasz:

Znajdź najpierw aktualne wymiary swojego obrazu. Przejdź do logo, które właśnie przesłałeś w swoim Explorerze, kliknij na nie prawym przyciskiem myszy i kliknij na Właściwości. Wybierz zakładkę Szczegóły. Na górze pojawi się lista Twoich wymiarów:
Przejdź do kalkulatora online. Wprowadź szerokość i wysokość obrazu (ta we właściwościach), wybierz opcję Nowa wysokość i wpisz nową wysokość (patrz poniżej po wielkości tła, druga wartość to wysokość, którą chcesz).
Kalkulator powie coś w stylu: "Oto on! Nowa szerokość", a Twój numer jest tam! Zrób zaokrąglenie tej liczby do najbliższej (nie ma czegoś takiego jak pół piksela).

Logo po lewej stronie (obok przycisku menu)

Należy pamiętać, że poniższy obrazek został wystylizowany bezpośrednio z przycisku menu, a do logo dodano jednolity kolor tła z wyściełaniem wewnątrz. Jeśli chcesz, aby było inaczej, musisz zastosować background-size i background-position (patrz przykład poniżej).

.tab-bar::po {obraz tła: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]'); tło-powtórzenie: bez powtórzenia; tło-położenie: prawy górny róg; rozmiar tła: 156px 51px; zawartość: ''; wyświetlacz: blok; pozycja: względna; pływak: lewy; szerokość: 156px; wysokość: 51px;}@media tylko ekran i (min-szerokość: 64.063em) { .tab-bar::after {rozmiar tła: 165px 54px; szerokość: 165px; wysokość: 54px; }@media only screen and (max-width: 40em) { .tab-bar::after {szerokość: 138px; wysokość: 45px; rozmiar tła: 138px 45px; }}

Logo po prawej stronie

Proszę zwrócić uwagę, że obrazek poniżej został stylizowany na lekko wyściełany z boku i od góry. Jeśli tego nie chcesz, możesz ustawić wysokość obrazu na 54px dla biurka i 45px dla telefonów komórkowych i zamiast tego ustawić background-position na top right (patrz przykład powyżej). Obraz przybierze pełną wysokość górnego paska i przyklei się do krawędzi okna.

.tab-bar {obraz tła: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_the_file_you_have_uploaded]'); pozycja tła: górne 10px prawe 10px; tło-powtarzanie: bez powtórzenia; rozmiar tła: 117px 40px;}@media tylko ekran i (maks. szerokość: 40em) { .tab-bar { pozycja tła: prawy 10px środek; rozmiar tła: 102px 35px; }}

Logo na dole po lewej lub prawej stronie

Wyreguluj szerokość, wysokość i rozmiar tła odpowiednio do wymiarów obrazu.

W poniższym przykładzie logo jest wyrównane do prawej strony. Aby wyrównać je w lewo, zmień right: 0 na left: 0.

Jeśli chcesz, aby logo było trochę od krawędzi, napisz takie rzeczy jak right: 10px i bottom: 10px.

.main-section .ui-page::after { content: ''; wyświetlanie: blok; szerokość: 102px; wysokość: 35px; obraz tła: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]'); rozmiar tła: 102px 35px; tło-powtarzanie: bez powtórzeń; tło-położenie: środek; pozycja: bezwzględna; prawo: 0; dół: 0; z-indeks: 99;}
Czy ten artykuł był pomocny?
Anuluj
Dziękuję!