Joomla Templates Club 406,261 posts

[truemaker Friend truemakerJoin date: April 2013Posts: 50Downloads:29Uploads:2 Thanks: 3 Thanked: 1 times in 1 posts]

#994676

Hi

Where i can find typography source for JA_PLATON template?

And what do you recommend typography for tables?
Template typography have not it in this template.

WBR Igor (aka truemaker)

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

#994719

Hi
If you have the Quickstart package installed you can the code from article source code .
I also attached the code below

<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="cloak0e92a8707a7f4c0c7877039d9b678c6a"><a href="mailto:first.last@example.com">first.last@example.com</a></span><script type="text/javascript">
                document.getElementById('cloak0e92a8707a7f4c0c7877039d9b678c6a').innerHTML = '';
                var prefix = 'ma' + 'il' + 'to';
                var path = 'hr' + 'ef' + '=';
                var addy0e92a8707a7f4c0c7877039d9b678c6a = 'first.last' + '@';
                addy0e92a8707a7f4c0c7877039d9b678c6a = addy0e92a8707a7f4c0c7877039d9b678c6a + 'example' + '.' + 'com';
                var addy_text0e92a8707a7f4c0c7877039d9b678c6a = 'first.last' + '@' + 'example' + '.' + 'com';document.getElementById('cloak0e92a8707a7f4c0c7877039d9b678c6a').innerHTML += '<a ' + path + '\'' + prefix + ':' + addy0e92a8707a7f4c0c7877039d9b678c6a + '\'>'+addy_text0e92a8707a7f4c0c7877039d9b678c6a+'<\/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>

For the table you can use standard html table in the template .
You can also use standard Bootstrap table : http://getbootstrap.com/css/#tables

Regards

[truemaker Friend truemakerJoin date: April 2013Posts: 50Downloads:29Uploads:2 Thanks: 3 Thanked: 1 times in 1 posts]

#994834

Hi

Pankaj Sharma wrote:

For the table you can use standard html table in the template

For information
Wide table is not responsive and it make horizontal scroll for page but head of page block with logo stay short.
This is not perfect show.
What do you recommend?
Make custom css or may be use any other typography fragment about tables?
For example other template JA_University have typography of tables with responsive styles
http://int.krok.edu.ua/en/typography-j3

WBR
Igor

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

#994939

Hi
You can also use the JA Universty template table . copy the code from it and use it on your site .
Both templates use Bootstrap 3 classes for columns .
http://prntscr.com/dk02ty

[truemaker Friend truemakerJoin date: April 2013Posts: 50Downloads:29Uploads:2 Thanks: 3 Thanked: 1 times in 1 posts]

#995065

Hi

Yes. I see bootstrap tables css
getbootstrap.com/css/#tables

Thank you
Igor

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

#995067

You are welcome !

[Author]

Posts