Vinkkejä edistyneemmille käyttäjille (kikkakolmoset)

Tälle sivulle on koostettu vinkkejä Lukkari-sivuston sisällön elävöittämiseen Content-portletin Koodi-näkymää hyödyntäen. Näitä keinoja tulisi käyttää vain poikkeustapauksissa ja tilanteissa, joissa sivuston omat tyylit eivät esitä sisältöä järkevästi/halutulla tavalla. Oheiset esimerkit toimivat vain, kun ne liitetään tekstieditoriin Koodi-näkymän ollessa päällä:

 

 

Käytännön vinkkejä

  • Koodi-näkymässä syötetyt elementit kuten <style> ja <script> eivät näy normaalissa tekstieditorin muokkaustilassa. Sen vuoksi on järkevää sijoittaa elementit aina Content-portletin loppuun tai alkuun (tai jopa omaan Content-portlettiinsa), jotta sisältöä muokatessa ei vahingossa tule poistaneeksi myös Koodi-näkymän kautta syötettyä koodia.
  • Content-portlettiin syötetty koodi on sivukohtaista. Jos koodi halutaan toistuvan koko sivuston laajuisesti, esim. joka sivulla näkyvän käyttäjäkyselyn upotuskoodi, täytyy se erikseen pyytää Lukkarituesta: verkkotuki@evl.fi. 
  • Content-portletin editori tarkistaa sisällön tallennusvaiheessa. Jos koodissa on virheitä, voi editori korjata ne tai poistaa kokonaan. Kannattaa siis olla tarkkana koodia muokattaessa!

 

Omat tyylimääritykset (CSS-tyyliluokat)

Content-portlettiin voi syöttää tyylejä sekä <style>-tägeihin että elementteihin suoraan ns. inline-tyylimääreinä.
 

Esimerkki 1 (inline-tyylimääre): linkin fonttikoon pienentäminen 

<a href="http://lukkariohje.evl.fi" style="font-size:0.8em;">Pieni linkki</a>

Esimerkki 2 (inline-tyylimääre): kuvan reunojen pyöristäminen 

<img src="/documents/kuvannimi.jpg" style="border-radius:50%;" />

Esimerkki 3 (<style>-tägi): usean tekstikappaleen korostaminen taustavärillä

<p class="korostettu">Lorem ipsum</p>
<p>Ei korostettu</p>
<p class="korostettu">Dolor sit amet</p>
<style>
.korostettu{background:#f9ff5a;}
</style>

Lisätietoa tyylimääreistä: CSS How to

 

Omat skriptimääritykset (JavaScript ja jQuery)

Content-portlettiin voi syöttää sekä <script>-tägiin että elementteihin suoraan JavaScript-koodia. Myös jQuery-komentojen käyttö on mahdollista.

 

Esimerkki 1 (inline-koodi): Viesti-ikkunan näyttäminen tekstielementtiä klikattaessa

<span onclick="alert('Klikkasit tekstiä!')">Klikattava teksti</span>

Esimerkki 2 (inline-koodi ja jQuery): yksittäisen tekstikappaleen piilotus/näyttäminen tekstielementtiä klikattaessa

<p id="piilotettava">Lorem ipsum dolor sit amet</p>
<p><span onclick="jQuery('#piilotettava').toggle();">Piilota/näytä tekstikappale</span></p>

Esimerkki 3 (<script>-tägi ja jQuery): tekstikappaleiden piilotus klikattaessa

<p class="piilotettava">Lorem ipsum dolor sit amet. Klikkaa ja piilota.</p>
<p class="piilotettava">Lorem ipsum dolor sit amet. Klikkaa ja piilota.</p>
<script>
jQuery(".piilotettava").each(function(index) {
    jQuery(this).click(function(){
       jQuery(this).hide();
    });
});
</script> 

Lisätietoa JavaScriptistä: JavaScript Tutorial