Rekisteröidy
Perustaja sonja

Anonyymius

Omavalintainen

Medioita voi lisätä

Jäsenet

Perustettu 20.10.2017 23:06:33 Jäseniä 3 Vierailuja 60 Ketjuja 5 Viestejä 90 Medioita 0

Keskustelua tyylityksestä ja mm. tyylien jakoa

Termostaatti

2017-10-16 17:05:02

Tänne voi postailla tyylimäärityksiä eli CSS:ää (ei se Counter-Strike: Source). Alla oleva tyyli yrittää mukailla erästä toista sivua.

Mobiilinäkymä ihan vitum kesken. :D Älä lisää punaisella näkyvää jos keskeneräisyys(ks. gif) häiritsee.

Mobiili: tehdyt

- Tilapäivitysfeedi
- Medialistaus
- Yksittäinen media


Mobiili:jokseenkin tekemättömät

- Yksittäinen tilapäivitys
- Profiili
- Viestiketjut
plus fonttikoot on paikoin päin vittua


Ja kaikkea paskaa voi tunnetusti hinkata loputtomiin, muttei tällaista autismia kauaa jaksa.


body {
background-color: ##333 !important;
font-family: tahoma, verdana, arial, sans-serif;
}

#main-body p {
font-size: 13px;
}

#main-header {
background-color:#bf0000 !important;
width:60% !important;
margin: 0px auto;
color: #bf0000;
}
#main-header a {
color:#fff;
font-weight:bold;
}
#main-container {
background-color: #fff !important;
width:60% !important;
margin: 0px auto;
}
#main-container *, .user-basic-info {
background: transparent !important;
border-width:0px;
}
.info-item {
font-weight: bold;
}

.info-item-value {
font-weight: normal;
}

textarea {
border: 1px solid #afafaf !important;
width:50%;
height: 100px;
}
#media-search {
width: 100%;
padding: 0.5em;
border-radius: 10px !important;
border: 1px solid #afafaf !important;
}
#thread-search{
padding: 0.5em;
border-radius: 10px !important;
border: 1px solid #afafaf !important;
}
input[type="text"]{
border: 1px solid #afafaf !important;
}
#message-submit, #submitMessage{
border-radius: 3px !important;
padding: 3px 5px 3px 5px;
font-weight: normal;
border: 1px solid #b20000;
vertical-align: middle;
text-shadow: #760000 0px -1px 0px;
background-color: #b20000 !important;
background-repeat: repeat-x;
background-position: center top;
color: #ffffff;
cursor: pointer;
}

.message-container a {
font-size:smaller;
color:#aaa;
padding: 0.3em;
text-decoration: underline;
}
.message-container a:hover {
color:#000;
}

.status-message-container{
max-height: 50vh !important;
}
.status-user a {
font-weight:bold;
}
.status-actions a {
color: #aaa;
text-decoration: underline;
font-size:smaller;
}
.status-update, article{
padding: 0.5em !important;
}
tr, article, .status-update{
border-bottom: 1px solid #eee !important;
}
#main-header, #main-container {
min-width:300px;
}
.medias {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px,auto));
}
.medias img {
width:200px;
height:200px;
object-fit: contain;
transition: all .2s ease-in-out;
}
.medias img:hover {
filter: drop-shadow(12px 12px 15px #000);
transform: scale(1.1);
}

@media all and (max-device-width: 480px) {
#main-header {
width:100% !important;
height: 15vh !important;
font-size: large;
}
.channels-navi a {
padding: 0.5em;
}

#main-body p, .status-actions, #main-header a {
font-size: 200% !important;
}
.status-user {
font-size:150%;
}

.status-message-container img {
min-width: 75% !important;
max-height:none !important;
}
.status-update, .status-new{
font-size: 150%;
}
#new-status-update-show {
padding-left: 1em;
}

.status-new span, a {
font-size: 150%;
}
#message-submit, #submitMessage {
font-size: 150%;
padding: 0.2em;
}

.menu-group > span {
display: inline-block;
float: left !important;
}

#main-container {
width:100% !important;
margin: 0px auto;
}
textarea {
width:100%;
font-size: 200%;
height: 20vh;
}

#media-search {
font-size: 200%;
}


td:nth-child(n+2):nth-child(-n+6) {
display: none;
}
th:nth-child(n+2):nth-child(-n+6) {
display: none;
}
.user-container.bordered{
display:inline !important;
}
#user-info .info-item-container {
display:none;
}
#user-info h4 {
font-size: 150% !important;
}
.message-article{
display:inline !important;
}
.message-meta {
font-size:150%;
width: 100% !important;
}
.message-header {
font-size:225% !important;
}
.message-meta img, .date-added, .date-edited {
display: none;
}
.medias img {
width: 42vw !important;
height: 42vw !important;
object-fit: cover;
padding: 0.2em;
transition:none !important;
filter: none !important;
transform: none !important;

}
.medias {
padding-top: 1em;
display:inline-block !important;
}

#media-search {
margin-top: 1em;
width:85vw;
}
.bordered *{
margin:0;
padding:0;
}

.medias {
padding-top: 1em !important;
}

