Joomla Templates Club 406,261 posts

[mxcpz Friend mxcpzJoin date: February 2008Posts: 22Downloads:7Uploads:4]

#1085174

Hi, where can I find some tips on typography?
Thx, Mario

[mxcpz Friend mxcpzJoin date: February 2008Posts: 22Downloads:7Uploads:4]

#1085175

ok found it (in demo)
now, can you pls tell me how to do edit? Is it supposed to be a button in the editor? If it so I don’t find it.
Thx

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1085402

Hi
If you have installed quickstart package you can found it in the articles > typography and see the code.
On demo site here
You can use firebug or inspect element to copy the html code of the part you need to add
example: http://prntscr.com/hxfgk0

Regards

[mxcpz Friend mxcpzJoin date: February 2008Posts: 22Downloads:7Uploads:4]

#1085514

Unfortunately I uploaded only the template. Now, is there any chance to recover it from quickstart? I downloaded it and I’m ready, if possible.
Thx 🙂

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1085521

Hi
I attached the code below

<!-- CORE TYPOGRAPHY
=======================================================-->
<div class="docs-section">
    <div class="page-header">
        <h1 id="example-typo">Core Typography</h1>
    </div>
    <!-- Headings -->
    <div class="row example-row example-type">
        <div class="col-lg-6">
            <h2 class="sub-title">Heading Text</h2>
            <h1>h1. Heading <small>Secondary text</small></h1>
            <h2>h2. Heading <small>Secondary text</small></h2>
            <h3>h3. Heading <small>Secondary text</small></h3>
            <h4>h4. Heading <small>Secondary text</small></h4>
            <h5>h5. Heading <small>Secondary text</small></h5>
            <h6>h6. Heading <small>Secondary text</small></h6>
            <div class="alert alert-warning">
                <p><strong>TIPS:</strong> Create lighter, secondary text in any heading with a generic <code>&lt;small&gt;</code> tag or the <code>.small</code> class.</p>
            </div>
        </div>
        <div class="col-lg-6">
            <h2 class="sub-title">Example body text</h2>
            <p class="lead">This is a <strong>lead paragraph</strong>. <br>Make a paragraph stand out by adding <code>.lead</code>.</p>
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.</p>
            <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
            <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
            <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
            <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
        </div>
    </div>
    <!-- //Headings --> 

    <p> </p>
    <!-- Address & Emphasis -->
    <div class="row example-row example-type">
        <div class="col-lg-4">
        <h2 class="sub-title">Address</h2>
            <address><strong>Company Name</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890</address><address><strong>Full Name</strong><br> <abbr title="Phone">P:</abbr> (123) 456-7890<br> <span id="cloak1adb4f3df66ea1746f2a1bd33e1e2b3f"><a href="mailto:first.last@example.com">first.last@example.com</a></span><script type="text/javascript">
                document.getElementById('cloak1adb4f3df66ea1746f2a1bd33e1e2b3f').innerHTML = '';
                var prefix = '&#109;a' + 'i&#108;' + '&#116;o';
                var path = 'hr' + 'ef' + '=';
                var addy1adb4f3df66ea1746f2a1bd33e1e2b3f = 'f&#105;rst.l&#97;st' + '&#64;';
                addy1adb4f3df66ea1746f2a1bd33e1e2b3f = addy1adb4f3df66ea1746f2a1bd33e1e2b3f + '&#101;x&#97;mpl&#101;' + '&#46;' + 'c&#111;m';
                var addy_text1adb4f3df66ea1746f2a1bd33e1e2b3f = 'f&#105;rst.l&#97;st' + '&#64;' + '&#101;x&#97;mpl&#101;' + '&#46;' + 'c&#111;m';document.getElementById('cloak1adb4f3df66ea1746f2a1bd33e1e2b3f').innerHTML += '<a ' + path + '\'' + prefix + ':' + addy1adb4f3df66ea1746f2a1bd33e1e2b3f + '\'>'+addy_text1adb4f3df66ea1746f2a1bd33e1e2b3f+'<\/a>';
        &lt;/script&gt;</address>
        </div>
        <div class="col-lg-4">
            <h2 class="sub-title">Emphasis classes</h2>
            <p class="text-muted">This is a <code>.mute</code> paragraph.</p>
            <p class="text-primary">This is a <code>.text-primary</code> paragraph.</p>
            <p class="text-warning">This is a <code>.text-warning</code> paragraph.</p>
            <p class="text-danger">This is a <code>.text-danger</code> paragraph.</p>
            <p class="text-success">This is a <code>.text-success</code> paragraph.</p>
            <p class="text-info">This is a <code>.text-info</code> paragraph.</p>
        </div>
        <div class="col-lg-4">
            <h2 class="sub-title">Alignment classes</h2>
            <p class="text-left">This is a left aligned text <code>.text-left</code></p>
            <p class="text-center">This is a center aligned text <code>.text-center</code></p>
            <p class="text-right">This is a right aligned text <code>.text-right</code></p>
            <p class="text-justify">This is a justify aligned text which is often used in Book Design, Magazine or special Typo Pages. Create a justify aligned text with <code>.text-justify</code> class.</p>
        </div>
    </div>
    <!-- //Address & Emphasis --> 

