TheaterEncyclopedie:Pagina's met afwijkende vormgeving

De TheaterEncyclopedie maakt gebruik van de MediaWiki skin Tweeki. Die weer gebaseerd is op Bootstrap versie 3.4.1. Bij de ontwikkeling van de vormgeving is uitgegaan van de mogelijkheden die de skin Tweeki biedt. Bootstrap maakt gebruik van een responisve, mobile first grid-systeem dat gebaseerd is op 12 kolommen. Op TheaterEncyclopedie: Voorpagina beheren staat uitgebreide instructie hoe de vormgeving middels css aangepast kan worden. Deze uitleg is echter gebaseerd op de Voorpagina zoals deze in mei 2019 was vormgegeven. Inmiddels zijn hier al diverse aanpassingen op geweest.

MediaWiki:Tweeki.css

De css voor de opmaak zoals kleuren, lettertype, spacing, etc, wordt genoteerd in MediaWiki:Tweeki.css. Dit is de css die op meerdere pagina's hetzelfde is. CSS die alleen op één pagina gebruikt wordt, wordt in de code op deze pagina genoteerd.

De standaard css opmaak

<div class="flex-row row">

<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading panel-heading-def">
<h3 class="panel-title">[[Personen| Personen]]</h3></div>
<div class="panel-body">[[Afbeelding|class=img-responsive | link=Personen]]</div>
<div class="panel-footer">[[Personen| Zoek op één van de theaterberoepen!]]</div>
</div><!-- EOF pan -->
</div><!-- EOF col 1-->
Bovenstaande code vanaf '<div class="col-xs-12 ...' wordt 3 keer herhaald zodat je een rijtje van 4 krijgt!
</div><!-- EOF row 1-->

Standaard wordt gebruik gemaakt van een header, body en een footer.

In dit geval is een afbeelding bij de body gebruikt. Maar hier kan ook tekst staan.

Op onderstaande pagina's wordt deze opmaak gebruikt:

Variaties op de standaard css opmaak

Header, geen footer, met 4 afbeeldingen

Zie voor voorbeeld Hoofdpagina
In de body zijn 4 afbeeldingen(kolommen) geplaatst!

Titel

Klik hier voor de CSS code

<div class="row row-fluid clearfix">
<div class="col-xs-12 col-md-12">
<div class="panel panel-default">
<div class="panel-heading panel-heading-welkomdef"><h3 class="panel-title" style="text-align:center;">Titel</h3></div>
<div class="panel-body">
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-body">[[Afbeelding|class=img-responsive|link=]]</div>
</div><!-- EOF pan -->
</div><!-- EOF col 1-->
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-body">[[Afbeelding|class=img-responsive|link=]]</div>
</div><!-- EOF pan -->
</div><!-- EOF col 2-->
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-body">[[Afbeelding|class=img-responsive|link=]]</div>
</div><!-- EOF pan -->
</div><!-- EOF col 3-->
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-body">[[Afbeelding|class=img-responsive|link=]]</div>
</div><!-- EOF pan -->
</div><!-- EOF col 3-->
</div><!-- EOF body -->
</div><!-- EOF pan -->
</div><!-- EOF col -->
</div><!-- EOF row-->

3 kolommen naast elkaar met links afbeelding, rechts tekst

Zie voor voorbeeld Thema's

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Klik hier voor de CSS code

<div class="flex-row row">
<div class="col-xs-6 col-md-4 col-lg-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="flex-row row">
<div class="col-xs-12 col-md-6 col-lg-6">[[Afbeelding|class=img-responsive| link= |Bron afbeelding]]</div>
<div class="hidden-xs hidden-md col-lg-6">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div><!-- EOF panel-body-->
</div><!-- EOF flex-row-->
</div><!-- EOF pan -->
</div><!-- EOF col 1-->

