How to Style Joomla Articles with Joomlashack Templates

styling articles

One of our template customers asked us how to style their Joomla articles.

Joomla is flexible enough for any beginner without coding skills to tweak an article style.

In this post, you will learn a few tips for styling your Joomla content.

You can style your Joomla articles in many ways. But there are also some fundamental guidelines that will save you time and effort. 

Tip #1: Don't use page builders for styling Joomla articles

If you are interested in building a Joomla site, sooner or later you will hear about page builders.

They deserve their following. But don't think of them as of your first tool for styling your Joomla content.

If you run your site on one of the Joomlashack templates, you already have some powerful and easy to use styling to play with.

Learn to use what is already available to you and save yourself time and energy.  

Tip #2: Keep your content separate from their design

Another common mistake is to apply CSS styling rules directly inside your articles' HTML code.  

This direct approach may make sense if you only need to design one or two Joomla articles. However, to style a good number of articles this way will be extremely time-consuming. 

Treat your articles purely as the containers of your site content. Leave their styling to your Joomla template(s).

Tip #3: Be aware of styles available with your template

Joomla templates are there to keep your Joomla articles content and their design separated.

If you purchased one of the Joomlashack templates, you already have some pretty cool styles available for you.

Here you are a few examples of styles readily available for your article text in our templates:

  • Enlarge a paragraph to stand out from the rest of the text.
  • Make a paragraph look like a small print.
  • Increase your font weight.
  • Emphasize the text meaning with color. For example, convey a warning with yellow, error with red, and information with blue.
  • Stylize abbreviations and acronyms to show the expanded version on hover.
  • Emphasize quoting blocks of content from another source within your document.
  • Quickly make terms and descriptions lined up side-by-side. 

Use them to customize how your Joomla articles look and feel.

With our templates, you can also stylize your articles' headings, tables, images, buttons, icons, and forms.

Tip #4: Learn how to apply styles available in your template

Applying a style is actually applying a CSS class. Don't fret if this term is new to you.

Explore what CSS classes apply to what basic styles in our documentation written specifically for beginners.