Template talk:Ai/tags

Using the Ai bar widget

Micro banners on horizontal bar
Use of templates, Codes and Extension

When the code is used, upon rendering the page, it will display a horizontal bar with a specific text and an clickable icon.
Each icon is representative to a barand, service, in this case, various Ai services and linked to a page on this platform.

To change the icon and the link, we simply change the class name and the relevant link/url.
For this snippet we are using a single image file File:All-ai.png.

Steps to use or to create 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 for the css

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.

Available class names

ChatGPT	Gemini	Microsoft Copilot	Facebook Meta	Deepseek
tg-ai-chatgpt	tg-ai-gemini	tg-ai-copilot	tg-ai-meta	tg-ai-deepseek

ChatGPT banner

The code	Render
{{Ai/tags|Ai/ChatGPT|tg-ai-chatgpt}}	This content is generated full or partially by Ai. Click to report inaccurate content.

Gemini banner

The code	Render
{{Ai/tags|Ai/Gemini|tg-ai-gemini}}	This content is generated full or partially by Ai. Click to report inaccurate content.

Copilot banner

The code	Render
{{Ai/tags|Ai/Microsoft Copilot|tg-ai-copilot}}	This content is generated full or partially by Ai. Click to report inaccurate content.

Meta banner

The code	Render
{{Ai/tags|Ai/Facebook Meta|tg-ai-meta}}	This content is generated full or partially by Ai. Click to report inaccurate content.

Deepseek banner

The code	Render
{{Ai/tags|Ai/Deepseek|tg-ai-deepseek}}	This content is generated full or partially by Ai. Click to report inaccurate content.

Notes

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