How can I recreate the Themler Default Styles (Typography) page as an article on my Joomla test site?

Hi,

You can try to copy the code from the Themler window using the inspect code tool. Try to use this code:

  <div class="default-styles-container bd-preview-default-styles bootstrap bd-body-1 bd-pagebackground unselectable" style="z-index: 1100; display: block; width: 1202px; background-image: none; background-attachment: scroll; background-color: rgb(255, 255, 255); background-position: 0% 0%; background-repeat: repeat;"><div class="container bd-containereffect-1">

<h3 class="styling-preview group-typography" data-group="group-typography">Typography</h3><h4 class="styling-preview">Text</h4>

<div class="typography-preview-container data-control-id-3573 selection-frame-movable">Lorem ipsum, <a class="linked-link" href="#">link</a>, <a href="#" class="hovered-link">hover link</a> dolor amet, consectetuer adipiscing
    <sup>superscript</sup> elit <sub>subscript</sub>. Nullam dignissim convallis est.
    Quisque aliquam. <cite>cite</cite>. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
    Donec sed tellus eget sapien fringilla nonummy. Mauris a
    ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.
    <abbr title="Avenue">AVE</abbr>

</div>

<h4 class="styling-preview">Headings</h4>

<div class="headings-preview">
    <div class="h1-preview">
        <h1 class="typography-preview-container data-control-id-3573">H1 Heading 1
            <a class="linked-link" href="#">Link</a>
            <a class="hovered-link" href="#">Hover</a>
        </h1>
    </div>
    <div class="h2-preview">
        <h2 class="typography-preview-container data-control-id-3573">H2 Heading 2
            <a class="linked-link" href="#">Link</a>
            <a class="hovered-link" href="#">Hover</a>
        </h2>
    </div>
    <div class="h3-preview">
        <h3 class="typography-preview-container data-control-id-3573">H3 Heading 3
            <a class="linked-link" href="#">Link</a>
            <a class="hovered-link" href="#">Hover</a>
        </h3>
    </div>
    <div class="h4-preview">
        <h4 class="typography-preview-container data-control-id-3573">H4 Heading 4
            <a class="linked-link" href="#">Link</a>
            <a class="hovered-link" href="#">Hover</a>
        </h4>
    </div>
    <div class="h5-preview">
        <h5 class="typography-preview-container data-control-id-3573">H5 Heading 5
            <a class="linked-link" href="#">Link</a>
            <a class="hovered-link" href="#">Hover</a>
        </h5>
    </div>
    <div class="h6-preview">
        <h6 class="typography-preview-container data-control-id-3573">H6 Heading 6
            <a class="linked-link" href="#">Link</a>
            <a class="hovered-link" href="#">Hover</a>
        </h6>
    </div>
</div>

<h4 class="styling-preview">Bullet list</h4>
<div class="bullet-list-preview">
    <ul class="data-control-id-2569 bd-bulletlist">
        <li>Text, <a class="linked-link" href="#">Link</a>, <a href="#" class="hovered-link">Hover</a>
        </li><li>Text, <a class="linked-link" href="#">Link</a>, <a href="#" class="hovered-link">Hover</a>
        </li><li>Text, <a class="linked-link" href="#">Link</a>, <a href="#" class="hovered-link">Hover</a>
        </li><li>Text, <a class="linked-link" href="#">Link</a>, <a href="#" class="hovered-link">Hover</a>
    </li></ul>
</div>

<h4 class="styling-preview">Ordered list</h4>
<div class="ordered-list-preview">
    <ol class="data-control-id-2596 bd-orderedlist">
        <li>Text, <a class="linked-link" href="#">Link</a>, <a href="#" class="hovered-link">Hover</a></li>
        <li>Text, <a class="linked-link" href="#">Link</a>, <a href="#" class="hovered-link">Hover</a></li>
        <li>Text, <a class="linked-link" href="#">Link</a>, <a href="#" class="hovered-link">Hover</a></li>
        <li>Text, <a class="linked-link" href="#">Link</a>, <a href="#" class="hovered-link">Hover</a></li>
    </ol>