</div>
<!-- //CORE TYPOGRAPHY -->

<!-- Blockquotes -->
<div class="docs-section">
    <div class="page-header">
        <h1 id="example-colors">Blockquotes</h1>
    </div>
    <div class="row example-row example-type">
        <div class="col-lg-6">
            <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <small>Quote's author in <cite title="Source Title">Source Title</cite></small></blockquote>
        </div>
        <div class="col-lg-6">
            <blockquote class="pull-right">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <small>Quote's author in <cite title="Source Title">Source Title</cite></small></blockquote>
        </div>
    </div>
</div>
<!-- //Blockquotes -->

<!-- TAGS
=======================================================-->
<div class="docs-section">
    <div class="page-header">
        <h1 id="example-colors">Tags</h1>
    </div>
    <div class="tags">
        <span class="tag"><a class="label label-info" href="#">hotel</a></span>
        <span class="tag"><a class="label label-info" href="#">booking</a></span>
        <span class="tag"><a class="label label-info" href="#">discount</a></span>
        <span class="tag"><a class="label label-info" href="#">location</a></span>
        <span class="tag"><a class="label label-info" href="#">map</a></span>
        <span class="tag"><a class="label label-info" href="#">travel</a></span>
    </div>
</div>
<!-- //TAGS -->

<!-- COLOR SWATCHES
=======================================================-->
<div class="docs-section">
    <div class="page-header">
        <h1 id="example-color">Color Swatches</h1>
    </div>

    <!-- Brand Colors -->
    <h2 class="sub-title">Brand Colors</h2>
    <div class="row example-row example-colors">
        <div class="col-xs-5 col-md-4 col-lg-2">
            <div class="swatch-item color-brand-primary">
                <dl>
                    <dt>#00bfe6</dt>
                    <dd>Brand Primary</dd>
                </dl>
            </div>
        </div>
        <div class="col-xs-5 col-md-4 col-lg-2">
            <div class="swatch-item color-brand-secondary">
                <dl>
                    <dt>#428bca</dt>
                    <dd>Brand Secondary</dd>
                </dl>
            </div>
        </div>
        <div class="col-xs-5 col-md-4 col-lg-2">
            <div class="swatch-item color-brand-warning">
                <dl>
                    <dt>#f0ad4e</dt>
                    <dd>Brand Warning</dd>
                </dl>
            </div>
        </div>
        <div class="col-xs-5 col-md-4 col-lg-2">
            <div class="swatch-item color-brand-danger">
                <dl>
                    <dt>#fbe57c</dt>
                    <dd>Brand Danger</dd>
                </dl>
            </div>
        </div>
        <div class="col-xs-5 col-md-4 col-lg-2">
            <div class="swatch-item color-brand-info">
                <dl>
                    <dt>#5bc0de</dt>
                    <dd>Brand Info</dd>
                </dl>
            </div>
        </div>
        <div class="col-xs-5 col-md-4 col-lg-2">
            <div class="swatch-item color-brand-success">
                <dl>
                    <dt>#4db18d</dt>
                    <dd>Brand Success</dd>
                </dl>
            </div>
        </div>
    </div>
    <!-- Brand Colors --> 

    <p> </p>
    <!-- Grayscale -->
    <h2 class="sub-title">Grayscale Levels</h2>
    <div class="row example-row example-colors">
        <div class="col-xs-5 col-md-4 col-lg-2">
            <div class="swatch-item color-gray-darker">
                <dl>
                    <dt>#262626</dt>
                    <dd>Gray Darker</dd>
                </dl>
            </div>
        </div>
        <div class="col-xs-5 col-md-4 col-lg-2">
            <div class="swatch-item color-gray-dark">
                <dl>
                    <dt>#3c3c3c</dt>
                    <dd>Gray Dark</dd>
                </dl>
            </div>
        </div>
        <div class="col-xs-5 col-md-4 col-lg-2">
            <div class="swatch-item color-gray">
                <dl>
                    <dt>#555555</dt>
                    <dd>Gray</dd>
                </dl>
            </div>
        </div>
        <div class="col-xs-5 col-md-4 col-lg-2">
            <div class="swatch-item color-gray-light">
                <dl>
                    <dt>#999999</dt>
                    <dd>Gray Light</dd>
                </dl>
            </div>
        </div>
        <div class="col-xs-5 col-md-4 col-lg-2">
            <div class="swatch-item color-gray-lighter">
                <dl>
                    <dt>#eaeaea</dt>
                    <dd>Gray Lighter</dd>
                </dl>
            </div>
        </div>
        <div class="col-xs-5 col-md-4 col-lg-2">
            <div class="swatch-item color-gray-lightest">
                <dl>
                    <dt>#f7f7f7</dt>
                    <dd>Gray Lightest</dd>
                </dl>
            </div>
        </div>
    </div>
    <!-- //Grayscale -->
