Joomla Featured Articles Module
Ever wanted to draw attention to a few particular articles in your joomla website? This simple module allows you to do just that. You just specify the content IDs of the articles you want to feature, and they will their title will get displayed in a simple module.
The idea behind this module is that you might have written a few articles which you like particularly and want to display on the frontpage or in some particular menu link. You could create a new menu to display them and choose the items you like, or you could use this simple module. Just install using the standard module installation. Then you have the following parameters:
- Content Item IDs - the content item IDs of the articles you want to feature. These must be enclosed in brackets (), and if there is more than one they must be separated by a comma e.g. (1,2,3)
- MenuID - the menu ID which this article is related to, (blank if n/a). This ensures that any modules associated with the menu item is displayed accordingly.
- Title Class - the class of each article title
- Inline CSS Style - Extra inline CSS style to apply to the module div tag
If you like it, please take a moment to write a small review on the Joomla Extensions site , vote for us, or link to us!
The module should be fairly easy to use, however if you find any problem while use it, please drop a line in the comments below or contact, and we try our best to support you. If you like it and used it, please do leave a comment with a link to your site, it would be good to know that other people have found it useful. We consider this to be just a drop in the open-source ocean.
If you'd like to see it in action, just take a look to the left (Featured Articles).
There are three versions, one for 1.5 (native), which has two layouts (default which uses Divs, ULs and LIs, and table layout which uses tables). There are another two versions for 1.0. The two versions for 1.0 are for DIVs and tables respectively.
To install the module, simple go to (Extensions > Module Manager for Joomla 1.5) or (Installers > Modules for Joomla 1.0), choose the file you have downloaded above and click on the upload and install button.
Configuration of the module is done via Modules > Site Modules. Click on the Featured Articles item, and you will see a screenshot similar to the one below:
You then need to find the content item ids of the articles you want to display. This is done by going to Content > All Content Items, click on the first article you want to display and in the Publishing parameters in the right you will find the content item id as shown in the figure below. The content item id is 38 in the example below.
Find the content items of all the articles you want to feature and then in the Content Item Id parameter of the module, enter all the item ids. If you want to feature articles with content items ids 37, 25, 38 and 50, the Content Item Id parameter of the module will be (37,25,38,50) as shown in the screenshot above. This parameter is required, and unless the format is (37,25,38,50) with your content ids instead of the numbers, the module will not work.
The rest of parameters are:
- Ordering - determines the way the items are ordered when shown
- Menu Item Id - this is the menu item ID you want the articles to be associated with it. This is used for determining which other modules are shown. Leave this empty if you do not understand what it does.
- Title class - this is the CSS style of the Title text of the article. Leave this empty if you do not understand what it does.
- Inline CSS style - extra inline CSS style which is used to be able to apply a particular style just to this module. Leave this empty if you do not understand what it does.
- Module class suffix - this allows you to create individual styling
- UL CSS style - UL CSS style to apply to the unordered list HTML tag. Leave this empty if you do not understand what it does.
- LI CSS style - LI CSS style to apply to each item in the list. Leave this empty if you do not understand what it does.
The give the module a position, publish it and you're up and running.
Update: Thanks goes to Ryan which modified the code slightly to allow each item in the featured articles module to be associated with a menu item, and thus keep any modules associated with that menu item.
Please post to the forums of you need help in configuring the module.
Styling the module to the Look and Feel of your website
Please note that there are two versions of the module, and the way their styling works is different. You should download both modules, and see which one works best for your website. The best way to determine which module to choose is to take a look at the html generated by your template. You should decide where you will be putting, and then take a look at the html of that section of your template. You do this by viewing the source using FireFox or Internet Explorer.
Let's give an example of this:
I have decided to place the Featured Articles module below the main menu in the left column, and keep the same style of the main menu items. Therefore, I view the source of the current page (right click, View Page Source) and search for main menu text. The main menu is generated by the following html code.
As you can see, the main menu makes use of tables. Therefore, to keep the same style, I should use the tables version of module.
On the other hand, if you look at your website's source and the position where it will be is not rendered via tables, but via divs, then you should use the div version.
As you can see in the image above, here we have rendering which is done only via unordered lists (UL) and list items (LI), which shows up in your site as a bulletted list. If the area where you will be putting the module is rendered similar to the one above, then you should download the div module.
Styling the tables version
The tables version of the module should be quite easy to style, provided that the module works well with your website. Once again, the best way to style your module is to look at modules or parts of your website which you already like, and attempt to copy these. The way to do it, is to once again look at the code which is generating your code. Continuing on the example of styling the module to look like the main menu, I once again view the source of the page and find that each item is styled using the mainlevel class.
Therefore, the only change required, is the adding of the mainlevel in the Title Class field of the module.
Styling the DIV version
The DIV version is rendered by having a DIV tag, within which there is a UL tag and several LI tags. Therefore, the first styling which will be applied is the styling defined for the UL and LI tags in your template. Typically you would want to change this. The most popular styling would be making the Featured Articles module look like the Lastest News module or some other module which already exists. The module allows you to apply other styles to the UL and LI class. You therefore need to look at the way HTML code which renders the latest news module and adjust the module parameters to replicate the class styles in the featured articles module.
Typically, you would need to add a class style which exists in other modules (Latest News or Most Read) to the UL / LI / Title class parameters of the module. This has to be done through some trial and error.
CSS Styling Service
A lot of people have been having problems styling the module. The module supports any styling you require, though it seems that most people have trouble configuring the styles. Most requests have been for helping to style the modules to the look and feel of a particular website. I will be publishing some articles soon. For those who don't understand the way CSS works, or want a quick touch up of the module to suit your site's style, I'm offering a special service, priced at €10 to customize the module. I have helped numerous people in the past, unfortunately, time has become so limited that I need to start asking for a small fee for this service. If you are interested please contact us
If you liked this module, please consider buying me a beer. Every drop counts! No guarantees that any donations will be spent on new development rather than beer, though every effort will be made to spend all donations on new developments.
Warning: Installing 3rd party extensions may compromise Joomla's security. Make sure that you trust any 3rd party extension that you install.
Want to supercharge your website?Our website loads FAST ... just 1.29 seconds. We're hosted on FAST InMotion servers We want YOUR website to be fast too, so we've gotten you an exclusive deal - 47% OFF for DART Creations friends + FREE domain! Check it out NOW!
Advertise on DART-Creations.com
DART Creations is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)
The SUMMER DESIGN Bundle
27 premiums fonts, 91 graphic packs for $29. Get it NOW - May Only!
New! DIVI 2.7 WordPress TeMPLATE + PageBuilder
You'll surely create a perfect website with Divi 2.7!