Sisällön valinta ja muuttaminen CSS-injektoinnilla

Yleisin tarve CSS-injektoinneille on turhien asioiden poistaminen näkyvistä ja näytettävien asioiden uudelleenmuotoilu

Muista kunnioittaa tekijänoikeuksia. Jos käytät toisen tekemää aineistoa ja muutat siinä näkyviä asioita ja niiden esitystapaa,tulee sinulla olle tähän alkuperäisen aineiston tekijän lupa. 

Ohje on tarkoitettu sellaisille käyttäjille, jotka osaavat entuudestaan HTML- ja CSS-kieliä.

 

Tässä yksinkertaisin mahdollinen esimerkki, jossa kuvitteellisen www-sivun uutispalsta (news-div) tehdään näkyväksi: 

*            { visibility:hidden; background:transparent; }
div#news     { visibility:visible; position:fixed; top:0; left:0; width:500px; zoom:200%; }
div#news *   { visibility:visible; }
a.readmore { display:none; }
Esimerkkisripti rivi riviltä selitettynä:
  1. Poista taustakuvat ja –värit. Tee kaikista diveistä näkymättömiä.
  2. Tee tarvittavasta divistä (#news) näkyvä ja sijoita se vasempaan ylänurkkaan. Anna sille sopiva leveys, ja suurenna isommaksi.
  3. Tee divin (#news) sisällä olevista elementeistä näkyviä.
  4. Piilota tiiviiden uutisten Lue lisää -linkit.

Kirjoita vastaava CSS-koodi oman www-sivusi mukaisesti. 

 

Luotu 17.8.2022 TP