</div>
<!-- //COLOR SWATCHES -->

<!-- BUTTON
=======================================================-->
<div class="docs-section">
    <div class="page-header">
        <h1 id="example-colors">Buttons</h1>
    </div>
    <div class="row example-row example-type">
        <div class="col-md-8">
            <!-- Button --->
            <h2 class="sub-title">Buttons</h2>
            <div class="example-button clearfix"><a class="btn btn-default" href="#">Normal Button</a> <a class="btn btn-primary" href="#">Primary Button</a> <a class="btn btn-second" href="#">Second Button</a></div>
            <p> </p>
            <div class="example-button clearfix"><a class="btn btn-warning" href="#">Warning Button</a> <a class="btn btn-danger" href="#">Danger Button</a> <a class="btn btn-info" href="#">Info Button</a></div>
            <!-- //Button --->
        </div>
        <div class="col-md-4">
            <!-- Action Link --->
            <h2 class="sub-title">Action Link</h2>
            <a class="btn btn-link" href="#">Action</a> 
            <!-- //Action Link --->
        </div>
    </div>
</div>
<!-- //BUTTON -->

<!-- NAVIGATIONS
================================================== -->
<div class="docs-section">
    <div class="page-header">
        <h1 id="example-navigation">Navigations</h1>
    </div>

    <!-- Tabs & Vertical Menus -->
    <div class="row example-row example-navigation"><!-- Tabs -->
        <div class="col-lg-8">
        <h2 class="sub-title">Tabs</h2>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
            <li><a href="#profile" data-toggle="tab">Profile</a></li>
            <li class="disabled"><a>Disabled</a></li>
            <li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown"> Dropdown </a>
                <ul class="dropdown-menu">
                    <li><a href="#dropdown1" data-toggle="tab">Action</a></li>
                    <li><a href="#dropdown2" data-toggle="tab">Another action</a></li>
                    <li><a href="#dropdown2" data-toggle="tab">Another action</a></li>
                </ul>
            </li>
        </ul>
            <div id="myTabContent" class="tab-content">
                <div id="home" class="tab-pane fade active in">
                    <p>In the area of graphical user interfaces (GUI), a <strong>tabbed document interface</strong> (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.</p>
                    <p>GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).</p>
                </div>
                <div id="profile" class="tab-pane fade">
                    <p>In the area of graphical user interfaces (GUI), a <strong>tabbed document interface</strong> (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.</p>
                    <p>GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).</p>
                </div>
                <div id="dropdown1" class="tab-pane fade">
                    <p>In the area of graphical user interfaces (GUI), a <strong>tabbed document interface</strong> (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.</p>
                    <p>GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).</p>
                </div>
                <div id="dropdown2" class="tab-pane fade">
                    <p>In the area of graphical user interfaces (GUI), a <strong>tabbed document interface</strong> (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.</p>
                    <p>GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).</p>
                </div>
            </div>
        </div>
        <!-- //Tabs --> 
        <!-- Vertical Menus -->
        <div class="col-lg-4">
            <h2 class="sub-title">Vertical Menus</h2>
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Active Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li class="disabled"><a href="#">Disabled Menu Item</a></li>
                <li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown"> Dropdown </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    <!-- Vertical Menus -->
    </div>
