Miten io-tech paremman näköiseksi?

[hrnr]

Uusi io-tech foorumi tuoksuu ja tuntuu hyvältä!

Silti se jostain syystä hieman kirvelee ja polttaa verkkokalvoja, jopa tummalla teemalla. Missä vika? Häikäsee, pomppii silmille, ahistaa...
Keskustelua aiheesta. Tässä ensimmäinen puheenvuoro.

Itse olisin mieltynyt enemmän allaolevaan säyseämpään värimaailmaan, jossa avatarit ois näkyvillä mutta eivät silti tulisi ihan päin näköä.

Mitä parannuksia muilla ois mielessä? Avaan keskustelun.

Aiheet:

Keskustelu:

Tuossa ohjeet teemojen käyttöönottoon:

Lataa Stylish plug-in ja lisää muutama CSS-tagi.

Firefox:
https://addons.mozilla.org/fi/firefox/addon/stylish/

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("bbs.io-tech.fi") {
  .messageUserBlock div.avatarHolder img {
      filter: grayscale(60%);
  }

  .messageUserBlock div.avatarHolder {
      background-color: rgb(37, 37, 37);
  }

  .messageUserBlock .extraUserInfo {
      background-color: rgb(37, 37, 37);
  }

  .messageUserBlock {
      background-color: rgb(47, 47, 47);
  }

  .messageHeading {
      background-color: rgb(47, 47, 47);
  }

  .XenBase .messageMeta {
      font-size: 12px;
      color: rgb(204, 204, 204);
      background-color: inherit;
  }

  .discussionListItem .posterAvatar .avatar img {
      filter: opacity(40%);
  }
}

Chrome, Vivaldi: https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=fi

.messageUserBlock div.avatarHolder img {
    filter: grayscale(60%);
}

.messageUserBlock div.avatarHolder {
    background-color: rgb(37, 37, 37);
}

.messageUserBlock .extraUserInfo {
    background-color: rgb(37, 37, 37);
}

.messageUserBlock {
    background-color: rgb(47, 47, 47);
}

.messageHeading {
    background-color: rgb(47, 47, 47);
}

.XenBase .messageMeta {
    font-size: 12px;
    color: rgb(204, 204, 204);
    background-color: inherit;
}

.discussionListItem .posterAvatar .avatar img {
    filter: opacity(40%);
}

***

EDIT!
ÄLÄ KÄYTÄ "Stylish" LISÄOSAA. VIEPI SIVUHISTORIAS MENNESSÄÄN.

Varmaan tännekin hyvä laittaa tämä:

Alkuperäinen kirjoittaja oselotti: ↑
Stylish niminen selaimen lisäosa varastaa selaimen sivuhistorian ja lähettää sen ohjelman kehittäjille.

• "Stylish" browser extension steals all your internet history | Robert Heaton

Poistin itse Stylishin välittömästi ja siirryin ajamaan Tampermonkeyn kautta tyyliä.

 

[Kinkkki]

voi poistaa

 

[Rantakemisti]

Ehdotuksia kannattaa laittaa suoraan palauteketjuun. Sampsa on kuunnellut todella hyvin jäseniä ja monia minunkin tarjoamia CSS-fiksejä on otettu suoraan käyttöön.

 

[TSN]

En oikein arvosta sitä, että "pilaatte" avatar-kuvat tuollaisella säätämisellä.. Itse ainakin käytän aina jonkin verran aikaa omien avatar-kuvien muokkaamiseen. Vähän sama kuin menisi taidenäyttelyyn aurinkolasit päässä.

 

[penttip]

En oikein arvosta sitä, että "pilaatte" avatar-kuvat tuollaisella säätämisellä.. Itse ainakin käytän aina jonkin verran aikaa omien avatar-kuvien muokkaamiseen. Vähän sama kuin menisi taidenäyttelyyn aurinkolasit päässä.

Mitäs jos mulla on ne avatarit kokonaan poissa päältä? Onko se vähän niin kuin sokea menisi taidenäytteyyn?

 

