Perustaja sonja

Anonyymius

Omavalintainen

Medioita voi lisätä

Jäsenet

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

Keskustelua tyylityksestä ja mm. tyylien jakoa

Termostaatti

16.10.2017 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

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

{
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

>>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

>>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 20:49:59
#1185 [+-] Piilota Suosittele

>>1179
Juuh eli kyllähän tää mobiilikääntöä huutaa, se hoituu vielä CSS:llä. Mutta ei sekään pelkästään ihmeitä tee.
E: Lisäsin 60% leveydet, näkyy tausta paremmin.

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

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

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:32:08
#1304 [+-] Piilota Suosittele

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

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 08:58:05
#1526 [+-] Piilota Suosittele

>>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

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

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

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

>>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

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:17:34
#1682 [+-] Piilota Suosittele

>>1620
Tyylilen kuvat on tarkoitus pakottaa olemaan imgurissa jolla tuo asia saadaa korjattua.

Tuleekos tämä koskemaan myös kuvakommentteja?

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

>>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 01:14:34 | 05:38:40
#1922 [+-] Piilota Suosittele

Vaihoin tuosta NN-CSS-tyylistä molemmat main-header ja main-container width:100% - paaaaaljon parempi!

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

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 12:37:38
#2029 [+-] Piilota Suosittele

>>1971
Täytyy sanoa, että itse en pitänyt ollenkaan 100% leveydestä. 60% oli parempi, mutta ehkä vähän liian kapea. 80% on oma valinta.

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

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

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

>>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

>>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

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