</div><h4 class="styling-preview">Quote</h4><blockquote class="data-control-id-2595 bd-blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote><h3 class="styling-preview group-forms" data-group="group-forms">Forms</h3><h4 class="styling-preview">Button</h4><a class="data-control-id-2559 bd-button" href="#">Button</a><h4 class="styling-preview">Image</h4><img class="data-control-id-2570 bd-imagestyles" style="width: 140px; height: 140px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACMCAYAAACuwEE+AAAErUlEQVR4Xu3YwStscRjG8d8QQnZEFkqyY6NE/n0rlOxkS1ZqrCiFe/udOtPcue6YJ889Gc93Vtz7eo/3eT/9zjl6/X7/V+FDAhMm0APMhElR1iQAGCBICQBGiotiwGBASgAwUlwUAwYDUgKAkeKiGDAYkBIAjBQXxYDBgJQAYKS4KAYMBqQEACPFRTFgMCAlABgpLooBgwEpAcBIcVEMGAxICQBGiotiwGBASgAwUlwUAwYDUgKAkeKiGDAYkBIAjBQXxYDBgJQAYKS4KAYMBqQEACPFRTFgMCAlABgpLooBgwEpAcBIcVEMGAxICQBGiotiwGBASgAwUlwUAwYDUgKAkeKiGDAYkBIAjBQXxYDBgJQAYKS4KAYMBqQEACPFRTFgMCAlABgpLooBgwEpAcBIcVEMGAxICQBGiotiwGBASgAwUlwUAwYDUgKAkeKiGDAYkBIAjBQXxYDBgJQAYKS4KAYMBqQEACPFRTFgMCAlABgpLooBgwEpgakH8/7+Xs7Ozsrz83M5OTkpi4uLfwRwd3dXbm5uyvr6etnf32/+r9/vl6urq1J/tn729vbKxsbGRMF1fb2JfqkOi6YazOvrazk9PS1vb2+l1+v9BaZd7tPT0wBM+zNLS0vl6OioXF5eNtjq13Nzc2Oj7/p6HTqY+FJTC2Z4eXXaj8BcX1+Xh4eHUmvX1taaE6Y9cba3t8vOzs7g+3rKzM/PNyfP8vJyA6j+/P39fXMCra6uDnC6rjfpqTbxNjsonGowFxcX5eDgYHBKDN+S2tvO1tZWub29/RRMC6ieOI+Pj+X4+Licn5+X9iSq6P7H9TrYsfUSUwumTeGjZ4r232ZmZsru7m5zarQnTHtqjJ4w7feT3naGn5m+cj3rNjto9iPBDN9K2tvMZ7ekFkzNvJ4y9YQaflAeB/Sr1+tgz7ZL/DgwCwsLzVtTfdAd/aysrJTNzc3mremjZ5j6TNHeyuoD8MvLy19vUKMn2levZ9tkR41+HJjR1+oWQHvCjHtLmp2dbbDVt67Dw8PmpKlfD79BffZarVzvs7eyjgxIl4kDM+7vMP96vhm+Nalgxl1P2tQ3KZ56MN8kx5hfAzAxq/YMChhPjjFdABOzas+ggPHkGNMFMDGr9gwKGE+OMV0AE7Nqz6CA8eQY0wUwMav2DAoYT44xXQATs2rPoIDx5BjTBTAxq/YMChhPjjFdABOzas+ggPHkGNMFMDGr9gwKGE+OMV0AE7Nqz6CA8eQY0wUwMav2DAoYT44xXQATs2rPoIDx5BjTBTAxq/YMChhPjjFdABOzas+ggPHkGNMFMDGr9gwKGE+OMV0AE7Nqz6CA8eQY0wUwMav2DAoYT44xXQATs2rPoIDx5BjTBTAxq/YMChhPjjFdABOzas+ggPHkGNMFMDGr9gwKGE+OMV0AE7Nqz6CA8eQY0wUwMav2DAoYT44xXQATs2rPoIDx5BjTBTAxq/YMChhPjjFdABOzas+ggPHkGNMFMDGr9gwKGE+OMV0AE7Nqz6CA8eQY0wUwMav2DAoYT44xXQATs2rPoIDx5BjTBTAxq/YMChhPjjFdABOzas+ggPHkGNMFMDGr9gz6G1HzSbXtC7t7AAAAAElFTkSuQmCC"><h4 class="styling-preview">Label</h4><label class="data-control-id-2561 bd-bootstraplabel">Label text</label><h4 class="styling-preview">Input</h4><div class="top-class row">
    <div class="col-md-6">
        <input type="text" class="data-control-id-2560 bd-bootstrapinput form-control" value="Input text">
    </div>
