Use the Module Class Suffix to change the font-size of Menu

[ying789]

I am using Protostar.

Can I use the Module Class Suffix to change the Font-size of my Menu? And Make the font bold.

I am researching the Module Class Suffix. It seems to me you must know a list of class name and know which one does what. The list of name comes with each template? If I am right, where can I find that list of class name?

[imanickam]

You could use tools such as Firebug to check what is/are the class name(s) used for the menu or menu items.

Review of the document https://docs.joomla.org/Using_Firebug_W ... la_Website would be of help.


You could also check the HTML created for the page - this option is generally available in the browsers like Chrome and Firefox; check the option "View Page Source".

[ying789]

I tried with other guidance (https://www.joomlashack.com/blog/tutorials/suffixes/) because I can't open the download .swf file. I learned the concept behind Module Class Suffix already. I have taken the CSS basic class before. I am applying all my knowledge but I still can't make it. Let me pose a few specific questions:

I want to make the font of main menu item bigger and bold.

My steps:
1. Inside my main menu Module, it already has _menu in Module Class Suffix before I do anything about it, I don't understand why.

2. Using Chrome developer Tool, It seems to me the menu item is a list item <li>. Each list item has a class name. For example, the first item on main menu has a class called item-101, the second item has a class called item-151. I didn't see anything like div class = "moduletable.."from the source code.

Before I try to write some css code on my own style sheet, I think I should figure out why my source code doesn't look like what the tutorial says.

[ying789]

This tutorial teaches you how to use Module Class Suffix: https://www.joomlashack.com/blog/tutorials/suffixes/,

It says if we put a "hello" in Module Class Suffix of any module, we will see <div class ="moduletablehello"> show in our source code. Then we can change the style of that class of moduletablehello in our user.css sheet. However, after I put a hello, or even "space" hello, I still don't see any tags like <div class= "moduletable"> in my source code. Has Joomla 3.9 change how Module Class Suffix works?

[imanickam]

Providing more information such your site's URL and the template being used would help others to review your site and offer suggestions.

[Per Yngve Berg]

Don't you see the module class suffix get added? Your template may use other class name than modultable.

[ying789]

My site : https://readeraid.club/
The template I am using is Protostar.

On my "Popular tag" module, I already added "hello" to Module Class Suffix. You can find there are two lines showing with hello in my source code:

1. <div class="well hello">
2. <div class= "tagspopularhello">

I put the following CSS codes in my user.css of Protostar, but nothing changed at my popular tag module.
1)
.well hello h3{
backgroud-color: red;
}

2)
.tagspopularhello h3{
backgroud-color: red;
}

Does anyone know what's wrong with my work?

[SharkyKZ]

Your selectors are wrong. Should be

Code: Select all

.well.hello h3

And the other will not work because .tagspopularhello doesn't contain h3 element.

[ying789]

Thanks SharkyKz,

I changed my CSS code to the following but still don't work.

.well .hello h3{
backgroud-color: red;
}

.tagspopularhello {
backgroud-color: red;
}

By the way, do you know why I need to put "h3" on the first line? I was just following what the tutorial does. And why there are two classes I need to change but not one? The tutorials only change one class (moduletableblue). It has tagspopularblue appearing on his source code but he didn't do anything about it. I removed .tagspopularhello { } from my user.css but still don't work.

[SharkyKZ]

My bad, it should be

Code: Select all

.well.hello h3

h3 selector affects <h3> element. In this case .well.hello h3 affects the module title.

Which selectors to use depends exactly on what you're trying to change. Whether you need two rules or not again depends on what you're trying to change.

Also, you have a typo in background.

[ying789]

Thanks it works. After I fixed the typo and eliminated the blank space before the second dot. The final code for testing the Module Suffix Class is:

.well.hello h3{
background-color: pink;
}

However, my goal is to increase the font-size. I used the following code but it's not working:

.well.hello h3{
background-color: pink;
font-size: 50px;
}

Anyone knows what's wrong with my code?

[ying789]

In fact, the code for changing the font-size is working. It's just the cache. After a while it shows the change. I have no issues.