Skip to Content

Wiki source code of MS Teams How To's:

Version 1.1 by Chris Workman on 2026/08/24 20:31
Hide last authors
Chris Workman 1.1 1 {{html clean="false"}}
2 <!--
3 ============================================================
4 FirstDigital - Microsoft Teams How To's (XWiki fragment)
5 No photographs. Text, brand colour and icons only.
6 Same design system as the Microsoft Teams Resource Hub (fdt-),
7 Cloud Connected PSTN Resource Hub (fdccp-), Voice Services Q&A
8 (fdvq-), and Cloud Connected PSTN How To's (fdcht-) pages. This
9 page is the natural destination for the "How To's" card on the
10 Microsoft Teams Resource Hub.
11 ============================================================
12
13 HOW TO USE
14 1. Edit the wiki page in SOURCE / WIKI mode (never WYSIWYG).
15 2. Select all existing page content and delete it.
16 3. Paste:
17
18 {{html clean="false"}}
19 ...everything in this file...
20 {{/html}}
21
22 4. Save & View.
23
24 ------------------------------------------------------------
25 LINKS
26 ------------------------------------------------------------
27 The one topic already links to its real destination page, taken
28 directly from the source document -- no placeholder needed:
29 1. How to set up international dialing in FDConnect
30 https://learn.firstdigital.com/bin/view/Teams/Set%20up%20International%20dialing%20in%20FDConnect%3A/
31
32 ------------------------------------------------------------
33 NOTES
34 - This file is a FRAGMENT: no DOCTYPE declaration and no
35 html / head / body elements. Everything is scoped inside
36 .fdmth-hub so it cannot leak into the wiki theme.
37 - After saving, only ever re-edit this page in SOURCE mode.
38 The WYSIWYG editor can strip <style> blocks or duplicate
39 html-macro content -- if a page looks unstyled after saving,
40 that's almost always the cause. Never round-trip this file
41 through Microsoft Word before pasting it either: AutoCorrect
42 can silently turn straight quotes into curly ones and break
43 the HTML/CSS parsing.
44 - Class names use the "fdmth-" prefix, so this page cannot clash
45 with the menu page ("fdm-"), onboarding page ("fdo-"), the
46 Microsoft Teams Resource Hub ("fdt-"), the Cloud Connected PSTN
47 Resource Hub ("fdccp-"), Voice Services Q&A ("fdvq-"), or the
48 Cloud Connected PSTN How To's ("fdcht-") even if more than one
49 of them ever appears on the same page.
50 - The only external asset is your logo, loaded from your wiki.
51 Nothing is embedded, so this file is small.
52 ============================================================
53 -->
54 <style>
55 @import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;600;800&display=swap');
56
57 /* Safety net: if the wiki ever renders this block twice,
58 show only the first copy. */
59 .fdmth-hub ~ .fdmth-hub { display: none !important; }
60
61 /* ---- FirstDigital brand tokens (Brand Guide 2025, p.11) ---- */
62 .fdmth-hub {
63 --fd-navy: #003366;
64 --fd-blue: #307ab2;
65 --fd-blue-bright: #38b2e3;
66 --fd-red: #cf333d;
67 --fd-body: #2e404d;
68 --fd-secondary: #8f9499;
69 --fd-bg-mid: #dedede;
70 --fd-bg-light: #f0f0f0;
71 --fd-ice: #e3f1f8;
72 --fd-white: #ffffff;
73 }
74
75 .fdmth-hub, .fdmth-hub * { box-sizing: border-box; }
76
77 .fdmth-hub {
78 font-family: 'Host Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
79 font-weight: 300;
80 color: var(--fd-body);
81 background: var(--fd-white);
82 max-width: 1000px;
83 margin: 0 auto;
84 padding: 0 20px 30px;
85 -webkit-font-smoothing: antialiased;
86 }
87
88 /* ---- Masthead ---- */
89 .fdmth-masthead {
90 display: flex;
91 align-items: center;
92 justify-content: space-between;
93 gap: 20px;
94 flex-wrap: wrap;
95 padding: 22px 0 18px;
96 border-bottom: 1px solid var(--fd-bg-mid);
97 }
98
99 .fdmth-masthead img { height: 46px; width: auto; display: block; }
100
101 .fdmth-masthead-label {
102 font-size: 12px;
103 font-weight: 600;
104 letter-spacing: 0.16em;
105 text-transform: uppercase;
106 color: var(--fd-secondary);
107 white-space: nowrap;
108 }
109
110 /* ---- Hero ---- */
111 .fdmth-hero {
112 margin-top: 22px;
113 border-radius: 6px;
114 padding: 34px 34px 32px;
115 background: linear-gradient(100deg,
116 var(--fd-navy) 0%,
117 var(--fd-navy) 56%,
118 var(--fd-blue) 100%);
119 }
120
121 .fdmth-rule {
122 width: 62px; height: 4px;
123 background: var(--fd-red);
124 border: 0;
125 margin: 0 0 16px;
126 }
127
128 .fdmth-eyebrow {
129 font-size: 16px;
130 font-weight: 600;
131 letter-spacing: 0.18em;
132 text-transform: uppercase;
133 color: var(--fd-blue-bright);
134 margin-bottom: 9px;
135 }
136
137 .fdmth-hero h1 {
138 font-size: clamp(26px, 3.6vw, 36px);
139 font-weight: 800;
140 line-height: 1.14;
141 letter-spacing: -0.01em;
142 color: var(--fd-white);
143 margin: 0 0 12px;
144 }
145
146 .fdmth-hero p {
147 font-size: 15.5px;
148 font-weight: 300;
149 line-height: 1.62;
150 color: #dbe6ef;
151 margin: 0;
152 max-width: 600px;
153 }
154
155 /* ---- How-to list ---- */
156 .fdmth-list {
157 display: flex;
158 flex-direction: column;
159 gap: 14px;
160 margin-top: 26px;
161 }
162
163 .fdmth-row {
164 display: flex;
165 align-items: center;
166 gap: 18px;
167 background: var(--fd-white);
168 border: 1px solid var(--fd-bg-mid);
169 border-radius: 6px;
170 padding: 18px 20px;
171 text-decoration: none !important;
172 color: inherit;
173 transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
174 }
175
176 .fdmth-row:hover {
177 transform: translateY(-2px);
178 border-color: var(--fd-blue-bright);
179 box-shadow: 0 12px 26px rgba(0,51,102,0.14);
180 }
181
182 .fdmth-row:focus-visible {
183 outline: 3px solid var(--fd-blue-bright);
184 outline-offset: 2px;
185 }
186
187 .fdmth-badge {
188 width: 46px; height: 46px;
189 border-radius: 8px;
190 background: var(--fd-ice);
191 display: flex;
192 align-items: center;
193 justify-content: center;
194 flex: 0 0 auto;
195 }
196
197 .fdmth-badge svg {
198 width: 22px; height: 22px;
199 fill: none;
200 stroke: var(--fd-navy);
201 stroke-width: 1.7;
202 stroke-linecap: round;
203 stroke-linejoin: round;
204 }
205
206 .fdmth-badge svg .accent { stroke: var(--fd-blue-bright); }
207
208 .fdmth-row-text { flex: 1 1 auto; min-width: 0; }
209
210 .fdmth-q {
211 display: block;
212 font-size: 16.5px;
213 font-weight: 700;
214 line-height: 1.35;
215 color: var(--fd-navy);
216 }
217
218 .fdmth-q-sub {
219 display: block;
220 font-size: 13px;
221 font-weight: 300;
222 line-height: 1.5;
223 color: var(--fd-secondary);
224 margin-top: 3px;
225 }
226
227 .fdmth-arrow {
228 flex: 0 0 auto;
229 display: flex;
230 align-items: center;
231 color: var(--fd-red);
232 }
233
234 .fdmth-arrow svg {
235 width: 18px; height: 18px;
236 fill: none;
237 stroke: var(--fd-red);
238 stroke-width: 2;
239 stroke-linecap: round;
240 stroke-linejoin: round;
241 transition: transform .2s ease;
242 }
243
244 .fdmth-row:hover .fdmth-arrow svg { transform: translateX(4px); }
245
246 /* ---- Footer ---- */
247 .fdmth-footer {
248 margin-top: 30px;
249 padding-top: 18px;
250 border-top: 1px solid var(--fd-bg-mid);
251 display: flex;
252 justify-content: space-between;
253 gap: 16px;
254 flex-wrap: wrap;
255 font-size: 12.5px;
256 color: var(--fd-secondary);
257 }
258
259 @media (max-width: 720px) {
260 .fdmth-hub { padding: 0 12px 24px; }
261 .fdmth-masthead img { height: 38px; }
262 .fdmth-hero { padding: 26px 22px 24px; }
263 .fdmth-row { padding: 16px; gap: 14px; }
264 .fdmth-footer { justify-content: flex-start; }
265 }
266
267 @media (prefers-reduced-motion: reduce) {
268 .fdmth-row, .fdmth-arrow svg { transition: none; }
269 }
270 </style>
271
272 <div class="fdmth-hub">
273
274 <div class="fdmth-masthead">
275 <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/FirstDigital-Logo.png?rev=1.3" alt="FirstDigital">
276 <span class="fdmth-masthead-label">Fiber &middot; Internet &middot; Cloud &middot; Voice</span>
277 </div>
278
279 <section class="fdmth-hero">
280 <hr class="fdmth-rule">
281 <div class="fdmth-eyebrow">Microsoft Teams</div>
282 <h1>How To&rsquo;s</h1>
283 <p>Step-by-step guides for setting up and managing your Microsoft Teams voice service. Select a topic below for the full walkthrough.</p>
284 </section>
285
286 <nav class="fdmth-list" aria-label="Microsoft Teams how-to guides">
287
288 <a class="fdmth-row" href="https://learn.firstdigital.com/bin/view/Teams/Set%20up%20International%20dialing%20in%20FDConnect%3A/">
289 <span class="fdmth-badge">
290 <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path class="accent" d="M3 12h18M12 3c2.5 2.5 3.8 5.7 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.7-3.8-9s1.3-6.5 3.8-9z"/></svg>
291 </span>
292 <span class="fdmth-row-text">
293 <span class="fdmth-q">How to set up international dialing in FDConnect</span>
294 <span class="fdmth-q-sub">Set up International dialing in FDConnect</span>
295 </span>
296 <span class="fdmth-arrow"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
297 </a>
298
299 </nav>
300
301 <div class="fdmth-footer">
302 <span>FirstDigital &middot; Microsoft Teams How To&rsquo;s</span>
303 <span>Need help? Contact your FirstDigital support team at 801-456-1000 or support@firstdigital.com.</span>
304 </div>
305
306 </div>
307 {{/html}}