Template:CustomHeader: Difference between revisions
Elena & Fabrice's Web
← Older editNewer edit →
mNo edit summary
mNo edit summary
Line 4: Line 4:
     <h1 style="margin:0;padding:0;font-size:inherit;color:inherit;background-color:transparent;">{{{maintitle|{{PAGENAME}}}}}</h1>
     <h1 style="margin:0;padding:0;font-size:inherit;color:inherit;background-color:transparent;">{{{maintitle|{{PAGENAME}}}}}</h1>
</div>
</div>
<div class="custom-header-anchor" style="display:none;" id="{{{headerid|{{#replace:{{{headertext|}}}| |_}}}}"></div>
<div class="custom-header"  
<div class="custom-header"  
     data-image="{{{image|}}}"  
     data-image="{{{image|}}}"  
Line 15: Line 14:
     data-blurbcolorbackground="{{{blurbcolorbackground|rgba(207, 211, 222, 0.66)}}}"  
     data-blurbcolorbackground="{{{blurbcolorbackground|rgba(207, 211, 222, 0.66)}}}"  
     data-blurbposition="{{{blurbposition|top:10px;left:20px}}}">
     data-blurbposition="{{{blurbposition|top:10px;left:20px}}}">
     <h2 style="color:{{{headercolor|blue}}};background-color:{{{headercolorbackground|rgba(207, 211, 222, 0.66)}}};{{{headerposition|top:5px;left:10px;font-size:24px;width:300px;text-align:left}}}">{{{headertext}}}</h2>
     <span style="color:{{{headercolor|blue}}};background-color:{{{headercolorbackground|rgba(207, 211, 222, 0.66)}}};{{{headerposition|top:5px;left:10px;font-size:24px;width:300px;text-align:left}};display:inline-block;">{{{headertext}}}</span>
     <div style="color:{{{blurbcolor|black}}};background-color:{{{blurbcolorbackground|rgba(207, 211, 222, 0.66)}}};{{{blurbposition|top:10px;left:20px}}}">{{{blurb|}}}</div>
     <div style="color:{{{blurbcolor|black}}};background-color:{{{blurbcolorbackground|rgba(207, 211, 222, 0.66)}}};{{{blurbposition|top:10px;left:20px}}}">{{{blurb|}}}</div>
</div>
</div>
<noinclude>
<noinclude>
This template creates a custom page title (<h1>) and header (<h2>) with styled text and an optional blurb. The page title appears as a clickable <h1> at toclevel-1, the custom header as <h2> at toclevel-1, and subsequent ==content== headers as <h2> at toclevel-2 in the TOC.
This template creates a custom page title (<h1>) included in the TOC as toclevel-1, a styled header (not in TOC), and an optional blurb. Subsequent ==content== headers appear as <h2> at toclevel-2 in the TOC.


== Usage ==
== Usage ==
Line 28: Line 27:
   |image=http://localhost/laussywiki/images/1/1d/Roof-of-Faro.jpg
   |image=http://localhost/laussywiki/images/1/1d/Roof-of-Faro.jpg
   |headertext=Trapped in the Province of Jaén (December 2017-January 2018)
   |headertext=Trapped in the Province of Jaén (December 2017-January 2018)
  |headerid=Jaen_2017
   |headercolor=white
   |headercolor=white
   |headercolorbackground=rgba(54, 25, 25, 0.5)
   |headercolorbackground=rgba(54, 25, 25, 0.5)
Line 39: Line 37:


== Notes ==
== Notes ==
* The `maintitle` parameter sets the page title. If omitted, it defaults to `{{PAGENAME}}`.
* The `maintitle` parameter sets the page title, included in the TOC as <h1> (toclevel-1). If omitted, it defaults to `{{PAGENAME}}`.
* The `headerid` parameter sets a clean anchor ID for the custom header (e.g., `Jaen_2017`). If omitted, it defaults to `headertext` with spaces replaced by underscores.
* The `headertext` is displayed but not included in the TOC.
* Use the full image URL from the File: namespace.
* Use the full image URL from the File: namespace.
* Use `headerposition` and `blurbposition` in the format 'top:XXpx;left:YYpx;font-size:VALUE;width:VALUE;text-align:VALUE' or 'bottom:XXpx;right:YYpx;font-size:VALUE;width:VALUE;text-align:VALUE'.
* Use `headerposition` and `blurbposition` in the format 'top:XXpx;left:YYpx;font-size:VALUE;width:VALUE;text-align:VALUE' or 'bottom:XXpx;right:YYpx;font-size:VALUE;width:VALUE;text-align:VALUE'.
* The `maintitle` is included in the TOC as <h1> (toclevel-1), `headertext` as <h2> (toclevel-1), and subsequent ==content== headers as <h2> (toclevel-2).
* Subsequent ==content== headers are <h2> (toclevel-2) in the TOC.
* The `__TOC__` directive forces the TOC to appear.
* The `__TOC__` directive forces the TOC to appear.
* Add the following CSS to `MediaWiki:Common.css` to hide the default MediaWiki page title and ensure proper styling:
* Add the following CSS to `MediaWiki:Common.css` to hide the default MediaWiki page title and ensure proper styling:
Line 49: Line 47:
```css
```css
/* Hide the default MediaWiki page title */
/* Hide the default MediaWiki page title */
#firstHeading, .mw-first-heading {
#firstHeading, .mw-first-heading, .mw-page-title {
     display: none !important;
     display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
}


/* Ensure custom headers are styled correctly */
/* Ensure custom headers are styled correctly */
.custom-header-maintitle h1, .custom-header h2 {
.custom-header-maintitle h1 {
     margin: 0;
     margin: 0;
     padding: 0;
     padding: 0;
Line 60: Line 62:
     color: inherit;
     color: inherit;
     background-color: transparent;
     background-color: transparent;
}
.custom-header span {
    display: inline-block;
}
}

Revision as of 00:02, 30 June 2025

CustomHeader

    {{{headertext}}}

This template creates a custom page title (

) included in the TOC as toclevel-1, a styled header (not in TOC), and an optional blurb. Subsequent ==content== headers appear as

at toclevel-2 in the TOC.

Usage

Trip to the Algarve (May 2017)

    Trapped in the Province of Jaén (December 2017-January 2018)
The Algarve, from Arabic الغرب‎‎ al-Gharb, «the West», that is, the west of Al-Andalus, is a mythical part of Europe...


Notes

  • The `maintitle` parameter sets the page title, included in the TOC as

    (toclevel-1). If omitted, it defaults to `CustomHeader`.

  • The `headertext` is displayed but not included in the TOC.
  • Use the full image URL from the File: namespace.
  • Use `headerposition` and `blurbposition` in the format 'top:XXpx;left:YYpx;font-size:VALUE;width:VALUE;text-align:VALUE' or 'bottom:XXpx;right:YYpx;font-size:VALUE;width:VALUE;text-align:VALUE'.
  • Subsequent ==content== headers are

    (toclevel-2) in the TOC.

  • The `` directive forces the TOC to appear.
  • Add the following CSS to `MediaWiki:Common.css` to hide the default MediaWiki page title and ensure proper styling:

```css /* Hide the default MediaWiki page title */

  1. firstHeading, .mw-first-heading, .mw-page-title {
   display: none !important;
   visibility: hidden !important;
   height: 0 !important;
   margin: 0 !important;
   padding: 0 !important;

}

/* Ensure custom headers are styled correctly */ .custom-header-maintitle h1 { 

   margin: 0;
   padding: 0;
   font-size: inherit;
   color: inherit;
   background-color: transparent;

} .custom-header span { 

   display: inline-block;

}