<style>p { margin: 0; }span.fr-emoticon.fr-emoticon-img { background-repeat: no-repeat !important; font-size: inherit; height: 1em; width: 1em; min-height: 20px; min-width: 20px; display: inline-block; margin: -0.1em 0.1em 0.1em; line-height: 1; vertical-align: middle; } span.fr-emoticon { font-weight: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; display: inline; line-height: 0; } blockquote { border-left: solid 2px #5e35b1; color: #5e35b1; margin-left:0; padding-left:5px;}blockquote blockquote{ border-color: #00bcd4; color: #00bcd4;}blockquote blockquote blockquote{ border-color: #43a047; color: #43a047;} table.grid{ border-collapse: collapse;} table.grid td, table.grid th { border: 1px solid #ddd;} .fr-fic.fr-dib{ display: block; margin: 5px auto;}.fr-fic.fr-dib.fr-fir{ text-align: right; margin: 5px 0 5px auto;}.fr-fic.fr-dib.fr-fil{ text-align: left; margin: 5px auto 5px 0;}.fr-fic.fr-dii{ float: none; margin: 5px auto;}.fr-fic.fr-dii.fr-fil{ float: left; margin: 5px auto;}.fr-fic.fr-dii.fr-fir{ float: right; margin: 5px auto;}img.fr-dib.fr-fir { margin-right: 0; text-align: right;}img.fr-dib.fr-fil { margin-left: 0; text-align: left;}img.fr-dib { margin: 5px auto; display: block; float: none;}img.fr-bordered { box-sizing: content-box; border: solid 5px #CCC;}img.fr-shadow { box-shadow: 10px 10px 5px 0px #cccccc;}img.fr-rounded { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;}</style><p><strong>In this guide we will cover:</strong></p><p id="isPasted"><strong>- What are Style Profiles?</strong></p><p><strong>- How to Create Style Profiles</strong></p><p><strong>- Assigning Style Profiles to Articles</strong></p><p><strong>- Creating Style profiles- Worked examples</strong></p><p><br></p><p><br></p><p><strong>Admin Guides:</strong></p><ul><li style="font-weight: bold;"><strong><a data-fr-linked="true" href="https://usehalo.com/haloitsm/guides/1844" id="isPasted" target="_blank" rel="noopener noreferrer">Knowledge Base</a></strong></li></ul><p><strong><br></strong></p><p><strong>Related Guides:</strong></p><ul><li style="font-weight: bold;"><a data-fr-linked="true" href="https://usehalo.com/haloitsm/guides/2431" id="isPasted" target="_blank" rel="noopener noreferrer"><strong>Knowledge Base</strong></a></li></ul><p><br></p><p><strong><span style="font-size: 14pt;">What are Style Profiles?</span></strong></p><p>Style profiles allow you to create a set of style or formatting, and have this apply to all, or selected articles in your knowledge base. Creating an easy way to have consistent document formatting across your Halo knowledge base. This is especially useful if you are importing your knowledge base articles from an external application (such as confluence) or are copy and pasting from an alternative tool (such as Microsoft word), as it saves agents having to manually format each article upon creation. </p><p><br></p><p>Style profiles are configured using CSS, which gives a huge range of formatting options. The CSS <span style="color: rgb(0, 0, 0);">contained within the style profile will be applied to the knowledge base article, taking precedence over any existing CSS within the article's HTML.</span> To use this functionality some base CSS knowledge will be required. </p><p><br></p><p><strong><span style="font-size: 14pt;">How to Create Style Profiles</span></strong></p><p>To create a style profile, this functionality will first need to enabled under configuration > knowledge base > 'Enable Style Profiles'. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM1ZjU1MzdiLWU0ZjQtNDJiZC05Y2M4LTUwMzVmZDFhNWE1OCJ9.1BxgfODBNdp5xEri7gcy_XwTFlCd9F4kMpFaetAd61o" class="fr-fic fr-fil fr-dib" width="786" style="width: 788px; height: 671.591px;" height="672"></p><p><strong><span style="font-size: 10pt;">Fig 1. Enable style profiles.</span></strong></p><p><br></p><p>Once enabled you will be able to create style profiles using the 'Style Profiles' button. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjQwMTFjNzgwLWE3ZmQtNGM5Mi04ZjBiLTM3MjYwNzhjNDgzMyJ9.-l8p7FDJnzST-b6rfRXMPQuWzVRmWeyWpq6FOh_AGWs" class="fr-fic fr-fil fr-dib" width="1418" style="width: 1420px; height: 608.069px;" height="608"></p><p><strong><span style="font-size: 10pt;">Fig 2. New style profile configuration.</span></strong></p><p><br></p><p><strong>Type</strong>- Here you can choose what entity this style profile will be used on, that is if you would like the profile to be applied to all the articles in an FAQ list, or on specified articles. More on this in the section 'Assigning Style profiles to articles'</p><p><strong>Style Rules</strong> - In this table you can add the CSS that will be applied to elements in the article. </p><p><strong>Linked Entities</strong> - Here, you can choose which articles will use this style profile. More on this in the section 'Assigning Style profiles to articles' </p><p><br></p><p><strong><span style="font-size: 12pt;">Configuring Style Rules</span></strong></p><p>Style rules will determine what formatting is applied to articles that have this style profile. When adding a style rule you will need to specify a selector and enter the CSS styling.</p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImJkOTM5ZTE1LTE0N2YtNDg2YS04NGQ3LTgyOTA2NzBlZmY4OSJ9.vX_HFD82MM7kHwgkKIScRheIx8SM61ed9N37XGC12Xw" class="fr-fic fr-fil fr-dib" width="531" style="width: 533px; height: 395.755px;" height="396"></p><p><strong><span style="font-size: 10pt;">Fig 3. Style rule</span></strong></p><p><br></p><p>The selector will determine which parts of your article this styling will apply to. Here you can enter the name of a CSS class, element, type, ID or attribute, the CSS set at against this style rule will then apply to all elements in your document that use this selector. </p><p><br></p><p>For example, if I would like all major headings in my article to have font size 24 I can configure a style rule as shown in figure 4. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjIzZGM3MzhmLWM0NTMtNGZlNi05ODJmLTY3ODE4ZjRjZmYzNiJ9.53xui6CdcGCZPpzfUYqnp4yNwxXZUGnvnmH7fDt_K5o" class="fr-fic fr-fil fr-dib" width="535" style="width: 537px; height: 396.132px;" height="396"></p><p><strong><span style="font-size: 10pt;">Fig 4. Style rule to have all h1 headings be font size 24. </span></strong></p><p><br></p><p>Keep in mind, this is dependent on all the headings of my article having the h1 element assigned to the heading within the existing HTML of the article. </p><p><br></p><p>If certain article content is contained within a class, e.g. important text/notes, you can format this text based on the class. The class value will be the selector name and the 'Style' will contain the CSS you would like to be applied to this attribute. The figure 5 example shows how to configure a style rule to have text within the .important-text class selector formatted to be red and in bold. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjEyMWU0ODhlLTJmN2YtNDAzNC04MGUxLTY3YjE1Y2M2YmI0MCJ9.qldNTnOSbOCwnedUhvLTitRouNeqxzjCSYp6CTRrw7I" class="fr-fic fr-fil fr-dib" width="567" height="421"></p><p><strong><span style="font-size: 10pt;">Fig 5. Style rule to format text within the .important-text attribute. </span></strong></p><p><br></p><p>In another example, I would like all tables in my articles to have the same formatting. When adding a table to an article in Halo you can see the class that is applied to the table by viewing the article in code view (this will show the html behind the article). </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM4MzIxMzI2LTdiOGMtNGMyYS1iZjFlLWVjMjY4YzYyMDA2YiJ9.lPZWpcd1GYcthPLuRydKXHahpx8R-OmIp-HYNEP4AyI" class="fr-fic fr-fil fr-dib" width="656" style="width: 658px; height: 468.541px;" height="469"></p><p><strong><span style="font-size: 10pt;">Fig 6. Class applied to table.</span></strong></p><p><br></p><p>You can then configure a style rule using this class, the figure 7 example will format all tables using the 'grid' class.</p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjNhN2JhYTYwLTc4NWYtNDgxNS04YjE4LWQzYWQ2NDNkZTFmNSJ9.JTs123AQzQviR907-GYeI5tiIBQaSS7XcV1hDlIz2ss" class="fr-fic fr-fil fr-dib" width="538" style="width: 540px; height: 401.684px;" height="402"></p><p><strong><span style="font-size: 10pt;">Fig 7. Style rule to format contents within 'grid' attribute. </span></strong></p><p><br></p><p>Multiple style rules can be configured against a style profile, a rule for each attribute/element you would like to format will need to be added. </p><p><br></p><p><strong><span style="font-size: 12pt;">Rule Precedence</span></strong></p><p>When creating style rules each rule will be applied based on the selector's granularity. That is, more specific selectors will take priority over more general selectors. </p><p><br></p><p>In the figure 8 example, any text contained within a <p> tag will be styled to be black, unless it is assigned the '.important-text' class, in these cases the text will be bold and in red. This is because a CSS class selector is more granular (specific) than a tag selector. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjA5N2U2MWJhLTk2ZTgtNDAzZS1iZWUwLWMwYmMyOGE3ZDNmZSJ9.yIcvEOQoriejw_QO1yEK2syB_8ktKRLLa9Q1246gz48" class="fr-fic fr-fil fr-dib" width="1383" style="width: 1385px; height: 644.186px;" height="644"></p><p><strong><span style="font-size: 10pt;">Fig 8. Style profile with overriding selectors </span></strong></p><p><br></p><p>This will be the case regardless of the precedence of the style rule. The precedence of the style rule only applies when multiple style profiles are assigned to the same article. This is covered in the section 'Assigning style profiles to articles'. </p><p><br></p><p>Once you have configured your style profile, you can assign this to articles or FAQ lists to determine which articles the profile applies to.</p><p><br></p><p><strong><span style="font-size: 14pt;">Assigning Style Profiles to Articles</span></strong></p><p>When creating a style profile the 'type' assigned to the profile will determine which entities the style profile applies to, articles, FAQ lists or all. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImVmMjMxMjViLWI2YTYtNGQzMy1hNzYxLWZiZmNhMjU1MDQwMSJ9.kLN0-uApyKBnhrUHPOa3EanOJ6opMXjHPs9xSK08hDA" class="fr-fic fr-fil fr-dib" width="786" height="135"></p><p><strong><span style="font-size: 10pt;">Fig 9. Style profile type </span></strong></p><p><br></p><p><strong>All</strong>- When selected the style profile will be able to be assigned to specific articles and/or FAQ lists.</p><p><strong>FAQ lists</strong> - When selected this style profile will be able to be assigned to FAQ lists only.</p><p><strong>Articles</strong>- When selected this style profile will be able to be assigned to specific articles only. </p><p><br></p><p><strong><span style="font-size: 12pt;">Assigning a style profile to an article</span></strong></p><p>If you would like a style profile to only apply to selected articles, set the type of the style profile to be 'Articles', then in the 'Linked Entities' table against the style profile, choose which articles you would like the style profile to apply to. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImRkNTc1YzhlLTI0MGQtNDJkMy1iMzk4LTg2ZDA3ZWJlZjI0NiJ9.Lxna7ASX2_byxNJLjFIPHA8A3cLmlgWvbj5hYQ98NqI" class="fr-fic fr-fil fr-dib" width="1550" style="width: 1552px; height: 216.445px;" height="216"></p><p><strong><span style="font-size: 10pt;">Fig 10. Articles the style profile applies to</span></strong></p><p><br></p><p>You can also set the style profile against the article itself. When editing the article you will see a 'Style Profiles' section, here you can select which style profiles will apply to the article. Only profiles with type 'all' or 'article' will show here. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjIwY2Y3NTBkLTI1OGItNDc0Ny1hMWE1LTcyOTYwYTg0MmI5YSJ9.niFvEjJ89fTPipbqXxwrfegM6SdF2_EOc6xQmpy1ye8" class="fr-fic fr-fil fr-dib" width="1535" style="width: 1537px; height: 433.04px;" height="433"></p><p><strong><span style="font-size: 10pt;">Fig 11. Set style profile against article</span></strong></p><p><br></p><p><strong><em>Note: If you assign an article to a style profile against the style profile, this style profile will appear in the 'style profile' table against the article and vice versa. </em></strong></p><p><br></p><p><strong><span style="font-size: 12pt;">Assigning a Style Profile to an FAQ list</span></strong></p><p>When assigning a style profile to an FAQ list, this profile will apply to all articles within this FAQ list. Providing an easy way to apply the style profile to many articles. </p><p><br></p><p>Set the style profile type to be 'FAQ lists'. Then you can choose which FAQ lists this style profile applies to in the 'Linked Entities' table. </p><p><br></p><p>You can also set the style profile against the FAQ list itself by adding the style profile to the 'style profile' table against the configuration for the FAQ list. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImY2MWY1OWJjLWM3MzktNDUwZS04YTA2LTZjMWEyNTg1YmE0OCJ9.mHhsfBuROX4H6jfK_3btIwsSy8nMoHh6CxfatWZQo74" class="fr-fic fr-fil fr-dib" width="1373" style="width: 1375px; height: 771.959px;" height="772"></p><p><strong><span style="font-size: 10pt;">Fig 12. Assign style profile to FAQ list</span></strong></p><p><br></p><p><strong><em>Note: Style profiles assigned to FAQ list will apply to any articles within this FAQ list. Style profiles cannot be used to format how the lists themselves appear. </em></strong></p><p><br></p><p><strong><span style="font-size: 12pt;">Assigning Multiple Style profiles to an Article - Precedence </span></strong></p><p>If multiple style profiles are assigned to a single article styling from both (all) profiles will apply to the article, unless the style profiles are contradictory. </p><p><br></p><p><strong>Contradictory style profiles</strong> - Two style profiles that style the same element in the document in a different way. For example, one profile is set to style <p> elements as font size 12, whereas another is set to style <p> elements as font size 18. </p><p><br></p><p>In cases where two contradictory style profiles are assigned to the same article, the styling that is applied will be determined by the precedence of the style rule. The rule that has the lowest precedence between the two profiles will be applied first, if there is a contradictory rule with a higher no. precedence this will not be applied. In the figure 13. example in cases where style profile 'Red styling' and 'Blue styling' are applied to the same article, the blue styling will be used as the rule within the style profile has a lower precedence than the rule in the 'Red styling' profile.</p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImIwYTAxOGUwLTEyYzktNDdhMi1iMWNiLWQ0Y2FlZjA2MzcxMSJ9.rRTAqcNA_V_0W9uiyvitJ8zsqzupqtSSkvjL44WJK5A" class="fr-fic fr-fil fr-dib" width="1185" style="width: 1187px; height: 588.372px;" height="588"></p><p><strong><span style="font-size: 10pt;">Fig 13a. Style profile to make <p> elements blue</span></strong></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjE2YTdiMzhiLWRiZGQtNDYwNy1iNmQ4LWY0ODUyNDE5NGFkMyJ9.EYejlZE9EnHWRxKHDR_4XGpR0hKaUjBbQ-hNK4-cdeY" class="fr-fic fr-fil fr-dib" width="1176" height="635"></p><p id="isPasted"><strong><span style="font-size: 10pt;">Fig 13b. Style profile to make <p> elements red</span></strong></p><p><br></p><p>If the style profiles are complementary, styling from both profiles will apply to the article. </p><p><br></p><p><strong>Complementary style profiles</strong> - Two style profiles that style different element of the article. There is no overlap between the elements that each profile is set to style. </p><p><br></p><p>Style profiles do not need to be complementary as a rule, however, if you are using contradictory profiles you will need to keep the precedence of each of the style rules within the profile in mind, as these will determine what styling is applied. </p><p><br></p><p><strong><span style="font-size: 14pt;">Creating Style profiles- Worked examples</span></strong></p><p>In this section we will walk through how to configure style profiles based on a few examples. The way you configure your profile will depend on how you create articles in your instance, therefore we will walk through a few key examples. </p><p><br></p><p><strong><span style="font-size: 12pt;">Creating style profiles for articles created via an integration (Confluence) </span></strong></p><p>If you are importing articles from an integration into your Halo instance you will need to be able to view the HTML behind the article to determine which attributes to assign styling to. </p><p><br></p><p>I have an articles in my instance that have been imported from the Confluence integration, and I would like to format these articles so that the numerated lists are indented and in bold. Before I can configure my style profile to do this I will need to view the HTML behind the article, to see what attributes are assigned to the elements I would like to style. As I cannot edit an article that has been imported from Confluence, I will need to view the HTML for the article through the console. </p><p><br></p><p>Open up an article imported from Confluence in your Halo knowledge base, hit CNTRL + shift + C to open up the developer console. Once the console is open hover over the element of the article that you want to apply styling to, once this element is highlighted select it, now the console will show the HTML behind this element. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImRjYTBhZjcyLTI3NDYtNDgzZC05Mzc2LTcwOGU3MWJkOWM3MiJ9.HD2PMfIaehYRd6nLfI6dJX89_4AIxqfIWUr12_Eu_NA" class="fr-fic fr-fil fr-dib" width="1558" style="width: 1560px; height: 631.508px;" height="631"></p><p><strong><span style="font-size: 10pt;">Fig 14. Console showing html behind article</span></strong></p><p><br></p><p>In this example, I have selected an item in the numerated list, as this is the element I would like to apply styling to. The console has now highlighted the section of html containing this element, in the figure 14 screenshot the element is collapsed, it can be expanded using the arrow in the console. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImQ2YmEwYWNjLWUzNmYtNDljYS04MjAzLThiYTQ4ZDg2NTU5OSJ9.sc3Tt5GkTL3aASgpR2FdYRgslHKG2cAGARgO68oFFtw" class="fr-fic fr-fil fr-dib" width="1578" style="width: 1580px; height: 576.772px;" height="577"></p><p><strong><span style="font-size: 10pt;">Fig 15. Expanded element in console</span></strong></p><p><br></p><p>Now we have the html up we can see how this element is stored. We can see all the items in my list are stored within the <ol> html tag, as I would like to apply styling to all the text in this list, this is the tag I will need to apply CSS styling to in my style profile. </p><p><br></p><p><strong><em>Note: Use the console to identify what tags an element is stored in or see attributes assigned to an element. Hovering over the element in the article will highlight the corresponding html in the console. Use this method to identify which tags and attributes to apply styling to to achieve your desired styling. </em></strong></p><p><br></p><p>Create a new style profile, and add a step rule, figure 16 shows the CSS that needs to be added to the step rule to achieve a bold and indented ordered list. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImY5YTBmNDYzLTllZjktNGZlOC1iZTZiLTU0ZDlhMjVmZjNkMiJ9.p70jBIj6QiDKcfdr6QQANWTmyo3nMk78YoY8BQ9ZU8Q" class="fr-fic fr-fil fr-dib" width="569" height="421"></p><p><strong><span style="font-size: 10pt;">Fig 16. Style rule to make elements within the <ol> tag bold and indented</span></strong></p><p><br></p><p>Once saved ensure you assign the style profile to the article. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjNmOGE3ZGUyLThkNzItNGZmYi04ODM5LTFiNWQ1MzY0MjU4YSJ9.pNi5DFQZPQ2nAAyB1PGTdA7efipy0fMtoh_lehr6YVU" class="fr-fic fr-fil fr-dib" width="1548" style="width: 1550px; height: 657.2px;" height="657"></p><p><strong><span style="font-size: 10pt;">Fig 17. Style profile to make ordered lists bold and indented</span></strong></p><p><br></p><p>Now when viewing the article we can see this styling has been applied. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImZjMjhkYjE1LWRhMzEtNDE5NC05ODUxLTJkMTI1ZjZiZTM1NyJ9.XCCi1xoCPg1uVD4QnH8GqtEQF4RlQhlsILoFRzTlLd8" class="fr-fic fr-fil fr-dib" width="826" style="width: 828px; height: 641.447px;" height="641"></p><p><strong><span style="font-size: 10pt;">Fig 18. Styling applied to article</span></strong></p><p><br></p><p>Styling could also be applied to other elements of the article, for example if I just wanted to style the numbers in the list, not the list contents. </p><p><br></p><p>Numbers in ordered lists will be stored within the '::marker' pseudo element, but you can check this using the console. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImQxMzllOTQwLTgwY2UtNGI2YS1iZDA1LWY5YTY4MzRjNzA1NSJ9.-D7OsbWZQ6V0PZhUp-WmdjqbetGa0tmHULQA5INnV8U" class="fr-fic fr-fil fr-dib" width="1685" style="width: 1687px; height: 591.675px;" height="592"></p><p><strong><span style="font-size: 10pt;">Fig 19. Identifying element using console</span></strong></p><p><br></p><p>Therefore, the style profile will need to contain a rule in which ::marker is used as the selector. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjAwYmI5YmMwLWVmZGEtNGFiNC04M2RjLWU1M2IwNTU3MDg4OCJ9.-vFMVKYdIyNWEGWOXKaffi_pMF1lVuYG33-0C1E-hnc" class="fr-fic fr-fil fr-dib" width="529" style="width: 531px; height: 393.333px;" height="393"></p><p><strong><span style="font-size: 10pt;">Fig 20. Applying styling to the ::marker selector</span></strong></p><p><br></p><p>Now the article will be styled as shown in figure 21. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjBhNzA1ZmJjLTdhZTItNDY5Ni04OGFiLTU1Y2Q0ODJmMDA1MiJ9.-GysYNbA-x9UXJqCQ4RsVHE5WfnYPW1EYQWdvCueB5c" class="fr-fic fr-fil fr-dib" width="801" style="width: 803px; height: 621.506px;" height="621"></p><p><strong><span style="font-size: 10pt;">Fig 21. Styling applied to markers in article </span></strong></p><p><br></p><p><strong><span style="font-size: 12pt;">Creating style profiles for articles created in the knowledge base manually</span></strong></p><p>If you are creating knowledge base articles by typing the information directly info a KB article in Halo, or by copy and pasting text into the article creator you can view the HTML behind the article using the 'code viewer'. </p><p><br></p><p>In this example I would like to change the font of all text in the article. Figure 22 shows how the article looks before a style profile is applied.</p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjI1ODk1YWIwLTQ3NTYtNGQwNi1iZTk4LWYzOGIxYTA4YTljOCJ9.u7BbiX3eZvcfoY0RY6Ibe9loH3mM5l787yLpjlR8hlc" class="fr-fic fr-fil fr-dib" width="1385" style="width: 1387px; height: 733.661px;" height="734"></p><p><strong><span style="font-size: 10pt;">Fig 22. Article before styling is applied</span></strong></p><p><br></p><p>To do this I am going to use 'p' as my selector in my style profile rule as all text should be contained within the paragraph tag. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImIxZjc3MjAxLWMwOTktNGE3MC1iMmI5LThmMTllYjZhYzFhYyJ9.lWb76gtZP4nID9Kg2DHm4XfcArFe_R7Y2CigH0Mi0MA" class="fr-fic fr-fil fr-dib" width="1395" style="width: 1397px; height: 592.953px;" height="593"></p><p><strong><span style="font-size: 10pt;">Fig 23. Style profile to change line spacing and font</span></strong></p><p><br></p><p>However, when this is applied to my article, the styling does not seem to have applied to all elements in the article. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjIzMzc2N2IzLTllZDItNGVhYy04NjFiLTkwOTMwNjRjNWZlOSJ9.T0SFL8iY6smobTWseiQDMkSc91VBbgKa2i4Xwbv8n8A" class="fr-fic fr-fil fr-dib" width="1393" style="width: 1395px; height: 588.884px;" height="589"></p><p><strong><span style="font-size: 10pt;">Fig 24. Style profile applied to article incomplete</span></strong></p><p><br></p><p>This is likely due to the text 'Do your messages contain large attachments?' not being contained within a <p> tag. To investigate this edit the article and view it in code view. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImY4ZGViOTVlLTllZTctNDJjYy04MzI0LWE4Y2Y2YTgyYzc5MyJ9.1RvrpBOSWmVCZPHmFFy3eGBNPGXGOo0SGWY1M2ZRm5U" class="fr-fic fr-fil fr-dib" width="1466" style="width: 1468px; height: 631.004px;" height="631"></p><p><strong><span style="font-size: 10pt;">Fig 25. Article in code view</span></strong></p><p><br></p><p>Using code view you can see the tags around the element, in figure 25 we can see the text is contained within the <div> tags. For styling to apply the html tags in the article will need to be changed. </p><p><br></p><p>In this article text is all contained within <p> tags, however, this will vary depending on how you create your articles, and the content of the article. </p><p><br></p><p>As long as your articles are created in the same way the html behind the articles should be consistent, allowing you to configure a styling profile that will be compatible with all your articles. </p>