<div class="col-xs-6 col-md-4 col-lg-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="flex-row row">
<div class="col-xs-12 col-md-6 col-lg-6">[[Afbeelding|class=img-responsive | link= |Bron afbeelding]]</div>
<div class="hidden-xs hidden-md col-lg-6">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div><!-- EOF panel-body-->
</div><!-- EOF flex-row-->
</div><!-- EOF pan -->
</div><!-- EOF col 2-->

<div class="col-xs-6 col-md-4 col-lg-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="flex-row row">
<div class="col-xs-12 col-md-6 col-lg-6">[[Afbeelding|class=img-responsive | link= |Bron afbeelding]]</div>
<div class="hidden-xs hidden-md col-lg-6">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div><!-- EOF panel-body-->
</div><!-- EOF flex-row-->
</div><!-- EOF pan -->
</div><!-- EOF col 3-->
</div><!-- EOF row -->

3 kolommen naast elkaar met rechts afbeelding, links tekst

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Klik hier voor de CSS code

<div class="flex-row row">
<div class="col-xs-6 col-md-4 col-lg-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="flex-row row">
<div class="hidden-xs hidden-md col-lg-6">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="col-xs-12 col-md-6 col-lg-6">[[Afbeelding|class=img-responsive | link= |Bron afbeelding]]</div>
</div><!-- EOF panel-body-->
</div><!-- EOF flex-row-->
</div><!-- EOF pan -->
</div><!-- EOF col 4-->

<div class="col-xs-6 col-md-4 col-lg-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="flex-row row">
<div class="hidden-xs hidden-md col-lg-6">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="col-xs-12 col-md-6 col-lg-6">[[Afbeelding|class=img-responsive | link= |Bron afbeelding]]</div>
</div><!-- EOF panel-body-->
</div><!-- EOF flex-row-->
</div><!-- EOF pan -->
</div><!-- EOF col 5-->

<div class="col-xs-6 col-md-4 col-lg-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="flex-row row">
<div class="hidden-xs hidden-md col-lg-6">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="col-xs-12 col-md-6 col-lg-6">[[Afbeelding|class=img-responsive | link= |Bron afbeelding]]</div>
</div><!-- EOF panel-body-->
</div><!-- EOF flex-row-->
</div><!-- EOF pan -->
</div><!-- EOF col 6-->
</div><!-- EOF row 2-->

Header, geen footer, links/rechts afbeelding/tekst

Zie voor voorbeeld Interviews

Titel

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis."

Lees meer ...

Titel

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis."

Lees meer ...

Klik hier voor de CSS code

<!-- Rechts afbeelding 2 kolommen-->
<div class="row row-fluid clearfix">
<div class="col-xs-12 col-md-12">
<div class="panel panel-default">
<div class="panel-heading panel-heading-def"><h2 class="panel-title">Titel</h2></div>
<div class="panel-body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-7" style="padding: 2em;"><!-- Kolom1 -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p style="text-align:left;">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis."</p>
<p style="text-align:right;">[[pagina|Lees meer ...]]</p>
</div><!-- End of Kolom1 -->
<div class="col-xs-12 col-md-5" style="padding: 2em; align-item:right;">[[Bestand: Unknown.png|class=img-responsive|300px|link= |Bron afbeelding]]</div><!-- End of Kolom2 -->
</div><!-- End of Row -->
</div><!-- End of Container fluid -->
</div><!-- End of Panel-body-->
</div><!-- End of Panel Default -->
</div><!-- End of Container-Kolom -->
</div><!-- Einde row>

<!-- links afbeelding 2 kolommen -->
<div class="row row-fluid clearfix">
<div class="col-xs-12 col-md-12"> 
<div class="panel panel-default">
<div class="panel-heading panel-heading-def"><h2 class="panel-title">Titel</h2></div>
<div class="panel-body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-4"><!-- Kolom1 -->[[Bestand: Unknown.png|class=img-responsive|300px|link= |Bron afbeelding]]</div><!-- End of Kolom1 -->

