Joomla Templates Club 406,261 posts

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#172731

Creating Beautiful websites is one of the primary goals here at Joomlart. Providing you with the tools to make your site unique, stylish, and professional is what drives our template creation. One of the many features we’ve packed into our templates is custom typography options that compliment your template and your content. Typography is one of the most over-looked features of Joomlart templates, but it’s one of the features that can transform your site into a truly unique website filled with beautiful content.

Let’s take a look at what Joomlart Typography can do for your site!

[FONT=arial black]Typography Options[/FONT]

Beautiful Text
Joomlart templates provide a wide variety of Typography options for your text, all built right in to the template! Take a look at the typography page on any template and you can see many options for making your content unique. Whether it’s stylish dropcaps and dropquotes, or message boxes and bubbles drawing the readers attention to a bit of content – using the Typography options built right in to every Joomlart template will make every page stand out!

[FONT=arial black]Listing Heaven
[/FONT]Want to create awesome lists in your content? Try some of Joomlarts list options with Typography! With everything covered from bulleted lists with a wide variety of icons, to stylish numbered list options, lists have never looked as beautiful as with a Joomlart template with custom-built list options to match!

[FONT=arial black]Module Mania
[/FONT]Joomlart templates and typography goes well beyond dressing up your content. All Joomlart templates include even more options to customize entire modules by providing module classes to add special features to an entire module! Combine that with unique styling through Typography and your website will keep readers looking for more!

[FONT=arial black]Buttons & Tags
[/FONT]Custom button and tag styles polish off the Typography options. These give you an easy way to have beautiful buttons and stylish tags in your content, giving your users an appealing interface to interact with your website in!

[FONT=arial black]Using Typography[/FONT]
Joomlart does a lot to make your website look awesome, but all that is useless without a bit of knowledge on how to use it! Fortunately for you, using Joomlarts built in Typography options is not hard, and we’re about to show you how!

[FONT=arial black]Typography in Content
[/FONT]Probably the most popular uses of Typography options is in your content. Whether it’s in a list, blockquote, content bubble, or any of the many other options Joomlart offers, all of this, whether in an article or module, is added through your content editor. Before getting started, make sure you have a good WYSIWYG (What You See Is What You Get) editor – Joomla! comes with a great one (TinyMCE), but if you’re looking for an even better one we recommend taking a look at JCE.

Adding Typography to customize your content is easy. All you have to do is identify the area you want to add the typography to, and add a specific “class” to that element in the html! Now don’t worry if you don’t know html code, give me a minute and you’ll be doing this like a pro!

Let’s take a list for example. An un-numbered list (bulleted list) in html would usually look something like this:
<blockquote><ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul></blockquote>
Now, to add a Typography option there we have to add one small snippet in that first <ul> tag. We’re going to transform <ul> into <ul class=”red-check”>. That’s it! We’ve now added a Typography class to our bulleted list to transform the typical black, round bullet into a red check mark!

We do the same thing for paragraphs where you might use the blockquote and dropcap style, or even many of the bubble or icon styles that are available. Typically, a paragraph looks something like this:
<p>My paragraph here.</p>
In order to apply a style to this, all we’re going to do is modify the paragraph tag, taking this <p>, and changing it to <p class=”blockquote”>

That’s it! We’ve just added typography styles to our content to make our site unique, and appealing! Told you it was easy! 🙂

[FONT=arial black]Typography in Modules
[/FONT]Using the many different module styles in your website is even easier that adding typography in your content. All you have to do is add the module class to the module itself. This is an easy process where you just take the class that you want to use in the module, and add it to the Module Class Suffix parameter in the module configuration.

[FONT=arial black]Where do I Find Typography Examples?
[/FONT]Good question! In each template demo that Joomlart produces there is a Typography page – usually in the main menu at the top of the demo. If you navigate to that page, you can see complete examples of all the Typography options for that demo. I use this page all the time even after my own site is installed, since it is an easy way to reference the examples, and browse through the options to find what I want!

————————————————————————————————————————-
Written by jneubauer – JoomlArt Support Team Member

1 user says Thank You to TomC for this useful post

1. tsopanidis

[devcre Friend devcreJoin date: January 2012Posts: 3Downloads:0Uploads:0]

#444916

How can I find complete list of comands to stylize my content and list of module classes to highlight my modules.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#444966

Figuring out the various module class suffixes identified within each respective Template demo’s Typography page can sometimes be a little confusing – and often times frustrating. Unfortunately, there does not seem to be an easy-to-find concise identification or listing of each module class for each respective template.

SO . . . Until such time as an easy-to-follow listing is provided with each template, here is a roundabout way you can identify many of the various classes is to utilize a web inspector like FIREBUG or Google CHROME’s Web Inspector.

NOTE:
For the following example/steps, I will be describing steps using Google Chrome’s Web Inspector and the JA ERIO Template Demo – though the same principle method can be utilized with virtually any JATC Template.

STEP ONE:
Go to the JA ERIO TYPOGRAPHY PAGE and scroll down to where the various module class suffix info starts
– e.g. BUTTONS & TAGS.

STEP TWO:
Right click over the first blue button and, from the pop-out menu, select “Inspect Element.” You will then see a bottom pane appear and, in the right column, you should see the identified CSS (along with a subsequent list of related css and such … it’s pretty self-explanatory).

In the case of the first blue button, the following is the module class that was identified:

<blockquote>a.btn-blue span</blockquote>

Repeat these steps for each module class suffix you want to identify.

I realize this method involves a few additional steps – and it really shouldn’t be necessary . . .
but at least this is a way you can go about identifying most of the module class suffix info for the time being.

IMPORTANT NOTE:
If you want to identify the exact CSS file location of the various classes . . . whenever you are using a web inspector to investigate/identify CSS elements, always set “Optimize CSS” to “No” within your Template Manager–General Settings. Otherwise, the “compressed” css file/line info that is presented will not be correct and, as a result, much more difficult to find within your various directory CSS files.

2 users say Thank You to TomC for this useful post

1. juroci
2. akizuki

[lottekroon Friend lottekroonJoin date: January 2013Posts: 3Downloads:0Uploads:1]

#484494

Hi Tom,

Thanks a bunch for all the great input, it has been really helpfull to me so far! I do have one question… I work with the JA Vintas template and have changed my Google font API settings. I changed the global font to ‘Marvel’, which comes out great but is a bit too small. I managed to enlarge the font size, but unfortunately the titles within my text are following suit, even though I don’t want them too. Also, I can not change their font, so there must be another way of accessing them… I have a screenshot so you can see what I mean (I’m currently working in MAMP), but it won’t upload. Tell me if you need it, I’ll send it to you some other way then.

I really hope you can help me! Thanks in advance!

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#485640

What steps did you take to try to enlarge the font size?

[lottekroon Friend lottekroonJoin date: January 2013Posts: 3Downloads:0Uploads:1]

#485642

I went to my google API font settings and I enlarged it though the custom css settings. This does work, the font gets smaller and bigger… The problem is that the titles become huge and the body text (which was kind of small) becomes pretty much normal

[Author]

Posts