Miten io-tech paremman näköiseksi?

freekevin sanoi:
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ää.
9VTzna5.png

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

Sulla on myös selain ilmeisesti +3000 pikseliä leveä eli hirveästi ei teksti rivity ja siitäkin syystä tyhjää on noin paljon.
 
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 :D
 
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ä:
Koodi: 
/* Vaalea teema */
.message .messageInfo {
    min-height: 0px!important;
}
@media (min-width: 480px) {

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

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

.messageUserInfo {
    border-right: 1px solid rgb(61, 61, 61);
}
}
 
Rantakemisti sanoi:
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ä:
Napsauta laajentaaksesi...

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

Kiitos paljon avusta (jälleen kerran) :kippis:

@freekevin
 
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ä :D

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

etusivu.png


viestiketjut.png
 
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.

avatar-userpanel.PNG


avatar-threads.PNG


avatar-messages.PNG
 
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 :geek:

forum-mainpage.PNG
 
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ä.
 
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ä :)
 
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.

forum-mainpage.png
 
Aaltoliike sanoi:
@living_death Esiintyy itselläni ainakin seuraavaa ongelmaa:
Napsauta laajentaaksesi...
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.

teema.PNG
 
Viimeksi muokattu:
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.
 
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) :)
 
Häiritsee ite se että yhdellä sivulla on niin monta viestiä. Mielummin jakaisin ne useammalle sivulle, niin kuin murossa on vaihtoehtona.
 
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.
 
Kirjautumis- ja viestin muokkaus-popupin ei tarvitsisi mielestäni tummentaa taustaa ollenkaan, tai ei ainakaan niin paljon kun tällä hetkellä.
 
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:

Koodi: 
.sidebar
{
  display: none;
}
.mainContent
{
    margin-right: 0px;
}
.mainContainer
{
     float: left;
     margin-right: 0px;
     width: 100%;
}
 
Tykkäsin enemmän aiemmasta versiosta, missä sivupalkki oli vain foorumin etusivulla.

Operalla (se aito ja alkuperäinen) sivupalkki poistuu näin:
Koodi: 
/* sivupalkki pois */
.sidebar {display: none !important;}

/* levitetään layout */
.mainContent {margin-right: 0px !important;}
 
Myrikles Kukulis sanoi:
Tykkäsin enemmän aiemmasta versiosta, missä sivupalkki oli vain foorumin etusivulla.
Napsauta laajentaaksesi...
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?
 
Miten nuo kaikki ribbonit saisi saman väriseksi? Nyt väriskaala ottaa ikävästi silmään.
 
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.

darcula2.png
 
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.

lwiM071.png


XmtlYwG.png


1WYxKxT.png


plsXFur.png
 
Viimeksi muokattu:
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.

etusivu.png


aihe-alue.png


viestit.png
 
@living_death Kiitos tästä teemastasi. :love:

EDIT: Sen verran kysyn että voisiko tuota korjata?

aVrRun4.png

Sivun oikea yläreunassa.
 
Waldo sanoi:
@living_death Kiitos tästä teemastasi. :love:

EDIT: Sen verran kysyn että voisiko tuota korjata?

aVrRun4.png

Sivun oikea yläreunassa.
Napsauta laajentaaksesi...
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.
 
Viimeksi muokattu:
Aamun pikafixi tyylitiedostoon, eli paikalla olevien käyttäjien avarien ympärille tulee nyt vihreä rengas.

online-status.PNG


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

message-buttons.PNG
 
Viimeksi muokattu:
Lifeless sanoi:
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.
Napsauta laajentaaksesi...

Loisto idea toi lähettäjäkentän sijoittelu! Pikkasen kuitenki pistää etomaan tuo loputon pyöreys ja varjotus. 2005's anyone? :btooth::wtf: :)
 
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ä

viestit.png
 
Viimeksi muokattu:
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 :)

io-tech-premium-navigation.PNG
 
Aaltoliike sanoi:
Mistä vois ladata vanhan version vielä, edellisen siis?
Napsauta laajentaaksesi...
Mulla oli vielä Chrome selaimessa eilinen versio ennen ylänavigoinnin muokkausta.

Koodi: 
/* 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;}
 
living_death sanoi:
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 :)

io-tech-premium-navigation.PNG
Napsauta laajentaaksesi...

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 :love:. Mukava klikkailla kirjanmerkistä sillon tällön jos oot jotain updatea saanut aikaiseksi eikä tarvi tämän threadin perusteella ettiä linkkiä :rofl::tup:.
 
Waldo sanoi:
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 :love:. Mukava klikkailla kirjanmerkistä sillon tällön jos oot jotain updatea saanut aikaiseksi eikä tarvi tämän threadin perusteella ettiä linkkiä :rofl::tup:.
Napsauta laajentaaksesi...
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ä.

techbbs-theme.png
 
Viimeksi muokattu:
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! :)
 
@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?
 
Kirjaudu tai rekisteröidy kirjoittaaksesi tänne.

Uutiset

Uutisia lyhyesti

Uusimmat viestit

Statistiikka

Viestiketjuista
262 421
Viestejä
4 556 010
Jäsenet
74 964
Uusin jäsen
LinogeFly

Hinta.fi

Back
Ylös Bottom