Template:Alert: Difference between revisions

Browse history interactively

← Older edit Newer edit →

Content deleted Content added

VisualWikitext

Inline

Revision as of 19:31, 2 May 2025

Examples:

openfox colors:

Source

{{Alert|content=a tailwind based skin|content bold=Lisa:|type=top border|bg-color=bg-light-purple|border-color=border- fox-{{{fox-color|purple}}}|text-color=text- fox-{{{fox-color|purple}}}|icon-type=fa-regular}}

Lisa:

a tailwind based skin

Traditional

Source

{{Alert
|type=traditional
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
}}

Result

This is an alert

Main Page

Modern with Badge

Source

{{Alert
|type=modern
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|external-link=https://example.com
}}

Result

This isan alert

https://example.com

Left Accent Border

Source

{{Alert
|type=left border
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|link=https://example.com
}}

Result

This is

an alert

Titled

Source

{{Alert
|type=titled
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|link=https://example.com
}}

Result

This is

an alert

Solid

Source

{{Alert
|type=solid
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|external-link=https://example.com
}}

Result

This is an alert

https://example.com

Top Accent Border

Source

{{Alert
|type=top border
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|link=https://example.com
}}

Result

This is

an alert

Banner

Source

{{Alert
|type=banner
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|link=https://example.com
}}

Result

This is

an alert

Titled

Source

{{Alert
|type=Titled
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|link=https://example.com
}}

Result

This is

an alert

Defualt (no type)

Source

{{Alert
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|external-link=https://example.com
}}

Result

This is an alert

https://example.com

Template for text alerts and banners

Template parameters[Edit template data]
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
Content	`content`	no description	Line	suggested
Bold content	`content bold`	no description	Line	suggested
type	`type`	no description Suggested values `traditional` `titled` `solid` `modern` `left border` `top border` `banner` Default traditional	String	suggested
Background color	`bg-color`	no description Suggested values `bg-light-azure` `bg-light-purple` `bg-light-magenta`	String	suggested
Border color	`border-color`	no description Suggested values `border- fox-purple` `border-fox-azure` `bg-fox-magenta`	String	suggested
Text color	`text-color`	no description Suggested values `text- fox-purple` `text-fox-azure` `text-fox-magenta`	String	optional
Icon	`icon`	Font Awesome icon name	String	optional
Icon type	`icon-type`	Font Awesome icon weight Suggested values `fa-solid` `fa-regular` `fa-light` `fa-thin` `fa-duotone`	String	suggested
Link to page	`link`	no description	Page name	suggested
External link	`external-link`	no description	URL	optional
Direction	`direction`	click if RTL Suggested values `rtl`	Unknown	optional
Icon size	`icon-size`	no description Suggested values `fa-2xs` `fa-xs` `fa-sm` `fa-lg` `fa-xl` `fa-2xl` `fa-1x` `fa-2x` `fa-3x` `fa-4x` `fa-5x`	String	optional
Hover class for links	`hover`	no description	Unknown	optional
Leading color	`fox-color`	Leading color from openfox.io pallet Suggested values `purple` `azure` `magenta`	String	optional

@@ Line 5: / Line 5: @@
 ==== Source ====
 <pre><nowiki>
-{{Alert|content=a tailwind based skin|content bold=Lisa:|type=top border|bg-color=bg-light-purple|border-color=border-fox-purple|text-color=text-fox-purple|icon-type=fa-regular}}
+{{Alert|content=a tailwind based skin|content bold=Lisa:|type=top border|bg-color=bg-light-purple|border-color=border- fox-{{{fox-color|purple}}}|text-color=text- fox-{{{fox-color|purple}}}|icon-type=fa-regular}}
 </nowiki></pre>
