To insert sample help text to be visualized during hover with the mouse: use the <abbr> tag.

Example:

This code:

Use only <abbr title="Secure Sockets Layer">SSL</abbr> connections!

Will produce this result:

Use only SSL connections! 

 

To insert User input: use the <kbd> tag

This code:

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

will produce this result:

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

 

Colored box messages

This code:

<p class="bg-primary">...primary example</p>
<p class="bg-success">...success example</p>
<p class="bg-info">...info example</p>
<p class="bg-warning">...warning example</p>
<p class="bg-danger">...danger example</p>

will produce this result:

...primary example

...success example

...info example

...warning example

...danger example

 

To insert code in a post: use the <pre></pre> HTML tag.

Example:

.Text in a pre element preservers both      spaces and
line breaks, and is displayed ina fixed-wifth font
.

 

Alert boxes

This code:

<h2>Alerts</h2>
  <div class="alert alert-success">
    <strong>Success!</strong> This alert box could indicate a successful or positive action.
  </div>

  <div class="alert alert-info">
    <strong>Info!</strong> This alert box could indicate a neutral informative change or action.
  </div>

  <div class="alert alert-warning">
    <strong>Warning!</strong> This alert box could indicate a warning that might need attention.
  </div>

  <div class="alert alert-danger">
    <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
  </div>

will produce this result:

Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.

 

Popover

This code:

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

will produce this result:

This code:

<a href="#" data-toggle="popover" title="StarterMail service" data-content="Startermail is the powerful and reliable e-mail service included for free with any hosting plan. <a href='startermail-service.php' title='StarterMail'>Further details</a>">StarterMail service</a>

will produce this result: 

StarterMail service

Found this article interesting?
Subscribe to DomainRegister´s newsletter!

You can unsubscribe at any time by simply clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp s privacy practices here.

  • WHMCS
  • 3 uporabniku/om je bi članek v pomoč
Vam je bil odgovor v pomoč?

Povezani članki

 How to add a favicon in WHMCS

To add a favicon to your WHMCS install: copy your favicon (es. myfavicon.ico) in WHMCS folder...

 How to comment in template (.tpl) files

If you need to insert a comment in a .tpl file, or comment a block of code to disable it, you...

 How to insert a Youtube video in WHMCS knowledgebase article

To insert a YouTube video in an article of the WHMCS knowledge base, you need to insert following...

 How to disable a customer to pay invoices partly with credit balance

in WHMCS if a customer has not enough credit balance for full payment of an invoice, WHMCS allows...

 How to add a cookie bar to WHMCS

In order to add a cookie bar to your own installation of WHMCS: copy somewhere on your WHMCS...