Terug naar de index van deze gebruiksaanwijzing

De Layout van je blog veranderen.

Klik op Look'n feel 
Links op skin manager en dan rechts op Customise

Je hebt 2 mogelijkheden, de CSS wizzard en de directe HTML toegang tot het script wat de opbouw van je blog bepaalt.

De onderdelen van de Wizzard zijn ook niet altijd even duidelijk, vandaar dat we je toch wegwijs proberen te maken in de opmaak van het HTML script. Zo moeilijk is het nou ook weer niet, gewoon opletten wat je doet.

Als het helemaal fout gaat dan kan je het script wat hier staat in zijn geheel kopiëren en het bestaande script geheel vervangen.
Voor de luiaards onder ons is dit een prima optie, je hoeft dan tenslotte alleen die zaken die er teveel in staan via Look 'n feel te verwijderen en de juiste afbeelding te uploaden in je header.

Of je bent dankbaar voor die zaken die je nu hebt, want beter goed gejat, dan zelf slecht verzonnen of je kijkt even verder hieronder.

Hieronder geven we de belangrijkste instellingen weer, waar ze voor zijn en wat je kan doen.
We geven alleen aan, wat wij zelf hebben gewijzigd in onze weblog, de rest probeer jezelf maar uit.
Als je al een eind op streek bent met de layout van je weblog, kopieer dat script dan tussentijds en sla dat op in Word of een andere tekstverwerker.(kladblok)
Dan kan je als het helemaal fout gaat, dat script weer terugzetten.

De blauwe tekst  is van ons, die hoort er niet in.
De uitleg van een onderdeel slaat op het stuk script wat er boven staat.

/* =Masthead */

#masthead {
text-align:center;
background:transparent url(http://files.blog-city.com//files/A06/59563863/p/f/denhaagtekijk2.jpg) 0 0 no-repeat;
height:165px;
0px;
border:5px solid #FFE000;
}

/* =Masthead */
Die 165 is de hoogte van je header dus als je aan een smalle streep genoeg hebt zet je die op 45 of zo. de kop waar jezelf een panorama foto in kan plaatsen.
Je kan die kop natuurlijk ook hoger maken voor een grotere afbeelding 235 bijvoorbeeld.
Als je aan een smalle streep genoeg hebt zet je die header op 45 of zo.

Die afbeelding in je header moet je zelf maken, verzinnen of pikken en dan uploaden.
Je gaat naar,  my blog, extra en dan klik je links op file space en dan op manage file space.
Nu kan je die afbeelding uploaden.
Onder die afbeelding komt de file name van de afbeelding.
Kopieer die file naam
Zoals als eerder aangegeven kan het, met het aanbrengen van wijzigingen nog wel eens fout gaan met die header en de wizzard kan je tig keer gebruiken maar het lukt niet, omdat de vertaalfunctie naar dit HTML script niet goed blijkt te werken en je de gewenste afbeelding niet in je header krijgt.
Hierboven zie je tussen de haakjes de file name van onze header.
Je kan dus de file name van jouw header tussen die haakjes plakken in het HTML script.

/* =fonts */

body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
/* =Links & Lists */

/* =fonts */
Dit is de layout van je calendar, die hebben wij ingesteld op 12 px, je kan de letters/cijfers kleiner of groter maken door de waarde te veranderen.

a img {
border:none;
}

a {
color:#FABD0D;
text-decoration:none;
}

a:hover {
color:#FABD0D;
text-decoration:underline;
}

#footer a {
color:#fff;
text-decoration:none;
}

#footer a:hover {
color:#fff;
text-decoration:underline;
}

#column0 a.comment {
padding-left:25px;
background:transparent url(/styles/skins/variant12/comment_img.gif) 0 0 no-repeat;
float:left;
color:#FABD0D;
text-decoration:none;
}

#column0 a.comment:hover {
color:#FABD0D;
text-decoration:underline;
}

a.blogtitle {
color:#FABD0D;
text-decoration:none;
}

a.blogtitle:hover {
color:#FABD0D;
text-decoration:underline;
}

#column1 a.blogtitle, #column2 a.blogtitle {
color:#FABD0D;
text-decoration:none;
font-size:12px;
}

#column1 a.blogtitle:hover, #column2 a.blogtitle:hover {
color:#FABD0D;
text-decoration:underline;
}

.widget ul {
margin:5px 0;
padding:0;
list-style-type:none;
}

.widget li {
display:block;
padding:3px;
}

.widget a:link, .widget a:visited {
color:#FABD0D;
text-decoration:none;
}

.widget a:hover {
color:#FABD0D;
text-decoration:underline;
}


/* =Text */

h1 {
font-size:20px;
font-style:normal;
font-weight:normal;
font-variant:normal;
line-height:100%;
color:#FABD0D;
text-decoration:none;
padding:15px 0 0 20px;
margin:0;
}

h2 {
font-size:16px;
font-style:normal;
font-weight:bold;
font-variant:normal;
line-height:100%;
color:#FABD0D;
padding:0 0 10px 0;
margin:0;
}