#media-right-items{
display:none;
}

.content-container {
width: 100%;
}

.message-container {
border-bottom: 3px solid #eee !important;
width:100% !important;
}
.fileinfo {
font-size:75%;
}
.content-container h3 {
font-size:150% !important;

}
.content-container.text-center.bordered.media, .content-container.text-center.bordered.media h3 {
font-size: 150% !important;
}

.media, .media img {
width:100% !important;
}
#preview{
display:none !important;
}

}

[ 1 | 2 ] Seuraava  
16.10.2017 17:17:31
#1041 [+-] Piilota Suosittele Ilmianna

[ nice.mp4 ] [0.3 MB] [video/mp4]
16.10.2017 17:27:04
#1043 [+-] Piilota Suosittele Ilmianna

{
background: url(https://i.imgur.com/HSvEysL.jpg);
}
Tällä komennolla saa ittellensä taustakuvaksi jonkun kivan kuvan imgurista (imgur on pakollinen lähde)
Kopioitte sulkujen väliin oman, suoran osoitteen kuvaan.
Itellä on Cesar's Legion koska syyt.

16.10.2017 19:07:49
#1113 [+-] Piilota Suosittele Ilmianna

>>1106
Saat tulla kyl useemminki spammiin chattia, we miss you ;__; ja oon kans ymmärtäny ettei oo kovinta alkemiaa mut näin siltä kannalta et osaan avata tietokoneen ja ottaa usb-tikun pois kun se on turvallista tämmösen osaaminen on ku velhous c:

16.10.2017 20:42:22
#1179 [+-] Piilota Suosittele Ilmianna

>>1043
>>1029

Tattista vaan näistä, mut ei oo kovin käytännöllisiä :D
E: ainakaan tuon termostaatin laittaman CSS tyylin kanssa. Miten tän "keskijutun" saisi enemmän naurunappulan kaltaiseksi?

16.10.2017 21:27:35
#1207 [+-] Piilota Suosittele Ilmianna

ebin

body{
background: url(https://img00.deviantart.net/cbb6/i/2011/193/c/4/texture_3b_by_jakezdaniel-d1sbrlg.jpg) !important;
background-size: cover;
font-family: Calibri !important;
width: 1000px !important;
margin: auto !important;
}
#user-info{
background: url(https://media.tenor.com/images/ab694629ad5842ec56a4f15a9d2abfb2/tenor.gif)no-repeat !important;
background-size: contain !important;
}

.user-basic-info{
margin-top: 175px !important;
}

.user-basic-info h4{
font-size: 50px !important;
}

16.10.2017 22:08:44
#1258 [+-] Piilota Suosittele Ilmianna

Mother of ebin :DD

Kiitos :3

Ehkä kyllä kannattaisi luopua suosiolla Nappulan tyylistä ja tunnustaa, että kyseessä on uusi sivusto uusine kujeineen, mutta kieltämättä tämä auttaa sopeutumaan muutokseen hiukan paremmin.

PS.
Etsin turhaan plussauspainiketta Termostaatin viestille ;___;

16.10.2017 22:26:43
#1293 [+-] Piilota Suosittele Ilmianna

PPPS.
Huomasin just, että tällä Nappulaa jäljittelevällä tyylillä kuvat ovat turhan kapeita. Etenkin sarjakuvien lukeminen muuttuu tosi vaikeaksi.

https://luolasto.org/m/389

En itse juurikaan ole CSS:dea opetellut, joten en ainakaan vielä ole keksinyt, miten mediat saa leveämmiksi (mieluiten alkuperäisen kokoisiksi).

16.10.2017 22:32:08
#1304 [+-] Piilota Suosittele Ilmianna

En tie onko muilla sama mut päivitin uusimpaan ja puhelin näyttää koko sivun postimerkin kokosena ja kommentit pitkänä viiruna, ei kai muilla samaa?

16.10.2017 23:55:16
#1385 [+-] Piilota Suosittele Ilmianna

Tämä on hyvä teema, lisäsin parille perinteikkäälle kanavalle. Huomasin vain, että ongelmana oli että mediat olivat kanavasivulla kohtuu typistettyjä, tämä antoi niille lisää leveyttä (toimi myös mediakanavilla). Ei tarvitse hiirenpaskan kokoisia kuvia katsella.


.media {
width: 100% !important;
}

17.10.2017 00:09:34
#1406 [+-] Piilota Suosittele Ilmianna

>>1293
Huomasin just, että tällä Nappulaa jäljittelevällä tyylillä kuvat ovat turhan kapeita. Etenkin sarjakuvien lukeminen muuttuu tosi vaikeaksi.

https://luolasto.org/m/389


Aina voi painaa kuvan nimeä otsikon alla (esim. [Beasts-of-Burden---Lost.png]), se avaa median alkuperäisessä koossa.

17.10.2017 08:58:05
#1526 [+-] Piilota Suosittele Ilmianna

>>1434
Eihän sitä nyt jokaista tarvi, ainoastaan liian pienenä näkyvät. Aivan kuten Nappulassa. Mutta toki voit kasvattaa tyyliasetuksista leveyttä. Sieltä pitäisi löytyä kaksi kohtaa:
width:60% !important;

Kasvata vaikka 60%->80%.

17.10.2017 10:08:27
#1548 [+-] Piilota Suosittele Ilmianna

Omaa säädellyt myös. Nyt sain tän pääboxin hieman läpinäkyväksi ja taustakuva pysyy nätisti taustalla:

Taustakuvan saa pysymään paikallaan:

background-repeat: no-repeat;
background-attachment: fixed;

Ja itse halusin hieman läpinäkyvyyttä tälle "pääboxille", se onnistuu:
opacity: 0.9;
filter: alpha(opacity=90);

Pienempi numero on enempi läpinäkyvyyttä.

17.10.2017 11:58:09
#1575 [+-] Piilota Suosittele Ilmianna

Kannettavan pienellä resoluutiolla menee vähän typistetyksi ulkoasu kun leveys on main-containerilla ja main-headerilla 60%. Voi korjata lisäämällä width-asetuksen alle vaikka sopivat:

min-width: 960px !important;

17.10.2017 12:20:24
#1577 [+-] Piilota Suosittele Ilmianna

Tuolta infosta napattua:
"- Tyylit voivat sisältää epäsoveliasta, epileptistä, paljon kaistaa käyttävää, yksityisyyttä loukkaavaa tai sivuston rikkovaa materiaalia"
Kiva kuulla :D

17.10.2017 14:12:20
#1620 [+-] Piilota Suosittele Ilmianna

>>1577
Muiden tyylit saa halutessaan pois päältä omista asetuksista.
Yksityisyyttä loukkaava tarkoittaa sitä, että mikäli käyttäjä laittaa tyyliin kuvan joka on hänen omalla palvelimellaan, voi hän kerätä kaikkien tyyliä katsoneiden IP -osoitteet, ilman että pystyy kuitenkaan yhdistämään näitä käyttäjiin.
Tyylilen kuvat on tarkoitus pakottaa olemaan imgurissa jolla tuo asia saadaa korjattua.

17.10.2017 15:33:49
#1662 [+-] Piilota Suosittele Ilmianna

Mobiiliraportti: toimii paremmin, kaks asiaa on vielä vähän nihkeenä: puhelimen käännön aikana palaa siihen aikasempaan tyyliin ja esim tätä ketjua lukiessa kaikki info (luolaston osuus, vauvagifi, ketjun op:n kuva jne) pakkaantuu päällekäin vasemmalla ja syö aika lailla tilaa ettei tekstillä oo ihan mahottomasti vapaata tilaa

17.10.2017 16:34:52
#1688 [+-] Piilota Suosittele Ilmianna

>>1662
Sain omalla kännyllä näyttämään suht fiksulta, kun korvasin @Termostaatti :n punaisen tekstin seuraavalla:

@media all and (max-device-width: 1000px) {
#main-header {
width:100% !important;
height: 100px !important;
font-size: large;
}
body, #main-body p, #main-header a {
font-size: 20px !important;
}
#main-container {
width:100% !important;
margin: 0px auto;
}
textarea {
width:100%;
}
}