</div><h4 class="styling-preview">Table</h4><table class="data-control-id-2583 bd-table">
    <thead>
    <tr>
        <th>#</th>
        <th>Name</th>
        <th>Source of wealth</th>
        <th>Country</th>
        <th>Net worth</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td>Total:</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>$293.5 billion</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td>1</td>
        <td>Carlos Slim Helu</td>
        <td>Telecom</td>
        <td>Mexico</td>
        <td>$73 billion</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Bill Gates</td>
        <td>Microsoft</td>
        <td>U.S.</td>
        <td>$67 billion</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Amancio Ortega</td>
        <td>Zara</td>
        <td>Spain</td>
        <td>$57 billion</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Warren Buffett</td>
        <td>Berkshire Hathaway</td>
        <td>U.S.</td>
        <td>$53.5 billion</td>
    </tr>
    <tr>
        <td>5</td>
        <td>Larry Ellison</td>
        <td>Oracle</td>
        <td>U.S.</td>
        <td>$43 billion</td>
    </tr>
    </tbody>
</table><h4 class="styling-preview">Accordion</h4><div class="row">
    <div class="col-md-6">
        <div class="data-control-id-860197 bd-accordion">
    <div class="data-control-id-860186 bd-menuitem-14">
        <a class="active">Active item</a>
    </div>
    <div class="data-control-id-860196 bd-container-43 bd-tagstyles">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus vulputate gravida.
            Duis ligula nulla, porta in aliquam sed, ullamcorper non sem. Proin aliquet nec sem vitae consectetur.
            Aenean vitae ligula placerat, aliquam nibh ut, porttitor magna. Aenean ut nibh volutpat, accumsan mi ut,
            commodo neque. Fusce faucibus facilisis dui, vel luctus erat tempor ac.
            Proin sem dui, imperdiet vel nulla ac, semper condimentum sem.
        </p>
    </div>
    <div class="data-control-id-860186 bd-menuitem-14">
        <a>Passive item</a>
    </div>
    <div class="data-control-id-860186 bd-menuitem-14">
        <a>Passive item</a>
    </div>
</div>
    </div>
</div><h3 class="styling-preview group-block" data-group="group-block">Widgets</h3><h4 class="styling-preview">Block</h4><div class="top-class row">
    <div class="col-md-6">
        <div class="data-control-id-2661 bd-block">
    <div class="bd-container-inner">
        <div class="data-control-id-2628 bd-container-53 bd-tagstyles">
    <h4>Title</h4>
 </div>
        <div class="data-control-id-2660 bd-container-49 bd-tagstyles">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id dolor rutrum ipsum blandit vehicula.
 </div>
    </div>
</div>
    </div>
</div><h4 class="styling-preview">Horizontal Menu</h4><div class="data-control-id-237856 bd-horizontalmenu clearfix">
    <div class="bd-container-inner">

        <ul class="data-control-id-237836 bd-menu-54 nav nav-pills navbar-left">

            <li class="data-control-id-237828 bd-menuitem-54">
                <a href="#" class="active">Item 1</a>
                <div class="bd-menu-55-popup">

                    <ul class="data-control-id-237854 bd-menu-55">

                        <li class="data-control-id-237846 bd-menuitem-55">
                            <a class="" href="#">SubItem 1</a>
                        </li>



                        <li class="data-control-id-237846 bd-menuitem-55">
                            <a class="active" href="#">SubItem 2</a>
                        </li>



                        <li class="data-control-id-237846 bd-menuitem-55">
                            <a class="" href="#">SubItem 3</a>
                        </li>

                    </ul>

                </div>
            </li>



            <li class="data-control-id-237828 bd-menuitem-54">
                <a href="#">Item 2</a>
            </li>



            <li class="data-control-id-237828 bd-menuitem-54">
                <a href="#">Item 3</a>
            </li>

        </ul>

    </div>
</div>
<style>
    .group-hmenu + div li:hover > a + [class$="-popup"]
    {
        visibility: visible;
        pointer-events: auto;
        position: absolute;
        z-index: 1001;
    }
</style><h4 class="styling-preview">Vertical Menu</h4><div class="top-class row">
    <div class="col-md-6">
        <div class="data-control-id-201531 bd-verticalmenu">
    <div class="bd-container-inner">

        <ul class="data-control-id-201510 bd-menu-50 nav nav-pills">

            <li class="data-control-id-201502 bd-menuitem-39">
                <a href="#" class="active">Item 1</a>
                <div class="bd-menu-47-popup">

                    <ul class="data-control-id-201528 bd-menu-47">

                        <li class="data-control-id-201520 bd-menuitem-43">
                            <a href="#">SubItem 1</a>
                        </li>



                        <li class="data-control-id-201520 bd-menuitem-43">
                            <a class="active" href="#">SubItem 2</a>
                        </li>



                        <li class="data-control-id-201520 bd-menuitem-43">
                            <a href="#">SubItem 3</a>
                        </li>

                    </ul>

                </div>
            </li>



            <li class="data-control-id-201502 bd-menuitem-39">
                <a href="#">Item 2</a>
            </li>



            <li class="data-control-id-201502 bd-menuitem-39">
                <a href="#">Item 2</a>
            </li>

        </ul>

    </div>
