Miten io-tech paremman näköiseksi?

[Sampsa]

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.

Sulla on myös selain ilmeisesti +3000 pikseliä leveä eli hirveästi ei teksti rivity ja siitäkin syystä tyhjää on noin paljon.

 

[Persojet]

Hmm. Jos saisi noi käyttäjätiedot näkymään aina tossa viestin yläpalkissa kuten mobiilissa eikä sivussa niin ei tulisi tyhjää ollenkaan.

Vielä kun saisi upattua tyylitiedoston niin että toimisi sillä aina kun kirjautuu

 

[Rantakemisti]

Kokeilin taas näiden tyylien kanssa leikkimistä ja sain tuon viestin korkeuden säädettyä fiksusti sekä poistettua tuon turhan tilan. Eli viestin ei tarvitse olla 235 px korkea, eikä käyttäjätietojen ja viestin välinen viiva katkea. Tämän pitäisi toimia vaikka avatarit ovat piilotettuna.

Tuo väliviiva on vaaleassa ja tummassa teemassa eri värinen, joten kirjoitin kummallekin teemalle omat tyylinsä:

/* Vaalea teema */
.message .messageInfo {
    min-height: 0px!important;
}
@media (min-width: 480px) {

.messageUserInfo {
    border-right: 1px solid rgb(192, 192, 192);
}
}

/* Tumma teema */
.message .messageInfo {
    min-height: 0px!important;
}
@media (min-width: 480px) {

.messageUserInfo {
    border-right: 1px solid rgb(61, 61, 61);
}
}

 

[Sampsa]

Kokeilin taas näiden tyylien kanssa leikkimistä ja sain tuon viestin korkeuden säädettyä fiksusti sekä poistettua tuon turhan tilan. Eli viestin ei tarvitse olla 235 px korkea, eikä käyttäjätietojen ja viestin välinen viiva katkea. Tämän pitäisi toimia vaikka avatarit ovat piilotettuna.

Tuo väliviiva on vaaleassa ja tummassa teemassa eri värinen, joten kirjoitin kummallekin teemalle omat tyylinsä:

Noniin mahtavaa, näillä säädöillä viestin korkeus tippui 365px -> 245px eli -33 %

Kiitos paljon avusta (jälleen kerran)

@freekevin

 

[living_death]

Laitetaan omakin tyylitiedosto jakoon.

Ei mitään mullistavan isoja muutoksia, mutta olen pyrkinyt kliinimpään ulkoasuun ja lisäämään vähän silmäkarkkia.

Uuden sivulogon vaihdoin eilen ihan testimielessä

Koodeja en postaa erikseen viestiin, kun ne löytyvät täältä.

 

[living_death]

Puristin vielä kaikki neliöinä olleet avatarkuvat pyöreiksi ja lisäsin niiden sisäosaan pienen varjostuksen.

Hups! En muistanut testata vaaleassa teemassa, mutta toivotaan että toimii sielläkin.

 

[living_death]

Sori spämmi, mutta ideoita tulee enemmän kuin ehtii takomaan näppäimistöä.

Miltä tämmöinen näyttäisi raadin mielestä?

Tästä kun ottaisi vielä pois reunojen vaaleanharmaat reunukset, niin alkaisi olemaan vähemmän exel-taulukon näköinen foorumi

 

[taikamuki]

Ton logon vois ottaa yleiseen käyttöön!

 

[vaalea limppu]

CSS:n syvällisesti paneutuneena kokeilin itsekin Chromen Stylishilla muokata ulkoasua. Lähdin siitä ajatuksesta, että jokainen min-height ja border ensin pois. Taustalla oleva html on kuitenkin sellaista viime vuosituhannen huttua, ettei sitä pysty tyylittelemään mielekkäällä tavalla. Kaikkien tyylien ylikirjoittaminen, esim. * { min-height: 0!important; } myös hyydytti Chromen polvilleen nopeallakin koneella, joten itse luovutin.

@living_death :n teema on kyllä jo aika pitkällä siistimisessä, hyvää työtä.

 

[living_death]

Kiitosta vaan.

Tein tästä ihan oman beta-vaiheessa olevan tyylitiedoston, koska CSS-määritykset eivät mene yksi yhteen tumman ja vaalean teeman kanssa ja niille pitää lopulta tehdä värimäärityksien vuoksi omat teemansa.

Täältä pääsee testailemaan jos kiinnostusta löytyy ja muiden palaute on paras motivaattori kehitystyössä

 

[living_death]

Pieniä muutoksia tältä aamulta:

