Uusi kuva osoitteessa: https://peda.net/kuopio/p/kk2/kuvatiedostoja/kuvia/vpjp1pk

TÄSSÄ ESIMERKKI KUVIEN MUUTTAMISESTA CSS-TIEDOSTOON (muuta vahvennettujen URL-osoitteiden tilalle oman kuvasi osoite, neljään eri kohtaan). Huom. muutoin tämä CSS-pohja ei ole enää käyttökelpoinen, käytä kaupungin pääsivun pohjaa jos haluat sisällyttää yläbannerin kuvasi CSS-tiedostoon! Käytä kouluille tehtyä pohjaa jos muutat kuvaa usein tai haluat tehdä sen "tuunaus-työkalulla".

******************************************************************

/* Koko sivun liukuväri*/
body > main
{
background: #fff;
background-image: linear-gradient(to bottom, #fff 0%, #ffffff 40em, #FFF 100%);
color: #000;
border-bottom: solid 0.25em #fc1107;
}

/* Muokkaa ja Jaa näkymän taustaväri*/
body.modify > main
{
background: #fff;
background-image: linear-gradient(to bottom, #fff 0%, #ded9cf 20em, #ded9cf 50em, #FFF 100%);
}

/*Peda.net ja henkilot linkin tausta lapinakyvaksi*/
header nav.global .links > span a,
header nav.global .links > span.persondirectory,
header nav.global .links > span.frontpage,
header nav.global input.s, header nav.global button
{
background: transparent;
}


/* Sivun otsikon taustakuva eli bannerin taustakuva tämä voidaan vaihtaa koulukohtaiseksi*/
body > header
{
background: url(https://peda.net/kuopio/p/kk2/kuvatiedostoja/kuvia/vpjp1pk:file/download/") no-repeat;
}

/*ylapalkin taustavarin muutos punaiseksi liukuvariksi seka perusvari tekstille*/
header nav.global
{
background: transparent;
background-image: linear-gradient(to right, rgba(252, 0, 17, 1) 10em, rgba(252, 0, 17, 0.5) 30em);
color: #fff;
}


/* Sivun otsikkoalueen taustakuva otsikkoalueen ylamarginaali ja otsikkoalueen tekstin perusvari */

header nav.path
{

background: transparent;
padding-top: 0.5em;
color: #fff;
}

/*Päätason otsikon väri ja varjostus seka fontin vaihtaminen isoiksi kirjaimiksi fontin väri musta*/
header .path .service.toplevel a, header .path .service.toplevel a:hover {
white-space: nowrap;
font-weight: 600;
text-transform: uppercase;
color: #000;
}

/*Tällä määritellään päätason sivun ali tai yliotsikon tekstin tyyli normaaliksi*/
header .path .service.toplevel a .subtitle1, header .path .service.toplevel a .subtitle2
{
font-family: 'Raleway', 'Frutiger', 'Ubuntu', 'Segoe UI', 'Segoe WP', 'Open Sans', 'Trebuchet MS', sans-serif;
text-transform: none;
}

/*Nakymaton otsikko, joka maaraa otsikkorivin korkeuden*/

header .path .service.toplevel a, header .path .service.toplevel a:hover
{
margin: 0;
padding: 0em;
width: 100%;
margin-bottom: 0em;
background: transparent;
}

/*Murupolun vari ja nostetaan murupolku kuvakkeen ylapuolelle, jos kuvake tulee murupolun päälle*/

nav.path .toplevel > .pathitem
{
position: relative;
background: transparent;
color: #fff;
/*padding-top: 0.4em;
padding-bottom: 0.4em;*/
z-index: 2;
}

/*Murupolun linkkien yleisvari*/
header .path a
{
color: #000;
}

/*Murupolun linkkien vari otsikon jalkeen*/
header .path .toplevel a
{
color: #000;
}

/*Murupolun viimeisen linkin vari*/
header .path .pathitem.toplevel .pathitem.redundant a
{
color: #000;
}


/*Murupolun linkkien ja vierailtujen linkkien efekti*/

header .path .pathitem a:link, header .path .pathitem a:visited
{

color: #000;
text-shadow: 0 0 0.2em #FFFFFF;

}

/* Murupolun linkkien efekti klikattaessa tai hoveroitaessa */
header .path .pathitem a:hover, header .path .pathitem a:active
{
color: #000;
text-shadow: 0 0 0.2em #FFFFFF, 0 0 0.3em #ffffff, 0 0 0.4em #ffffff;

}

/*Muropolun linkkien jakaja eli > merkin väri*/

header .path .pathitem .d
{

color: #000;

}


/*Sivun otsikon vari*/
h1 a, h1 a:link, h1 a:visited
{
color: #000;
}

/*Moduuleiden otsikoiden vari*/
h2 a, h2 a:link, h2 a:visited
{
color: #000;
}

/* Tällä määritellään sivun ikonin koko ja sijainti. Hieman sisennetty ja aavistuksen nostettu */

header .path .pathitem.toplevel a img
{
height: 3em;
max-width: 3em;
position: relative;
left: 0.5em;
top: 0em;
margin-top: -0.3em;
margin-bottom: 0em;
margin-right: 1.5em;
z-index: 1;
}

/*Jos selain on 46em tai alle, niin kaytetaan lisaksi alla olevia tyyleja*/
@media all and (max-width:46em)
{

body > header
{
background: #ffffff;
background: #ffffff url(https://peda.net/kuopio/p/kk2/kuvatiedostoja/kuvia/vpjp1pk:file/download/") no-repeat;
background-position: 7em 0%;
}

header nav.global
{
background: transparent;
color: #fff;
background-image: linear-gradient(to right, rgba(252, 0, 17, 1) 5em, rgba(252, 0, 17, 0.3) 30em);
color: #000;
}

}

/*Jos selain on 30em tai alle, niin kaytetaan lisaksi alla olevia tyyleja*/
@media all and (max-width:30em)
{

body > header
{
background: #ffffff url(https://peda.net/kuopio/p/kk2/kuvatiedostoja/kuvia/vpjp1pk:file/download/") repeat-y;
background-image: url(https://peda.net/kuopio/p/kk2/kuvatiedostoja/kuvia/vpjp1pk:file/download/"), linear-gradient(to bottom, #9DCFF4 0%, #E9F3FC 4em, #ffffff 100%);
background-position: 5em 0%;
}

/* Yläpalkin taustavärin muutos ja perusväri tekstille pienellä näytöllä eli alle 30em*/
header nav.global
{
background: transparent;
color: #fff;
background-image: linear-gradient(to right, rgba(252, 0, 17, 1) 5em, rgba(252, 0, 17, 0.3) 30em);
color: #000;
}

header .path .pathitem.toplevel a img
{

position: relative;
left: 0em;
top: -0.2em;
margin-top: 0em;
margin-bottom: -0.1em;
margin-right: 0.8em;
}

}


/* Tällä määritellään sivun otsikolle heittovarjo ja rajoitetaan sen rivittymistä pienemmillä näytöillä */
header .path .service.toplevel a, header .path .service.toplevel a:hover
{
text-shadow: 0.05em 0.05em 0.1em rgba(255,255,255,0.9);
white-space: nowrap;
}

/* Tällä määritellään että sivun otsikko rivitetään kuitenkin, jos sivun leveys on vähemmän kuin 30em */

@media all and (max-width:30em)
{
header .path .service.toplevel a, header .path .service.toplevel a:hover
{
white-space: normal;
}
}


/* Tällä laitetaan otsikkotekstien eteen lisää marginaalia ihan pienillä näytöillä*/
@media all and (max-width:30em)
{
header .path .toplevel .service.toplevel
{
padding-left: 0.6em;
margin-right: -0.7em;
}
}


/*Tyhja murupolku eli murupolulle ei varata tilaa, jos siinä ei ole linkkejä*/
header .path .pathitem.toplevel > .pathitem.placeholder, header .path .pathitem.toplevel > .pathitem.redundant {
min-height: 0em;
padding: 0;
}