TheaterEncyclopedie:VormgevingBS4/Box

Info box met waardering in de header met lange titels en waardering

• Bootstrap class card-title toegevoegd bij h3
• rating ook responsive door in sjabloon tweede span de class flex-xs-row te geven en d-flex te verwijderen.

Hamlet - William Shakespeare

(Aantal:0)

Onderschrift afbeelding

Hier komt table

HTML specifiek voor header card

<div class="card-header d-flex justify-content-between">
<h3 class="card-title m-0">Hamlet - William Shakespeare</h3><span class=d-inline-flex"><span class="box-rating pr-2">{{#rating:
{{#replace:{{#ask: [[Reactie:+]] [[Categorie:Beoordeling_werkpagina]] [[BeoordeeldePagina::{{PAGENAME}}]]
| ?BeoordelingInSterren
| format=average
}}|,|.}}
}}</span><span class="flex-xs-row">(Aantal:{{#ask: [[Categorie:Beoordeling_werkpagina]] [[BeoordeeldePagina::{{PAGENAME}}]]
| ?BeoordelingInSterren
| format=count
}})</span></span></div><!-- eof card-header -->

HTML

<div class="row row-fluid clearfix mb-4">
<div class="col-xs-12 col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between">
<h3 class="card-title m-0">Hamlet - William Shakespeare</h3><span class=d-inline-flex"><span class="box-rating pr-2">{{#rating:
{{#replace:{{#ask: [[Reactie:+]] [[Categorie:Beoordeling_werkpagina]] [[BeoordeeldePagina::{{PAGENAME}}]]
| ?BeoordelingInSterren
| format=average
}}|,|.}}
}}</span><span class="flex-xs-row">(Aantal:{{#ask: [[Categorie:Beoordeling_werkpagina]] [[BeoordeeldePagina::{{PAGENAME}}]]
| ?BeoordelingInSterren
| format=count
}})</span></span></div><!-- eof card-header -->
<div class="card-body">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4 pb-2">[[Bestand:{{{Afbeelding|Someone.gif}}}|class=img-responsive]]
<p class="card-text pt-2"><small class="text-muted">Onderschrift afbeelding</small></p></div><!-- EOF col 1-->
<div class="col-sm-12 col-md-8 col-lg-8 pb-2">
<table class="table table-striped table-sm box-table-sm">
Hier komt table
</table>
</div><!-- EOF col 2-->
</div><!-- EOF row -->
</div><!-- eof card-body -->
</div><!-- EOF card -->
<div class="card-footer">{{#shariffLike:}}</div>
</div><!-- EOF col -->
</div><!-- EOF row-->

CSS voor infobox met lange titels en waardering in header

{{#css:
span.box-rating > span > img {
display:inline-flex;
}
.box-table-sm {color: black;}
.box-rij {color: #337ab7; line-height: 15px;}
.box-label {color: black; width: 40%; }
.box-label {color: black; width: 40%; }
.box-info { width: 60%; color: #337ab7; }
.box-info a:link, .box-info a:visited {color: #337ab7;}
.box-info a:hover {text-decoration: none; color: black;}
.box-info a.new:hover {text-decoration: none; color: #ba0000;}
h3.card-header {
min-height: 50px;
position: relative;
}
}}

Info box met waardering in de header met lange titels aanpassing h2 naar h3

Hamlet - William Shakespeare

(Aantal:0)

Onderschrift afbeelding

Naam	Jörgen Raymann
Geboortedatum	13 augustus 1966
Geboorteplaats	Amsterdam
Beroep	Cabaretier
IMDb-profiel	1474876
VIAF-profiel	286078767
Website	Website

Info box met waardering in de header met lange titels

Hamlet - William Shakespeare

(Aantal:0)

Onderschrift afbeelding

Naam	Jörgen Raymann
Geboortedatum	13 augustus 1966
Geboorteplaats	Amsterdam
Beroep	Cabaretier
IMDb-profiel	1474876
VIAF-profiel	286078767
Website	Website

Samenvoegen van css classes met dezelfde vormgeving

.box-info a:link, .box-info a:visited {color: #337ab7;}

CSS voor table

{{#css:
span.box-rating > span > img {
display:inline-flex;
}
.box-table-sm {color: black;}
.box-rij {color: #337ab7; line-height: 15px;}
.box-label {color: black; width: 40%; }
.box-label {color: black; width: 40%; }
.box-info { width: 60%; color: #337ab7; }
.box-info a:link {color: #337ab7;}
.box-info a:visited {color: #337ab7;}
.box-info a:hover {text-decoration: none; color: black;}
.box-info a.new:hover {text-decoration: none; color: #ba0000;;}
}}

Info box met TK logo met popup en waardering in de header TK logo als span op een rij

Jörgen Raymann

Bestand:TK-Logo-grijs30px.png(Aantal:0)

Onderschrift afbeelding

Naam	Jörgen Raymann
Geboortedatum	13 augustus 1966
Geboorteplaats	Amsterdam
Beroep	Cabaretier
IMDb-profiel	1474876
VIAF-profiel	286078767
Website	Website

Info box met TK logo met popup en waardering in de header

Jörgen Raymann Bestand:TK-Logo-grijs30px.png

(Aantal:0)

Onderschrift afbeelding

Naam	Jörgen Raymann
Geboortedatum	13 augustus 1966
Geboorteplaats	Amsterdam
Beroep	Cabaretier
IMDb-profiel	1474876
VIAF-profiel	286078767
Website	Website

Info box met waardering in de header

Jörgen Raymann

(Aantal:0)

Onderschrift afbeelding

Naam	Jörgen Raymann
Geboortedatum	13 augustus 1966
Geboorteplaats	Amsterdam
Beroep	Cabaretier
IMDb-profiel	1474876
VIAF-profiel	286078767
Website	Website

In de titelbalk voor meer controle <div class="card-header d-flex justify-content-between"> toegevoegd. 
En uiteraard ook weer afgesloten met een </div>.
Hiertussen is de volgende html opgenomen:

<div class="card-header d-flex justify-content-between">
<h2>Jörgen Raymann</h2><span class="d-inline-flex"><span class="box-rating pr-2"> {{#rating:
{{#replace:{{#ask: [[Reactie:+]] [[Categorie:Beoordeling_werkpagina]] [[BeoordeeldePagina::{{PAGENAME}}]]
| ?BeoordelingInSterren
| format=average
}}|,|.}}
}}</span><span class="d-flex">(Aantal:{{#ask: [[Categorie:Beoordeling_werkpagina]] [[BeoordeeldePagina::{{PAGENAME}}]]
| ?BeoordelingInSterren
| format=count
}})</span></div><!-- eof card-header -->

CSS

{{#css:
span.box-rating > span > img {
display:inline-flex;
}
.box-table-sm {color: #337ab7;}
.box-rij {color: #337ab7; line-height: 15px;}
.box-label {color: black; width: 40%; }
.box-info { width: 60%; color: #337ab7; }
.box-info a:link {color: #337ab7;}
.box-info a:hover {text-decoration: none; color: black;}
}}

html

<div class="row row-fluid clearfix mb-4">
<div class="col-xs-12 col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between">
<h2>Jörgen Raymann</h2><span class="d-inline-flex"><span class="box-rating pr-2"> {{#rating:
{{#replace:{{#ask: [[Reactie:+]] [[Categorie:Beoordeling_werkpagina]] [[BeoordeeldePagina::{{PAGENAME}}]]
| ?BeoordelingInSterren
| format=average
}}|,|.}}
}}</span><span class="d-flex">(Aantal:{{#ask: [[Categorie:Beoordeling_werkpagina]] [[BeoordeeldePagina::{{PAGENAME}}]]
| ?BeoordelingInSterren
| format=count
}})</span></div><!-- eof card-header -->
<div class="card-body">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4 pb-2">[[Bestand:{{{Afbeelding|Someone.gif}}}|class=img-responsive]]
<p class="card-text pt-2"><small class="text-muted">Onderschrift afbeelding</small></p></div><!-- EOF col 1-->
<div class="col-sm-12 col-md-8 col-lg-8 pb-2">
<table class="table table-striped table-sm box-table-sm">
<tr class="box-rij">
<th class="box-label">Naam</th>
<td class="box-info">Jörgen Raymann</td>
</tr>
<tr class="box-rij">
<th class="box-label">Geboortedatum</th>
<td class="box-info">13 augustus 1966</td>
</tr>
<tr class="box-rij">
<th class="box-label">Geboorteplaats</th>
<td class="box-info">Amsterdam</td>
</tr>
<tr class="box-rij">
<th class="box-label">Beroep</th>
<td class="box-info">Cabaretier</td>
</tr>
<tr class="box-rij">
<th class="box-label">IMDb-profiel</th>
<td class="box-info">1474876</td>
</tr>
<tr class="box-rij">
<th class="box-label">VIAF-profiel</th>
<td class="box-info">286078767</td>
</tr>
<tr class="box-rij">
<th class="box-label">Website</th>
<td class="box-info">Website</td>
</tr>
</table>
</div><!-- EOF col 2-->
</div><!-- EOF row -->
</div><!-- eof card-body -->
</div><!-- EOF card -->
<div class="card-footer">{{#shariffLike:}}</div>
</div><!-- EOF col -->
</div><!-- EOF row-->

Table-striped minder hoge rijen

Jörgen Raymann

Onderschrift afbeelding

Naam	Jörgen Raymann
Geboortedatum	13 augustus 1966
Geboorteplaats	Amsterdam
Beroep	Cabaretier
IMDb-profiel	1474876
VIAF-profiel	286078767
Website	Website

CSS

Minder hoge rijen en uitlijning van de kolommen:

Bootstrap class table-sm toevoegen voor smallere rijen. Daarnaast nog line-height van row aangepast, zie hieronder!
{#css:
.box-table-sm {color: #337ab7;}
.box-rij {line-height: 15px;}
.box-label { width: 40%; }
.box-info { width: 60%; }
}}

Vragen BM:

• De CSS-selectors moeten vgm gelden voor *alleen* die elementen, die binnen een infobox staan. En niet voor *alle* tabellen in de TE-wiki. Hoe kunnen we die selectors meer specifiek maken?

Ik snap niet wat je hiermee bedoelt. .table .table-striped .table-sm zijn bootstrap classes. Wil je dat ik in dit rijtje nog een extra class invoeg zodat we meer controle hebben (in de toekomst) op de tabel?

• De door jou voor gestelde namen zijn specifiek voor Persoon-infoboxen, terwijl ze zullen gaan gelden voor *alle* infoboxen. Zullen we dan een meer algemene naam kiezen, bijv. .box-rij, .box-label etc.

Is aangepast.

• In diezelfde redenering, misschien ook een class .box-table-sm gebruiken, om specifiek tabellen in infoboxen te kunnen selecteren?

Deze heb ik nu toegevoegd als extra class.

html tabel

<div class="row row-fluid clearfix mb-4">
<div class="col-xs-12 col-md-12">
<div class="card">
<h3 class="card-header text-left">Jörgen Raymann</h3><!-- eof card-header -->
<div class="card-body">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4 pb-2">[[Bestand:{{{Afbeelding|Someone.gif}}}|class=img-responsive]]
<p class="card-text pt-2"><small class="text-muted">Onderschrift afbeelding</small></p></div><!-- EOF col 1-->
<div class="col-sm-12 col-md-8 col-lg-8 pb-2">
<table class="table table-striped table-sm box-table-sm">
<tr class="box-rij">
<th class="box-label">Naam</th>
<td class="box-info">Jörgen Raymann</td>
</tr>
<tr class="box-rij">
<th class="box-label">Geboortedatum</th>
<td class="box-info">13 augustus 1966</td>
</tr>
<tr class="box-rij">
<th class="box-label">Geboorteplaats</th>
<td class="box-info">Amsterdam</td>
</tr>
<tr class="box-rij">
<th class="box-label">Beroep</th>
<td class="box-info">Cabaretier</td>
</tr>
<tr class="box-rij">
<th class="box-label">IMDb-profiel</th>
<td class="box-info">1474876</td>
</tr>
<tr class="box-rij">
<th class="box-label">VIAF-profiel</th>
<td class="box-info">286078767</td>
</tr>
<tr class="box-rij">
<th class="box-label">Website</th>
<td class="box-info">Website</td>
</tr>
</table>
</div><!-- EOF col 2-->
</div><!-- EOF row -->
</div><!-- eof card-body -->
</div><!-- EOF card -->
<div class="card-footer">{{#shariffLike:}}</div>
</div><!-- EOF col -->
</div><!-- EOF row-->

Table-striped

Jörgen Raymann

Onderschrift afbeelding

Naam	Jörgen Raymann
Geboortedatum	13 augustus 1966
Geboorteplaats	Amsterdam
Beroep	Cabaretier
IMDb-profiel	1474876
VIAF-profiel	286078767
Website	Website

CSS code

<div class="row row-fluid clearfix mb-4">
<div class="col-xs-12 col-md-12">
<div class="card">
<h3 class="card-header text-left">Jörgen Raymann</h3><!-- eof card-header -->
<div class="card-body">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4 pb-2">[[Bestand:{{{Afbeelding|Someone.gif}}}|class=img-responsive]]
<p class="card-text pt-2"><small class="text-muted">Onderschrift afbeelding</small></p></div><!-- EOF col 1-->
<div class="col-sm-12 col-md-8 col-lg-8 pb-2">
<table class="table table-striped">
<tr>
<th scope="row">Naam</th>
<td>Jörgen Raymann</td>
</tr>
<tr>
<th scope="row">Geboortedatum</th>
<td>13 augustus 1966</td>
</tr>
<tr>
<th scope="row">Geboorteplaats</th>
<td>Amsterdam</td>
</tr>
<tr>
<th scope="row">Beroep</th>
<td>Cabaretier</td>
</tr>
<tr>
<th scope="row">IMDb-profiel</th>
<td>1474876</td>
</tr>
<tr>
<th scope="row">VIAF-profiel</th>
<td>286078767</td>
</tr>
<tr>
<th scope="row">Website</th>
<td>Website</td>
</tr>
</table>
</div><!-- EOF col 2-->
</div><!-- EOF row -->
</div><!-- eof card-body -->
</div><!-- EOF card -->
<div class="card-footer">{{#shariffLike:}}</div>
</div><!-- EOF col -->
</div><!-- EOF row-->

Table-hover

Jörgen Raymann

Onderschrift afbeelding

Naam	Jörgen Raymann
Geboortedatum	13 augustus 1966
Geboorteplaats	Amsterdam
Beroep	Cabaretier
IMDb-profiel	1474876
VIAF-profiel	286078767
Website	Website

CSS Sjabloon: Persoon zonder data

<div class="row row-fluid clearfix mb-4">
<div class="col-xs-12 col-md-12">
<div class="card">
<h3 class="card-header text-left">Jörgen Raymann</h3><!-- eof card-header -->
<div class="card-body">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4 pb-2">[[Bestand:{{{Afbeelding|Someone.gif}}}|class=img-responsive]]
<p class="card-text pt-2"><small class="text-muted">Onderschrift afbeelding</small></p></div><!-- EOF col 1-->
<div class="col-sm-12 col-md-8 col-lg-8 pb-2">
<table class="table table-striped">
<tr>
<th scope="row">Naam</th>
<td>Jörgen Raymann</td>
</tr>
<tr>
<th scope="row">Geboortedatum</th>
<td>13 augustus 1966</td>
</tr>
<tr>
<th scope="row">Geboorteplaats</th>
<td>Amsterdam</td>
</tr>
<tr>
<th scope="row">Beroep</th>
<td>Cabaretier</td>
</tr>
<tr>
<th scope="row">IMDb-profiel</th>
<td>1474876</td>
</tr>
<tr>
<th scope="row">VIAF-profiel</th>
<td>286078767</td>
</tr>
<tr>
<th scope="row">Website</th>
<td>Website</td>
</tr>
</table>
</div><!-- EOF col 2-->
</div><!-- EOF row -->
</div><!-- eof card-body -->
</div><!-- EOF card -->
<div class="card-footer">{{#shariffLike:}}</div>
</div><!-- EOF col -->
</div><!-- EOF row-->

CSS Sjabloon: Persoon

{{#tweekihide:firstHeading}}
<div class="row row-fluid clearfix mb-4">
<div class="col-xs-12 col-md-12">
<div class="card">
<h3 class="card-header text-left">{{#if:{{{Paginatitel|}}}|{{{Paginatitel|}}}|{{PAGENAME}} }}<!-- eof card-header -->
<div class="card-body">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4 pb-2">[[Bestand:{{{Afbeelding|Someone.gif}}}|class=img-responsive]]
<p class="card-text pt-2"><small class="text-muted">Onderschrift afbeelding</small></p></div><!-- EOF col 1-->
<div class="col-sm-12 col-md-8 col-lg-8 pb-2"><!--
--><table style="width: 100%;">{{#if:{{{ELLT|}}}|{{EenLevenLangTheater}}}}<!--
-->{{TEbox/rij|Naam|Naam|{{{Naam|}}}}}<!--
-->{{TEbox/rij|Citaat|Citaat|{{{Citaat|}}}}}<!--
-->{{TEbox/rij|Volledige naam|Volledige naam|{{{Volledige naam|}}}}}<!--
-->{{TEbox/rij|Pseudoniem|Pseudoniem|{{{Pseudoniem|}}}}}<!--
-->{{TEbox/rij|Bijnaam|Bijnaam|{{{Bijnaam|}}}}}<!--
-->{{TEbox/datum|Geboortedatum|Geboortedatum|{{{Geboortedatum|}}}}}<!--
-->{{TEbox/rij| Geboorteplaats |Geboorteplaats|{{{Geboorteplaats|}}}}}<!--
-->{{TEbox/datum|Overlijdensdatum|Overlijdensdatum|{{{Overlijdensdatum|}}}}}<!--
-->{{TEbox/rij| Overlijdensplaats |Overlijdensplaats|{{{Overlijdensplaats|}}}}}<!--
-->{{TEbox/rij|Beroep|Beroep|{{{Beroep|}}}}}<!--
-->{{TEbox/rij|Discipline|Discipline|{{{Discipline|}}}}}<!--
-->{{TEbox/rij|Trefwoorden|Trefwoorden|{{{Trefwoorden|}}}}}<!--
-->{{TEbox/DBNL|DBNL-profiel|DBNL|{{{DBNL|}}}}}<!--
-->{{TEbox/IMDB|IMDb-profiel|IMDB|{{{IMDB|}}}}}<!--
-->{{TEbox/IBDB|IBDb-profiel|IBDB|{{{IBDB|}}}}}<!--
-->{{TEbox/VIAF|VIAF-profiel|VIAF|{{{VIAF|}}}}}<!--
-->{{TEbox/RKD|RKD-profiel|RKD|{{{RKD|}}}}}<!--
-->{{TEbox/website|Website|Website|{{{Website|}}}}}<!--
-->{{TEbox/rij|Wikidata ID (Q-nummer)|Wikidata_ID|{{{qnummer|}}}}}<!--
--></table><!--
-->{{#set:Adlib={{{Adlib|}}}}}{{#set:Galerij redirect={{FULLPAGENAME}}|Galerij onderschrift=[[{{{Naam|}}}]]|Afbeelding=Bestand:{{{Afbeelding|}}}|Sorteernaam={{{Sorteernaam|}}}}}
</div><!-- EOF col 2-->
</div><!-- EOF row -->
</div><!-- eof card-body -->
</div><!-- EOF card -->
<div class="card-footer">{{#shariffLike:}}</div>
</div><!-- EOF col -->
</div><!-- EOF row-->