Why not just use green tick for "published" and red cross for "unpublished" ?

Good point.

Why not create a template override? It's pretty easy to do! You could replace the default icons with whatever you like.

I think the default way should be the same as Joomla convention.

It is not true in frontend. In backend yws, but in frontend, there is not style anymore. Because frontend should adopt frontend tenplate style. So if your template support icons colors you will see it in colors because it is the same HTML markup. If you display the same HTML in backend tenmplate you will see what you expect.

But this is frontend. No rules here and no convention. One of the most ingnorent pars of Joomla is a frontend. I think Joomla developers do not even have "convention" word in their vocabulary.

Well, I checked that Sale list page again and found out that you did not use "image" for those publish status icons, but Font Awesome, right?

I also checked the Joomla backend pages, for example, the plugins list page, there are green ticks and red crosses for publishing status. They are also in Font Awesome format, not real image.

Why those status icons at backend can have colors but these ones at frontend can not?

Could you add some CSS code to Emerald to make these publishing status icons show ticks in green and show crosses in red? I think every Emerald user will love this change.

Thank you.

baijianpeng show ticks in green and show crosses in red

+1
(can't imagine someone would need the opposite i.e. green cross, red tick ;) )

BTW, you can easily add some color with custom CSS rules. Check your template for respective options. Depends on template provider. Most likely there is a custom.css file.

Examples:

Probably, the icons have only one purpose, so you might change the color for all occurencies:

i.icon-unpublish {
color: red;
}

i.icon-publish {
color: green;
}

Or make sure you don't change any unwanted icons. Then you have to add an extra class of a certain container element...
For instance in J! Protostar, you have certain body classes to target a specific page, itemID or component context:

.com_emerald i.icon-unpublish {
color: red;
}

.com_emerald i.icon-publish {
color: green;
}

Colors are quick examples. You may choose the J! defaults or put any HEX color code you like (#123456 etc.)

hi @pepperstreet , Thank you that you can understand me.

I know custom CSS will do the trick. I just want the developers of Emerald know that this great software SHOULD show those icons in this way BY DEFAULT.

Well, now I had got this accomplished by custom CSS as following:

.icon-publish:before{
color: green;
}
.icon-unpublish:before {
color: red;
}

I did not find any CSS class named "com_emerald" so I have to use a global selector here.

Maybe Emerald should have a CSS class named "com_emerald" for its top container of the component output area?

Thank you.

baijianpeng SHOULD show those icons in this way BY DEFAULT.

Agree.

Maybe Emerald should have a CSS class named "com_emerald" for its top container of the component output area?

Great minds think alike! You can read my mind :) ;)

Already made a similar suggestion for Cobalt/Emerald in other topics. Always good to have a special class on the outermost container. Or even on other important structural elements. Great for customization and fixes.

The com_emerald on the body is just an example from Protostar. Some other templates/framework has a similar feature, but not all.

Gents,

A few other options, still:

E.g., set a page class for the Joomla menu item.

Or create a view override and add as many custom classes at as many containers and other elements as you like, even for those very specific icons.

There could be more, but then it'd get silly, admittedly... ;)

Other than that, I'd agree with what Sergey said in his most recent post here above: extensions should come with as little CSS as possible and rather leave it to the templates. Only, unfortunately, there's then little consistency these days with all sorts of individual "hipster template" styles... but who to blame.

rockon E.g., set a page class for the Joomla menu item.

Good point. PageClassSuffix would be great... if Emerald would make use of it. Currently it does not?! :(

Or create a view override and add as many custom classes at as many containers and other elements as you like, even for those very specific icons.

Yep, but this is not optimal for a 1 global override, if there are constant extension updates.
It might be a better and saver option, if there were Alternative layouts.

Also template or global parameters would be a flexible solution. One could change class names easily.

baijianpeng Well, I checked that Sale list page again and found out that you did not use "image" for those publish status icons, but Font Awesome, right?

I did not use either image or fontowesome. I have used Joomla core <?php echo JHtml::_('jgrid.published', $item->published, $i, 'emsales.', $canChange); ?>. SOmething like that. I have no control over how it renders.

Although in Emerald 10 I include little script that ensure that icons are there.

Sergey I have no control over how it renders.

What about adding a global option for a custom CSS file? One for Emerald and one for Cobalt.
You may know this from many template providers incl. J! core Isis admin template. The latter has a simple logic: It checks for the file with a specific name... if it exists, it loads it.

Actually comparable to Cobalt template's CSS and JS files. Don't they load automatically if they have the same filename.

if it is custom CSS that is created by user, why not to use templates custom.css to add rules?

Sergey if it is custom CSS that is created by user, why not to use templates custom.css to add rules?

Agree.

There is no need to create a "custom css file for a certain extension", the site admin can just use the one of his template.

Sergey if it is custom CSS that is created by user, why not to use templates custom.css to add rules?

Partly agree. Many templates have a similar feature, but not all ;)
Besides I like the idea to organize and relate customizations.
I remembered the other discussion and thoughts about how to deal with Bootstrap versions and possible default CSS styling etc.
Since it is almost impossible to deliver a 100% compatibility and solid appearance...
I would tend to supply a DEFAULT CSS for minimal styling AND a CUSTOM CSS for complete customization.

Just my 2 cents ;)

I was hoping that some community members will create additional templates and share. I thought that wen time come someone will create UIKIT templates set, someone BS3 set and so on. But this idea filed. Now I have to create all thouse things and I cannot.

Sergey UIKIT templates set, someone BS3 set

Would really like to jump in... and help out...!
but aren't there more deeper dependencies to core JUI BSv2 !?
I guess there is more BS markup created before it gets to the final template, isn't it?

A full conversion takes much more work i.e. menus, dropdowns, form elements, buttons, icons etc.

Besides it would take further maintenance time if default templates get an update.
I still think, that the default templates could benefit from CUSTOM CLASS PARAMETERS. At least for important structural elements that create the layout (css grid classes etc.)

This issue does not need any further arguments.

"One custom CSS file" is better for SEO than "many custom CSS files in different folders". That is it, this is the SOLID SINGLE reason that we SHOULD NOT create a custom CSS file for Emerald itself individually.

If some Joomla site template does not offer a "custom css" feature, the site admin knows how to load ONE SINGLE custom css file with some 3rd parth Joomla plugin. You don't know? Try to search "custom HEAD" in JED.