Skip to Content

Wiki source code of MS Teams How To's:

Last modified by Aaron Blackburn on 2026/09/25 21:00
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
Aaron Blackburn 2.1 18 {{html clean="false"}}
19 ...everything in this file...
20 {{/html}}
Chris Workman 1.1 21
22 4. Save & View.
23
24 ------------------------------------------------------------
25 LINKS
26 ------------------------------------------------------------
Aaron Blackburn 2.1 27 Topics linking to their real destination pages:
Chris Workman 1.1 28 1. How to set up international dialing in FDConnect
29 https://learn.firstdigital.com/bin/view/Teams/Set%20up%20International%20dialing%20in%20FDConnect%3A/
Aaron Blackburn 2.1 30 2. Configure Microsoft Direct Routing
31 https://learn.firstdigital.com/bin/view/Teams/MS%20Teams%20How%20To's%3A/Setup%20MS%20Direct%20Routing/
Chris Workman 1.1 32
33 ------------------------------------------------------------
34 NOTES
35 - This file is a FRAGMENT: no DOCTYPE declaration and no
36 html / head / body elements. Everything is scoped inside
37 .fdmth-hub so it cannot leak into the wiki theme.
38 - Class names use the "fdmth-" prefix, so this page cannot clash
Aaron Blackburn 2.1 39 with other hub components.
Chris Workman 1.1 40 ============================================================
41 -->
42 <style>
43 @import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;600;800&display=swap');
44
Aaron Blackburn 2.1 45 /* Safety net: if the wiki ever renders this block twice, show only the first copy. */
Chris Workman 1.1 46 .fdmth-hub ~ .fdmth-hub { display: none !important; }
47
48 /* ---- FirstDigital brand tokens (Brand Guide 2025, p.11) ---- */
49 .fdmth-hub {
50 --fd-navy: #003366;
51 --fd-blue: #307ab2;
52 --fd-blue-bright: #38b2e3;
53 --fd-red: #cf333d;
54 --fd-body: #2e404d;
55 --fd-secondary: #8f9499;
56 --fd-bg-mid: #dedede;
57 --fd-bg-light: #f0f0f0;
58 --fd-ice: #e3f1f8;
59 --fd-white: #ffffff;
60 }
61
62 .fdmth-hub, .fdmth-hub * { box-sizing: border-box; }
63
64 .fdmth-hub {
65 font-family: 'Host Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
66 font-weight: 300;
67 color: var(--fd-body);
68 background: var(--fd-white);
69 max-width: 1000px;
70 margin: 0 auto;
71 padding: 0 20px 30px;
72 -webkit-font-smoothing: antialiased;
73 }
74
75 /* ---- Masthead ---- */
76 .fdmth-masthead {
77 display: flex;
78 align-items: center;
79 justify-content: space-between;
80 gap: 20px;
81 flex-wrap: wrap;
82 padding: 22px 0 18px;
83 border-bottom: 1px solid var(--fd-bg-mid);
84 }
85
86 .fdmth-masthead img { height: 46px; width: auto; display: block; }
87
88 .fdmth-masthead-label {
89 font-size: 12px;
90 font-weight: 600;
91 letter-spacing: 0.16em;
92 text-transform: uppercase;
93 color: var(--fd-secondary);
94 white-space: nowrap;
95 }
96
97 /* ---- Hero ---- */
98 .fdmth-hero {
99 margin-top: 22px;
100 border-radius: 6px;
101 padding: 34px 34px 32px;
102 background: linear-gradient(100deg,
103 var(--fd-navy) 0%,
104 var(--fd-navy) 56%,
105 var(--fd-blue) 100%);
106 }
107
108 .fdmth-rule {
109 width: 62px; height: 4px;
110 background: var(--fd-red);
111 border: 0;
112 margin: 0 0 16px;
113 }
114
115 .fdmth-eyebrow {
116 font-size: 16px;
117 font-weight: 600;
118 letter-spacing: 0.18em;
119 text-transform: uppercase;
120 color: var(--fd-blue-bright);
121 margin-bottom: 9px;
122 }
123
124 .fdmth-hero h1 {
125 font-size: clamp(26px, 3.6vw, 36px);
126 font-weight: 800;
127 line-height: 1.14;
128 letter-spacing: -0.01em;
129 color: var(--fd-white);
130 margin: 0 0 12px;
131 }
132
133 .fdmth-hero p {
134 font-size: 15.5px;
135 font-weight: 300;
136 line-height: 1.62;
137 color: #dbe6ef;
138 margin: 0;
139 max-width: 600px;
140 }
141
142 /* ---- How-to list ---- */
143 .fdmth-list {
144 display: flex;
145 flex-direction: column;
146 gap: 14px;
147 margin-top: 26px;
148 }
149
150 .fdmth-row {
151 display: flex;
152 align-items: center;
153 gap: 18px;
154 background: var(--fd-white);
155 border: 1px solid var(--fd-bg-mid);
156 border-radius: 6px;
157 padding: 18px 20px;
158 text-decoration: none !important;
159 color: inherit;
160 transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
161 }
162
163 .fdmth-row:hover {
164 transform: translateY(-2px);
165 border-color: var(--fd-blue-bright);
166 box-shadow: 0 12px 26px rgba(0,51,102,0.14);
167 }
168
169 .fdmth-row:focus-visible {
170 outline: 3px solid var(--fd-blue-bright);
171 outline-offset: 2px;
172 }
173
174 .fdmth-badge {
175 width: 46px; height: 46px;
176 border-radius: 8px;
177 background: var(--fd-ice);
178 display: flex;
179 align-items: center;
180 justify-content: center;
181 flex: 0 0 auto;
182 }
183
184 .fdmth-badge svg {
185 width: 22px; height: 22px;
186 fill: none;
187 stroke: var(--fd-navy);
188 stroke-width: 1.7;
189 stroke-linecap: round;
190 stroke-linejoin: round;
191 }
192
193 .fdmth-badge svg .accent { stroke: var(--fd-blue-bright); }
194
195 .fdmth-row-text { flex: 1 1 auto; min-width: 0; }
196
197 .fdmth-q {
198 display: block;
199 font-size: 16.5px;
200 font-weight: 700;
201 line-height: 1.35;
202 color: var(--fd-navy);
203 }
204
205 .fdmth-q-sub {
206 display: block;
207 font-size: 13px;
208 font-weight: 300;
209 line-height: 1.5;
210 color: var(--fd-secondary);
211 margin-top: 3px;
212 }
213
214 .fdmth-arrow {
215 flex: 0 0 auto;
216 display: flex;
217 align-items: center;
218 color: var(--fd-red);
219 }
220
221 .fdmth-arrow svg {
222 width: 18px; height: 18px;
223 fill: none;
224 stroke: var(--fd-red);
225 stroke-width: 2;
226 stroke-linecap: round;
227 stroke-linejoin: round;
228 transition: transform .2s ease;
229 }
230
231 .fdmth-row:hover .fdmth-arrow svg { transform: translateX(4px); }
232
233 /* ---- Footer ---- */
234 .fdmth-footer {
235 margin-top: 30px;
236 padding-top: 18px;
237 border-top: 1px solid var(--fd-bg-mid);
238 display: flex;
239 justify-content: space-between;
240 gap: 16px;
241 flex-wrap: wrap;
242 font-size: 12.5px;
243 color: var(--fd-secondary);
244 }
245
246 @media (max-width: 720px) {
247 .fdmth-hub { padding: 0 12px 24px; }
248 .fdmth-masthead img { height: 38px; }
249 .fdmth-hero { padding: 26px 22px 24px; }
250 .fdmth-row { padding: 16px; gap: 14px; }
251 .fdmth-footer { justify-content: flex-start; }
252 }
253
254 @media (prefers-reduced-motion: reduce) {
255 .fdmth-row, .fdmth-arrow svg { transition: none; }
256 }
257 </style>
258
259 <div class="fdmth-hub">
260
261 <div class="fdmth-masthead">
262 <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/FirstDigital-Logo.png?rev=1.3" alt="FirstDigital">
263 <span class="fdmth-masthead-label">Fiber &middot; Internet &middot; Cloud &middot; Voice</span>
264 </div>
265
266 <section class="fdmth-hero">
267 <hr class="fdmth-rule">
268 <div class="fdmth-eyebrow">Microsoft Teams</div>
269 <h1>How To&rsquo;s</h1>
270 <p>Step-by-step guides for setting up and managing your Microsoft Teams voice service. Select a topic below for the full walkthrough.</p>
271 </section>
272
273 <nav class="fdmth-list" aria-label="Microsoft Teams how-to guides">
274
Aaron Blackburn 2.1 275 <!-- Configure Direct Routing Guide -->
276 <a class="fdmth-row" href="https://learn.firstdigital.com/bin/view/Teams/MS%20Teams%20How%20To's%3A/Setup%20MS%20Direct%20Routing/">
277 <span class="fdmth-badge">
278 <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path class="accent" d="M8 12h8M8 8h8M8 16h5"/></svg>
279 </span>
280 <span class="fdmth-row-text">
281 <span class="fdmth-q">Configure Microsoft Direct Routing</span>
282 <span class="fdmth-q-sub">Initial setup guide and tenant validation for Microsoft Direct Routing</span>
283 </span>
284 <span class="fdmth-arrow"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
285 </a>
286
287 <!-- International Dialing Guide -->
Chris Workman 1.1 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}}