Article formatting

Customize the look and feel of your articles and content

Articles

Adjust Image Width for All Images
By default, images are displayed as actual size but can never be wider than your article. By making the maximum width a percentage (100%), images automatically resize to fix on any screen size or device. You can adjust the maximum width ...
Display Code
Sometimes you may want to display code for your readers to copy and paste from an article. Here's how: Click on Source in your WYSIWYG editor. Paste the code you want to display into the Source. Wrap the code using the following...
Hide PDF for Individual Article
If an article contains a video or another type of embed like a survey or discussion forum, you might want to remove the option to download the article to PDF.  To hide the PDF icon on an individual article, c...
Adjust Line Spacing
By default, the line spacing, or line-height CSS attribute, is set to 31 pixels for maximum web readability. You can adjust the line-height of your text by pasting the following code into Settings > Style > Custom CSS : .hg-articl...
Format Numbered Lists
If you are using numbered lists to outline steps, you can adjust the formatting of your lists using some simple CSS. This sample code which will add spacing and a border between your steps. Customize it to get the list format you've always wante...
Create a Table of Contents for an Article
If you will be creating a table of contents inside your headers with links to different sections of content, you can save a bunch of time on setup by using a snippet. Example Using this snippet will create a clickable table of contents in list f...
Link to Article
The Link to Article feature is helpful when referencing another article within KnowledgeOwl . It dynamically creates the links based on the unique ID of the articles, so you never have to worry about changed permalinks breaking links in your knowle...
Using H5 and H6 as Standard Formatting
Since some people don't typically use H5 and H6 headings we have an alternate solution that can come in handy. This solution allows you to take advantage of the H5 and H6 default formatting and create some formatting that you can use over and ov...
Click to zoom / enlarge images
You can add the fancyBox script to your theme to allow readers to click and expand images to their full-size versions in a lightbox.  Click to zoom / enlarge this image Is it free?  For you, probably. KnowledgeOwl has purchased...
Limit the max characters allowed in comments
No one is writing War and Peace in this comment field! Are your readers writing their own version of War and Peace in your comments? Paste the below tidbit of JavaScript in Settings > Style > Custom HTML > Article to set a maximu...
Customize nested numbered list styles
Nested Numbered List You can use custom CSS styles to globally set how your nested numbered list items display. The following code snippet will set the first level to decimal (1, 2, 3), the second to lower alphabet (a, b, c), and the ...
Fix Email Article for Articles with Apostrophes
Customers sometimes run into an issue where the email option does not work on certain articles. The most common culprit is an apostrophe in the article title, which breaks our legacy code for the email option.  We've fixed the issue for...
Fix Anchor Links Hidden by Top Navigation
A common issue with anchor links on webpages is that they jump to the top of the page and are often hidden by top navigation. There are multiple ways to solve this problem depending on how you create and format your anchor tags. Use CSS Only Soluti...