styling

Hvordan legge til CSS klasser på bilder i Moodle

Hvordan legge til CSS klasser på bilder i Moodle

I Moodle kan man bruke predefinerte CSS klasser som endrer visningen av bildet.

De fleste design i Moodle bruker rammeverket Bootstrap for å bygge selve designet. Det finnes klasser i bootstrap man kan legge til på bildeelementer, her er de forskjellige klassene:

.img-rounded
.img-circle
.img-thumbnail

Klassene .img-rounded og .img-circle gjør seg best der bildene ikke har «transparent» bakgrunn. Når man har transparent bakgrunn vil ikke effekten med avrundede hjørner være synlig.

 

Praktisk eksempel i Moodle 3.2 – bilder

Jeg vil nå legge til klassen .img-thumbnail på bildet.

  1. Trykk rediger i seksjonen der bildet ligger
  2. Trykk på knappen for å få frem alle redigeringsmuligheter i teksteditoren
  3. Velg HTML-visning av innholdet
  4. Finn taggen <img>. Inne i taggen vil du se koden class=»img-responsive …». Se eksempel under:
<img src="http://csumoodle.remote-learner.net/pluginfile.php/2/course/section/1/Moodle_Cloud.png" alt="" role="presentation" class="img-responsive atto_image_button_text-bottom" width="400" height="278">

Jeg legger til klassen img-thumbnail innenfor anførselstegnene i class.

<img src="http://csumoodle.remote-learner.net/pluginfile.php/2/course/section/1/Moodle_Cloud.png" alt="" role="presentation" class="img-responsive img-thumbnail atto_image_button_text-bottom" width="400" height="278">

 

Ferdig resultat:

Nå vises bildet med klassen «thumbnail» definert i html-koden.

 

Posted by Memet Cataltepe in CSS, 0 comments