-{{Alert|content=a tailwind based skin|content bold=Lisa:|type=top border|bg-color=bg-light-purple|border-color=border-fox-purple|text-color=text-fox-purple|icon-type=fa-regular}}
+{{Alert|content=a tailwind based skin|content bold=Lisa:|type=top border|bg-color=bg-light-purple|border-color=border- fox-{{{fox-color|purple}}}|text-color=text- fox-{{{fox-color|purple}}}|icon-type=fa-regular}}
 === Traditional ===
@@ Line 231: / Line 231: @@
 <p class="text-sm">{{{content|}}}</p>{{#if:{{{icon|}}}|</div>}}
 </div>
-|fox = <div class="{{{bg-color|bg-light-purple}}} border {{{border-color|border-fox-purple}}} {{{text-color|text-fox-purple}}} px-4 py-3 rounded relative {{#if:{{{link|{{{external-link|}}}}}}|flex justify-between align-items-center {{{{hover|transition-all hover:bg-fox-purple hover:border-fox-purple hover:text-white}}} }}" role="alert">{{#if:{{{link|{{{external-link|}}}}}}|<div>}}{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2}} }}<span class="font-bold">{{{content bold|}}}</span> <span class="block sm:inline">{{{content|}}}</span>{{#if:{{{link|{{{external-link|}}}}}}|</div><div>{{i|angle-{{{direction|right}}}|fas|fill-current opacity-75 h-4 w-4}}<div class="overlay-link">{{#if:{{{external-link|}}}|{{{external-link|}}}|{{#if:{{{link|}}}|[[{{{link}}}]]}} }}</div></div>}}</div>
+|fox = <div class="{{{bg-color|bg-light-purple}}} border {{{border-color|border-fox-{{{fox-color|purple}}}}}} {{{text-color|text- fox-{{{fox-color|purple}}}}}} px-4 py-3 rounded relative {{#if:{{{link|{{{external-link|}}}}}}|flex justify-between align-items-center {{{{hover|transition-all hover:bg- fox-{{{fox-color|purple}}} hover:border- fox-{{{fox-color|purple}}} hover:text-white}}} }}" role="alert">{{#if:{{{link|{{{external-link|}}}}}}|<div>}}{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2}} }}<span class="font-bold">{{{content bold|}}}</span> <span class="block sm:inline">{{{content|}}}</span>{{#if:{{{link|{{{external-link|}}}}}}|</div><div>{{i|angle-{{{direction|right}}}|fas|fill-current opacity-75 h-4 w-4}}<div class="overlay-link">{{#if:{{{external-link|}}}|{{{external-link|}}}|{{#if:{{{link|}}}|[[{{{link}}}]]}} }}</div></div>}}</div>
 }}</includeonly>
 <noinclude>
@@ Line 274: / Line 274: @@
 			"type": "string",
 			"suggestedvalues": [
-				"border-fox-purple",
+				"border- fox-purple",
 				"border-fox-azure",
 				"bg-fox-magenta"
@@ Line 287: / Line 287: @@
 			"type": "string",
 			"suggestedvalues": [
-				"text-fox-purple",
+				"text- fox-purple",
 				"text-fox-azure",
 				"text-fox-magenta"
@@ Line 385: / Line 385: @@
 				"he": "קלאס לשינוי מצב במעבר עכבר על לינק"
 			}
+		},
+		"fox-color": {
+			"label": "Leading color",
+			"description": "Leading color from openfox.io pallet",
+			"type": "string",
+			"suggestedvalues": [
+				"purple",
+				"azure",
+				"magenta"
+			]
 		}
 	},
@@ Line 404: / Line 414: @@
 		"direction",
 		"icon-size",
-		"hover"
+		"hover",
+		"fox-color"
 	],
 	"format": "inline"

openfox.io template repository

Template:Alert: Difference between revisions

Revision as of 19:31, 2 May 2025

Contents

openfox colors:

Source

Traditional

Source

Result

Modern with Badge

Source

Result

Left Accent Border

Source

Result

Titled

Source

Result

Solid

Source

Result

Top Accent Border

Source

Result

Banner

Source

Result

Titled

Source

Result

Defualt (no type)

Source

Result