TheaterEncyclopedie:VormgevingBS4
Uit TheaterEncyclopedie
Lettergrootte aanpassingen in Tweeki.css
/* Bootstrap 4.4 aanpassingen */
/* Definieer de lettergrootte 145% - iets vergroot; standaard ~140% */
/* Opnieuw aanpassen ter compensatie voor BS-4 - 16px */
body {
font-size: 100%;
}
Hoofdpagina
Theater Vandaag
<div class="row row-fluid clearfix mb-4"> <div class="col-xs-12 col-md-12"> <div class="card"> <h5 class="card-header text-center">Theater Vandaag</h5><!-- eof card-header --> <div class="card-body"> <div class="row"> <div class="col-sm-6 col-md-6 col-lg-3 pb-2">[[Bestand: NuCentraal 325x275.png|class=img-responsive | link=Portal:Nu Centraal/BS4]]</div><!-- EOF col 1--> <div class="col-sm-6 col-md-6 col-lg-3 pb-2">[[Bestand: Hoofdpagina TheaterActueel 325x275.png|class=img-responsive | link=Portal: Theater Actueel/BS4]]</div><!-- EOF col 2--> <div class="col-sm-6 col-md-6 col-lg-3 pb-2">[[Bestand: Hoofdpagina InTheSpotlight 325x275.png|class=img-responsive | link=Portal:Nu_Centraal/In_the_spotlight/BS4]]</div><!-- EOF col 3--> <div class="col-sm-6 col-md-6 col-lg-3 pb-2">[[Bestand: Hoofdpagina TheaterSeizoenv01.png|class=img-responsive | link=1980/1981]] </div><!-- EOF col --> </div><!-- EOF row --> </div><!-- eof card-body --> </div><!-- EOF card --> </div><!-- EOF card-body --> </div><!-- EOF row-->
CSS code
img {
display: block;
max-width: 100%;
height: auto;
}
.card-header {
background-image: radial-gradient(farthest-corner circle at right bottom, #cccccc, #DBDBDB, #f0f0f0);
font-weight: bold;
height: 50px;
}
Header Portalen en diverse pagina's
VormgevingBS4
<div id="showcase-portal" class="d-flex justify-content-center align-items-center banner mb-4">
<div id="overlay-portal"></div><h2 class="portal-header card-title text-uppercase">{{PAGENAME}}</h2></div>
Opmerking BM: Vgm staat er een </div> teveel in bovenstaand voorbeeld; ik denk de eerste op de tweede regel?
Opmerking IdP: Klopt. Maar niet de eerste op de tweede, echter de div op het eind. Heb ik nu weggehaald. Na overlay-portal moet direct een afsluitende div geplaatst worden anders werkt de overlay niet.
CSS code
/* CSS voor Portaal */
#showcase-portal {
min-height: 250px;
position: relative;
}
#overlay-portal {
background: rgba(204,204,204,0.6);
position: absolute;
top: 60px;
left: 0;
width: 100%;
height: 50%;
z-index: 2;
}
.portal-header {
color: white;
letter-spacing: 0.6em;
line-height: 1;
z-index: 3;
}
Theaterseizoen
<div id="seizoenpagina" class="card banner-seizoenspagina text-white mt-0 mb-4"><div class="card-img-overlay d-flex justify-content-between flex-column mb-0 pb-0">
<div class="row justify-content-between d-flex pl-4 pr-2">
<btn type="button" class="btn btn-light text-left">{{#expr:{{Aanvangsjaar}}-1}}/{{Aanvangsjaar}}|<span class="fa fa-step-backward text-secondary"></span> <span class="d-none d-md-inline">{{#expr:{{Aanvangsjaar}}-1}}/{{Aanvangsjaar}}</span></btn>
<btn type="button" class="btn btn-light text-right">{{Volgjaar}}/{{#expr:{{Volgjaar}}+1}}|<span class="d-none d-md-inline">{{Volgjaar }}/{{#expr:{{Volgjaar}}+1}}</span><span class="fa fa-step-forward text-secondary"></span></btn></div><!-- EOF Row-1 -->
<h2 class="text-center">Het theaterseizoen {{PAGENAME}}</h2>
<div class="row justify-content-center align-items-baseline">{{Seizoenpagina navbar 1_BS4}}</div><!-- EOF Row-2 -->
</div><!-- eof card-img-overlay -->
</div><!-- eof banner -->
CSS code
/* Seizoenpagina banner */
#seizoenpagina {
min-height: 250px;
position: relative;
}
.with-navbar.with-navbar-fixed {
padding-top: 75px;
Vier losse afbeeldingen met popup
CSS code
<div class="flex-row row mb-4">
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="card p-2">
{{Popup premieres dit jaar/afbeelding
|id = abra}}
</div><!-- EOF card -->
</div><!-- EOF col 1-->
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="card p-2">
{{Popup 50 jaar/afbeelding
|id = cada
}}
</div><!-- EOF card -->
</div><!-- EOF col 2-->
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="card p-2">
{{Popup overleden dit jaar/afbeelding
|id = cadabra
}}
</div><!-- EOF card -->
</div><!-- EOF col 3-->
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="card p-2">
{{Popup 10 jaar geleden/afbeelding
|id = abracadabra
}}
</div><!-- EOF card -->
</div><!-- EOF col 4-->
</div><!-- EOF row 1-->