18.10.2017 10:14:36
#2002 [+-] Piilota Suosittele Ilmianna

Pystyykö Youtubesta upotetun videon kokoon vaikuttaa muuten kun ns. "peukalonjälkikuvassa"? Esim laittamalla CSS-koodiin:
.youtube {
width:260px;
height:200px;
}
pienenee Youtube-ikkuna oikean kokoiseksi, mutta kun playerin käynnistää räpsähtää se ilmeisesti siihen kokoon jossa se on alunperin upotettu.

18.10.2017 13:18:59
#2033 [+-] Piilota Suosittele Ilmianna

Testaan tässä Termon uusinta koodailua puhelimella ja on ihan näppärä! Ei mee kommentitkaa nii rumasti ja muutenki ihan fiksun olonen :)

18.10.2017 14:39:09
#2043 [+-] Piilota Suosittele Ilmianna

Onko mitään kikkaa vaikutta kommentin preview-boxin kokoon?
Ymmärtäänkseni kokomääritykset annetaan tässä, mutta leveysasetuksen vaihtaminen omassa tyylissä ei vaikuta.

#preview {
background-color: whitesmoke;
max-width: 1000px !important;
overflow: auto;
position: absolute;
}

18.10.2017 19:57:03
#2177 [+-] Piilota Suosittele Ilmianna

>>2043
Yleensä !important lisämääre auttaa. Ja op:n infot voi halutessaan taikoa vittuun.

Esim.
#preview {
width: 400px !important;
height: 400px !important;
overflow: hidden !important;
position: absolute;
}

#preview #op-info {
display:none;
}

19.10.2017 01:39:44
#2304 [+-] Piilota Suosittele Ilmianna

>>2177

On kyllä erittäin epäkätevää, että keskusteluissa näkyy 50 viestiä per sivu

Empä olisi tätäkään vastaustasi nähnyt, jos en olisi huomannut minimaalista linkkiä [2] -sivulle

[ 79 viestiä | ] [ 1 | 2 ] Seuraava