• siivottu harmaita reunuksia pois
• sivulogoa siirretty aavistuksen verran navigointipalkin päälle
• lisätty "ease-in-out" efektit kun hiiren osoitin viedään aihealueiden päälle
• sivupalkin laatikot saman näköisiksi kuin aihealuiden vastaavat
• käpistelin myös vähän pikahaun ulkoasua ja yritin keskittää sitä parempaan kohtaan

Täältä pääsee beta-testailemaan tyylitiedostoa.

 

[Persojet]

Täältä kanssa ääni logolla muutenkin ihan tyylikäs tuo yksivärinen teksti sivuston "otsikossa"

 

[hrnr]

Kyllä! Ketju alkaa kantaa hedelmää viimein, omien rohkasevien räpellysten jälkeen. Tuo living_death :n taidonnäyte on oikeasti mainio!

 

[Aaltoliike]

@living_death Esiintyy itselläni ainakin seuraavaa ongelmaa:

 

[living_death]

@living_death Esiintyy itselläni ainakin seuraavaa ongelmaa:

Erikoista kun en saa toistettua ongelmaa Firefox 51.0b6 selaimella. Muilla en ole testannutkaan.

Eihän sinulla ole jäänyt vahingossa useampi teema yhtäaikaisesti päälle?

EDIT: Chromella näyttää bugaavan, muttei FF:llä. Chrome renderöi muutenkin fontit kummallisen näköiseksi kaikilla nettisivuilla ettei sitä ole tullut pahemmin käytettyä.

Saa laittaa korjaavaa koodiehdotusta jos tiedossa.

 

[Aaltoliike]

Joo. Itselläni SRWare Iron, mutta pohjautuu Chromeen, ilman Googlen telemetriatietojen lähetyksiä . Muuten näytti ihan kivalta, mut tuo tekstiruutu-bugi on kyl ihan hanurista.

 

[living_death]

Korjaan bugin, mutta voi mennä ensi viikon puolivälille kun lapset ovat tiistaihin asti vkl-isin hoidossa.

Omissa testeissä on parhaillaan myös menossa näiden viestialueiden siistiminen ja excel-taulukkolaskennan tyylin vähentäminen (turhat reunukset pois häiritsemästä ja tyyli yleisesti foorumin aloitussivun kaltaiseksi)

 

[Aaltoliike]

vkl-iskä on hyvä iskä, pijä hauskaa ja katellaan ensviikolla uusiksi

 

[Fractal]

Häiritsee ite se että yhdellä sivulla on niin monta viestiä. Mielummin jakaisin ne useammalle sivulle, niin kuin murossa on vaihtoehtona.

 

[SloBo]

Itse tykkäisin, jos olisi värikkäämpää (ei mitään sirkusta kuitenkaan), ja enemmän viestisisältöä / pinta-ala. En kyllä toki jaksa omaa tyyliä alkaa värkkäämään.

 

[Mestaritonttu]

Kirjautumis- ja viestin muokkaus-popupin ei tarvitsisi mielestäni tummentaa taustaa ollenkaan, tai ei ainakaan niin paljon kun tällä hetkellä.

 

[David ":DA" Imodium]

Hyvältä näyttää uusi logo ja pyöreät avataritkin ovat parempia! Voisi niiden myötä jopa ottaa avatarit pois piilosta.

 

[Sampsa]

Sivupalkki otettu käyttöön foorumilla, joka on säädetty piiloutumaan automaattisesti alle 1280px selaimen leveydellä. Sen tarkoituksena on saada sisältöä paremmin esille. Mainoksia siihen ei ainakaan toistaiseksi ole suunnitteilla, jos ei Hinta.fi-nostoboksia lasketa, johon on tulossa hakukenttä, jolla hakea tuotteita palvelusta.

Jos sivupalkin haluaa puukottaa pois niin:

.sidebar
{
  display: none;
}
.mainContent
{
    margin-right: 0px;
}
.mainContainer
{
     float: left;
     margin-right: 0px;
     width: 100%;
}

 

[Myrikles Kukulis]

Tykkäsin enemmän aiemmasta versiosta, missä sivupalkki oli vain foorumin etusivulla.

Operalla (se aito ja alkuperäinen) sivupalkki poistuu näin:

/* sivupalkki pois */
.sidebar {display: none !important;}

/* levitetään layout */
.mainContent {margin-right: 0px !important;}

 

[pniemi]

Tykkäsin enemmän aiemmasta versiosta, missä sivupalkki oli vain foorumin etusivulla.

Tälle ääni myös, sidebar saa olla forumin pääsivulla koska sivussa on silloin myös oman tunnuksen infoikkuna mutta saisi lähteä pois mentäessä aliforumiin/viesteihin. Olisiko tuo mahdollista toteuttaa?

 