[Mr. Pink]

Sanoisin, että nyky-Muroon verrattuna – ja muutenkin – on tämä palsta todella hyvän näköinen. Käytän itse vaaleaa teemaa, johon en oikeastaan edes kaipaa mitään muutosta. Ketjulistauksesta otin avatarien näyttämisen pois päältä (onnistuu suoraan palstan asetuksista).

 

[hokkis]

Sanoisin, että nyky-Muroon verrattuna – ja muutenkin – on tämä palsta todella hyvän näköinen. Käytän itse vaaleaa teemaa, johon en oikeastaan edes kaipaa mitään muutosta. Ketjulistauksesta otin avatarien näyttämisen pois päältä (onnistuu suoraan palstan asetuksista).

Nyt kun silmä on tottunut tähän uuteen teemaan, niin tuo muron vanha ulkoasu näyttää kieltämättä aika antiikkiselta.

 

[ErrorFile]

Tumma teema on nykykunnossaan aika hyvä, mikään ei hypi silmille. Vaaleasta teemasta en osaa sanoa, kun ei tule käytettyä sitä ollenkaan.

 

[reikäkortti]

Tollanen räpellys tuli väännettyä kun vitutti turhan vaikealukuinen perus io-tech:
https://userstyles.org/styles/133965/io-tech-usability-plus

Ei muuta perusilmettä oikeastaan, vaan tiivistää foorumia, pienentää fontteja, vähentää turhaa paddingia yms. lukemisen helpottamiseksi. Asentaessa vois myös togglea, että mitä kaikkea roinaa haluaa muokata ja mikä jätetään defaultiksi. Toimii tummalla ja vaalealla.

Lähinnä itseäni varten tehty, mutta käyttäkää muutkin ihmeessä jos siltä tuntuu.

Pari screenshottia vertailun vuoksi:

Spoileri: Ketjulista default

Spoileri: Ketjulista custom

Spoileri: Viestit default

Spoileri: Viestit custom

 

[Sampsa]

Tollanen räpellys tuli väännettyä kun vitutti turhan vaikealukuinen perus io-tech:
https://userstyles.org/styles/133965/io-tech-usability-plus

Ei muuta perusilmettä oikeastaan, vaan tiivistää foorumia, pienentää fontteja, vähentää turhaa paddingia yms. lukemisen helpottamiseksi. Asentaessa vois myös togglea, että mitä kaikkea roinaa haluaa muokata ja mikä jätetään defaultiksi. Toimii tummalla ja vaalealla.

Lähinnä itseäni varten tehty, mutta käyttäkää muutkin ihmeessä jos siltä tuntuu.

Pari screenshottia vertailun vuoksi:

Spoileri: Ketjulista default

Spoileri: Ketjulista custom

Spoileri: Viestit default

Spoileri: Viestit custom

Noi pyöreät avatarit aika jees

 

[Sampsa]

Ja tosiaan, kannustan kaikkia muokkaamaan ulkoasun mieleisekseen ja vaikka jakamaan tänne omia teemoja ja oivalluksia.

 

[reikäkortti]

Ja tosiaan, kannustan kaikkia muokkaamaan ulkoasun mieleisekseen ja vaikka jakamaan tänne omia teemoja ja oivalluksia.

 

[Kleimo]

Laitetaas omakin räpellys jakoon. https://userstyles.org/styles/133953/io-tech-fi-bbs-improved-dark

Perustuu pitkälti muroon tekemään teemaan koska silmä on siihen tottunut.

 

[Router]

Silmiä ärsyttää liika kontrasti esim musta-valkoinen. Tumma on nyt liian tumma ja vaalea liian vaalea.
Saisiko enemmän teemoja kuin nuo 2 ääripäätä?
Esim tuo alla oleva harmaa pohja valkoisella tekstillä toimii hyvin ja näyttää pirteältä.

 

[Eliasta Pani Karhu]

Itselleni tämä tumma teema on aivan tarpeeksi jees. Puhelimella selatessa (normi selain) oli heti paljon miellyttävämpi kuin esmes murobbs nykyisin (joka on aika hanurista puhelimella).

 

