Different CSS style for Featured articles in a list

[elavd]

Hello,
I'd like some help in presenting the Featured Articles in a different way than the normal (non-featured) ones.

More specifically:
I have a menu that shows a list of articles from a specific category (called "News").
In this list, some articles are featured and some aren't.

My goal is to show this list in a way that the Featured articles have a different style (e.g. color) than the non-featured ones, so that can be easily distinguished.

For a example, I would like to make a list like this:

Title Date Author
1) News title 1 Date 1 Author name 1
2) News title 2 Date 2 Author name 2
3) News title 3 Date 3 Author name 3
4) News title 4 Date 4 Author name 4
5) News title 4 Date 5 Author name 5


Where the news #2 and #5 are the Featured ones.

Is this possible?

[elavd]

Anyone?

[rcarey]

I have a solution for you. This is a technique I use in my projects.

The key is to add a CSS class to the list item if the item is featured. That way you can use CSS to add the styling you want to titles of featured items - but of course, that styling will not be applied to non-featured items.

Assuming you want to apply this styling for the module that lists articles within a category, you will need to override that modules view file (or create an alternative layout for it). The file to override is
/modules/mod_articles_category/tmpl/default.php
You should place a copy of this file here
/templates/<my template>/html/mod_articles_category/default.php
Create the mod_articles_category directory if needed. Now this copied file should be overriding the original file.

Within this file, go to about line 86 (shortly after the "else" statement). replace the line

Code: Select all

<li>

with this

Code: Select all

<li <?php echo ($item->featured) ? 'class="featured-title"' : ''; ?> >

This does exactly what I stated for a goal - if the item is featured, we add a CSS class to the list item. You can name the class whatever you want, but I chose featured-title. Now you just add the styling as you want leveraging the presence of this selectively added CSS class. Keep in mind that you might need to create a CSS rule based upon multiple selectors, such as
li.featured-title a

The file mentioned handles grouping of items by their subcategories. If you are using that option, you will need to apply the change I stated on the other lines that add <li> to the HTML.

Let me add that creating an alternative layout is the approach to take in case you want some modules to behave this way, and others not to do so. All you need to do is copy the original default.php and give it a new name (like highlighted.php). This file can sit either directory mentioned above. Then apply the change to the new file. Once that is in place... If a module is to highlight featured items, select the alternative layout of "highlight." Modules left with the "default" layout will display using the default.php template.

[elavd]

Hello my friend and thank you very much for your detailed answer!

Unfortunately, although I did everything that you told me, I had no result...

I've created the folder "mod_articles_category" (because it didn't exist) and place the copy of default.php with the added code, but with no result.

My guess is that the page that lists the articles (from the specific Category named "News") is not handled by a module, so I have to change the code from another file than the

Code: Select all

/modules/mod_articles_category/tmpl/default.php

In order to help you point me to the correct file that needs changes I will explain this:

In the Main Menu of my site, I have a menu item that lists the articles of a Category (see the image attached below).

The articles are listed in a table form (with <td> tags, not <li>) so I thing that I need to change another file with a code similar than the one you wrote me.

But which file is this???
Can you please help?

[rcarey]

You are right - since I was assuming you were referring to a module, I gave specific instructions for adding this feature to a module. The same approach will work for a component, but it is slightly different.

The file you want to copy is
/components/com_content/views/category/tmpl/default_articles.php
and you'd override it under the template's html directory...
/templates/<my-template>/html/com_content/category/default_articles.html

The title is displayed in possibly two places within this file. Search for $article->title and you will find them. The first occurrance is the normal occurrance (the latter is less frequently used - its for when an article is listed but not accessible based upon the user's credentials). So focus first on the first occurrance.

For me, this was on line 106. What I did was add my code to the <td> tag a couple of lines earlier. Here is that line of code after I changed it:

Code: Select all

<td class="list-title <?php echo ($article->featured)? 'featured-article':'';  ?>">

You could also wrap the anchor <a> tag in div that inserts the class for featured items.

Code: Select all

<div class="<?php echo ($article->featured)? 'featured-article':'';  ?>">

...whatever it takes and suits you.

If you want an alternative component layout (actually, a new menu item type), let me know. That is more involved, but do-able.

Report back with the results, if you don't mind.

[elavd]

THANK YOU my friend!!!!!!! Your answer helped me and I fixed it!!!

In fact I've directly changed the code of the file:
/components/com_content/views/category/tmpl/default_articles.php

without copying to my Template's folder.

Do you think that it's safer to place my custom code to the Template's folder?

THANK YOU ONCE AGAIN!

[anotheruser]

You really should use the override technique as rcarey has described so nicely. The reason for taking that approach is because it protects your changes from being overwritten by future updates.

Editing core files directly is not a good idea and should be avoided where possible.

[rcarey]

Very glad I could help.

Yes, it is highly recommended that you place your changes in the override folder (under the template's /html folder). ...for the upgrade reasons "anotheruser" stated.

[elavd]

Thank you both once again!!!
I owe you one!

[uaintgotthisid]

I have a solution for you. This is a technique I use in my projects.

The key is to add a CSS class to the list item if the item is featured. That way you can use CSS to add the styling you want to titles of featured items - but of course, that styling will not be applied to non-featured items.

Assuming you want to apply this styling for the module that lists articles within a category, you will need to override that modules view file (or create an alternative layout for it). The file to override is
/modules/mod_articles_category/tmpl/default.php
You should place a copy of this file here
/templates/<my template>/html/mod_articles_category/default.php
Create the mod_articles_category directory if needed. Now this copied file should be overriding the original file.

Within this file, go to about line 86 (shortly after the "else" statement). replace the line

Code: Select all

<li>

with this

Code: Select all

<li <?php echo ($item->featured) ? 'class="featured-title"' : ''; ?> >

This does exactly what I stated for a goal - if the item is featured, we add a CSS class to the list item. You can name the class whatever you want, but I chose featured-title. Now you just add the styling as you want leveraging the presence of this selectively added CSS class. Keep in mind that you might need to create a CSS rule based upon multiple selectors, such as
li.featured-title a

The file mentioned handles grouping of items by their subcategories. If you are using that option, you will need to apply the change I stated on the other lines that add <li> to the HTML.

Let me add that creating an alternative layout is the approach to take in case you want some modules to behave this way, and others not to do so. All you need to do is copy the original default.php and give it a new name (like highlighted.php). This file can sit either directory mentioned above. Then apply the change to the new file. Once that is in place... If a module is to highlight featured items, select the alternative layout of "highlight." Modules left with the "default" layout will display using the default.php template.

This seemed useful for anyone, so I added a pull request for the Category Blog View.