Re: com-content-categories small button? Topic is solved

[Madcustard]

Hi there

While looking at overriding via com_content/categories/default_items.php

I'm a little unsure about how to make the tiny ' class="btn btn-secondary btn-sm" ' look bigger ...
I guess if there was text or if the label was not empty (not sure label is the right term)
then that would make it look better - if I could add the text to the button 'Expand'

or something it would look lot more intuitive for guests than just a blank tiny square (looking 1em wide)

I'm hesitant to add extra code unless that's the only option, (As I'm not confident in my (novice) PHP skills )
so I wonder if there is a plugin option that could change this ?,

or would it be better to add a user CSS Tag or ID to this button to make it bigger &/or to add text?

I've had a good look through the Joomla forum just in case someone had a similar issue in the past
but I could not see anything related,

The volunteers here at the Forum are great, so I appreciate any advice offered on how to tackle this issue

[Per Yngve Berg]

What template are you using?

https://getbootstrap.com/docs/5.1/compo ... utton-tags

[Madcustard]

That was a quick reply!

good point, I just tried it on the Cassiopeia template & I got a much better looking button!
I'm using a diff template, it uses light /dark modes (via a switch) which is supported by bootstap 5.3
although I've had to add the CDN to the template code
(but disabled it for now ( in '/* */' brackets) as it creates other issues with my template - which is not in the JED)

I will try changing the 'default' mode to match the Cassiopeia template for that menu option
in an attempt to keep the template but use the Cassiopeia small button style,

Thank you for pointing me in the right direction

[SharkyKZ]

The issue is that the icon font/CSS is not being loaded. icon-plus class should be showing a plus icon.

[Madcustard]

Yes , I'll keep trying to make it work for my customized template
Thanks for the help , I've got a better understanding now of how it should look
and I have a code reference now by using the original J4 Template
so thank you to everyone who's helped point me in the right direction
I can close this as solved for now -

[Per Yngve Berg]

Load the Icon font.

Code: Select all

<link href="/media/system/css/joomla-fontawesome.min.css?3f77e386c183eeca8a77cee1f0a35de9" rel="lazy-stylesheet" /><noscript><link href="/media/system/css/joomla-fontawesome.min.css?3f77e386c183eeca8a77cee1f0a35de9" rel="stylesheet" /></noscript>

[Madcustard]

Thank you, Its looking much better now I've added that first line of code
much appreciated! , thank you again (also for adding both Php & html options )

[Madcustard]

For future reference if anyone else is noticing a similar issue (and using another Template other than Casopiea )

'Joomla used to use the Icomoon icon library and then moved over to FontAwesome.
However, rather than changing all the class names from "icon-xxx" to "fa fa-xxx", they did some mapping in the CSS.
Which means that any templates developed for Joomla, need to also include this CSS mapping.'

Anyway, what you can do is add the following to your "user.css" file:

[class*=" icon-"],
[class^="icon-"] {
font-family: "Font Awesome 5 Free";
font-weight: 900;
display: inline-block;
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
}

.icon-minus::before {
content: "\f068";
}
.icon-plus::before {
content: "\f067";
}