[Sampsa]

Silmiä ärsyttää liika kontrasti esim musta-valkoinen. Tumma on nyt liian tumma ja vaalea liian vaalea.
Saisiko enemmän teemoja kuin nuo 2 ääripäätä?
Esim tuo alla oleva harmaa pohja valkoisella tekstillä toimii hyvin ja näyttää pirteältä.

Tässä tullaan juuri siihen että kaikkia ei voi miellyttää, toisesta fontti on iso, toisesta pieni, toinen tykkää jostain väristä, toinen ei. Tarjolla on tumma ja vaalea teema ilman radikaaleja linjoja, jokainen voi muokata niistä eteenpäin itselle sopivan

 

[hokkis]

Tollanen räpellys tuli väännettyä kun vitutti turhan vaikealukuinen perus io-tech:
https://userstyles.org/styles/133965/io-tech-usability-plus

Ei muuta perusilmettä oikeastaan, vaan tiivistää foorumia, pienentää fontteja, vähentää turhaa paddingia yms. lukemisen helpottamiseksi. Asentaessa vois myös togglea, että mitä kaikkea roinaa haluaa muokata ja mikä jätetään defaultiksi. Toimii tummalla ja vaalealla.

Lähinnä itseäni varten tehty, mutta käyttäkää muutkin ihmeessä jos siltä tuntuu.

Pari screenshottia vertailun vuoksi:

Spoileri: Ketjulista default

Spoileri: Ketjulista custom

Spoileri: Viestit default

Spoileri: Viestit custom

Todella hyvä räpellys mielestäni, otin heti käyttöön.

 

[Pertti Kosunen]

Itselleni tämä tumma teema on aivan tarpeeksi jees.

+1

Tumma teema on minusta kontrasteiltaan melko hyvä, ei kaipaa suuria muutoksia.

 

[shepherde]

Kiitos @bcha , otin itsekin käyttöön samantien.

 

[Router]

Tuossa itselle mieleinen tumma Stylish teema FFlle joka ei riko mitään pikaisella kokeilulla. Toimii kun foorumin oma tumma teema valittuna.