[Receiver]

Miten nuo kaikki ribbonit saisi saman väriseksi? Nyt väriskaala ottaa ikävästi silmään.

 

[copter]

Itse arvostaisin kovasti teemaa joka olisi tummempi, mutta ei ihan musta. Eli siis lähempänä harmaata ja jossa kontrasti olisi siedettävä eikä siis suoraan ihan valkoista lähes mustalla taustalla.

Jotain Darcula themen tapaista siis taustan ja tekstien kontrastien osalta.

 

[Lifeless]

Hyvempi teema :

https://userstyles.org/styles/136967/io-light-for-techbbs-io-tech-2016


Omituisuuksia :
- alalaidassa kiintea navi valikko
- korjattu headeri
- korjattu footteri
- user infot ja avataarit parempaan paikkaan
- edit nappi sinne minne se kuuluu
- prefix vari laatikot hieman inhimillisemman varisiksi (varit samat, mutta haaleemmat)
- sivupalkki helvettiin

Itsella ollut kaytossa jo useamman viikon. Jotain bugeja, joita en ole jaksanut viela alkaa korjaileen, mutta korjailen jahka ennatan.

 

[Lifeless]

0.11 versioon korjattu ylipitkien nimien bugaaminen.

https://userstyles.org/styles/136967/io-light-for-techbbs-io-tech-2016

 

[living_death]

Teemaa päivitetty. Tyylitiedosto löytyy täältä tai klikkaamalla sigun linkkiä.

Etusivu tuntuu omasta mielestä melko valmiilta ja toimivalta, mutta aihealueet ja viestialueet vaativat vielä hienosäätöä.

Teemassa on myös "Premium" ominaisuus, eli foorumin yläosan iso mainos on poistettu

Huom! Sivupalkki hävitetty viestialueilta. Muualla se näkyy normaalisti.

 

[Aaltoliike]

@living_death Vielä on sama ongelma tämän rivityksen ja Chrome-pohjan kanssa.

 

[living_death]

@living_death Vielä on sama ongelma tämän rivityksen ja Chrome-pohjan kanssa.

Olin unohtanut kokonaan asian. Kurkkaan sinun aiemmasta postauksesta mitä ongelma koski ja koitan purkata pian kuntoon.

 

[living_death]

@living_death Vielä on sama ongelma tämän rivityksen ja Chrome-pohjan kanssa.

Pääsetkö päivittämään tyylitiedoston ja testaamaan vieläkö bugaa Chrome selaimella?

 

[Lifeless]

Pikku korjaus pahasti bugittaville kone spekseille.

IO-Light theme v0.12 beta:
IO-Light for TechBBS (Io-Tech) 2016 - Themes and Skins for Io-tech - userstyles.org

 

[Aaltoliike]

@living_death Nyt rivittää oikein, jes!

 

[Waldo]

@living_death Kiitos tästä teemastasi.

EDIT: Sen verran kysyn että voisiko tuota korjata?

Spoileri

Sivun oikea yläreunassa.

 

[living_death]

@living_death Kiitos tästä teemastasi.

EDIT: Sen verran kysyn että voisiko tuota korjata?

Spoileri

Sivun oikea yläreunassa.

Poistin vahingossa tänään tyylitiedostosta rivin jossa olin aiemmin korjannut sen. Täytyy purkata uudestaan kuntoon.

Oikeastaan voisin miettiä löytyisikö sille vielä parempaa paikkaa kuin missä se nyt sijaitsee

Saa ehdottaa kaikenlaisia CSS-kikkailuja ja yritän oman osaamiseni rajoissa toteuttaa niitä.

EDIT: Pikahakukenttä siirretty oikeaan kohtaan.

 

[luuponen]

Tämä on imho paras leiska edelleen. Kiitetään tekijää nyt vielä ihan ääneenkin. Top notch work!

Tollanen räpellys
https://userstyles.org/styles/133965/io-tech-usability-plus

 

[tag]

Puuttuu huulipunaa.

 

[living_death]

Puuttuu huulipunaa.

Ehkä, mutta nyt siellä on ainakin lieskoja

 

[living_death]

Aamun pikafixi tyylitiedostoon, eli paikalla olevien käyttäjien avarien ympärille tulee nyt vihreä rengas.

EDIT: Vielä yksi muutos. Tein viestikentän alaosassa olevista "Tykkää, Lainaa, Vastaa" yms. linkeistä painikkeet joissa on mouse hover efektit.

 

[hrnr]

Hyvempi teema :

IO-Light for TechBBS (Io-Tech) 2016 - Themes and Skins for Io-tech - userstyles.org


