Tumma teema kokeiltavana io-tech.fi

[erihyva]

Jeps, uusin Nokia 3-artikkeli

Hinta.fi-boksien väri ei mätsää teemaan

 

[Juha Kokkonen]

Saisiko vielä uutisten hinta.fi laatikot sopiviksi tummalle teemalle?

Jeps, uusin Nokia 3-artikkeli




Hinta.fi-boksien väri ei mätsää teemaan

Juu, tuo boksi on vähän hankala, kun tulee tämän sivuston ulkopuolelta, joten se ei osaa automaattisesti mukautua valittuun teemaan. Mutta siihen on kyllä tekeillä jonkinlainen ratkaisu.

 

[aleksejjj]

Tummasta teemasta on puuttunut tiettyjen elementtien kohdalla vaaleasta teemasta tuttua kontrastia tai elementtien hoveroiminen tummalla teemalla ei tee cubic-bezier-liukuefektiä, joka on monessa otsikossa ja sivupalkin teksteissä.

Sivun ylhäällä on Kaikki - Tietotekniikka - Mobiili -valikko, johon kopsasin vaaleasta saman hover-käytöksen:

.filtteri input[type=radio] + label:hover {
    border-bottom: 6px solid #4a899f;
    color: #2AB255;
}

Sivun varsinaisessa sisällössä eli uutisissa tagit erottuvat aika heikosti. Ei niitä tarvitse erityisesti mainostaa siellä, mutta ne on hyödyllisiä, jos haluaa mennä katsomaan arkistoja:

.uutinen .avainsanat a, .arkisto-uutinen .avainsanat a {
    background-color: #043c4e;
}

Sitten se asia kuntoon, että kun hiiren vie jonkin klikattavan elementin päälle, sen tekstin väri liu'utetaan vihertäväksi. Lähdekoodia vilkaisin ja luulen, että tummalla teemalla teksti halutaan harmaaksi oletuksena ja siitä hoverilla vihreäksi. Ota !important-merkintä seuraavasta css-säännöstä pois lähdekoodista:

.style-light a {
    color: #c7c7c7;
}

Nyt voidaan sivupalkin tekstit laittaa oletukseksi siihen harmaan sävyyn, jossa se kirjoitushetkellä on - lisäksi myös hover-efekti toimii:

.mobiili-uutiset .muutinen .tekstit a {
    color: #c7c7c7;
}
ul.tabilista li.tabilista-item a {
    color: #c7c7c7;
}
.style-light .widget-container a {
    color: #c7c7c7;
}
.widget.widget_rss ul li a {
    color: #c7c7c7;
}

******

Koko roska spoilerissa, jos haluaa testata ennen kuin menee tuotantoon, spoilerin sisällön kun kopsaa vaikka Stylish-selainplugariin ja muistaa käsipelillä käydä poistamassa yllämainitun !important-säännön, niin homman pitäisi toimia.

Spoileri: css

/*****************  Vaakasuuntainen linkkipalkki *****************/
.filtteri input[type=radio] + label:hover {
    border-bottom: 6px solid #4a899f;
    color: #2AB255;
}

/*****************  Varsinainen sisältö *****************/
.uutinen .avainsanat a, .arkisto-uutinen .avainsanat a {
    background-color: #043c4e;
}
.style-light a {
    color: #c7c7c7; /* poista !important tästä säännöstä */
}

/***************** Sivupalkin tekstin värit *****************/
.mobiili-uutiset .muutinen .tekstit a {
    color: #c7c7c7;
}
ul.tabilista li.tabilista-item a {
    color: #c7c7c7;
}
.style-light .widget-container a {
    color: #c7c7c7;
}
.widget.widget_rss ul li a {
    color: #c7c7c7;
}

Tälle viestille bump, onko mahdollista toteuttaa?

Lisäksi vielä boldaukset kuntoon:

p > b {
    color: #ccc !important;
}

 

[Sampsa]

Katson jossain vaiheessa läpi, mitä kaikkea tuossa oli ehdotettu.