<!-- Tabs & Vertical Menus -->
</div>
<!-- //NAVIGATIONS -->

<!-- FORMS
================================================== -->
<div class="docs-section">
    <div class="page-header">
        <h1 id="example-typo">Inputs</h1>
    </div>

    <!-- Inputs -->
    <div class="row example-row example-forms example-inputs">
        <div class="col-md-3">
            <div class="form-group has-success"><label class="control-label" for="inputSuccess">Input success</label> <input id="inputSuccess" class="form-control" type="text"></div>
        </div>
        <div class="col-md-3">
            <div class="form-group has-error"><label class="control-label" for="inputError">Input error</label> <input id="inputError" class="form-control" type="text"></div>
        </div>
        <div class="col-md-3">
            <div class="form-group has-warning"><label class="control-label" for="inputWarning">Input warning</label> <input id="inputWarning" class="form-control" type="text"></div>
        </div>
        <div class="col-md-3">
            <div class="form-group"><label class="control-label" for="disabledInput">Disabled input</label> <input id="disabledInput" class="form-control" disabled="disabled" type="text"></div>
        </div>
    </div>
    <!-- //Inputs --> 
</div>
<!-- //FORMS -->

<!-- INDICATORS
================================================== -->
<div class="docs-section">
    <div class="page-header">
        <h1 id="example-indicators">Indicators</h1>
    </div>

    <!-- Alerts -->
    <h2 class="sub-title">Alerts and Notifications</h2>
    <div class="row example-row example-indicators">
        <div class="col-lg-6">
            <div class="alert  alert-danger">
                <h4>error message title</h4>
                <p>Donec eget purus nec tellus tincidunt lacinia et sed lorem. Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.</p>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="alert  alert-success">
                <h4>sussess message title</h4>
                <p>Donec eget purus nec tellus tincidunt lacinia et sed lorem. Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.</p>
            </div>
        </div>
    </div>
    <div class="row example-row example-indicators">
        <div class="col-lg-6">
            <div class="alert  alert-info">
                <h4>info message title</h4>
                <p>Donec eget purus nec tellus tincidunt lacinia et sed lorem. Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.</p>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="alert  alert-warning">
                <h4>warning message title</h4>
                <p>Donec eget purus nec tellus tincidunt lacinia et sed lorem. Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.</p>
            </div>
        </div>
    </div>
    <!-- Alerts --> 

    <p> </p>
    <!-- Labels & Badges -->
    <div class="row example-row example-indicators">
        <div class="col-lg-6">
            <h2 class="sub-title">Badges</h2>
            <div class="example">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
                    <li><a href="#">Profile </a></li>
                    <li><a href="#">Messages <span class="badge">25</span></a></li>
                    <li><a href="#">Notices <span class="badge">2</span></a></li>
                </ul>
            </div>
        </div>
        <div class="col-lg-6">
            <h2 class="sub-title">Labels</h2>
            <div class="example"><span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span></div>
        </div>
    </div>
