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

}

Edellinen [ 1 | 2 ]  
19.10.2017 18:06:59
#2550 [+-] Piilota Suosittele Ilmianna

Ai tähän olisi ollut ohjekin ja valmiiksi tyyliä jaossa. D'oh.
Piti sitten tutkia sivuston koodia ja kurkkia miten css:t käyttäjillä nimetään ja ladataan. Ja sitten käydä toisen käyttäjän profiilissa + avaamassa ko. kaverin css ja lainaamassa koodi sieltä.

Q'heh, q'heh, q'heh.

19.10.2017 23:03:32
#2693 [+-] Piilota Suosittele Ilmianna

>>1548
Paremmiin toimi kun lisäs sen läpinäkydyyden suoraan taustan väriin niin ei mene kaikki kuvat ja kommentit läpinäkyväksi
itsellä esimerkiksi:

}
#main-container {
background-color: #ffffffe8 !important;
width:80% !important;
margin: 0px auto;
}

19.10.2017 23:15:22
#2695 [+-] Piilota Suosittele Ilmianna

En tiedä onko järkeä matkia kuolevan sivuston ulkoasua, mutta tein joka tapauksessa kokeiluja oman näkymäni CSS:llä ja lisäsin headeriin kuvan. Tuskin kuitenkaan jätän tuollaiseksi. Lisäksi fiksailin preview-boksia vai mikä piru sen nimi on, joka on nyt huomattavasti pienempi ja scrollattava. Edellämainittujen lisäksi mm. fontteja fiksailtu ja sivusto on kiinteästi 1000px:n levyinen.

CSS tuskin on muotoiltu kaikkien taiteen sääntöjen mukaan, mutta näyttäisi ainakin jossain määrin pelittävän halutunlaisesti. Koodausta paremmin hallitsevat annelkoot vinkkejä.

Kuva liittyy.

20.10.2017 10:01:21
#2744 [+-] Piilota Suosittele Ilmianna

>>2693
Ei toimi Chromella, meillä se vaan on eri juttu :(
Tuolla koodille main-containerista ei tule läpinäkyvä, vaan harmaa.

EDIT: Chromella toimii näemmä seuraava:
background-color: rgba(255, 255, 255, 0.9) !important;

20.10.2017 12:27:23
#2767 [+-] Piilota Suosittele Ilmianna

>>2744
omalla chromella toimii ihan hyvin

E: sitä voi testata tuolla vasen hiiren näppäin ---> inspect sit valitsee ton main-containerin
ja sieltä onko noi nyt filtereitä

20.10.2017 13:43:16
#2778 [+-] Piilota Suosittele Ilmianna

>>2767
Testasin Firefoxilla, ja sillä kyllä toimi. Eli en uskoakseni kämmännyt mitään.. Ehkä omassa Chromessa on jotain häikkää, mutta onneksi ainakin tuo rgba(255, 255, 255, 0.9) toimii.

21.10.2017 01:04:00
#2997 [+-] Piilota Suosittele Ilmianna

muuttakaa näihin arvoihin niin tilanpäivitysikkuna muuttuu järkevämmän kokoiseksi

textarea {
border: 1px solid #afafaf !important;
width:200%;
height: 200px;

21.10.2017 13:21:40
#3139 [+-] Piilota Suosittele Ilmianna

Toivoisin kyllä Luolastolle jotain omaa virallista tyyliä joka ei olisi nappulasta kopioitu. Itsellähän tulee luolastosta mieleen jonkinlainen lautaroolipeli, en tiedä oisko siihen henkeen sopiva "tyyli" sitten? En tiedä. Itselläni ei riitä mielenkiinto kovinkaan kauheasti kikkailla loputtomiin millään CSS:llä joka on vieras itselle. Nyt tämä saitti pelittää jotenkin kutenkin.

25.10.2017 18:10:17
#4374 [+1] Piilota Suosittele Ilmianna

Alla omassa käytössä oleva, mukautettu termostaatilta sekä anterolta

body {
background-position:center;
background-image: url(https://i.imgur.com/uafjzBw.png) !important;
min-height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;}
}
font-family: tahoma, verdana, arial, sans-serif;
}

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



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


#main-header {
background-color:#bf0000 !important;
width: 1000px !important;
margin: 0px auto;
color: #bf0000;
margin-top: -30px !important;
height: 100px !important;

background-image: url(https://i.imgur.com/8BsVV3n.png);
background-position: 100% 100%;
background-repeat: no-repeat;
}

#main-header a {
color:#fff;
font-weight:bold;
}


#main-container {
background-color: #fff !important;
width:1000px !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);
}


