CSS-esimerkkejä
Olen testannut nämä koodinpätkät aina sen hetken tuoreimmalla versiolla Operasta, Firefoxista, sekä IE6 ja IE7 selaimilla. Jos jotain ongelmia kuitenkin ilmaantuu, niin tarkista ensin nämä:
- Selaimesi saattaa lukea vielä sivusi vanhemman version kovalevyltäsi. Jokaisen muokkauksen jälkeen, muista painaa aina Ctrl + F5 päivittääksesi sivun täydellisesti.
- Tarkista, että kopioit koodin varmasti oikein.
Soittonappien vaihto/poisto
Voit korvata artistisivun harmaakeltaiset soittonapit seuraavalla tavalla:
- Piirrä omat nappisi (Lofi/hifi ja Dl/Mun Mikseri/Sanoitukset)
- Siirrä kuvat nettiin, esim. kuvagalleriaasi
- Kopioi alla näkyvä koodi artistisivun asetuksista löytyvään Artistisivun CSS-laatikkoon
- Muokkaa koodissa näkyvät osoitteet vastaamaan omien kuviesi osoitetta
Huomaa, että uudet napit eivät toimi Internet Explorer 6-selaimessa selaimen huonon CSS-tuen johdosta. Lofi, Hifi ja jne. tekstit jäävät kuitenkin näkyviin. Jos haluat vain piilottaa harmaat napit kaikilta selaimilta, koodin alkuosa riittää.
Myöskin kannattaa muistaa, että jos haluat käyttää hyväksesi GIF-formaatin mahdollistamaa läpinäkyvyyttä kuvissa, Mikserin kuvagalleria muuntaa GIF-kuvat JPG muotoon.
/* Tämä osa poistaa alkuperäiset napit kaikilla selaimilla: */
.songbuttons td a img {
display: none;
}
/* Hifi / Lofi-nappi: */
.songbuttons td a + a:before {
content: url("http://www.nettisivusi.fi/Play.gif");
padding-right: 3px;
}
/* Download / Mun Mikseri / Sanoitukset-nappi: */
tr + .songbuttons td a + a:before {
content: url("http://www.nettisivusi.fi/Dl.gif");
padding-right: 3px;
}
Keltaisten nuolinappien vaihto otsikkopalkista ja vieraskirjasta
Keltaisista nuolinappeja artistivulla pääsee muokkaamaan seuraavalla koodilla. Koodi toimii Operassa, FireFox:ssa ja Safarissa. IE6 ja IE7 näyttävät vanhat keltaiset napit.
/* == Hakukentän nappi == */
#btn_search {
background: url(http://sivusi.fi/kuvasi.gif) top right no-repeat; /* Tuodaan oma nappi */
width: 0 !important; /* Poistetaan alkuperäinen nappi näkyvistä */
width: 12px; /* huijataan ie6:lle vanhat napit takaisin käyttöön */
padding-right: 12px; /* Tätä säätämällä tehdään lisää tilaa omalle napille */
height: 12px; /* Kuten yllä */
}
/* == Vieraskirjan nappi == */
#guestbook_submit {
background: url(http://sivusi.fi/kuvasi.gif) top right no-repeat;
width: 0 !important;
width: 12px;
padding-right: 12px;
}
Artistisivu englanniksi
Tämä esimerkki on vanhentunut
Artistisivun kielen voi nykyään vaihtaa englanniksi sivulta löytyvästä liukuvalikosta.
Artistisivun vasemmasta laidasta löytyvät Historia/Jäsenet/jne.-kohdat, sekä vieraskirjan kieli voidaan vaihtaa englanniksi (tai oikeastaan ihan miksi tykkää) alla näkyvällä CSS-koodilla. Huomaa, että muutokset eivät toimi Internet Explorer 6/7-selaimissa näiden huonon CSS-tuen johdosta. IE:n käyttäjille sivut näkyvät siis normaalisti suomeksi.
Lisätty 19.11.2006: Nyt myös vieraskirja käännettynä.
div > b:first-child {
display: none;
}
.artist_history:before {
content: "History:";
font-weight: bold;
}
.artist_members:before {
content: "Members:";
font-weight: bold;
}
.artist_idols:before {
content: "Influences:";
font-weight: bold;
}
.artist_equipment:before {
content: "Equipment:";
font-weight: bold;
}
#guestbook_title > .guestbook_title_container {
display: none;
}
#guestbook_title:before {
content: "Guestbook";
}
tr > #guestbook_cell_username_title {
visibility: hidden;
}
#guestbook_cell_username_title:before {
visibility: visible;
content: "Name:";
}
td + #guestbook_cell_message_title {
visibility: hidden;
}
#guestbook_cell_message_title:before {
visibility: visible;
content: "Message:";
}
Valmiiden vieraskirjapohjien koodin selitys
Vieraskirjat löydät täältä.
Värin vaihto tapahtuu muokkaamalla koodin korostettuja kohtia
Parittomien viestien pohjaväri:
.guestbook_bg1 {background-color: #1978D9;}
Parillisten viestien pohjaväri:
.guestbook_bg2 {background-color: #1067BF;}
Viestien takana näkyvän alueen väri:
#guestbook_messages,
Ylä- ja alareunan taustan väri:
#guestbook_container {background-color: #03488E;}
Otsikon ja viestien tekstin väri:
#artist_guestbook,
"Nimi" ja "Viesti"-tekstien väri:
guestbook_cell_submit_title,
#guestbook_cell_message_title,
Viestikentän vieressä näkyvän nimimerkin väri:
#guestbook_cell_username_title,
Mikseriläisten nimilinkin väri:
a.guestbook:link,
Vierailtu linkki:
a.guestbook:visited,
Linkin väri, kun hiiren osoitin on sen päällä:
a.guestbook:hover,
Linkin väri painettaessa:
a.guestbook:active {color: #fff;}
Tässä koodissa kaikilla linkin tiloilla sama väri.
Kellonaika ja päiväys vieraskirjan viesteihin
Päivämäärät ja kellonaika näkyviin vieraskirjan viesteihin:
.guestbook_entry_date {
display: inline;
float: right;
}
Kappaleen kansikuvan poisto
Jokaisen kappaleen vasemmalla puolella näkyvän kuvan saa piilotettua seuraavasti:
.songcover img {
display: none;
}
Jos kappaleen soittonappien ja lisätietojen haluaa sisentyvän "biisilaatikon" vasempaan laitaan, kannattaa sen sijaan tämän tapainen lähestymistapa:
.songcover {
display: none;
}
Idolit/vaikutteet-laatikon sisällön rivitys
Tämä koodi rivittää Idolit/Vaikutteet-laatikon sisällön ja lisää jokaisen rivin eteen viivan, sekä poistaa pilkut rivien perästä. IE:ssä viivoja ei tule. HUOM! Tämä koodi poistaa kaikki mahdolliset muotoilut Idolilaatikosta, kuten taustakuvan ja reunaviivat. Otsikko ja linkit kuitenkin säilyvät ennallaan.
.artist_idols {
visibility: hidden;
}
.artist_idols b {
visibility: visible;
display: block;
clear: both;
}
.artist_idols a {
visibility: visible;
display: block;
position: relative;
top: 5px;
line-height: 1px;
clear: both;
}
.artist_idols a:before {
content: "\A- ";
}
.artist_equipment { padding-top: 1em; }
Taustakuvan lisäys artistisivulle keskitettynä
Taustakuvan asettaminen artistisivulle onnistuu helpoiten suoraan lisäämällä kuvan osoitteen sivun asetuksista, mutta jos haluaa vaikuttaa siihen, kuinka se asemoidaan sivulle, tarvitsee ottaa CSS avuksi. Seuraavassa pieni esimerkki, kuinka saa sivuilleen keskitetyn taustakuvan.
body {
background: url("http://www.jokusivu.fi/taustakuvasi.jpg");
background-position: center center;
background-repeat: no-repeat;
}
Helpotusta tabiralliin Operalla
Artistisivua muokatessa touhu voi helposti ajautua tabi-/ikkunapasianssiksi välillä artistisivu- CSS-editori- "Kotisivun ulkoasu"-sivu. Operan käyttäjät voivat helpottaa taakkaansa lataamalla modauskokeilunsa suoraan selaimen välimuistista. Näin jok'ikistä pientä muutosta ei tarvitse erikseen kierrättää Mikserin palvelimien kautta.
Homma hoituu seuraavalla tavalla:
- Lataa artistisivusi omaan tabiinsa.
- Lataa artistisivusi CSS myös omaansa.
- Paina Ctrl + F3 saadaksesi näkyviin "CSS-koodisi lähdekoodin". Opera avaa uuden tabin, joka näyttää saman CSS:n, kuin edellisessäkin tabissa, mutta nyt sitä pääsee muokkaamaan.
- Muokkaa koodia tässä tabissa haluamallasi tavalla ja paina lopuksi "Ota muutokset käyttöön"-nappia.
- Viimeiseksi palaa takaisin artistisivullesi ja päivitä ( F5 ) se.
(6. Muokkailun lopuksi kopioi uusi koodisi vanhan päälle "Artistisivun CSS"-laatikon.)
Uusien muokkauksien pitäisi nyt näkyä sivuillasi. Tämä voi kuulostaa aluksi hankalasti omaksuttavalta tekniikalta, mutta idean tajuttuasi ymmärrät varmasti suuren helpotuksen, minkä se tuo työtaakkaasi. Ainoana hallapuolena mieleen tulee se, että koodin toimivuus muilla selaimilla täytyy edelleen testata "Artistisivun CSS"-laatikon kautta.
On hyvä muistaa, että tämä tekniikka ei rajoitu pelkästään omalle artistisivullesi, vaan voit myös muokata mitä tahansa muuta sivua Internetissä. Eli jos esim. kaveri pyytää apuasi sivujensa muokkaamiseen, voit testa koodisi suoraan hänen sivuillaan ilman ylimääräistä säätöä.