{"id":6847,"date":"2026-09-18T17:20:40","date_gmt":"2026-09-18T15:20:40","guid":{"rendered":"https:\/\/weblearning.co.za\/blog\/?p=6847"},"modified":"2026-09-20T18:06:08","modified_gmt":"2026-09-20T16:06:08","slug":"heritage-month","status":"publish","type":"post","link":"https:\/\/weblearning.co.za\/blog\/heritage-month\/","title":{"rendered":"Heritage Month"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Today was a heritage day at my local high school. Kids could dress in their local heritage gear, or wear blue. Mine chose the latter. The other outfits&#8230;well they were lovely.  I\u2019d like to highlight another Wikipedia group who is standing out for me at the moment. They are from the Basque region and their \u201ctaal\u201d is a <a href=\"https:\/\/en.wikipedia.org\/api\/rest_v1\/page\/mobile-html\/Language_isolate\">language isolate<\/a>. Located close to the Pyrenee Mountains (42.6681804, 1.0011899) between Spain and France, there are less than a million people who are speakers of&nbsp;<em>Euskara<\/em>, the ancient language of <em>Euskal Herria<\/em>. I don\u2019t know too much about <a href=\"https:\/\/basquemuseum.eus\/visit\/who-are-the-basques\/\">this group, the region or their heritage<\/a>. I have however noticed their online efforts. They have put together a children\u2019s encyclopedia called <a href=\"https:\/\/diff.wikimedia.org\/2021\/03\/02\/parenthood-is-difficult-with-txikipedia-is-a-little-bit-easier\/\" target=\"_blank\" rel=\"noreferrer noopener\">Txikipedia<\/a>. Here is the backstory (there are some similarities to SWiP).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wikipedians from &nbsp;Euskal Herria (the Basque Country ) started conversations with the Basque Government about &#8220;<em>auzolan&#8221; a tradition of <\/em>community collaboration. The government bought their pitch&#8230;as they soon realized that &#8220;Wikipedia is a must for a language to survive.&#8221; The Basque Education Program encouraged university students to improve existing Basque articles as part of their classroom assignment. The result was &#8220;that at least 2.200 students worked on improving 1.740 articles with students adding more than 2 million words.&#8221; Their contribution makes up 5% of Basque Wikipedia words. Then part of the vision was to create Txikipedia, the first children&#8217;s Encyclopedia inside Wikipedia. See <a href=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/1\/19\/Basque_Education_program_presentation_for_the_Education%2BWikimedia_conference.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Basque Education program presentation<\/a><br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I&#8217;ve frequently covered grown up knowledge resources. But frankly, children&#8217;s reference resources are more important. Much like <a href=\"https:\/\/en.wikipedia.org\/wiki\/Childcraft\" target=\"_blank\" rel=\"noreferrer noopener\">Childcraft<\/a>, Txipedia is a <a href=\"https:\/\/meta.wikimedia.org\/wiki\/Education\/News\/Drafts\/Txikipedia_reaches_10,000_articles_and_begins_a_new_chapter\">children&#8217;s encyclopaedia<\/a> that <a href=\"https:\/\/meta.wikimedia.org\/wiki\/Basque_Wikimedians_User_Group\">Basque Wikimedians<\/a> have incorporated into Wikipedia. &#8220;Txiki&#8221; is Basque for &#8220;small&#8221; and this resource stands as an example of how language communities can amplify their vernacular language with Wikipedian. Here are my few thoughts on making a local vernacular equivalent.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"882\" height=\"535\" src=\"https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/09\/Omgi-header-.png\" alt=\"\" class=\"wp-image-6859\" srcset=\"https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/09\/Omgi-header-.png 882w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/09\/Omgi-header--300x182.png 300w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/09\/Omgi-header--768x466.png 768w\" sizes=\"auto, (max-width: 882px) 100vw, 882px\" \/><figcaption class=\"wp-element-caption\">My annotation of the Txikipedia header. We will be deconstructing the code<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Introduction to Heritage Month<\/li>\n\n\n\n<li>Choose your CSS stylesheet<\/li>\n\n\n\n<li>Making the logo work<\/li>\n\n\n\n<li>The Header\n<ul class=\"wp-block-list\">\n<li>Thinking more about blocks (or classes) in the header<\/li>\n\n\n\n<li>Picturing a schema<\/li>\n\n\n\n<li>Designing multiple stylesheets<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Adding more links and categories<\/li>\n\n\n\n<li>Details are in the design\n<ol class=\"wp-block-list\">\n<li>Locate your stylesheet<\/li>\n\n\n\n<li>Setup the two columns<\/li>\n\n\n\n<li>Refer to the stylesheet<\/li>\n\n\n\n<li>Choose a colour palette<\/li>\n\n\n\n<li>Creating before, during and after navigation<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Introduction<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">South Africa is celebrating <a href=\"https:\/\/www.gov.za\/HeritageMonth2026\">Heritage Month 2026<\/a> and Wikimedia SA has created a &#8220;Challenge&#8221;. Post 1 article a day about art, music, food, history into your own local language for 30 days. You could share your communities history, translate key terms, or document your culture. The event has a reward &#8211; the possibility of winning vouchers! I think that we need to be making Wikipedia more colourful, bright and interesting. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Choose your stylesheet. <\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">What am I doing for Heritage Month? You might have noticed, that I speak code better than languages. So my contribution to Heritage Month is 10 funky new colourful stylesheets for the official languages to deploy on their own Wikipedia instance.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/af.wikipedia.org\/wiki\/Sjabloon:Afipedia\/styles.css\">Sjabloon:Afipedia\/styles.css<\/a>  is my \u201cpers\u201d banner on the top of my <a href=\"https:\/\/af.wikipedia.org\/wiki\/Gebruiker:Derek_J_Moore\">Afrikaans<\/a> sandbox.<\/li>\n\n\n\n<li><a href=\"https:\/\/nr.wikipedia.org\/wiki\/Umhlahlandlelasakhiwo:Nripedia\/styles.css\" target=\"_blank\" rel=\"noreferrer noopener\">Umhlahlandlelasakhiwo:Nripedia\/styles.css<\/a> this is my incomplete  <a href=\"https:\/\/nr.wikipedia.org\/wiki\/Umsebenzisi:Derek_J_Moore\">isiNdebele<\/a> tutorial <\/li>\n\n\n\n<li><a href=\"https:\/\/nso.wikipedia.org\/wiki\/Template:Nsoipedia\/styles.css\" target=\"_blank\" rel=\"noreferrer noopener\">Template:Nsoipedia\/styles.css<\/a> has two CSS lamposts and is shaded in pink. <a href=\"https:\/\/nso.wikipedia.org\/wiki\/Mo%C5%A1omi:Derek_J_Moore\">Sepedi<\/a> <\/li>\n\n\n\n<li><a href=\"https:\/\/ss.wikipedia.org\/wiki\/iThempleti:Ssipedia\/styles.css\" target=\"_blank\" rel=\"noreferrer noopener\">iThempleti:Ssipedia\/styles.css<\/a>sees me raising my <a href=\"https:\/\/ss.wikipedia.org\/wiki\/Bantfu:Derek_J_Moore\">peak to the king<\/a>. <\/li>\n\n\n\n<li><a href=\"https:\/\/st.wikipedia.org\/wiki\/Template:Stipedia\/styles.css\">Template:Stipedia\/styles.css<\/a> contains a single lamppost on my <a href=\"https:\/\/st.wikipedia.org\/wiki\/User:Derek_J_Moore\">Sesotho<\/a> page.<\/li>\n\n\n\n<li><a href=\"https:\/\/tn.wikipedia.org\/wiki\/Tempolete:Tnipedia\/styles.css\">Tempolete:Tnipedia\/styles.css<\/a> offers a palette of Wikimedia Colours for <a href=\"https:\/\/tn.wikipedia.org\/wiki\/Modirisi:Derek_J_Moore\">Setswana<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ts.wikipedia.org\/wiki\/Template:Tsipedia\/styles.css\" target=\"_blank\" rel=\"noreferrer noopener\">Template:Tsipedia\/styles.css<\/a> is where I get a bit formulaic on <a href=\"https:\/\/ts.wikipedia.org\/wiki\/User:Derek_J_Moore\">Xitsonga<\/a> (original work is hard).<\/li>\n\n\n\n<li><a href=\"https:\/\/ve.wikipedia.org\/wiki\/Template:Veipedia\/styles.css\" target=\"_blank\" rel=\"noreferrer noopener\">Template:Veipedia\/styles.css<\/a> has funky <a href=\"https:\/\/ve.wikipedia.org\/wiki\/User:Derek_J_Moore\">Tshivenda<\/a> buttons<\/li>\n\n\n\n<li><a href=\"https:\/\/xh.wikipedia.org\/wiki\/iThemplethi:Xhipedia\/styles.css\" target=\"_blank\" rel=\"noreferrer noopener\">iThemplethi:Xhipedia\/styles.css<\/a> I need to add more style and substance to my <a href=\"https:\/\/xh.wikipedia.org\/wiki\/Ilungu:Derek_J_Moore\">isiXhosa<\/a> page<\/li>\n\n\n\n<li><a href=\"https:\/\/zu.wikipedia.org\/wiki\/Template:Zuipedia\/styles.css\">Template:Zuipedia\/styles.css<\/a> is a suitably regal <a href=\"https:\/\/zu.wikipedia.org\/wiki\/User:Derek_J_Moore\">isiZulu page<\/a> tutorial.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Feel free to click on both the stylesheets and the sandboxes. Note that either is incomplete. That\u2019s normal Wikipedia depends on crowdsourced labour. This is volunteer work. Others assist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These <a href=\"https:\/\/en.wikipedia.org\/wiki\/CSS\">Cascading style sheets (CSS)<\/a> are used to control the appearance of a displayed webpage. They are &#8220;cascading&#8221; because they bring multiple sources together. A cascading stylesheet can change the whole look of a website. When you create a CSS sheet on Wikipedia, you can add it in a few places.  <\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Location <\/strong><\/td><td><strong>Purpose<\/strong><\/td><\/tr><tr><td><a href=\"Template:Css-style\">Template:Css-style<\/a><\/td><td>A template that allows you to style some text <\/td><\/tr><tr><td>Template:ipedia <\/td><td>A template  that could be created on vernacular Wikipedia<\/td><\/tr><tr><td>Template:ipedia\/styles.css<\/td><td>CSS associated with your vernacular template (see the examples above)<\/td><\/tr><tr><td><a href=\"https:\/\/en.wikipedia.org\/wiki\/User:Derek_J_Moore\/ipedia\/common.css\">User:Derek J Moore\/ipedia\/common.css<\/a><\/td><td>CSS that is applied on your own sandbox. The example I&#8217;m showing is mine. Please feel free to use it. <\/td><\/tr><tr><td><a href=\"https:\/\/en.wikipedia.org\/wiki\/MediaWiki:Common.css\">https:\/\/en.wikipedia.org\/wiki\/MediaWiki:Common.css<\/a><\/td><td>CSS that is applied to the entire Wikipedia. Be careful here! The may be CASCADING effects if you mess about with this sheet <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Making the logo work<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/diff.wikimedia.org\/2021\/03\/02\/parenthood-is-difficult-with-txikipedia-is-a-little-bit-easier\/\" target=\"_blank\" rel=\"noreferrer noopener\">Txikipedia<\/a> logo is text (and is not an image) and a fancy font.  I&#8217;ve created a logo with two capital letters at each end. The font is &#8216;Linux Libertine&#8217; a serif text that is styled in CSS to give large bookends. I could have used an image, but the text gives greater flexibility when seen on a small screen. Its also quicker to adjust depending on how you spell Wikipedia in your language. <\/p>\n\n\n\n<style data-wp-block-html=\"css\">\n.ipedia-logo {\ncolor:#333333;font-size:4rem;font-family:'Linux Libertine',Georgia, serif;font-variant:small-caps;line-height:100%; padding-top:4px;}\n.ipedia-logo-lead  { color: var(--white); }\n.ipedia-logo-end { color: var(--white); }\n<\/style>\n\n<div class=\"ipedia-logo\">\n<span class=\"ipedia-logo-lead\">Log<\/span><span class=\"ipedia-logo-end\">O<\/span>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Designing a header <\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A few weeks ago, I wrote about building a banner from blocks. One block had a gradient background, a heading sat in the block and and three hyperlinks (also blocks) were there. Today I&#8217;ll take it further and develop a &#8220;header&#8221; for your page. The header will be split into two with logo, a slogan and small horizontal navigation links on the left of the page (column 1). On the right hand side of the header, we&#8217;ll have a grid. With icons that link to certain categories. In CSS these blocks are known as &#8220;classes&#8221;.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Picturing a schema<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Sometimes it\u2019s hard to understand all these abstractions. That&#8217;s when I like to draw (or prompt). If you click on any of the stylesheets (linked below), you will find a small drawing like this below in the CSS. This schema is NOT necessary for the CSS to function. Its just a helpful reminder for my brain to remember all the parts that go into a page. <\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#f4f4f4\"><code>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500HEADER\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 FIRST COLUMN                        \u2502 SECOND  COLUMN   \u2502\n\u2502 Logo                                \u2502                  \u2502\n\u2502 Tagline                             \u2502  GRID|GRID|GRID  \u2502\n\u2502  (Pill 1)  (Pill 2)  (Pill 3)       \u2502  GRID|GRID|GRID  \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>.header<\/li>\n\n\n\n<li>column 1 and column 2 (.header left and .header right)<\/li>\n\n\n\n<li>.logo<\/li>\n\n\n\n<li>.tagline<\/li>\n\n\n\n<li>.pill and<\/li>\n\n\n\n<li>.grid<\/li>\n<\/ul>\n\n\n\n<style data-wp-block-html=\"css\">\n.ipedia-header {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    border-radius: 12px;\n    overflow: hidden;\n    margin-top: -20px;\n    margin-bottom: 1em;\n    background-color: #819637;;\n\n}\n.ipedia-header-left {\n    padding: 1.4rem 1.75rem;\n    color: var(--white);\n}\n\n.ipedia-logo {\ncolor:#333333;font-size:4rem;font-family:'Linux Libertine',Georgia, serif;font-variant:small-caps;line-height:100%; padding-top:4px;}\n.ipedia-logo-lead  { color: var(--white); }\n.ipedia-logo-end { color: var(--white); }\n\n.ipedia-tagline {\n    font-family: 'GochiHand', sans-serif;\n    font-size: 1.3em;\n    color: rgba(255,255,255,0.85);\n    padding-left: 4px;\n    margin-bottom: 14px;\n}\n.ipedia-meta {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    margin-top: 12px;\n}\n.ipedia-pill {\n    font-size: 0.85em;\n    background: rgba(255,255,255,0.18);\n    border-radius: 20px;\n    padding: 3px 12px;\n    color: var(--white);\n    display: inline-block;\n    border: none !important;\n\tmargin-top: 4px;\n}\n.ipedia-header-right {\n    background: rgba(0,0,0,0.22);\n    padding: 1.1rem 1.25rem;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    min-width: 270px;\n}\n.ipedia-menu-title {\n    font-family: 'GochiHand', sans-serif;\n    font-size: 1.2em;\n    color: rgba(255,255,255,0.85);\n    margin-bottom: 10px;\n}\n.ipedia-menu-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 6px;\n}\n.ipedia-menu-grid p {\n    display: contents;\n}\n.ipedia-cat {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding: 8px 4px;\n    border-radius: 10px;\n    background: rgba(255,255,255,0.13);\n    border: none !important;\n    vertical-align: top;\n}\n.ipedia-cat:hover {\n    background: rgba(255,255,255,0.28);\n}\n.ipedia-cat a {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    text-decoration: none;\n    color: var(--white);\n    width: 100%;\n}\n.ipedia-cat a:hover {\n    text-decoration: none;\n    color: var(--black);;\n}\n.ipedia-cat-icon {\n    font-size: 1.6em;\n    line-height: 1;\n    display: block;\n}\n.ipedia-cat-label {\n    font-family: 'GochiHand', sans-serif;\n    font-size: 0.9em;\n    color: white;\n    text-align: center;\n    line-height: 1.15;\n    display: block;\n}\n<\/style>\n\n<div class=\"ipedia-header\">\n\n<div class=\"ipedia-header-left\">\n<div class=\"ipedia-logo\">\n<span class=\"ipedia-logo-lead\">Log<\/span><span class=\"ipedia-logo-end\">O<\/span>\n<\/div>\n\n<div class=\"ipedia-tagline\">\nSlogan\n<\/div>\n\n<div class=\"ipedia-meta\">\n<span class=\"ipedia-pill\">\ud83d\udcda Link<\/span>\n<\/div>\n<\/div>\n\n\n<div class=\"ipedia-header-right\">\n<div class=\"ipedia-menu-grid\">\n\n<div class=\"ipedia-cat\">\n<span class=\"ipedia-cat-icon\">\ud83c\udfa8<\/span>\n<span class=\"ipedia-cat-label\">Icon and category<\/span>\n<\/div>\n\n\n<\/div>\n<\/div>\n\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Adding  more links and categories. <\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The example above has some elements (the link and the category) that can be repeated. <\/p>\n\n\n\n<style data-wp-block-html=\"css\">\n.ipedia-pill {\n    display: inline-block;\n    font-size: 0.85em;\n    padding: 4px 12px;\n    border-radius: 20px;\n    background: green;\n    color: white !important;\n    text-decoration: none !important;\n}\n\n.ipedia-pill:hover,\n.ipedia-pill:focus {\n    background: darkgreen;\n    color: white !important;\n    text-decoration: none !important;\n}\n\n.ipedia-cat {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding: 8px 4px;\n    border-radius: 10px;\n    background: green;\n    border: none !important;\n    vertical-align: top;\n}\n.ipedia-cat:hover {\n    background: blue;\n}\n.ipedia-cat a {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    text-decoration: none;\n    width: 100%;\n}\n.ipedia-cat a:hover {\n    text-decoration: none;\n    color: black;\n}\n.ipedia-cat-icon {\n    font-size: 1.6em;\n    line-height: 1;\n    display: block;\n}\n.ipedia-cat-label {\n    font-family: 'GochiHand', sans-serif;\n    font-size: 0.9em;\n    color: white;\n    text-align: center;\n    line-height: 1.15;\n    display: block;\n}\n\n\n<\/style>\n\n<a href=\"\" class=\"ipedia-pill\"><span class=\"ipedia-pill\">\ud83d\udcda<\/span>Hyperlink<\/a>\n\n\n<div class=\"ipedia-cat\">\n<span class=\"ipedia-cat-icon\">\ud83c\udfa8<\/span>\n<span class=\"ipedia-cat-label\">Icon and category<\/span>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">We could style the little pill shaped link. Small font size, green background, rounded corners.    <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"\/wiki\/Example\" class=\"ipedia-pill\"&gt;&lt;span class=\"ipedia-pill\"&gt;\ud83d\udcda&lt;\/span&gt;Hyperlink&lt;\/a&gt;\n\n.ipedia-pill {\n    display: inline-block;\n    font-size: 0.85em;\n    padding: 4px 12px;\n    border-radius: 20px;\n    background: green;\n    color: white !important;\n    text-decoration: none !important;\n}\n\n.ipedia-pill:hover,\n.ipedia-pill:focus {\n    background: darkgreen;\n    color: white !important;\n    text-decoration: none !important;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Multiple Stylesheets<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">For Wikimedia South Africa, the multiplicity of language raises a thorny question. Should we have once central service for all the official languages in South Africa. That would be easier to maintain, if you are not sure about the levels of CSS expertise in each of the communities, then its probably a safe bet. However, if you would like language communities to shape and own their Wikipedia platform, like the Basque Wikipedians did, then more become constructionist and make resources that reflects the identity of their community, then perhaps a few more people should learn how to code.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 1 | Locate the local language stylesheet<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">You&#8217;ve seen the 10 stylesheets I created. They are particular to a particular <a href=\"https:\/\/en.wikipedia.org\/wiki\/List_of_ISO_639_language_codes\">ISO 639 language code<\/a>. (Saffers who speak English, there&#8217;s a footnote for you.). The classes in the stylesheet will begin with the two or three letter codes. Let&#8217;s start With isiZulu<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">.zu + ipedia + header<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>.zuipedia-header-left and .zuipedia-header-header-right<\/li>\n\n\n\n<li>.zuipedia-logo<\/li>\n\n\n\n<li>.zuipedia-tagline<\/li>\n\n\n\n<li>.zuipedia-pill and<\/li>\n\n\n\n<li>.zuipedia-grid<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Details are in the design<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">This is how you can go about doing this on your own Wikipedia Platform<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 2 | Layout two columns<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">This is a two-column page layout (a grid). The first column fills the available space and then the second column fits the content that&#8217;s been placed therein. If the screen is too narrow, then the column on the right (the second one) will appear underneath. A coloured container with rounded corners acts as a header. Anything that sticks out is clipped. The header is pulled  20px upward (it can be pulled higher), and there is some space underneath.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ipedia-header {\ndisplay: grid;\ngrid-template-columns: 1fr auto;\nborder-radius: 12px;\noverflow: hidden;\nmargin-top: -20px;\nmargin-bottom: 1em;\nbackground-color: var(--primary);\n}\n.ipedia-header-left {\npadding: 1.4rem 1.75rem;\ncolor: var(--white);\n}\n}\n.ipedia-header-right {\nbackground: rgba(0,0,0,0.22);\npadding: 1.1rem 1.25rem;\ndisplay: flex;\nflex-direction: column;\njustify-content: center;\nmin-width: 270px;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Step 3 | Refer to the stylesheet (on code view)<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">When creating a normal webpage in HTML, you&#8217;ll refer to the stylesheet (see example on the left). When creating the same on Wikipedia, you probably should first create a stylesheet under your sandbox (see example on the right).    <\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>HTML<\/td><td>Wikipedia<\/td><\/tr><tr><td>&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;.\/style.css&#8221;&gt;<\/td><td><br>&lt;templatestyles src=&#8221;User:Derek_J_Moore\/ipedia\/common.css &#8221; \/&gt;<br><br><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Step 4 | Choose your colour palette<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Wikimedia has created three <a href=\"https:\/\/meta.wikimedia.org\/wiki\/Brand\/colours\">lovely colour palettes<\/a> and so (instead of using a colour picker) you could choose from these codes. I&#8217;ve drawn on the vivid colour palette to create this colours lovely collection of colours. <\/p>\n\n\n\n<style data-wp-block-html=\"css\">\n:root {\n--red: #970302;\n--pink: #E679A6;\n--orange: #EE8019;\n--yellow: #F0BC00;\n--purple: #551A8B;\n--dark-green:#305D70;\n--blue: #0E65C0;\n--bright-blue: #049DFF;\n--bright-yellow: #E9E7C4;\n--green: #308557;\n--bright-green: #71D1B3;\n}\n\n\n\n.eyebrow {\ntext-transform: uppercase;\nletter-spacing: .14em;\nfont-weight: 700;\nfont-size: .8rem;\n}\n\n.red {\nbackground-color: var(--red);\ncolor: #ffffff;}\n\n.red strong {\n  color: #ffffff;\n}\n.red span {\n  color: #ffffff;\n}\n\n.pink {\nbackground-color: var(--pink);\ncolor: #ffffff;}\n\n.pink strong {\n  color: #ffffff;\n}\n.pink span {\n  color: #ffffff;\n}\n\n.orange {\nbackground-color: var(--orange);\ncolor: #ffffff;}\n\n.orange strong {\n  color: #ffffff;\n}\n.orange span {\n  color: #ffffff;\n}\n\n\n.yellow {\nbackground-color: var(--yellow);}\n\n.purple {\nbackground-color: var(--purple);color: #ffffff;}\n\n.purple strong {\n  color: #ffffff;\n}\n\n.purple span {\n  color: #ffffff;\n}\n\n\n.dark-green {\nbackground-color: var(--dark-green);}\n\n\n\n.stats {\ndisplay: grid;\ngrid-template-columns: repeat(3, 1fr);\ngap: 1px;\nmargin-top: 4rem;\nbackground: #ccc;\n}\n\n.stats article {\npadding: 2rem;\nmin-height: 150px;\n}\n\n\n.stats strong {\ndisplay: block;\ncolor: var(--report-purple);\nfont-size: clamp(2rem, 5vw, 4rem);\nline-height: 1;\n}\n\n.stats span {\ndisplay: block;\nmargin-top: 1rem;\nfont-weight: 600;\n}\n<\/style>\n\n<section class=\"impact\">\n  <div class=\"container\">\n    <p class=\"eyebrow\">Vivid Colours you might use in Wikipedia<\/p>\n<div style=\"display:flex; flex-wrap:wrap; width:300px; border-radius:12px; overflow:hidden;\">\n  <div style=\"background:#970302; width:50px; height:50px;\"><\/div>\n  <div style=\"background:#E679A6; width:50px; height:50px;\"><\/div>\n  <div style=\"background:#EE8019; width:50px; height:50px;\"><\/div>\n  <div style=\"background:#F0BC00; width:50px; height:50px;\"><\/div>\n  <div style=\"background:#5748B5; width:50px; height:50px;\"><\/div>\n  <div style=\"background:#305D70; width:50px; height:50px;\"><\/div>\n  <div style=\"background:#0E65C0; width:50px; height:50px;\"><\/div>\n  <div style=\"background:#049DFF; width:50px; height:50px;\"><\/div>\n  <div style=\"background:#E9E7C4; width:50px; height:50px;\"><\/div>\n  <div style=\"background:#308557; width:50px; height:50px;\"><\/div>\n  <div style=\"background:#71D1B3; width:50px; height:50px;\"><\/div>\n<\/div>\n\n  <\/div>\n<\/section>\n\n\n\n<p class=\"wp-block-paragraph\">Now you might know what the colour of the <a href=\"https:\/\/eu.wikipedia.org\/wiki\/Txikipedia:Azala\" target=\"_blank\" rel=\"noreferrer noopener\">Txikipedia<\/a> banner is (hint the answer is above). I&#8217;m going to start off with making a banner with a colours I use frequently on my website. If I was working on codepen, I&#8217;d use the root folder.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:root {\n--primary: #819637;\n--white: #FFFFFF;\n--black: #111111;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">BUT, You go ahead and choose your colour using the hexidecimal palette I created.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.ipedia-header {\nbackground-color: var(--primary);\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Step 5 | Add more links, categories or images<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">You might have the structure now, and would like to add more pill shaped links or more categories. Or you may want to add an image or two. Now if you visit <a href=\"https:\/\/www.wikidata.org\/wiki\/Q26127718\">Q26127718<\/a>, you will see that I have installed an image upload feature. This works with almost all vernacular versions of Wikipedia. There might be a problem with the names I used to create the function. Please tell me and I will rectify my mistake. This function permits the user to upload images to Wikimedia commons. I&#8217;ve written much more about this upload.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Last Words<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">My challenge to my local Wikipedia colleagues who are concerned about their language (this Heritage Month) is to also think about learning how to code on your vernacular instance. Perhaps make a  button or banner, or even a CSS image. Or join Bobby Shabangu (and a few others ) and follow me on GitHub.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">P.S. You might have noticed that there is no ENGLISH examples. That&#8217;s because English Wikipedia does not want plain <strong>CSS<\/strong>&nbsp;but prefers <strong><a href=\"https:\/\/www.mediawiki.org\/wiki\/Css-sanitizer\">Sanitized CSS<\/a><\/strong>. There is a setting that you can change to make Sanatized CSS, but that setting is limited to administrators. You can still make english Wikipedia look funky.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Enter <strong>Special:ChangeContentModel<\/strong> on English Wikipedia<\/li>\n\n\n\n<li>Give your <strong>page title<\/strong> a name. I suggest that you use your sandbox.<\/li>\n\n\n\n<li>Select the new content model (sanitized CSS)<\/li>\n\n\n\n<li>Give a reason and hit create. <\/li>\n\n\n\n<li>You now have a CSS stylesheet.  <\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">If you check out <a href=\"https:\/\/en.wikipedia.org\/wiki\/User:Nomfundo_Zungu_wmza\/sandbox\">Nomfundo&#8217;s<\/a> sandbox, you can see her page that we have started working on. Process of creating <a href=\"https:\/\/en.wikipedia.org\/wiki\/User:Derek_J_Moore\/ipedia\/style.css\">a style sheet <\/a>is a bit complicated on English Wikipedia. Play around with your Sandbox on vernacular platforms. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"920\" height=\"506\" src=\"https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/09\/image-11.png\" alt=\"\" class=\"wp-image-6925\" srcset=\"https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/09\/image-11.png 920w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/09\/image-11-300x165.png 300w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/09\/image-11-768x422.png 768w\" sizes=\"auto, (max-width: 920px) 100vw, 920px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Next post will be about JSON and how we create empty structural containers, while the JSON becomes the actual manuscript\/content. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today was a heritage day at my local high school. Kids could dress in their local heritage gear, or wear blue. Mine chose the latter. The other outfits&#8230;well they were lovely. I\u2019d like to highlight another Wikipedia group who is standing out for me at the moment. They are from the Basque region and their &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/weblearning.co.za\/blog\/heritage-month\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Heritage Month&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"episode_type":"","audio_file":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-6847","post","type-post","status-publish","format-standard","hentry","category-file","entry"],"jetpack_publicize_connections":[],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/posts\/6847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/comments?post=6847"}],"version-history":[{"count":39,"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/posts\/6847\/revisions"}],"predecessor-version":[{"id":6940,"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/posts\/6847\/revisions\/6940"}],"wp:attachment":[{"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/media?parent=6847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/categories?post=6847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/tags?post=6847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}