Template talk:Ai/tags

Using the Ai bar widget

When the code is used,upon rendering the page, it will display a horizontal bar with a specific text and an clickable icon.

Steps to use or to create such a bar on your MediaWiki

1. Create the CSS template

• (As admin) - Create the CSS template page
• Write or copy/paste the css
• Make sure the page is using Sanitized CSS (option in the sidebar is named Page information)

Base css form the Template:Ai/tags.css

/** Template Ai Tags **/
.tg-wrapper{display:block;width:100%;height:auto;margin:10px auto 22px auto;padding:.7em 0 .7em;background-color:#f1f1f1;box-shadow:inset 0 0 1px #ccc;border-radius:4px;}
.tg-in{display:flex;gap:10px;margin:0 auto;padding:.2em .8em .2em;width:90%;height:auto;flex-direction:row;}
.tg-txt{display:block;min-width:90%;height:auto;margin:0 auto;text-align:left;font-size:14px;flex:1;}
.tg-icon{display:block;min-width:10%;height:30px;margin:0 auto;text-align:right;flex:1;overflow:hidden;}
.tg-icon img{display:block;width:30px;height:300px;margin:0 auto;overflow:hidden;}
.tg-ai-chatgpt{display:block;width:30px;height:300px;margin:0 auto;transform:translateY(0);}
.tg-ai-gemini{display:block;width:30px;height:300px;margin:0 auto;transform:translateY(-30px);}
.tg-ai-copilot{display:block;width:30px;height:300px;margin:0 auto;transform:translateY(-60px);}
.tg-ai-meta{display:block;width:30px;height:300px;margin:0 auto;transform:translateY(-90px);}
.tg-ai-deepseek{display:block;width:30px;height:300px;margin:0 auto;transform:translateY(-120px);}

2. Create the HTML template

• (As admin - or user with these privileges) - Create the HTML template page. Choose a relevant name for it.
• Write or copy the HTML markup
• Don't forget to call the CSS template into HTML one. Dependency

Base HTML form the Template:Ai/tags

<div class="tg-wrapper">
<div class="tg-in">
<div class="tg-txt">This content is generated full or partially by Ai. Click to [[Special:Contact|report]] inaccurate content.</div>
<div class="tg-icon"><span class="{{{2}}}">[[File:All-ai.png|30px|300px|link={{{1}}}]]</span></div>
</div>
</div>

Because of the convenience we are using a single image which holds all the icons we need right now nad it is called in the HTML template as File:All-ai.png along with width which is 30px and height of the image which is 300px.

• The link placeholder is defined by {{{1}}}
• The class which selects what icon to display is using the placeholder {{{2}}}

In any wiki page we call the following markup to display the bar with specific content.

• The code

{{Ai/tags|Ai/Gemini|tg-ai-gemini}}

• Render

This content is generated full or partially by Ai. Click to report inaccurate content.