@-moz-document domain("bbs.io-tech.fi") {

html > * {
background-color: #1f1f1f !important;
color: #dcdccc !important;
border-color: black !important;
}

a {
color: #efdcbc !important;
}

a:visited {
color: #cfac9c !important;
}

body input, body textarea, body select, body button {
background-color: #4f4f4f !important;
color: #dcdccc !important;
border: 1px solid black !important;
}

Sitten vielä suurennan tekstiä silmien rasituksen minimoimiseksi esim. tuolla https://addons.mozilla.org/en-US/firefox/addon/zoom-page/ niin näytää tuolta:

Alkuperäinen globaali teema joka siis tekee saman kaikille sivuille:
https://userstyles.org/styles/1603/dark-zenburn-global-style

Miksiköhän tuo ei toimi Chrome pohjaisilla? Jos joku osaa muokata tuon Chromelle niin voisi pistää jakoon.

 

[Sampsa]

Tämän sisällön näkemiseksi tarvitsemme suostumuksesi kolmannen osapuolen evästeiden hyväksymiseen.
Lisätietoja löydät evästesivultamme.

Hyväksy kolmannen osapuolen evästeet

Hyvännäköinen

 

[pniemi]

Kiitokset @bcha :lle myös, pienillä viilauksilla huikea parannus luettavuuteen.

 

[samiv]

Olisikohan jotain sellaista css koodia, jolla avatar kuvat saisi harmaiksi ja ehkä samalla hiukan himmeiksi?

Asetuksistahan ne saa kokonaan piiloon onneksi, mutta jos niiden värimailman saisi siistiksi ja sellaiseksi että ne näkyvät mutta himmeinä ja harmaasävyisinä niin se voisi olla parempi.

 

[Kleimo]

Olisikohan jotain sellaista css koodia, jolla avatar kuvat saisi harmaiksi ja ehkä samalla hiukan himmeiksi?

Asetuksistahan ne saa kokonaan piiloon onneksi, mutta jos niiden värimailman saisi siistiksi ja sellaiseksi että ne näkyvät mutta himmeinä ja harmaasävyisinä niin se voisi olla parempi.

.avatar img {
filter: grayscale(100%) !important;
}

 

[hrnr]

DIY kehitysketjuksi tämä oli tarkoitettu. Ei mihinkään pakotetaan kaikki samaan ruotuun, nuija pöytään ja pää pölkylle karnevaaliksi.


edit

Kuten Kleimo jo totesi tai keskustelu ketjuissa:
.messageUserBlock div.avatarHolder img {
filter: grayscale(100%) !important;
}

 

[reikäkortti]

Vähän tuli omaa puukotusta (https://userstyles.org/styles/133965/io-tech-usability-plus) taas updatettua, lisäsin ainakin viesteihin upotettujen kuvien max leveyden säädön kun vakiona helvetin isoja ja klikkaamalla saa kuitenkin täysikokoiseksi jos tarvetta. Ehkä jotain muutakin tullu tässä viime viestin jälkeen lisättyä, en muista enkä ole jaksanut listata muutoksia.

Edit: Foorumilistaakin tiivistetty vielä vähä lisää.
Edit2: Viestejä myös hieman tiivistetty lisää.

Spoileri: Vakio

Spoileri: Säätö

 

[freekevin]

Ihan oikeasti Sampsa?
Miten luulet stylen ja muiden selainkohtaisten säätöjen auttavan minua ja luultavasti monia muita joita ei vaan vittu kinosta säätää (niitä kaikkia laitteita joilla selaa iobbsia) ja jotka eivät voi vaikuttaa laitteisiin joilla selaavat iobbsia? Voisitko tiivistää ja tehdä tästä käyttäjäystävällisemmän niin ei tarvitse niiden säätää, jotka eivät sitä halua. Nyt tilanne on se, että ne säätää jotka osaa ja loput kärsii. Kukaan ei ole tyytyväinen nykyiseen. Katsoitko edes niitä laittamiani esimerkki kuvia? Luulisi, että itsekkin ymmärtäisit jos katsoisit.

Spoileri: sampsan painajainen

https://bbs.io-tech.fi/threads/iobbs-hirveaen-naekoeinen.4319/

 

[Sampsa]

Viestien headerin väri vaihdettu siniseksi, tuo tyhjä tila johtuu siitä että tuo vasemman reunan käyttäjätiedotalue täytyy olla tietyn korkuinen.

 

[freekevin]

Miksi siinä käyttäjätiedotealueella pitää olla noin paljon (tyhjää) tilaa? Jos tilaa ei saa pienemmäksi niin täytä se sillä puutuvalla tiedolla edes.
Kiitos sinisestä

 

[Sampsa]

Miksi siinä käyttäjätiedotealueella pitää olla noin paljon (tyhjää) tilaa? Jos tilaa ei saa pienemmäksi niin täytä se sillä puutuvalla tiedolla edes.
Kiitos sinisestä

Olet itse poistanut kuvankaappauksen perusteella avatarit..

 

[penttip]

Vaikka en freekevinin postaustyylistä pidäkään, niin olen samaa mieltä.

Ei kai herran vuonna 2016 voi olla mahdotonta se, että elementit skaalautuu oikein jos avatarit piilottaa? Luulisi foorumilta löytyvän joku CSS guru, joka tuon osaa korjata?

Sinällään ongelmahan on ihan sama oli avatarit näkyvissä tai ei, mutta avatar-näkymässä ei taida olla muuta ratkaisua ongelmaan kun piilottaa jotain tauhkaa tuosta sivupalkista (esim tykkäykset ja viestit)

 

[Sampsa]

Vaikka en freekevinin postaustyylistä pidäkään, niin olen samaa mieltä.

Ei kai herran vuonna 2016 voi olla mahdotonta se, että elementit skaalautuu oikein jos avatarit piilottaa? Luulisi foorumilta löytyvän joku CSS guru, joka tuon osaa korjata?

Sinällään ongelmahan on ihan sama oli avatarit näkyvissä tai ei, mutta avatar-näkymässä ei taida olla muuta ratkaisua ongelmaan kun piilottaa jotain tauhkaa tuosta sivupalkista (esim tykkäykset ja viestit)

Joo on tän parissa painittu muutamaan otteeseen jo tässä parin viikon aikana, mutta vielä ei ole keksitty ratkaisua

 

[IDDQD]

Onhan täällä CSS-guruja varmasti useampikin. Itseä nykytyylissä ahdistaa se, että jokaikinen elementti on täynnä borderia, palkkia, eri taustaväriä ja palikkaa. Kliini ja yksinkertainen tyyli on nykyaikaa, 2000-luvun alku pyytää table-ulkoasuaan takaisin

 

[Sampsa]

Vaikka en freekevinin postaustyylistä pidäkään, niin olen samaa mieltä.

Ei kai herran vuonna 2016 voi olla mahdotonta se, että elementit skaalautuu oikein jos avatarit piilottaa? Luulisi foorumilta löytyvän joku CSS guru, joka tuon osaa korjata?

Sinällään ongelmahan on ihan sama oli avatarit näkyvissä tai ei, mutta avatar-näkymässä ei taida olla muuta ratkaisua ongelmaan kun piilottaa jotain tauhkaa tuosta sivupalkista (esim tykkäykset ja viestit)

Onhan täällä CSS-guruja varmasti useampikin. Itseä nykytyylissä ahdistaa se, että jokaikinen elementti on täynnä borderia, palkkia, eri taustaväriä ja palikkaa. Kliini ja yksinkertainen tyyli on nykyaikaa, 2000-luvun alku pyytää table-ulkoasuaan takaisin

Ehdotukset otetaan avosylin vastaan

 

[freekevin]

Olet itse poistanut kuvankaappauksen perusteella avatarit..

vs tiivistetympi muro

HUOMAATKO ERON?

ja kännykällä iobbs on vielä vittumaisempi

 

[jonkka]

Kukaan ei ole tyytyväinen nykyiseen.

En ole antanut sulle lupaa puhua puolestani.

 

[Sampsa]

HUOMAATKO ERON?

ja kännykällä iobbs on vielä vittumaisempi

kyllä se ero on tiedossa. kyse ei ole siitä etteikö sitä haluaisi ottaa pois, vaan kyse on siitä miten se otetaan pois.

 

[IDDQD]

.message .messageInfo{
    min-height: 235px;
}

 

[Sampsa]

.message .messageInfo{
    min-height: 235px;
}

Kokeiles johonkin vähän pidempään viestiin ja vaihda toi 235px vaikka -> 100px niin tuo käyttäjätietojen ja viestin välinen viiva katkeaa kesken.

 

[Sampsa]

Onko käyttäjän nimimerkin alla oleva teksti "jäsen" tai "uusi jäsen" tarpeellinen?

Toki adminilla ja moderaattoreilla se kuvaus saa ja pitääkin olla.

Ei ole, otin pois.

 

[IDDQD]

Kokeiles johonkin vähän pidempään viestiin ja vaihda toi 235px vaikka -> 100px niin tuo käyttäjätietojen ja viestin välinen viiva katkeaa kesken.

Johtuu siitä, että se border-left -tyyli on alunperin laitettu "väärälle" elementille, eli tuolle messageInfolle. Eikös sen borderin ole tarkoitus olla tuolla messageUserInfo tai messageUserBlock -elementillä, joka sisältää käyttäjän tiedot?

 

[Sampsa]

Johtuu siitä, että se border-left -tyyli on alunperin laitettu "väärälle" elementille, eli tuolle messageInfolle. Eikös sen borderin ole tarkoitus olla tuolla messageUserInfo tai messageUserBlock -elementillä, joka sisältää käyttäjän tiedot?

Joo kokeilin sitäkin, mutta en keskinyt miten se saa tuolle messageUserInfolle niin että borderin korkeus olisi 100%. Yhtenä vaihtoehtona kokeilin että iskisin tuolla bottom borderin niin siitä jäisi semmonen laatikko, mutta ei sekään nyt ehkä kaikkein fiksummalta näyttänyt.

Sitten olen miettinyt jos tuon koko viivan poistaisi ja säätäisi eri värisävyt viestipohjalle ja tolle userinfo alueelle.

 

[IDDQD]

Joo kokeilin sitäkin, mutta en keskinyt miten se saa tuolle messageUserInfolle niin että borderin korkeus olisi 100%. Yhtenä vaihtoehtona kokeilin että iskisin tuolla bottom borderin niin siitä jäisi semmonen laatikko, mutta ei sekään nyt ehkä kaikkein fiksummalta näyttänyt.

Sitten olen miettinyt jos tuon koko viivan poistaisi ja säätäisi eri värisävyt viestipohjalle ja tolle userinfo alueelle.

Mikähän siellä on sitä sit rikkonut? Tässä nopeasti läppärillä ja pienellä näytöllä räpeltäessä menee kuten pitääkin, kun viestiltä poistaa minimikorkeuden ja siirtää borderin .messageUserInfo -elementille.

 

[Sampsa]

Mikähän siellä on sitä sit rikkonut? Tässä nopeasti läppärillä ja pienellä näytöllä räpeltäessä menee kuten pitääkin, kun viestiltä poistaa minimikorkeuden ja siirtää borderin .messageUserInfo -elementille.

Tsekkaa miltä näyttää kun on pidempi/korkeampi viesti. Mulla borderi se katkeaa kesken tuohon tykkäykset kohdalle + tuo borderi ilmestyy ihan alas editorin viereiseen avatariin..

 

[IDDQD]

Tsekkaa miltä näyttää kun on pidempi/korkeampi viesti. Mulla borderi se katkeaa kesken tuohon tykkäykset kohdalle + tuo borderi ilmestyy ihan alas editorin viereiseen avatariin..

Hmm. Varmaan helpoin sitten, kun tiputtaa tuon viestialueen minimikorkeuden mahdollisimman pieneksi ilman, että borderi "katkeaa".

 

[Sampsa]

Hmm. Varmaan helpoin sitten, kun tiputtaa tuon viestialueen minimikorkeuden mahdollisimman pieneksi ilman, että borderi "katkeaa".

Arvaa mikä se nyt on

 

[IDDQD]

Arvaa mikä se nyt on

Mulla antaa laittaa 189px avatarien kanssa, sen jälkeen katkeaa Mutta joo, mielipidekysymyksiähän nämä kaikki on. Itse pyrkisin välttämään bordereita hyvän maun rajoissa ja käyttäisin ennemmin elementeillä sitten lähellä toisiaan olevia värejä, joihinkin elementteihin sitten vähän isompaa eroa (kuten nyt tuo viestien yläpalkki).

 

[Sampsa]

Mulla antaa laittaa 189px avatarien kanssa, sen jälkeen katkeaa Mutta joo, mielipidekysymyksiähän nämä kaikki on. Itse pyrkisin välttämään bordereita hyvän maun rajoissa ja käyttäisin ennemmin elementeillä sitten lähellä toisiaan olevia värejä, joihinkin elementteihin sitten vähän isompaa eroa (kuten nyt tuo viestien yläpalkki).

Esim. mun on tolla Sysop-tekstillä ja nauhalla ja parilla lisäpikselillä aika lähellä se 235px..

 

[IDDQD]

Imo noita bordereita ei edes tarvitse mihinkään

 

[freekevin]

Noi perkeleen avatarit pienemmäksi (ei tosin auta vaikka ottaisi pois käytöstä). Mutta ihan järkyttävästi on tyhjää. Jos katsoo esim. Sampsan viimeistä postausta niin vähän yli puolet on tyhjää.

Arvostan että yrität edes tehdä asialle jotain.