Naar de inhoud

Uitzicht Blog

Hier zullen verschillende layouts komen van bloggers die dit wensen.
seniorennet.beseniorennet.be

de datum

.datum
{
 font-size: 12px;                                         grootte van de tekst
 font-family: Arial, Verdana, Helvetica;       lettertype
 font-weight: bold;                                     vet of niet vet  - bold of normal
 color: #FF69B4;                                      kleur veranderd in hotpink
}

Reageer op dit bericht
Reageer op dit bericht

Reageer op dit bericht

Een titel of je eigen website toevoegen

Titel en ondertitel aanpassen

Hier kan je de kleur, grootte, lettertype aanpassen voor de titel bovenaan

.top_titel
{
 padding: 16px;            hoe hoger je dit aantal zet, hoe groter het achtergrondvlak wordt.
 text-align: center;        
 font-size: 30px;           hier kan je de lettergrootte instellen
 font-weight: bold;        hier kan je kiezen tussen vet of normaal zijnde- bold of normal 
 font-family: Courier New, Courier, mono;      hier kan je een ander lettertype ingeven
 background: #EE82EE;   hier kan je een ander kleurtje zetten of gewoon de background wegdoen dan staat je tekst gewoon op dezelfde achtergrond als je hele bladzijde.
 color: #800080;    hier kan je de kleur van je tekst veranderen 
}

Hier kan je de kleur, grootte, lettertype aanpassen voor de ondertitel bovenaan

.ondertitel
{
 font-family: Courier New, Courier, mono;  lettertype veranderen
 font-size: 17px;                                         grootte van de tekst
 font-weight: bold;                                      vetgedrukt of normaal
 text-decoration: none;                                hier zou je nog je tekst kunnen onderlijnen = underline ipv none 
 color: #FFFFFF;                                      hier de kleur van de tekst
}

Vergeet vooral geen punt komma  ;  na iedere afsluiting - ook belangrijk zijn de accolades  {    } daartussen staat de stijl die moet toegepast worden op het desbetreffende deel

Reageer op dit bericht

achtergrond veranderen - volledig scherm

In plaats van alleen het middenvak een nieuw achtergrondje of kleurtje te geven kun je ook opteren om het over de hele bladzijde te doen.

Daarom gaan we bij 'general_bg'
de code gaan aanpassen

.general_bg
{
  background-image: url(http://img5.imageshack.us/img5/1120/texture1551514dd6.jpg);
  background-attachment: fixed;
  background-position:top center;    
}

Daartoe kunnen we dan de 'content_bg' code verwijderen maar opgepast enkel hetgeen tussen { } staat zoals voorbeeld hieronder

.content_bg
{

}

Reageer op dit bericht

backup maken

Ga naar 'uitzicht wijzigen'
Klik daar bij ' Geavanceerd - uitzicht aanpassen'  in het witte vak
met je rechtermuis klik en doe ' alles selecteren '
daarna nog eens rechtermuis klik en 'kopiëren'

Open nu je kladblok op je computer of word
en plak het erin en geef het een naam vb backup-180609
Sla op in een mapje vb Bloggen en maak daarin een submapje voor Backup
Daarmee heb je steeds je eigen backup voor als het mocht misgaan.



367052-c70def1d5cbe43b02e3bfd42f929d3ee.jpg

2 reacties Reageer op dit bericht

fase 3 - de achtergrond - middenvak

Als je nu enkel het middenstuk van je blog een ander kleurtje of een afbeelding wil geven, dan doe je dat bij volgende code bij wijzigen uitzicht blog.

.content_bg
{
  background-image: url(http://img5.imageshack.us/img5/1120/texture1551514dd6.jpg);
  background-attachment: fixed;
  background-position:top center;
}


Wil je enkel een ander kleurtje
dan pas je de code als volgt aan

.content_bg
{
   background: #FF0000;     dit is vb. Rood
}

Dit zal dus enkel het middenvak veranderen!

Reageer op dit bericht

lijst blokjes veranderen - fase 2

Als je de lijst blokjes wil veranderen kan dat ook - ofwel neem je een ander list nummer van seniorennet (kan je gaan bekijken bij de uitzicht blog seniorennet) ofwel zoek je er eentje op het internet.


LI
{
 list-style-image: url(http://media.bigoo.ws/content/icon/mini_icons/mini_icon_105.gif);
}

je verandert enkel de link tussen de haakjes.


Dit is het voorbeeld die ik gevonden heb - als je de code kopieert krijg je een heleboel overbodige links - dus haal er enkel de link uit die nodig is zie rode tekst


<a href="http://www.bigoo.ws"><img alt="myspace glitters" border="0" src="http://media.bigoo.ws/content/icon/mini_icons/mini_icon_105.gif"></a><p style="margin-top: 0; margin-bottom: 0"><a href="http://www.bigoo.ws">myspace glitters</a></p>


moest je dit niet doen, dan zou je icoontje zo staan met de ondertekst myspace glitters

myspace glitters
myspace glitters

**********

Reageer op dit bericht

wijzigen uitzicht blog nr17 - fase 1 - de hyperlinks aanpassen

Ik zal hier proberen om het zo simpel mogelijk uit te leggen aan de hand van kleurtjes, hoe je dingen kunt veranderen en waar de code staat bij wijzigen uitzicht.

<HTML>
<HEAD>

{META_TAGS}

<style>

a   dat zijn de hyperlinks
{
 font-family: Arial, Verdana, Helvetica;
    <-- lettertype veranderen                                                 hier kan je een nieuw lettertype bijvoegen - vergeet niet na elk type die je bijvoegt een komma te plaatsen en nadat alle lettertypes op hun plaats staan afsluiten met een punt komma ; anders lukt het niet- doe ook de gewone lettertype niet weg want indien het soort lettertype dat jij verkiest niet op de pc van de gebruiker staat kan die niks lezen - Arial & Verdana zijn types die op iedere computer wel te vinden zijn.
 font-size : 14px;  hier kan je de grootte van de tekts mee bepalen - uitproberen wat je best vindt maar maak het ook niet te groot.
 font-weight: normal;   hier kan je kiezen voor normal, vetjes, schuin
 text-decoration: none; Daar we hier de hyperlinks aan het veranderen zijn zetten we decoration none anders blijven je links onderlijnt
 color: #FFFF00;  hier verander je de kleur van je tekst #ffff00 is dus geel
}

a:hover     de hover wilt zeggen als je met je cursor over de link gaat
{
 font-family: Arial, Verdana, Helvetica;
  je lettertype die je hierboven veranderd hebt moet je hier nu idem doen
 font-size: 14px; ook je grootte aanpassen gelijk je hierboven eventueel hebt gedaan anders zal je tekst springen
 font-weight: normal; idem dito hier
 text-decoration: underline;  hier kan je nu kiezen! ofwel komt er een lijntje als je met je cursor over de tekst gaat ofwel zet je "none" en dan onderlijnt de tekst niet.

 color: #FFFF00;  hier kan je ook een ander kleurtje geven - is naar je eigen goesting!
}

Zoals je ziet in de kolommen is de tekst van de hyperlinks nu geel.
'k Hoop dat het wat duidelijk is, want uitleggen is nog niet zo gemakkelijk...
Ik ga stelselmatig doorgaan met uitleg.

**********

Reageer op dit bericht

Meer van Uitzicht Blog

↑ Terug naar de berichten