.youtube {
width:260px;
height:200px;
}


#preview {
width: 560px !important;
height: 300px !important;
overflow: scroll !important;
border: 5px solid #1795ac !important;
border-radius: 10px !important;
margin-top: 15px !important;
margin-bottom: 15px !important;
position: fixed !important;
left: 50% !important;
top: 50% !important;
margin-left: -280px !important;
margin-top: -150px !important;
}


.message-container {
font-size: 13px !important;
}


.message-header {
font-size: 13px !important;
}


#main-body p {
font-size: 1.1em !important;
}


.date-added {
font-size: 0.8em !important;
}


.date-edited {
word-wrap: break-word !important;
font-size: 0.8em !important;
}


.channels-navi {
margin-top: 40px !important;
}


.rates-container {
font-size: 1.2em !important;
}


.message-meta {
width: 150px !important;
}


textarea {
border: 1px solid #afafaf !important;
width: 500px;
height: 130px;
}


.medias img:hover {
filter: none !important;
transform: none !important;
}


tr, article, .status-update{
border-bottom: 2px solid #b2dce5 !important;
}


hr {
margin-top: 5px;
margin-bottom: 5px;
}


.message-edit-footer {
font-size: 1em !important;
}


#message-submit, #submitMessage {
border: 1px solid #008da9;
text-shadow: #01738a 0px -1px 0px;
background-color: #008da9 !important;
}

#main-container {
background-color: #f2eded !important;
}

25.10.2017 18:59:12
#4393 [+-] Piilota Suosittele Ilmianna

Päivittääkö Termo muuten vielki tätä vai ootko tyytyväinen tähän nykyseen? Mietein vaa ku ei oo kuulunu mitää huutisia :(

25.10.2017 21:21:42
#4418 [+-] Piilota Suosittele Ilmianna

Fiksailin ja korjailin teemaani ja laitoin uuden jakoon. Muun muassa seuraavat muutokset tehty:

- Preview boksin paikkaa muutettu niin ettei mene linkin päälle
- Selaimen ja sivun vasemmassa reunassa oleva väli poistettu
- Fonttikokoja tarkistettu
- Selitteitä lisätty
- Koodia putsailtu omilta mokilta ja tyhmyyksiltä
- ym ym ym

Meikäläisen teema saatavilla edelleen osoitteesta: http://textuploader.com/d4vbg

27.10.2017 23:46:22
#4850 [+-] Piilota Suosittele Ilmianna

>>4848
No tuo teki jotain mut vittu ei se ainakaan ihan kaikkea muuttanut, oon kyllä kännissö ja käytän huonoja laseja että voin olla väärässäkin...

27.10.2017 23:53:07
#4851 [+-] Piilota Suosittele Ilmianna

>>4848
Pitäiskö se olla:
font-family: "Comic Sans MS", "Comic Sans", cursive !important;

Eli jokainen välejä sisältävä fontti erikseen eroteltuna lainausmerkeillä. Sain tosin toimimaan kokonaan ilman lainausmerkkejä.

28.10.2017 01:28:47
#4864 [+-] Piilota Suosittele Ilmianna

>>4851
>>4852
Hei, ei vittu nyt toimii!!! Thänks äijille! Mut oo, onkohan vika vaan mulla, jos haluun mennä kattoo lainausta ni ei toimi, se ei vie mihinkään... Miten teillä...

ps. hyi vittu, tää onki aika kauhee tää comic sans :-D

30.10.2017 21:27:44
#5334 [+-] Piilota Suosittele Ilmianna

olen koittanut muokata tota omaa sivua, mutta ei tunnu onnistuvan. Voisko joku laittaa ihan copypaste-ohjeet miten saan asetettua esim. taustakuvan sivulleni?

30.10.2017 21:56:32
#5336 [+-] Piilota Suosittele Ilmianna

>>5334
Tarkoitatko sitä taustakuvaa, joka defaultteemassa on tällä hetkellä tiiliseinä?

Jos tarkoitat, niin laita body tagin alle:
background-image: url(oman taustakuvan urli tähän) !important;

Taustakuvan voit tallentaa vaikka imguriin.

02.11.2017 09:04:28
#5777 [+-] Piilota Suosittele Ilmianna

>>5765
Kokeiles noita.

/* Kommentit erottava väliviiva */
tr, , .status-update{
border-bottom: 2px solid #b2dce5 !important;
}

/* Painikkeiden muotoilu */
input[type="submit"] {
border: 2px solid #008da9 !important;
}

/* Tekstinsyöttölootat */
textarea {
border: 1px solid #afafaf !important;
}

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