Omituisuuksia :
- alalaidassa kiintea navi valikko
- korjattu headeri
- korjattu footteri
- user infot ja avataarit parempaan paikkaan
- edit nappi sinne minne se kuuluu
- prefix vari laatikot hieman inhimillisemman varisiksi (varit samat, mutta haaleemmat)
- sivupalkki helvettiin

Itsella ollut kaytossa jo useamman viikon. Jotain bugeja, joita en ole jaksanut viela alkaa korjaileen, mutta korjailen jahka ennatan.

Loisto idea toi lähettäjäkentän sijoittelu! Pikkasen kuitenki pistää etomaan tuo loputon pyöreys ja varjotus. 2005's anyone?

 

[living_death]

Tämä aamupäivä onkin mennyt viestikenttien kanssa säädellessä.

Laitoin käyttäjätietokentän omaksi laatikoksi ja vihreä reunus avatarin ympärillä kertoo siitä, että käyttäjä on parhaillaan kirjautuneen foorumille.

Lainauslaatikoista poistin kaikki reunukset, paitsi lisäsin 3px punertavan reunuksen vasemmalle ja pienensin alkuperäisen kirjoittajan nimimerkin fonttia sekä säädin koko laatikon taustavärit samanvärikseksi kauttaaltaan.

Miltä tämmöinen ratkaisu vaikuttaisi?

Uusin versio on ladattavissa / päivitettävissä täältä

 

[living_death]

Nostetaan taas lankaa ylemmäksi kun on tullut tehtyä taustalla pieniä ulkoasuparannuksia tyylitiedostoon.

Tänään foorumin pääsivulla oleva ylänavigointi sai uuden "Premium" ilmeen ja oikean reunan sivupalkista otin pois otsikoiden taustaväripalkit turhana.

Tyylitiedoston voi ladata/asentaa täältä: TechBBS - XenForo Dark Theme

Testailkaa ja raportoikaa jos jollain päätelaitteella on ongelmia tyylitiedoston käyttämisen kanssa.

Laitetaan nyt vielä kuvakin tähän alle

 

[Aaltoliike]

Mistä vois ladata vanhan version vielä, edellisen siis?

 

[living_death]

Mistä vois ladata vanhan version vielä, edellisen siis?

Mulla oli vielä Chrome selaimessa eilinen versio ennen ylänavigoinnin muokkausta.

Spoileri