<!-- Labels & Badges -->
</div>
<!-- //INDICATORS -->

<!-- MISC
================================================== -->
<div class="docs-section">
    <div class="page-header">
        <h1 id="example-misc">Misc</h1>
    </div>
    <!-- List Groups -->
    <h2 class="sub-title">List groups</h2>
    <div class="row example-row example-misc">
        <div class="col-lg-4">
            <ul class="list-group">
                <li class="list-group-item"><span class="badge">14</span> Cras justo odio</li>
                <li class="list-group-item"><span class="badge">2</span> Dapibus ac facilisis in</li>
                <li class="list-group-item">Morbi leo risus</li>
                <li class="list-group-item"><span class="badge">1</span> Morbi leo risus</li>
                <li class="list-group-item"><span class="badge">2</span> Dapibus ac facilisis in</li>
            </ul>
        </div>
        <div class="col-lg-4">
            <div class="list-group"><a class="list-group-item active" href="#"><span class="badge">9</span> Cras justo odio</a> <a class="list-group-item" href="#">Dapibus ac facilisis in</a> <a class="list-group-item" href="#">Morbi leo risus</a> <a class="list-group-item" href="#">Porta ac consectetur ac</a> <a class="list-group-item" href="#">Vestibulum at eros</a></div>
        </div>
        <div class="col-lg-4">
            <div class="list-group">
                <a title="List group" href="#" class="list-group-item active">
                                  <h4 class="list-group-item-heading">List group item heading</h4>
                  <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus risus varius blandit.</p>
                                </a>
                                <a title="List group" href="#" class="list-group-item">
                  <h4 class="list-group-item-heading">List group item heading</h4>
                  <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus.</p>
                                </a>
                                <a title="List group" href="#" class="list-group-item">
                  <h4 class="list-group-item-heading">List group item heading</h4>
                  <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus.</p>
                                </a>
            </div>
        </div>
    </div>
    <!-- //List Groups --> 

    <p> </p>
    <!-- Panels -->
    <h2 class="sub-title">Panels</h2>
    <div class="row example-row example-misc">
        <div class="col-lg-4">
            <div class="panel panel-default">
                <div class="panel-heading">Panel heading</div>
                <div class="panel-body">Panel content</div>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel primary</h3>
                </div>
                <div class="panel-body">Panel content</div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel success</h3>
                </div>
                <div class="panel-body">Panel content</div>
            </div>
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel warning</h3>
                </div>
                <div class="panel-body">Panel content</div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel danger</h3>
                </div>
                <div class="panel-body">Panel content</div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel info</h3>
                </div>
                <div class="panel-body">Panel content</div>
            </div>
        </div>
    </div>
    <!-- //Panels --> 

    <p> </p>
    <!-- Wells -->
    <h2 class="sub-title">Wells</h2>
    <div class="row example-row example-misc">
        <div class="col-lg-4">
            <div class="well well-sm">Look, I'm in a small well!</div>
        </div>
        <div class="col-lg-4">
            <div class="well">Look, I'm in a well!</div>
        </div>
        <div class="col-lg-4">
            <div class="well well-lg">Look, I'm in a large well!</div>
        </div>
    </div>
    <!-- //Wells -->
</div>
<!-- // MISC -->

Regards

[mxcpz Friend mxcpzJoin date: February 2008Posts: 22Downloads:7Uploads:4]

#1085528

Excuse me Pankaj, apart that I copy this into a .txt, can/should I attach this somewhere?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1085536

Hi
its the custom code for each section. In demo we posted it using an article, you can use the code in custom html module or in the article source code to use them.

Regards

[Author]

Posts