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

richard25
137 Posts
richard25 posted this 01 September 2015

Hi

I have a Joomla Test site using Themler and would like to create a Joomla article which reflects the Themler Default Styles(Typography) page in Themler. It is the page that is shown when you press the 'STYLES' tab.

I'm aware this will be html code but rather than try to build it from scratch can Themler provide this html code or a piece of code that if embedded in the article would pick up this page up and update it accordingly when Themler was updated?

Cheers

Hi I have a Joomla Test site using Themler and would like to create a Joomla article which reflects the Themler Default Styles(Typography) page in Themler. It is the page that is shown when you press the 'STYLES' tab. I'm aware this will be html code but rather than try to build it from scratch can Themler provide this html code or a piece of code that if embedded in the article would pick up this page up and update it accordingly when Themler was updated? Cheers
Vote to pay developers attention to this features or issue.
4 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 01 September 2015

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

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
richard25
137 Posts
richard25 posted this 01 September 2015

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>

Thanks the code above has worked. I tried using code inspector in chrome (Ctrl + U) but got &lt;html manifest&gt; &lt;head&gt; <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt;body&gt;&lt;/body&gt;
Support Team
Support Team posted this 01 September 2015

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, 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
richard25
137 Posts
richard25 posted this 01 September 2015

Hi

That worked

Thanks for your instructions

Cheers

Hi That worked Thanks for your instructions Cheers
You must log in or register to leave comments