The Joomlashack Blog

How to Customize Joomla Articles with the Wright Framework

Written by Steve Burge Steve Burge
Published: 18 October 2017 18 October 2017
How to customize your Joomla articles with JoomlaShack Wright template

Joomlashack's Wright free template framework is responsive, light, fast and easy-to-use. Wright makes it easier to customize your website's look and feel.

In this post, you will learn how to customize the design of Joomla articles, even if you don't know CSS or HTML.

  • Start by visiting the Wright Demo site > Documentation and Setup > Basic Styles:

Wright basic styles

Here you will find all the styling options available to you. You will learn how to style design of:

  • Topography
  • Code snippets
  • Tables
  • Forms
  • Buttons
  • Images
  • Icons

Options available under Basic Styles

For example, under the Typography tab, in the Lead body copy section, you will learn how to add the .lead CSS class to your paragraph tag. This will make your paragraph stand out from the rest of the text.

Styling lead body paragraph

Let's do just that. I will take one of the Joomla sample articles, Smart Search.

First paragraph before customization

  • Open your article for editing.
  • In your TinyMCE editor, go to Tools > Source Code:

Source Code button

Inside the first <p> tag, type in class="lead".

<p class="lead">

Adding CSS class .lead

  • Click OK to add the .lead CSS class to the article's HTML source code
  • Click Save to save the article with the .lead CSS class
  • Refresh your article and there you have it. Your first paragraph now indeed stands out from the rest of the text.

First paragraph after customization