Knowledge Base - CSS editing guidelines
1. General information:
1.1 This section addresses the editing rules for External Knowledge Base articles and covers strictly the CSS (console) part.
1.2 If unsure about a particular way of editing a word or sentence, please look it up in similar articles and compare the CSS code - alternatively, ask Dimitris or Peter!
1.3 Important: when editing the EKB, it's crucial that all wording and editing is consistent - this is not as strict for the IKB
1.4 Note: you will see this syntax used quite a bit - wysiwyg - it's the short version of What You See Is What You Get
1.5 Note: The code console can be accessed by clicking this button:
2. Code blocks:
2.1 Titles: there are two type of titles that are used in the EKB
- Main Title:
This is a title
Example:
This is a title
- Section Title:
This is a title
Example:
This is a title
Note: All titles in the EKB are bolded. (see how to do that in section Text variations)
2.2 Paragraphs: there is one type of paragraph that is used in the EKB
- Paragraph:
This is a paragraph
2.3 Lists: the EKB mostly uses unorganized lists - organized lists are very rare, but described below:
- Unorganized list:
- List Item 1
-
Example:
- List item 1
- List item 2
- Organized list:
- List Item 1
-
Example:
- List item 1
- List item 2
2.4 Text variations: text comes in bold, italic, green and other types that can be paired within a paragraph
- Bold: This is text Example:
This is text
- Italic: This is text or This is text Example:
This is text
- Green: This is text
This is text
White text (sort of as a 'hidden' screen text, best we can do) has been added to the CSS 16/05/2022
""wysiwyg-color-white""
2.5 Links: there is only one type of links used
- Link: What's New in Lumion 11 Example:
2.6 Breaks: this block is normally used when the paragraph settings produce too little or too much spacing between two different blocks
- Break:
Example of code:
Do not install Lumion in the same folder as an older version
User another folder!
Example of display: first example as if the two sentences are in separate paragraphs and second when using
Do not install Lumion in the same folder as an older version
User another folder!
Do not install Lumion in the same folder as an older version
User another folder!
2.7 Indents: different levels of indentation can be used in the EKB.
- Indent:
This is the paragraph
Example for indents at 3, 5, and 7:
This is the paragraph
This is the paragraph
This is the paragraph
2.8 Tables: on certain occasions, editing tables will be required. This is a bit more complex, but the basic rules are as follows:
- first, determine the outlines of the table:
- Each table row is defined with a
- third, add the information from left to right for each row:
- lastly, close the block that comprise the table:
- Results:
2.9 Quoting:
- Blockquote:
This is a quote
Example:
This is a quote
I added a breakI started a new paragraph and ended the quote
2.10 Heading Referencing:
Some articles are very long and referencing headings is necessary to navigate them. If an article has, for example, 10 sub-sections that do not need to be read in that exact order, oftentimes we can reference the heading to the text so the user can simply click it as a link and the page will scroll down/up automatically to the chosen heading. This requires the creation of a heading ID for which you require 2 elements: the 'link that redirects' and the heading.
Example:
At the top of the article, there is a section named 1. General information. Clicking the link below will scroll up automatically:
1. General information - link example
To achieve this, you need to:
- select the text that you want to redirect you to the heading:
- press Ctrl+K and select the 'Heading' tab:
- select the appropriate heading (that already exists in the article) from the list:
- click Link:
Important: As a Zendesk Admin, the row to which you are redirected will be obscured by the ZD ribbon:
If editing the IKB, simply reference one or two rows above the target heading. If editing the EKB, please let it as it is since users can see the whole content properly.
2.11 Borders for Images:
In most cases, we need a border around images, especially if there is a white background to separate from the text.
However for some things like logos, no border is needed. Use the class=""Image_BorderOff""
for example:
2.12: No borders for Table:
use new class: class=""table-invisible""
example:
3. See Also:
- Internal Knowledge Base: [TR] Article Editing Templates (IKB)
- Internal Knowledge Base: [TR] Article Editing Templates (EKB)
==========================================
ARTICLE SUPPORT (from transfer to HubSpot):
1. Tables:
Tables were not able to be imported via HubSpot Importer. Any Tables in this article are now based on a DIV Conversion. Same is also the case for the transfer of articles with tables in the EKB.
You can add new (basic) Tables in the HubSpot Editor directly.
If the layout does not work, then you can copy/paste or recreate the old Table from ZD. Where possible the Table has also been copy/pasted from the source page (see link below in 3.). Instructions, see this article: Copying an old Zendesk Table over to HubSpot
2. Finding the reference to the old Zendesk Ticket in HubSpot:
Use this Support article: Finding the reference to the old Zendesk Ticket in HubSpot
and for ZD ticket Search in HubSpot following step 1 in above article:
3. Source Zendesk article:
A source and backup copy was made of all articles 9 June 2025.
The saved HTML files and images are in subfolders of: HTML files and images subfolders.
See also Support article in 2 above.
Backup/copy article: [TR] CSS Editing Guide... (360022196860).html
(not available when Zendesk closed)
[TR] CSS Editing Guidelines - EKB and IKB