h2 {
Dit is de eerste regel (my new entries) onder je header en tevens de tekst boven je kalender
De waarde van 16px kan je veranderen.

#column0 h2 {
padding:10px 0 0 10px;
}

#column1 h2, #column2 h2 {
color:#FABD0D;
}

#column0 h3 {
font-size:18px;
font-style:normal;
font-weight:normal;
font-variant:normal;
line-height:100%;
color:#FABD0D;
padding:20px 0 0 20px;
margin:0;
}

#column0 h3 {
Dit is de tekst van je onderwerpen op je hoofdpagina
Voor de teksthoogte hebben wij die waarde gewijzigd in 18 px.

#column1 h3, #column2 h3 {
font-size:14px;
font-style:normal;
font-weight:normal;
font-variant:normal;
line-height:100%;
color:#FABD0D;
padding:20px 0 0 0;
margin:0;
}

p {
font-size:12px;
padding:5px 0;
margin:0;
}

#column1 h3, #column2 h3 {
Dit is de belangrijkste, de hoogte van de tekst van de comments van je bezoekers, dat is haast niet te lezen, zet die waarde op 12px of desnoods op 14px.

En toen ging het fout met de header, zie bij Masthead (eerste script bovenaan) hoe je, je header alsnog op zijn plaats kan krijgen.

#footer p {
font-size:11px;
line-height:160%;
color:#333;
}

#column0 .bodytext {
font-size:11px;
line-height:160%;
color:#333;
padding:4px 20px 4px 30px;
margin:0px;
}

#column1 .bodytext, #column2 .bodytext {
font-size:10px;
line-height:140%;
color:#333;
padding:4px 0 4px 0;
margin:0px;
}

#column0 .date {
color:#999;
padding:4px 0 0 20px;
}

#column1 .date {
color:#999;
padding:4px 0 0 5px;
}

#column2 .date {
color:#999;
padding:4px 5px 0 0;
}

#column0 .tags {
color:#999;
padding:8px 0 8px 30px;
}

#column1 .tags {
color:#999;
padding:4px 0 4px 5px;
}

#column2 .tags {
color:#999;
padding:4px 5px 4px 0;
}

#column0 .footer {
color:#999;
padding:10px 0;
}

#column1 .footer, #column2 .footer {
color:#999;
padding:4px 0;
}

#column1 .commentholder, #column2 .commentholder {
padding:2px 0 2px 10px;
}

#column0 .commentholder {
float:left;
padding:2px 0 2px 30px;
}

.blogname {
font-size:26px;
font-style:normal;
font-weight:normal;
font-variant:normal;
line-height:100%;
color:#fff;
text-decoration:none;
padding:10px;
margin:0;
}

.blogname {
Je blognaam in de header (onze teksthoogte, waarde 26px)

/* =Structure - small changes to this section can cause dramatic changes to the structure of your blog, do so at your own risk */

body {
background:#FABD0D url(/styles/skins/variant12/bg.jpg) 0 0 repeat;
}

#column0 {
background:#fff url(/styles/skins/variant12/column0_grad.jpg) left top repeat-x;
border:3px solid #FFE000;
}

#column1 {
background:#fff url(/styles/skins/variant12/column1_grad.jpg) left top repeat-y;
border:3px solid #FFE000;
width:164px;
}

#column2 {
background:#fff url(/styles/skins/variant12/column2_grad.jpg) right top repeat-y;
border:3px solid #FFE000;
width:164px;
}

#column0 .blog-panel {
padding:0;
}

#column1 .blog-panel, #column2 .blog-panel {
margin-top:-10px;
padding:0;
font-size:11px;
}
#column0 .blog-panel-content {
padding:0 0 5px 0;
}

#column1 .blog-panel-content, #column2 .blog-panel-content {
padding:0;
}

#column0 .blog-panel-footer {
height:20px;
padding:0 10px 0 0;
margin:0 0 20px 0;
background:transparent url(/styles/skins/variant12/footer_bg.gif) center bottom no-repeat;
}

#column0 .blog-panel-footer {
De tekst boven je comment venster, waar je mensen uitnodigt met "reageer" of iets dergelijks.

#column1 .blog-panel-footer, #column2 .blog-panel-footer {
padding:0;
border-bottom:none;
}

#column0 .blogentry-comment {
padding:6px 30px 6px 30px;
border-bottom:1px dashed #999;
}

#column1 .blogentry-comment, #column2 .blogentry-comment {
padding:5px 0 5px 0;
}

#column0 .widget {
padding:10px 0 5px 0;
margin: 0 0 20px 0;
}

#column1 .widget, #column2 .widget {
word-wrap:break-word;
overflow:hidden;
padding:10px;
margin: 0 0 10px 0;
}

#footer {
height:70px;
text-align:center;
}

#blog-footer {
padding-top:20px;
text-align:center;
}

fieldset {
background-color:#f5f5f5;
}

form {
margin:0;
padding:0;
}