Joomla Templates Club 406,261 posts

[matbeard7 Friend matbeard7Join date: July 2012Posts: 35Downloads:3Uploads:0 Thanked: 1 times in 1 posts]

#179426

Is there any documentation on how to achieve the typography as shown in the JA Zite demo? I’m trying to get the sub-heading styles, but they aren’t showing correctly.

I’m guessing it’s to do with the series of CSS divs that the heading is placed in, but there are loads of them nested, surely they aren’t all necessary?

A simple explanation of the markup required to get the large sub-heading and smaller sub-heading would be really useful.

Thanks

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#462394

Hi matbeard7,

I am not much sure what’s the typography you mentioned, Could you please attach here a screenshot ? also you can get your site look exactly like the demo just by downloading the quickstart package here and then install it as a normal fresh joomla installation.

[tfosnom Friend tfosnomJoin date: October 2010Posts: 742Downloads:0Uploads:31 Thanks: 145 Thanked: 200 times in 94 posts]

#462419

Hi Matbeard7
Easiest way to see the markup code (block) is to look at the ja demo source code for that typography demo page, however if you use the JA typo button available in the builtin editor or install JCE editor. the ja typo button allows you to select the large sub and smaller headings from a visual sample panel and insert the code, you then fill in your text to replace the sample text.

Hope this is a sufficient explaination
Cheers Shannon

1 user says Thank You to tfosnom for this useful post

1. Sherlock

[matbeard7 Friend matbeard7Join date: July 2012Posts: 35Downloads:3Uploads:0 Thanked: 1 times in 1 posts]

#462565

<em>@Sherlock Holmes 331985 wrote:</em><blockquote>
I am not much sure what’s the typography you mentioned</blockquote>
It’s the page from the demo/quickstart that’s displayed when you select ‘Typography’ from the main menu.

<em>@Sherlock Holmes 331985 wrote:</em><blockquote>
also you can get your site look exactly like the demo just by downloading the quickstart package</blockquote>
I’ve used the quickstart installation, and my site does look like the demo, including the Typography page, but my question is about how to easily achieve the typography examples in my own articles.

<blockquote>Easiest way to see the markup code (block) is to look at the ja demo source code for that typography demo page, however if you use the JA typo button available in the builtin editor or install JCE editor. the ja typo button allows you to select the large sub and smaller headings from a visual sample panel and insert the code</blockquote>
Like I say — the source code shows many nested DIVs, which I’m sure aren’t all necessary to achieve the desired effect, but I can’t work out exactly what’s required. If I use the JA Typo button a) there’s no specific ‘Large Subheading’ and ‘Smaller Subheading’ options and b) using the standard H1, H2 etc, just inserts <h1> and <h2> — not the required markup.

I’ll keep trying, but it seems it’s just a case of reverse engineering the demo CSS to see the minimum markup required.

Cheers,
Mat

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#462647

Hi matbeard7,

I also think you have only two options to achieve Typography as on the demo the first is copying the html markup from the example Typography article and the other one is using the Ja typo button plugin as mentioned before.

[matbeard7 Friend matbeard7Join date: July 2012Posts: 35Downloads:3Uploads:0 Thanked: 1 times in 1 posts]

#462709

Thanks.

The JA Typo plugin isn’t any help in this case, but I’ve managed to figure out the minimum markup requires to achieve the desired effect.

Cheers

[mandig Friend mandigJoin date: October 2010Posts: 48Downloads:0Uploads:10 Thanks: 15 Thanked: 2 times in 1 posts]

#489550

Hi, I’m experiencing the same problem with this template and, in general, it seems to me that the tutorial hasn’t been made with the same precision as the other ones; a lot in information are wrong, other ones are missing.

In any case, coming back to typo, even if I use the same exact code as the demo site I can’t get the same result, for example I can’t create any sub-heading typography even if I copy and paste the code I get from Firebug <h3 class=”ja-typo-title”><span>A Smaller Sub-heading</span></h3>.

Could you please let me know what’s missing.
Thanks and best regards.

[matbeard7 Friend matbeard7Join date: July 2012Posts: 35Downloads:3Uploads:0 Thanked: 1 times in 1 posts]

#489558

Hi mandig,

You need to go further up the DOM. To get the same results, most of the headings and sub-headings need to be wrapped in an additional DIV, for example:

<div class=”ja-typo-blockswrap”>
<h2 class=”ja-typo-title”><span>Smaller Sub-Heading.</span></h2>
</div>

It’s often difficult to establish what the minimum structure is to replicate the typography in the demos.

Hope this helps.

[mandig Friend mandigJoin date: October 2010Posts: 48Downloads:0Uploads:10 Thanks: 15 Thanked: 2 times in 1 posts]

#489559

<em>@matbeard7 368541 wrote:</em><blockquote>Hi mandig,

You need to go further up the DOM. To get the same results, most of the headings and sub-headings need to be wrapped in an additional DIV, for example:

<div class=”ja-typo-blockswrap”>
<h2 class=”ja-typo-title”><span>Smaller Sub-Heading.</span></h2>
</div>

It’s often difficult to establish what the minimum structure is to replicate the typography in the demos.

Hope this helps.</blockquote>

Thank you very very much matbeard7 :D. It helped me a lot, usually I never needed to wrap inside special divs so I would have never thought at this solution.

Thanks again.

[Author]

Posts