diff --git a/docs/contributing/style-guide.md b/docs/contributing/style-guide.md
index 5682161dfc..77a5c3e141 100644
--- a/docs/contributing/style-guide.md
+++ b/docs/contributing/style-guide.md
@@ -176,7 +176,11 @@ This action is dangerous and could result in data loss.
:::
:::sumo Best Practice
-Highlight specific info, best practices, links, [training links](https://www.sumologic.com/learn/training/), and other information from Sumo specialists. You can change the title based on the content.
+Highlight Sumo-specific info, best practices, links, and other information from Sumo specialists. You can change the title based on the content.
+:::
+
+:::training
+Links to training courses, certification info, and micro lessons.
:::
```
@@ -205,7 +209,11 @@ This action is dangerous and could result in data loss.
:::
:::sumo Best Practice
-Highlight specific info, best practices, links, [training links](https://www.sumologic.com/learn/training/), and other information from Sumo specialists. You can change the title based on the content.
+Highlight Sumo-specific info, best practices, links, and other information from Sumo specialists. You can change the title based on the content.
+:::
+
+:::training
+Links to training courses, certification info, and micro lessons.
:::
diff --git a/docusaurus.config.js b/docusaurus.config.js
index de6bfc4cfa..bdcf4ca98b 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -104,6 +104,7 @@ module.exports = {
'tip',
'warning',
'important',
+ 'training',
],
},
},
diff --git a/src/css/sumo.scss b/src/css/sumo.scss
index 3426b9aa46..94a3821451 100644
--- a/src/css/sumo.scss
+++ b/src/css/sumo.scss
@@ -797,6 +797,48 @@ html[data-theme='light'] .theme-admonition-sumo {
}
}
+// TRAINING
+html[data-theme='dark'] .theme-admonition-training {
+ background-color: rgba(112, 0, 162, 0.1);
+ --ifm-alert-border-color: #7000a2;
+ border-left: 6px solid #7000a2;
+ padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal);
+ --ifm-alert-color: #e3e3e3;
+ --ifm-alert-foreground-color: #e3e3e3; /* ← ADD THIS */
+ .admonition-icon {
+ background-color: #7000a2;
+ padding: 5px 5px 0px 5px;
+ }
+ a {
+ color: #c440ff;
+ text-decoration: none;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+}
+
+
+html[data-theme='light'] .theme-admonition-training {
+ background-color: rgba(112, 0, 162, 0.05);
+ --ifm-alert-border-color: #7000a2;
+ border-left: 6px solid #7000a2;
+ padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal);
+ --ifm-alert-color: var(--ifm-font-color-base);
+ --ifm-alert-foreground-color: #7000a2;
+ color: var(--ifm-font-color-base);
+ .admonition-icon {
+ --ifm-alert-foreground-color: #7000a2 !important;
+ }
+ a {
+ color: #7000a2;
+ text-decoration: none;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+}
+
// IMPORTANT
html[data-theme='light'] .alert--info {
--ifm-alert-background-color: rgba(0, 139, 178, 0.05);
diff --git a/src/theme/Admonition/index.js b/src/theme/Admonition/index.js
index 69e417987e..739508fcbc 100644
--- a/src/theme/Admonition/index.js
+++ b/src/theme/Admonition/index.js
@@ -59,6 +59,16 @@ function SumoIcon() {
)
}
+function TrainingIcon() {
+ return (
+
+ );
+}
// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
const AdmonitionConfigs = {
sumo: {
@@ -72,6 +82,17 @@ const AdmonitionConfigs = {
),
},
+ training: {
+ infimaClassName: 'training',
+ iconComponent: TrainingIcon,
+ label: (
+
+ training
+
+ ),
+ },
note: {
infimaClassName: 'secondary',
iconComponent: NoteIcon,