<div class="col-xs-12 col-md-8" style="padding: 1em;"><!-- Kolom2 -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p style="text-align:left;">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis."</p>
<p style="text-align:right;">[[pagina|Lees meer ...]]</p>
</div><!-- End of Kolom2-->
</div><!-- End of Row -->
</div><!-- End of Container fluid -->
</div><!-- End of Panel-body-->
</div><!-- End of Panel Default -->
</div><!-- End of Container-Kolom -->
</div><!-- Einde row>
<!-- Einde deel - links afbeelding 2 kolommen-->

Pagina's met afwijkende css

CSS op pagina toevoegen

Onderstaande code wordt bovenaan de desbetreffende pagina gezet
{{#css:
Hier wordt de afwijkende css geplaatst
}}

Twee kolommen, links afbeelding met onderaan titel

Zie voor voorbeeld Bijdragen uit het veld

Titel

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

Titel

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Klik hier voor de CSS code

{{#css:
.titelLink {
background-color: rgba(100,100,100,0.2); 
text-align: center; 
line-height: 30px;
height: 30px;
font-size: 1.8rem;
}

a {
color: black;
}

@media only screen and (max-width : 780px) {
.titelLink {
font-size: 1.2rem;
}
}}

<div class="flex-row row">
<div class="col-xs-6 col-md-6 col-lg-6">
<div class="panel panel-default">
<div class="panel-body">
<div class="flex-row row">
<div class="col-xs-12 col-md-6 col-lg-6">
<div>[[Bestand: Unknown.png|class=img-responsive| link= |Bron afbeelding]]<div class="titelLink">Titel</div></div></div>
<div class="hidden-xs hidden-md col-lg-6">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</div>
</div><!-- EOF panel-body-->
</div><!-- EOF flex-row-->
</div><!-- EOF pan -->
</div><!-- EOF col 1-->

<div class="col-xs-6 col-md-6 col-lg-6">
<div class="panel panel-default">
<div class="panel-body">
<div class="flex-row row">
<div class="col-xs-12 col-md-6 col-lg-6"><div>[[Bestand: Unknown.png|class=img-responsive| link= |Bron afbeelding]]<div class="titelLink">Titel</div></div></div>
<div class="hidden-xs hidden-md col-lg-6">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div><!-- EOF panel-body-->
</div><!-- EOF flex-row-->
</div><!-- EOF pan -->
</div><!-- EOF col 2-->
</div><!-- EOF row -->

Uitklapmenu

In sommige gevallen wil je tekst/code niet direct op de pagina zichtbaar hebben. Bijvoorbeeld hierboven gebruikt bij de CSS code en bijvoorbeeld bij Colofon. Hiervoor kan een uitklapmenu gebruikt worden. Zie hieronder de code die hiervoor gebruikt wordt. Mocht je op dezelfde pagina nog een uitklapmenu willen gebruiken dan moeten alle 1 id's aangepast worden naar 2, en bij en derde uitklapmenu alle id's aanpassen naar 3.

<div id="accordion-1">
<div class="card">
<div class="card-header" id="heading-1">
<p class="mb-0"><div class="btn ban-link collapsed" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1"><h4 style="background-color:black; color:white; padding: 5px;">Klik hier voor het uitklapmenu</h4></div></p></div>
<div id="collapse-1" class="collapse" aria-labelledby="heading-1" data-parent="#accordion-1">
<div class="card-body"><div style="margin-left: 10px; margin-right: 10px; padding: 4px; border: 1px; background-color: rgba(128,128,128,.1);">

* Zie hieronder tussen welke tags CSS code kan worden opgenomen in het uitklapmenu als tekst uitleg.
** Of wordt de pagina opgenomen zoals bij Colofon: {{:Colofon}}

</div>
</div><!-- end of card-body -->
</div><!-- end of collapse -->
</div><!-- end of card -->
</div>

Tussen
```
<pre> en sluittag </pre>
```
kan code opgenomen worden als tekst.

1. id="accordion-1"
2. id="heading-1"
3. data-target="#collapse-1"
4. aria-controls="collapse-1"
5. id="collapse-1"
6. aria-labelledby="heading-1" 
7. data-parent="#accordion-1"

Veelgebruikte queries

Plaats

== Lijst van Theaters in Plaatsnaam met afbeelding==
{{#ask:[[Categorie:Locatie]][[Plaats::Plaatsnaam]]
[[Afbeelding::!Bestand:Unknown.png]]
[[Afbeelding::!Bestand:Someone.gif]]
[[Afbeelding::+]]
|?Type
|?Afbeelding
}}

=== Lijst van alle Theaters in Plaatsnaam ===
{{#ask:[[Categorie:Locatie]][[Plaats::Plaatsnaam]]
|?Type
|order=asc
}}

Gebruik van well als header

Portaal "Zoeken & vinden"

<div class="well well-lg" style="box-shadow: 7px 7px 5px #CCC;"><h2 style="text-align:center;">Portaal "Zoeken & vinden"</h2></div>

Plaatspagina's css code

Plaatsnaam

Edit deze pagina

Geboren in Plaatsnaam

Premières in Plaatsnaam

Theaters in Plaatsnaam

Alle Theaters in Plaatsnaam

Klik hier voor het uitklapmenu

{{#widget:CSS-plaatspagina's}}
{{#tweekihide:firstHeading|sidebar-right}}
<div class="row row-fluid clearfix">
<div class="col-xs-12 col-md-12 col-lg-12">
<div class="panel panel-default">
<div class="panel-body header-Plaats-{{PAGENAME}}" style="display: flex; flex-direction: column; justify-content: space-between; height: 250px;">
<div class="flex-row row></div>
<div class="flex-row row" style="display: flex; justify-content: center; background-color: rgba(204,204,204,0.4); height: 100px;"><h2 style="text-align: center; line-height: 50px; color:white; letter-spacing: 0.6em; text-transform: uppercase;">{{PAGENAME}}</h2></div></div>
<div class="flex-row row"></div>
</div>
</div><!-- EOF panel-body-->
</div><!-- EOF flex-row-->
</div><!-- EOF pan -->
{{editlink}}
<!-- Geboren in -->
<div class="row row-fluid clearfix">
<div class="col-xs-12 col-md-12">
<div class="panel panel-default">
<div class="panel-heading panel-heading-def"><h2 class="panel-title">Geboren in {{PAGENAME}} </h2></div>
<div class="panel-body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-7" style="padding: 2em;"><!-- Kolom1 -->
{{#ask: [[categorie:persoon]] [[geboorteplaats::{{PAGENAME}}]]
| ?Geboortedatum
| ?Beroep
| limit=10
| class= table-striped
| mainlabel = Voornaam, achternaam
}}
</div><!-- End of Kolom1 -->
<div class="col-xs-12 col-md-5" style="padding: 2em; align-item:right;">
{{#ask: [[categorie:persoon]] [[geboorteplaats::{{PAGENAME}}]]
 [[Afbeelding::!Bestand:Unknown.png]]
 [[Afbeelding::!Bestand:Someone.gif]]
 [[Afbeelding::+]]
 |?Afbeelding
 |mainlabel=-
 |widths=360
 |heights=360
 |format=gallery
 |widget=slideshow
 |navigation=auto
 |order=random
 |limit=10
}}
</div><!-- End of Kolom2 -->
</div><!-- End of Row -->
</div><!-- End of Container fluid -->
</div><!-- End of Panel-body-->
</div><!-- End of Panel Default -->
</div><!-- End of Container-Kolom -->
</div><!-- Einde row><!-- EOF Geboren in -->

<!-- Premieres in -->
<div class="row row-fluid clearfix">
<div class="col-xs-12 col-md-12">
<div class="panel panel-default">
<div class="panel-heading panel-heading-welkomdef"><h2 class="panel-title" style="text-align:center;">Premières in {{PAGENAME}}</h2></div>
<div class="panel-body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-12" style="padding: 2em;">
{{#ask:[[categorie:productie]] [[locatie.plaats::{{PAGENAME}}]] 
| ?locatie 
| ?premieredatum=Premièredatum 
| mainlabel=Productietitel
|class=table table-striped
| limit=20
}}
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- EOF Premieres in -->

<!-- Theaters in -->
<div class="row row-fluid clearfix">
<div class="col-xs-12 col-md-12">
<div class="panel panel-default">
<div class="panel-heading panel-heading-welkomdef"><h2 class="panel-title" style="text-align:center;">Theaters in {{PAGENAME}}</h2></div>
<div class="panel-body">
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-body">{{#ask:
[[Plaats::{{PAGENAME}}]]
[[Afbeelding::!Bestand:Unknown.png]]
[[Afbeelding::!Bestand:Someone.gif]]
[[Afbeelding::+]]
 |?Afbeelding
 |mainlabel=-
 |widths=250
 |heights=250
 |format=gallery
 |widget=slideshow
 |navigation=auto
 |order=random
 |class= 
 |limit=100
}}</div>
</div><!-- EOF pan -->
</div><!-- EOF col 1-->
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-body">{{#ask:
[[Plaats::{{PAGENAME}}]]
[[Afbeelding::!Bestand:Unknown.png]]
[[Afbeelding::!Bestand:Someone.gif]]
[[Afbeelding::+]]
 |?Afbeelding
 |mainlabel=-
 |widths=250
 |heights=250
 |format=gallery
 |widget=slideshow
 |navigation=auto
 |order=random
 |class= 
 |limit=100
}}</div>
</div><!-- EOF pan -->
</div><!-- EOF col 2-->
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-body">{{#ask:
[[Plaats::{{PAGENAME}}]]
[[Afbeelding::!Bestand:Unknown.png]]
[[Afbeelding::!Bestand:Someone.gif]]
[[Afbeelding::+]]
 |?Afbeelding
 |mainlabel=-
 |widths=250
 |heights=250
 |format=gallery
 |widget=slideshow
 |navigation=auto
 |order=random
 |class= 
 |limit=100
}}</div>
</div><!-- EOF pan -->
</div><!-- EOF col 3-->
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-body">
{{#ask:
[[Plaats::{{PAGENAME}}]]
[[Afbeelding::!Bestand:Unknown.png]]
[[Afbeelding::!Bestand:Someone.gif]]
[[Afbeelding::+]]
 |?Afbeelding
 |mainlabel=-
 |widths=250
 |heights=250
 |format=gallery
 |widget=slideshow
 |navigation=auto
 |order=random
 |class= 
 |limit=100
}}</div>
</div><!-- EOF pan -->
</div><!-- EOF col 3-->
</div><!-- EOF body -->
<div class="panel-footer" style="text-align: right;">[[Theaters in {{PAGENAME}}| Alle Theaters in {{PAGENAME}}]]</div>
</div><!-- EOF pan -->
</div><!-- EOF col -->
</div><!-- EOF row--><!-- EOF Theaters in -->

Meedoen met TheaterEncyclopedie!

TheaterEncyclopedie:Pagina's met afwijkende vormgeving

MediaWiki:Tweeki.css

De standaard css opmaak

Inhoud

Variaties op de standaard css opmaak

Header, geen footer, met 4 afbeeldingen

Titel

Klik hier voor de CSS code

3 kolommen naast elkaar met links afbeelding, rechts tekst

Klik hier voor de CSS code

3 kolommen naast elkaar met rechts afbeelding, links tekst

Klik hier voor de CSS code

Header, geen footer, links/rechts afbeelding/tekst

Titel

Titel

Klik hier voor de CSS code

Pagina's met afwijkende css

CSS op pagina toevoegen

Twee kolommen, links afbeelding met onderaan titel

Klik hier voor de CSS code

Uitklapmenu

Veelgebruikte queries

Plaats

Gebruik van well als header

Portaal "Zoeken & vinden"

Plaatspagina's css code

Plaatsnaam

Geboren in Plaatsnaam

Premières in Plaatsnaam

Theaters in Plaatsnaam

Klik hier voor het uitklapmenu