/* UUDEN VIESTIN INDIKAATTORI */
  .message .newIndicator {font-size: 13px; font-weight: 500; color: #fff; background-color: #2dbf5b; padding: 1px 5px; border: 1px solid #226a37; text-transform: uppercase;}  
 
  /* EI ENEMPÄÄ UUSIA VIESTEJÄ RIVI */  
  .discussionListItem .noteRow {padding: 16px; font-size: 14px; font-weight: 500 !important; color: #ccc !important; text-transform: uppercase; text-align: left !important;}

  /* KÄYTTÄJÄTIETOKORTTI, "SIJAINTI" TEKSTIN VÄRIN KORJAUS */  
  .muted {color: #fff !important;}
   
  /* SOMEIKONIT */
  .fa-facebook-official {font-size: 30px !important; color: #3b5998 !important; background-color: #fff !important; padding: 3px 5px 3px 5px !important; border-radius: 0px !important; margin-right: 12px !important; margin-top: 10px !important;}
  .fa-facebook-official:hover {color: #fff !important; background: #3b5998 !important; transition: all 0.15s ease-in-out !important;}
  .fa-twitter {font-size: 30px !important; color: #1da1f2 !important; background-color: #fff !important; padding: 3px 5px 3px 5px !important; border-radius: 0px !important; margin-right: 12px !important; margin-top: 10px !important;}
  .fa-twitter:hover {color: #fff !important; background: #1da1f2 !important; transition: all 0.15s ease-in-out !important;}
  .fa-steam-square {font-size: 30px !important; color: #000 !important; background-color: #fff !important; padding: 3px 5px 3px 5px !important; border-radius: 0px !important; margin-top: 10px !important;}
  .fa-steam-square:hover {color: #fff !important; background: #000 !important; transition: all 0.15s ease-in-out !important;}
 
  /* VIESTIALUEET, ALLEKIRJOITUS (KESKEN) */
  .message .signature {font-size: 8pt !important; padding: 10px !important; margin-top: 25px !important; border: 1px solid #434343 !important;}
 
  /* FOORUMIN LEVEYDEN KAVENTAMINEN */
  .pageWidth {padding-left: 100px !important; padding-right: 100px !important;}
 
  /* TECHBBS LOGOALUE */
  .logo-image, .logo-skinnable {background-color: transparent !important; margin-top: 15px !important; margin-bottom: 15px !important;}
 
  /* ISO MAINOS YLHÄÄLTÄ POIS */
  #premium a img {display: none !important;}
 
  /* PIKAHAKU */
  #QuickSearchQuery {margin-right: 100px !important; background-color: #212121 !important; color: #ccc !important;}
  #QuickSearch {top: -37px !important; background-color: transparent !important;}
  #QuickSearchQuery {border-radius: 0px !important;}
 
  /* TEEMAN NIMI YLÄNURKKAAN */
  #logoBlock .pageContent:before {content: "TechBBS - XenForo Dark Theme (beta)" !important; font-family: 'Rubik Mono One', sans-serif; font-size: 14px !important; font-weight: 600 !important; float: right !important; height: 13px !important;}
  #logoBlock .pageContent:before {padding: 15px 17px 17px 15px; margin-top: 7px; margin-right: 15px; margin-bottom: 0px;}
  #logoBlock .pageContent:before {color: rgb(255, 255, 255); background-color: transparent; text-shadow: rgb(255, 255, 255) 0px -1px 4px, rgb(255, 255, 0) 0px -2px 10px, rgb(255, 128, 0) 0px -10px 20px, rgb(255, 0, 0) 0px -18px 40px;}
 
  /* VIESTIALUEET, POISTETAAN LUKEMATTOMIEN VIESTIEN PALLO LINKKIEN EDESTÄ */
  .unreadLink, .LoggedIn div.ReadToggle {display: none !important;}
  .LoggedIn .discussionListItem .titleText {padding-left: 5px !important;}
   
  /* VIESTIKENTTÄ, KÄYTTÄJÄTIETOLAATIKKO */
  .messageUserBlock {background-color: #333 !important; padding-top: 15px !important; margin-top: 10px !important; margin-left: 10px !important; margin-bottom: 10px !important;}
 
  /* VIESTIALUEET, AVATAR KENTÄN TAUSTA */
  .messageUserBlock div.avatarHolder {background-color: #333 !important;}  
 
  /* VIESTIALUEET, ONLINE STATUS AVATARIN YMPÄRILLE */
  .messageUserBlock div.avatarHolder .onlineMarker {position: absolute !important; top: 6px !important; left: 26px !important; border-width: 5px !important; border-color: #7FB900 !important;}   
  .messageUserBlock div.avatarHolder .onlineMarker {padding-top: 95px !important; padding-right: 94px !important;}
  .messageUserBlock div.avatarHolder .onlineMarker {border-radius: 50% !important;}
 
  /* VIESTIALUEET, KÄYTTÄNIMIKENTTÄ */
  .messageUserBlock h3.userText {background-color: #333 !important; margin-top: 15px !important; margin-bottom: 5px !important;}
  .messageUserBlock a.username {font-size: 16px !important; font-weight: 700 !important; margin-bottom: 3px !important;}
 
  /* VIESTIALUEET, TITTELINTUURE */
  .messageUserBlock .userTitle {padding-bottom: 15px !important;}
 
  /* VIESTIALUEET, PC-SPEKSIT SIJOITTELU */
  table.specstable.in_post {margin-top: 15px !important;}
 
  /* VIESTIALUEET, YLEISET VIESTIEN MUOTOILUT */  
  .messageHeading {border: 0px !important; background-color: #333 !important;}
  .extraUserInfo {background-color: transparent !important;}
  .XenBase, .messageMeta {border: 0px !important; background-color: #212121 !important; padding-top: 7px !important;}
  .messageList .message {border: 0px !important; margin-top: 15px !important;}  
  .message, .messageInfo {border: 0px !important; background-color: #212121 !important;}  
  .messageUserInfo {border: 0px !important; background-color: #212121 !important;}

   /* VIESTIALUEET, VIESTIEN TYKKÄÄ, LAINAA JA VASTAA PAINIKKEET */  
  .thread_view .messageMeta .publicControls a {background-color: #333 !important; color:#eee !important; border: 0px !important; border-radius: 0px !important; }
  .thread_view .messageMeta .publicControls a {font-size: 10px !important; font-weight: 400 !important; padding: 7px !important; text-transform: uppercase !important;}
  .thread_view .messageMeta .publicControls a:hover {transition: all 0.25s ease-in-out !important; color: #141414 !important; background-color: #ccc !important;}

  /* VIESTIALUEET, VIESTIEN RAPORTOI JA LISÄÄ KIRJANMERKKI PAINIKKEET */  
  .thread_view .messageMeta .privateControls a {background-color: #333 !important; color:#eee !important; border: 0px !important; border-radius: 0px !important;}
  .thread_view .messageMeta .privateControls a {font-size: 10px !important; font-weight: 400 !important; padding: 7px !important; text-transform: uppercase !important;}
  .thread_view .messageMeta .privateControls a:hover {transition: all 0.25s ease-in-out !important; color: #141414 !important; background-color: #ccc !important;}  
 
  /* VIESTIALUEET, QUOTE */
  .bbCodeQuote {
  border-color: rgb(180, 52, 52) !important; border-top-color: #111 !important; border-right-color: #111 !important; border-bottom-color: #111 !important; border-left-color: #b43434 !important;}
 
  /* VIESTIALUEET, QUOTE */
  .bbCodeBlock {background-color: red !important; margin: 1em 0 !important; margin-top: 1em !important; margin-right: 0px !important; margin-bottom: 1em !important; margin-left: 0px !important; border-left: 3px solid #b43434 !important; border-left-width: 3px !important; border-left-style: solid !important; border-left-color: #b43434 !important;}  
 
  /* VIESTIALUEET, QUOTE, MUUT */
  .quoteContainer {background-color: #111 !important;}
  .attribution {border: 0px !important; background-color: #111 !important; font-size: 11px !important;}
  /* VIESTIALUEET, SIVUPALKKI POIS */
  .thread_view .sidebar {display: none;}
  .thread_view .mainContent {margin-right: 0;}
 
  /* YKSITYISVIESTIT, SIVUPALKKI POIS */
  .conversation_view .sidebar {display: none;}
  .conversation_view .mainContent {margin-right: 0;}
 
  /* VIESTILISTAUS, KOROSTETAAN HIEMAN NOSTETTUJEN KETJUJEN TAUSTAVÄRIÄ */
  li[class*="sticky"] a:link, li[class*="sticky"] {font-weight: 500 !important; opacity: 0.95 !important;}

  /* ETUSIVU, KORVATAAN ALUEIDEN JA VIESTIKETJUJEN VÄLIVIIVAT TYHJILLÄ VÄLEILLÄ */
  #forums .node.primaryContent {border-bottom: 0px !important; margin-bottom: 1px !important; border-top: 2px solid #333 !important; border-bottom: 2px solid #111 !important; border-radius: 5px !important;}
  .nodeList .categoryStrip {margin-bottom: 7px !important;}
  .discussionListItem {border-bottom: 0px !important; margin-bottom: 2px !important;}
  .discussionListItem .stats dl {border-left: 0px !important; border-right: 0px !important;}
 
  /* ETUSIVU, TAUSTAVÄRI POIS ALUEIDEN OTSIKKOKENTISTÄ */
  .nodeList, .categoryStrip {border-top: 0px solid !important; border-left: 0px solid !important; border-right: 0px solid !important; background-color: transparent !important;}
 
  /* ETUSIVU, HARMAIDEN REUNAVIIVOJEN POISTAMINEN */
  .pageContent {border-left: none !important; border-right: none !important; border-bottom: none !important; margin-top: -4px !important;} /* ULOIMMAT REUNUKSET */
  .tabLinks {border-left: none !important; border-right: none !important; margin-top: -4px !important;} /* ALUELINKIT */
  html, .navTabs, .navTab.selected, .navLink {border-left: none !important; border-right: none !important; border-top: none !important;}
 
  /* ETUSIVU, AIHEALUEIDEN MOUSE HOVER EFEKTIT */
  #forums .node.primaryContent:hover {border-top: 2px solid #444 !important; border-bottom: 2px solid #111 !important;}
  #forums .node.primaryContent:hover {background-color: #333 !important; transition: all 0.15s ease-in-out !important;}
  .node .nodeLastPost {background-color: transparent !important;}

  /* SIVUPALKKI, LAATIKON REUNUKSET */
  .sidebar .secondaryContent {background-color: #333 !important; border-bottom: 0px !important; margin-bottom: 1px !important; border-top: 2px solid #333 !important; border-bottom: 2px solid #111 !important; border-radius: 5px !important;}
 
  /* SIVUPALKKI, TAUSTAVÄRI */
  .sidebar .secondaryContent {background-color: #212121 !important;}
 
  /* SIVUPALKKI, OTSIKOIDEN KESKITYS */
  .sidebar .section .secondaryContent h3 {text-align: center !important; text-decoration: none !important;}
 
  /* SIVUPALKKI, OTSIKKOPALKKI */
  .sidebar .section .secondaryContent h3 {background-color: #212121 !important; border-radius: 0px !important; margin-bottom: 10px !important; padding-top: 1px !important;}
 
  /* SIVUPALKKI, OTSIKKOPALKKIEN LINKKIEN ALLEVIIVAUS POIS */
  .sidebar .section .secondaryContent h3 a {text-decoration: none !important;}
   
   /* AVATARIT, PYÖRISTYKSET JA REUNUKSIEN JA PADDINGIT POIS + LISÄTÄÄN PIENI VARJOSTUS AVATARKUVAN SISÄOSAAN */
  .discussionListItem .posterAvatar .avatar img {border-radius: 50% !important; border: 0px !important; padding: 0px !important; box-shadow: inset 0 0 7px #000000 !important;}
  .messageUserBlock .avatar img {border-radius: 50% !important; border: 0px !important; padding: 0px !important; box-shadow: inset 0 0 7px #000000 !important;}
  .visitorPanel .avatar img {border-radius: 50% !important; border: 0px !important; padding: 0px !important; box-shadow: inset 0 0 7px #000000 !important;}
  .alerts .avatar img {border-radius: 50% !important; border: 0px !important; padding: 0px !important; box-shadow: inset 0 0 7px #000000 !important;}
  .visitorTabs .navLink .miniMe {border-radius: 50% !important; border: 0px !important; padding: 0px !important; box-shadow: inset 0 0 7px #000000 !important;}
  .avatar.plainImage .img {border-radius: 50% !important; border: 0px !important; padding: 0px !important; box-shadow: inset 0 0 7px #000000 !important;}
  .avatar .img {border-radius: 50% !important; border: 0px !important; padding: 0px !important; box-shadow: inset 0 0 7px #000000 !important; background-position: 0px 0px !important;}
  .AvatarEditor .currentAvatar img {border-radius: 50% !important; border: 0px !important; padding: 0px !important; box-shadow: inset 0 0 7px #000000 !important;}
  .AvatarEditor .avatarCropper img {border-radius: 50% !important; border: 0px !important; padding: 0px !important; box-shadow: inset 0 0 7px #000000 !important;}
  .avatarScaler img {border-radius: 50% !important; border: 0px !important; padding: 0px !important; box-shadow: inset 0 0 7px #000000 !important;}
  .avatar img, .avatar .img, .avatarCropper {border-radius: 50% !important; border: 0px !important; padding: 0px !important; box-shadow: inset 0 0 7px #000000 !important;}

  /* MOUSE HOVER, ILMOITUKSET */
  .listItem:hover {transition: all 0.25s ease-in-out !important;}
 
  /* MOUSE HOVER, YLÄOSAN LINKKIPALKKI */
  .navLink:hover {transition: all 0.25s ease-in-out !important;}
 
  /* MOUSE HOVER, YLÄOSAN LINKKIPALKIN ALEMMAT LINKIT */
  .tabLinks a:hover {transition: all 0.25s ease-in-out !important; padding-top: 2px !important;}
 
  /* MOUSE HOVER, YHTEISTYÖKUMPPANIEN LINKIT */
  .blockLinksList a:hover {transition: all 0.25s ease-in-out !important;}

  /* MOUSE HOVER, VIESTISIVUJEN NAVIGOINTIPAINIKKEET */
  .PageNav a:hover {transition: all 0.25s ease-in-out !important; color: #141414 !important; background-color: #ccc !important;}
 
  /* MOUSE HOVER, FOORUMIN VIESTIKETJUJEN NAVIGOINTIPAINIKKEET */
  body .itemPageNav a:hover {transition: all 0.25s ease-in-out !important; color: #000 !important; background-color: #ccc !important;}
 
  /* MOUSE HOVER, PIKAVASTAUSPAINIKKEET */
  .button.primary:hover {transition: all 0.25s ease-in-out !important; background: #34383e !important; border: 1px solid #34383e !important;}
  .button:hover {transition: all 0.25s ease-in-out !important; color: #ccc !important; background: #545b67 !important; border: 1px solid #545b67 !important;}
 
  /* MOUSE HOVER, FOORUMIN ALUELINKIT */
  .nodeTitle a:hover {transition: all 0.25s ease-in-out !important; color: #ccc !important; text-decoration: none !important;}
 
  /* MOUSE HOVER, ALUEIDEN VIESTIKETJUJEN LINKIT */
  .discussionListItem a:hover {transition: all 0.25s ease-in-out !important; color: #ccc !important; text-decoration: none !important;}
 
  /* MOUSE HOVER, FOOTERIN LINKIT */
  .footerLinks a:hover {transition: all 0.25s ease-in-out !important;}
 
  /* MOUSE HOVER, FOOTERIN YHTEISTYÖSIVUSTOJEN LINKIT */
  .footerList a:hover {transition: all 0.25s ease-in-out !important;}
 
  /* MOUSE HOVER, SIVUN ALIMMAT COPYRIGHT LINKIT */
  #copyright a:hover {transition: all 0.25s ease-in-out !important; color: #34383e !important; text-decoration: none !important;}
 
  /* MOUSE HOVER, TEEMAN JA KIELEN VALINTA */
  .choosers a:hover {transition: all 0.25s ease-in-out !important;}
 
  /* MOUSE HOVER, BREADCRUMBSIT */
  .crumbs a:hover {transition: all 0.25s ease-in-out !important;}
 
  /* MOUSE HOVER, RAPORTOI JA LISÄÄ KIRJANMERKKI */
  .privateControls a:hover {transition: all 0.25s ease-in-out !important; color: #fff !important; text-decoration: none !important;}
 
  /* MOUSE HOVER, TYKKÄÄ, LAINAA JA VASTAA */
  .publicControls a:hover {transition: all 0.25s ease-in-out !important; color: #fff !important; text-decoration: none !important;}
 
  /* MOUSE HOVER, ALLEKIRJOITUKSEN LINKIT */
  .signature a:hover {transition: all 0.25s ease-in-out !important; text-decoration: none !important;}

 

[Waldo]

Nostetaan taas lankaa ylemmäksi kun on tullut tehtyä taustalla pieniä ulkoasuparannuksia tyylitiedostoon.

Tänään foorumin pääsivulla oleva ylänavigointi sai uuden "Premium" ilmeen ja oikean reunan sivupalkista otin pois otsikoiden taustaväripalkit turhana.

Tyylitiedoston voi ladata/asentaa täältä: TechBBS - XenForo Dark Theme

Testailkaa ja raportoikaa jos jollain päätelaitteella on ongelmia tyylitiedoston käyttämisen kanssa.

Laitetaan nyt vielä kuvakin tähän alle

Heh, sen verran pakko kehua tätä tekemääsi tyyliä tähän sivustoon että laitoin heti kun tämän asensin niin tuon sivun kirjanmerkkeihin . Mukava klikkailla kirjanmerkistä sillon tällön jos oot jotain updatea saanut aikaiseksi eikä tarvi tämän threadin perusteella ettiä linkkiä .

 

[living_death]

Heh, sen verran pakko kehua tätä tekemääsi tyyliä tähän sivustoon että laitoin heti kun tämän asensin niin tuon sivun kirjanmerkkeihin . Mukava klikkailla kirjanmerkistä sillon tällön jos oot jotain updatea saanut aikaiseksi eikä tarvi tämän threadin perusteella ettiä linkkiä .

Kiitos! Lämmittää mieltä jos joku muukin pitää teemasta. Vaaleaa teemaa en ole vielä lähtenyt rakentamaan samalta pohjalta, mutta katsotaan jos senkin saisi joskus aikaiseksi

Firefox ja Chrome taitaa osata tarjota automaattisesti uusinta päivitettyä teemaa, ainakin jos sitä käyttää Stylish -lisäosan kautta suoraan. Silloin ei tarvitse itse huolehtia teeman päivityksistä manuaalisesti.

EDIT: Muokkasin vielä pikahakukentän kuntoon kun se oli mennyt lähes näkymättömiin transparent tausta-asetuksen myötä.

 

[copter]

Ihan kivalta vaikuttaa. Tosin omaan makuun teksti voisi olla hieman tummempaa, nyt se hieman paistaa tummasta taustasta turhan kirkkaana. Mutta se on toki vain oma mielipiteeni. Joku jos vääntäisi Darcula -teeman niin olisi hemmetin hienoa!

 

[copter]

@living_death, Selasin tässä pikaisesti hieman sivustoa lävitse tällä teemalla niin pari asiaa osui omaan silmään.

1. Jos viesti on lyhyempi kuin viestin vasemmalla puolella oleva jäsenpalkki, niin alue jossa on tykkäykset sekä allekirjoitukset keskittyy vertikaalisesti keskelle. Saisiko tämän joko ylös taikka alas, koska se että se "leijuu" siinä välissä näyttää hieman hassulta.
2. Otsikoiden etuliitteet Ostetaan/Vaihdetaan/Ostettu jne ovat kaikki alkuperäisillä väreillä ja mielestäni ponnahtaa aivan liian kirkkaina tummasta taustasta. Sama koskee myös viestiketjuissa "Uusi" merkittyjä viestejä oikeasssa yläkulmassa.

Pystyykö näitä muuttamaan?