part. 1:seen pääset TÄSTÄ!
HTML-koodit
helppo ulkoasu
ensiksi vielä pieni vinkki; HTML-koodista löydät helpommin etsimäsi kohdat kun painat Ctrl + F ja kirjoitat etsimäsi kohdan hakukohtaan.
alotetaas siis nyt ihan konkreettisesti ulkoasunluonti. Tutorial opastaa yksinkertaisen leveän ulkoasun tekoon blogille, jossa on 640px levyisiä kuvia.
1. luot testaus blogin, ja ihan vaa vinkkinä se et sen vois laittaa sillee et vaan sä näät sen.
2. kopioit sun oman blogin HTML-koodin alusta loppuun sen testiblogin koodin tilalle.
3. sen jälkeen tallennat ja painat koodiosion alapuolella olevaa linkkiä ''valitse ulkoasumalli'' jolloin tulee valittavaksi erilaisia ulkoasuja. Valitse sieltä ''Minima''
4. sitten blogisi tulisi näyttää suunnilleen tältä (lisäksi vain tietysti oma headerisi ja tekstisi ja sivupalkkihärpäkkeesi)
5. mikäli halutaan 640px leveät kuvat käyttöön, sekä säilyttää sivupalkin esim. 200px leveänä, blogia pitää leventää seuraavasti:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 870px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 650px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 200px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
6. Seuraavaksi jokainen varmaan haluaa häiritsevät kehykset kuvista ja headerista pois. Tämä onnistuu yksinkertaisesti rullailemalla HEADER kohtaan ja sieltä pätkäiset kaksi koodinpätkää;
border:1px solid $bordercolor;
border: 1px solid $bordercolor;
kuvien kehykset poistetaan rullailemalla POSTS kohtaan ja sieltä pois tämän koodinpätkän:
border:1px solid $bordercolor;7. Seuraavaksi muutetaan fontteja. Fonttejen efektit yms. löydät part.1:sestä. Ensimmäisenä perusfontti, siis se joka tulee postauksiin.
/* Outer-Wrapperfontin koon voit määritellä lisäämällä tällaisen koodinpätkän ''font'' kohdan alle:
----------------------------------------------- */
#outer-wrapper {
width: 870px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: verdana;
}
font-size: 10px;postauksen otsikon fontti (visited = painettu linkki, hover = hiiri on linkin päällä, joten voit valita näihin eri värit mikäli haluat):
.post h3 {sivupalkin ja postauksen päivämäärän fontti:
margin:.25em 0 0;
padding:0 0 4px;
font-size:18px;
font-weight:normal;
line-height:1.4em;
color:#000000;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#000000;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:#000000;
}
/* Headingskommenttilinkin fontti:
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font: verdana;
font-size: 9px;
line-height: 1.4em;
font-weight: normal;
text-transform:uppercase;
letter-spacing:.2em;
color:#666666;
}
POSTS -kohdan alta löydät vähän aikaa selailemalla tämän;
.post-footer {ja sitten vielä linkit:
margin: .75em 0;
color:#000000;
text-transform:uppercase;
letter-spacing:.1em;
font: verdana;
font-size: 8px;
line-height: 1.4em;
}
tän koodin pätkän löydät aikalailla koko koodijutun alusta ja edelleen siis ensimmäinen on se perusväri, toinen on semmonen väri mikä tulee linkeille joita oot painanu ja kolmas semmoselle linkille minkä päällä pidät hiirtä. Underline on alleviivaus.
a:link {
color:#00BFFF;
text-decoration:none;
}
a:visited {
color:#00BFFF;
text-decoration:none;
}
a:hover {
color:#666666;
text-decoration:underline;
}
munmielestä tää ulkoasu vois olla passeli jo näinkin, mutta voihan sitä vielä hio parista kohtaa. Jos haluat esimerkiks noi piste''kehykset'' sivupalkista ja postauksen lopusta pois, saat ne poistamalla nämä koodinpätkät;
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
toiseks postauksen otsikko on ihan kiva ku se on tossa keskellä, samoin kommenttilinkki, ne muutetaan näin:
/* Postslisäks vielä navigointipalkin poisto toimii näin:
-----------------------------------------------
*/
h2.date-header {
margin-left:200px;
}
.post {
margin:.5em 0 1.5em;
padding-bottom:1.5em;
text-align: center;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:18px;
font-weight:normal;
line-height:1.4em;
color:#000000;
text-align: center;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#000000;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:#000000;
}
1. Mene blogisi hallintapaneeliindodiii ! Sitte vielä joku kiva headeri ja sit ois simppeli ulkoasu sitte valmis ! Kommentteja tästä tutosta otetaan vastaan :--)
2. klikkaa ulkoasu välilehteä ja sieltä edelleen muokkaa html-koodia
3. Ja kuten blogger muistuttaa Ennen kuin muokkaat mallia, kannattaa tallentaa siitä kopio
4. Paina Ctrl+F ja etsi seuraavaa tekstiä /* Variable definitions
5. Kopioi ja liitä seuraava teksti sen yläpuolelle
#navbar {
height: 0px;
visibility: hidden;
display: none;
}
kuvanmuokkaus
photoscape
1. Ekana se mitä tehtiin edellisessä postauksessa, eli 640px levyiseksi kuva ja terävyyttä lisää.
2. (jostain syystä koneen kokonäytönkaappaus kusasi ja joudun selittämään nää ilman sen parempia kuvia) eli siis toisena: klikkaa 'suodin' > 'filmitehoste' > 'Xpro-käsittely - pieni' > 'suodin' > 'filmitehoste' > 'Potra-filmi - keski'
3. klikkaa 'kirkkaus, väri' säädä 'syvennystä' kuvasta riippuen, mutta suunnilleen 60, säädä 'kirkkautta' kuvasta riippuen, mutta suunnilleen 40, säädä 'kontrastia' suunnilleen -25
valmiss !!