Follow

This article will help with styling your knowledge base articles using HTML and HTML classes. Choose a section below for more information:

 

 

This section will show how to create accordions, or collapsible groups with HTML.
You can find the code and examples of this here.

 

The syntax is as follows:

 

<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#example1" data-toggle="collapse">TITLE</a></h4>
</div>
<div id="example1" class="panel-collapse collapse">
CONTENT

</div>
</div>
</div>

 

The items that are bolded are what you need to change, especially if you have multiple collapsible sections in an article.

 

The items found in the a href="#collapse1" and div id="collapse1" is what tells the code which section to collapse. The <a> tag says I want to collapse something called example1, and then you can specify a section (or div!) to be called example1.

Standard Collapsible Groups

Content goes here.

 

More content goes here. Added space to the top and bottom

 

 

 

 

Here's how to create alert boxes around text within your knowledge base articles using HTML and CSS from Bootstrap.

 

Please use sparingly!

 

The syntax is as follows:

 

<div class="alert alert-info">CONTENT</div>

I'm blue!

 

Here's how to give a hover zoom effect for large images.

 

The syntax is as follows:

 

<div class="image-zoom-container">
<img class="zoom-target" src="your image url here" alt="" />
<div class="zoom-overlay"></div>
<p>Mouse over the image to zoom in</p>
</div>

 

If you added an image in the WYSIWYG editor then you'll need to make sure that your image tag is wrapped with all of the code above (including the zoom-target class on the image).

 

This works best with large horizontal images, but is unnecessary for images that are smaller than the width of the article.

 

Example

 

Mouse over the image to zoom in

 

 

Mouse over the image to zoom in

 

 

 

 

 

 

 

 

 

 

This section will show how to create interactive expandable articles that force a user to choose a path before viewing the article.

 

The syntax is as follows:

 

<!-- Tag for no JS --!>
<noscript class="alert alert-danger">We want to help you, but we need your help first! Please enable JavaScript in your browser, then reload the page.</noscript>

<section class="expandable-options-group">

<!-- Choice summary, and start over button --!>
<div class="option-summary clearfix"><p class="summary hide"></p><a class="start-over hide" data-toggle="#toplevel">Start over</a></div>

<!-- First button choice (visible) --!>
<div class="option-set" aria-expanded="true" id="toplevel">
<h3>Choose your operating system</h3>
<button class="expandable-option" data-toggle="#windows">Windows</button>
<button class="expandable-option" data-toggle="#mac (not included here, see windows)">Mac</button>
</div>

<!-- Second button choice (hidden) --!>
<div class="option-set hide gone" aria-expanded="false" id="windows">
<h3>What version of Windows?</h3>
<button class="expandable-option" data-toggle="#windows7">Windows 7</button>
<button class="expandable-option" data-toggle="#windows8">Windows 8</button>
<button class="expandable-option" data-toggle="#windows10">Windows 10</button>
</div>

</section>

<!-- Content options, dependent on button choices --!>
<section class="expandable-content hide" aria-expanded="false" id="windows7">
CONTENT #1
</section>

<section class="expandable-content hide" aria-expanded="false" id="windows8">
CONTENT #2
</section>

<section class="expandable-content hide" aria-expanded="false" id="windows10">
CONTENT #3
</section>

 

The items that are bolded are what you need to change. Values are also color-coded to help explain what corresponds to what (data-toggle="" always requires a # sign, whereas id="" never does).

Anything you want to hide off the bat needs a hide class. Hidden content needs class="expandable-content hide", whereas hidden buttons groups (option-sets) need class="option-set hide gone".

Example

We want to help you, but we need your help first! Please enable JavaScript in your browser, then reload the page.

Choose your operating system

Windows Mac

What version of Windows?

Windows 7 Windows 8 Windows 10

What version of Mac?

10.10 (Yosemite) 10.11 (El Capitan) 10.12 (Sierra)

Windows 7 content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Windows 8 content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Windows 10 content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Yosemite content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

El Capitan content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sierra content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.