Templates download/Icon and Manual:Displaying page sections as cards: Difference between pages

(Difference between pages)
(Created page with "<div class="downloadarea"> <span class="getButton">Download</span> 350x350px|alt=example of icons on a page</div>This temp...")
Tag: 2017 source edit
 
No edit summary
 
Line 1: Line 1:
<div class="downloadarea">
{{Featurepage|featured=true|featuredesc=How-to: Display page sections as cards|featurestart=03/21/2022}}
<span class="getButton">[[Media:HW-icon.zip|Download]]</span>
Sections of a wiki page can be displayed as  "cards" with just a little bit of effort.  


[[File:HW-icon-template.png|350x350px|alt=example of icons on a page]]</div>This template makes it possible to insert Bootstrap icons on a page.
== What are cards? ==
==Importing the template==
Cards are combinations of contiguous page sections that share the same column layout. Each wiki page can contain such cards.
The import file is included in the archive file ''HW-icon.zip''. Unpack the zip file first.
<gallery widths="480" heights="250">
File:Manual:karten-before.png|alt=Wiki page without cards|Wiki page without cards
File:Manual:karten-after.png|alt=Wiki page with cards|Wiki page with cards
</gallery>


On the page ''Special:Import,'' follow these steps:
== Create card styles ==
#'''''Select file''''' and choose HW-icon.xml.
Before sections can be formatted as cards, a user with admin rights must add and save the following information to the page ''MediaWiki:Common.css'':
#'''Enter''' an ''interwiki prefix''. Since this field is required, simply add hw (for hallowelt).
<syntaxhighlight lang="css">
#'''Keep''' the selection ''Import to default locations''.
/* Styles for section cards */
#'''Click''' ''Upload file...'' .
.sectionflex {display: flex; flex-wrap: wrap; justify-content:space-between;}
The template is now available in your wiki.
.sectionflex.col1 > div {flex-basis:100%; padding:10px 20px 20px 20px; margin:10px 0;}
==<span class="mw-headline" id="Pages_included_in_the_import">Pages included in the import</span>==
.sectionflex.col2 > div {flex-basis:49%; padding:10px 20px 20px 20px; margin:10px 0;}
The xml import creates the following file in your wiki:
.sectionflex.col3 > div {flex-basis:32%; padding:10px 20px 20px 20px; margin:10px 0;}
*Template:Icon
.sectionflex > div h2 {margin:0 0 1em 0; font-size:1.3em}
==<span class="mw-headline" id="Using_the_template">Using the template</span>==
.sectionflex.frame > div {border: 1px solid #e7e7e7}
#
.sectionflex.background> div {background: #f1f3f9}
#'''Find''' a bootstrap icon from the Bootstrap website at https://icons.getbootstrap.com/
.sectionflex .ve-ce-branchNode-slug {display:none}
#Click on the icon you would like to use. The icon page shows you the class-name of the icon on the right side of the page:[[File:bootstrap-award-icon.png|alt=Bootstrap icon css-class|center|thumb|650x650px|Bootstrap icon css-class]]
@media (max-width: 767px) {.sectionflex.col2 > div, .sectionflex.col3 > div {flex-basis:100%; margin-top:2em}}
#'''Highlight''' the class name (it has the format ''bi bi-myicon'') and '''copy''' it to your clipboard (ctrl+c).
 
# '''Enter'''  <code><nowiki>{{</nowiki></code> in visual editing mode at the cursor position where you want to insert the icon. The template editor opens.
</syntaxhighlight>
# '''Copy''' the icon class from your clipboard:[[File:template-editor-icon.png|alt=Template editor|center|thumb|450x450px|Template editor]]
 
# '''Change''' the font size (optional) if you want the size to be different from the text surrounding it (e.g., from the size of a heading if the icon is placed in the heading or of the paragraph text if the icon is placed in the flow-text.  Smaller than text icons are usually sized no smaller than 0.85em and larger icons up to 2.5em.
== Create cards ==
#'''Color:''' If you want the color to be different from the surrounding text, you can specify any web color (e.g., a color name like blue or a hex-valuesuch as #0059b3 for a more specific blue). A list of web colors can be found at https://www.w3schools.com/colors/colors_picker.asp
To format sections as cards:
#'''Vertical alignment:''' It should not be necessary to provide an alignment value. The standard is set to text-top and usually works in headings and in flow-text. If it looks a little off, you can try other vertical-alignment values, such as text-bottom. For a full list of possible values, see https://www.w3schools.com/cssref/pr_pos_vertical-align.asp.
 
#'''Click''' ''Apply changes''.
# '''Create''' a page that contains different sections. Sections are marked by headings.
==Activate notifications==
# '''Open''' the page in source editing mode.
Users can activate notifications for mentions in their [[Manual:Preferences|personal preferences]]:
# '''Add''' the start of a card container as <code><nowiki><div class="sectionflex col2 background"></nowiki></code> above the first section you want to include in the card display (i.e., above the first heading of that section). A heading starts with two equal (=) signs:<syntaxhighlight lang="text">
#'''Select''' the tab ''Notifications''.
<div class="sectionflex col2 background">
#'''Activate''' the notifications options for mentions.
==Introduction==
#'''Save''' your changes.  [[File:HW-mention-notificationsettings.png|center|thumb|680x680px|Activating notifications|link=Special:FilePath/HW-mention-notificationsettings.png]]
With more than 165,000 inhabitants, Regensburg is the fourth-largest city in the State of Bavaria after Munich, Nuremberg and Augsburg.
</syntaxhighlight>
# '''Wrap''' all sections that you want to include in this card layout in a starting <code><nowiki><div></nowiki></code> and an end <code><nowiki></div></nowiki></code> tag:<syntaxhighlight lang="text">
<div class="sectionflex col2 background">
<div>
==Introduction==
With more than 165,000 inhabitants, Regensburg is the fourth-largest city in the State of Bavaria after Munich, Nuremberg and Augsburg.(...)
</div>
<div>
==Topography==
Regensburg is situated on the northernmost part of the Danube river at the geological crossroads of four distinct landscapes (...)
</div>
</syntaxhighlight>
# '''Close''' the sectionflex container itself with an end <code><nowiki></div></nowiki></code> tag:<syntaxhighlight lang="text">
<div class="sectionflex col2 background"> <! --- Start card layout-->
<div> <! --- Start card -->
==Introduction==
With more than 165,000 inhabitants, Regensburg is the fourth-largest city in the State of Bavaria after Munich, Nuremberg and Augsburg.(...)
</div> <! --- End card -->
<div> <! --- Start card -->
==Topography==
Regensburg is situated on the northernmost part of the Danube river at the geological crossroads of four distinct landscapes (...)
</div> <! --- End card -->
</div>  <! --- End card layout -->
</syntaxhighlight>
The two sections should now be displayed as cards:
[[File:Manual:karten-after.png|alt=Two sections in the card layout|center|thumb|750x750px|Two sections in the card layout: <code><nowiki><div class="sectionflex col2 background"></nowiki></code>]]
 
== Available card formats ==
You can choose between 1-column ("col1"),  2-column ("col2") or 3-column ("col3") cards with grey background ("background") or grey frame ("frame"). For example:
 
[[File:Manual:karten-col3-frame.png|alt=3-column layout with frame|center|thumb|750x750px|3 columns with frame:  <code><nowiki><div class="sectionflex col3 frame"></nowiki></code>]]
 
== Combination of cards ==
It is possible to combine different card layouts on one wiki page:
<syntaxhighlight lang="css">
<div class="sectionflex col2 frame">
<div>
==Section 1==
Content section 1
</div>
<div>
==Section 2==
Content section 1
</div>
</div>
 
<div class="sectionflex col3 background">
<div>
==Section 3==
Content section 3
</div>
<div>
==Section 4==
Content section 4
</div>
<div>
==Section 5==
Content section 5
</div>
</div>
 
 
</syntaxhighlight>
[[en:{{FULLPAGENAME}}]]
[[de:Handbuch:Seitenabschnitte_als_Karten_darstellen]]
[[Category:Customization]]

Revision as of 16:30, 6 April 2022

Sections of a wiki page can be displayed as "cards" with just a little bit of effort.

What are cards?

Cards are combinations of contiguous page sections that share the same column layout. Each wiki page can contain such cards.

Create card styles

Before sections can be formatted as cards, a user with admin rights must add and save the following information to the page MediaWiki:Common.css:

/* Styles for section cards */
.sectionflex {display: flex; flex-wrap: wrap; justify-content:space-between;}
.sectionflex.col1 > div {flex-basis:100%; padding:10px 20px 20px 20px; margin:10px 0;}
.sectionflex.col2 > div {flex-basis:49%; padding:10px 20px 20px 20px; margin:10px 0;}
.sectionflex.col3 > div {flex-basis:32%; padding:10px 20px 20px 20px; margin:10px 0;}
.sectionflex > div h2 {margin:0 0 1em 0; font-size:1.3em}
.sectionflex.frame > div {border: 1px solid #e7e7e7}
.sectionflex.background> div {background: #f1f3f9}
.sectionflex .ve-ce-branchNode-slug {display:none}
@media (max-width: 767px) {.sectionflex.col2 > div, .sectionflex.col3 > div {flex-basis:100%; margin-top:2em}}

Create cards

To format sections as cards:

  1. Create a page that contains different sections. Sections are marked by headings.
  2. Open the page in source editing mode.
  3. Add the start of a card container as <div class="sectionflex col2 background"> above the first section you want to include in the card display (i.e., above the first heading of that section). A heading starts with two equal (=) signs:
    <div class="sectionflex col2 background">
    ==Introduction==
    With more than 165,000 inhabitants, Regensburg is the fourth-largest city in the State of Bavaria after Munich, Nuremberg and Augsburg.
    
  4. Wrap all sections that you want to include in this card layout in a starting <div> and an end </div> tag:
    <div class="sectionflex col2 background">
    <div>
    ==Introduction==
    With more than 165,000 inhabitants, Regensburg is the fourth-largest city in the State of Bavaria after Munich, Nuremberg and Augsburg.(...)
    </div>
    <div>
    ==Topography==
    Regensburg is situated on the northernmost part of the Danube river at the geological crossroads of four distinct landscapes (...)
    </div>
    
  5. Close the sectionflex container itself with an end </div> tag:
    <div class="sectionflex col2 background"> <! --- Start card layout-->
    <div> <! --- Start card -->
    ==Introduction==
    With more than 165,000 inhabitants, Regensburg is the fourth-largest city in the State of Bavaria after Munich, Nuremberg and Augsburg.(...)
    </div> <! --- End card -->
    <div> <! --- Start card -->
    ==Topography==
    Regensburg is situated on the northernmost part of the Danube river at the geological crossroads of four distinct landscapes (...)
    </div> <! --- End card -->
    </div>  <! --- End card layout -->
    

The two sections should now be displayed as cards:

Two sections in the card layout
Two sections in the card layout: <div class="sectionflex col2 background">

Available card formats

You can choose between 1-column ("col1"), 2-column ("col2") or 3-column ("col3") cards with grey background ("background") or grey frame ("frame"). For example:

3-column layout with frame
3 columns with frame: <div class="sectionflex col3 frame">

Combination of cards

It is possible to combine different card layouts on one wiki page:

<div class="sectionflex col2 frame">
<div>
==Section 1==
Content section 1
</div>
<div>
==Section 2==
Content section 1
</div>
</div>

<div class="sectionflex col3 background">
<div>
==Section 3==
Content section 3
</div>
<div>
==Section 4==
Content section 4
</div>
<div>
==Section 5==
Content section 5
</div>
</div>



To submit feedback about this documentation, visit our community forum.

Discussions