</div>
    </div>
</div>
<style>
    .group-vmenu + div li:hover > a + [class$="-popup"]
    {
        visibility: visible;
        pointer-events: auto;
        position: absolute;
        z-index: 1001;
    }
</style><h3 class="styling-preview group-slider" data-group="group-slider">Navigation</h3><h4 class="styling-preview">Carousel</h4><div class="left-button">
    <a class="data-control-id-554332 bd-carousel" href="#">
        <span class="data-control-id-554331 bd-icon-18"></span>
    </a>
</div>

<div class="right-button">
    <a class="data-control-id-554332 bd-carousel" href="#">
        <span class="data-control-id-554331 bd-icon-18"></span>
    </a>
</div><h4 class="styling-preview">Indicators</h4><ol class="data-control-id-554343 bd-indicators">
    <li class="data-control-id-554342 bd-menuitem-11 active"><a data-target="#carousel" data-slide-to="0" href="#"></a></li>
    <li class="data-control-id-554342 bd-menuitem-11"><a data-target="#carousel" data-slide-to="1" href="#"></a></li>
    <li class="data-control-id-554342 bd-menuitem-11"><a data-target="#carousel" data-slide-to="2" href="#"></a></li>
</ol><h4 class="styling-preview">Pagination</h4><ul class="data-control-id-2671 bd-pagination pagination">
    <li class="data-control-id-2670 bd-paginationitem-1 disabled"><a href="#">Prev</a></li>
<li class="data-control-id-2670 bd-paginationitem-1 active"><a href="#">1</a></li>
<li class="data-control-id-2670 bd-paginationitem-1"><a href="#">2</a></li>
<li class="data-control-id-2670 bd-paginationitem-1"><a href="#">3</a></li>
<li class="data-control-id-2670 bd-paginationitem-1"><a href="#">4</a></li>
<li class="data-control-id-2670 bd-paginationitem-1"><a href="#">5</a></li>
<li class="data-control-id-2670 bd-paginationitem-1"><a href="#">Next</a></li>
</ul><h3 class="styling-preview group-product-icons" data-group="group-product-icons">Shop Icons</h3><h4 class="styling-preview">Rating</h4><div class="data-control-id-2593 bd-rating">
    <span class="data-control-id-2592 bd-icon-3"></span>
    <span class="data-control-id-2592 bd-icon-3"></span>
    <span class="data-control-id-2592 bd-icon-3"></span>
    <span class="data-control-id-2592 bd-icon-3"></span>
    <span class="data-control-id-2592 bd-icon-3"></span>
</div><h4 class="styling-preview">Sale</h4><div class="data-control-id-2665 bd-productsaleicon">
    <span>Sale!</span>
</div><h4 class="styling-preview">Out Of Stock</h4><div class="data-control-id-2666 bd-productoutofstockicon">
    <span>Out of stock</span>
</div><h3 class="styling-preview group-alerts" data-group="group-alerts">Alerts</h3><h4 class="styling-preview">Warning</h4><div class="data-control-id-2673 bd-warningmessage-1 alert alert-warning">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <span>Message!</span>
</div><h4 class="styling-preview">Error</h4><div class="data-control-id-2675 bd-errormessage-1 alert alert-danger">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <span>Message!</span>
</div><h4 class="styling-preview">Information</h4><div class="data-control-id-2674 bd-informationmessage-1 alert alert-info">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <span>Message!</span>
</div><h4 class="styling-preview">Success</h4><div class="data-control-id-2676 bd-successmessage-1 alert alert-success">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <span>Message!</span>
</div></div></div>

Sincerely,
Hella
BillionDigital Team

Thanks the code above has worked.

I tried using code inspector in chrome (Ctrl + U) but got

<html manifest>
<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body></body>

Hi,

To see the code in the Themler window please hold Shift button and then right click in the area, there will be the Inspect Element option available.

Sincerely,
Hella
BillionDigital Team

Hi

That worked

Thanks for your instructions

Cheers