Hi

Thanks for contacting us and sorry for your issue, Could you please give me your site URL? So that I can check.

-Regards.

Hi,

There is no URL yet; this is just a very first test. I simply inserted a logo into the template as specified. Unlike your URL,

https://www.joomshaper.com/joomla-templates/justice

the color of the inserted logo does not change.

What technique did you use to make the logo color change from white to black as shown in the screenshots above?

No, a transparent background is not the solution.

As soon as I insert a logo in SVG format as intended via Template Style, the color of the logo is no longer switched.

I took a close look at the HTML code of the generated page. In the HTML code of the generated page, the logo is loaded from the server as an SVG file. This means that it is technically impossible to change the color. The color specified in the SVG is used. This technology does not allow to change the color.

If I do not insert a logo and use the template as it is delivered, the logo changes from white to black, as shown in the screenshot above.

Here, too, I took a close look at the generated HTML code of the page. The logo is not loaded from the server as an SVG file. The individual graphic elements of the logo are inserted directly into the HTML.

The graphic data is apparently read from the logo svg file and then integrated directly into the HTML code. This makes it possible to control the colors via CSS. The insertion of the graphic data into the HTML code is apparently implemented via a PHP script, I reckon.

My question is: How is this technically implemented? What do I have to do to insert a logo in the same form as in the original template?

Accessing the website and the admin page does not help here. My question is a very basic technical question that I have not found anywhere in your documentation.

Hi,

I have to check it from your site, Please knock me here when it will be available. To facilitate a thorough investigation of the issue on our end, we kindly request that you establish a staging site. Please share the login credentials for the staging environment with us. It is essential to ensure that only the staging site details are provided, as this precaution will allow us to address any concerns without impacting the live site. Our goal is to maintain transparency and ensure a seamless experience for both your team and our support staff.

Thank you for your cooperation.

Of course, I can give you access as soon as a domain for the website is available. However, the website will then be behind .htaccess, for which I will need your IP address.

Actually, all this effort is unnecessary because it is a fundamental matter, as I have described.

All you need to do is take a freshly installed Justice template and insert a logo in SVG graphic format into the template styles. Quick and easy.

You will see that the color of the logo does not change. It cannot change because the Justice template is designed to load the entire SVG file from the server. That is the design of the template. With this technique, it is not possible to change the color of the logo at all. You can ask any developer and they will confirm this.

As long as no logo file has been inserted into the Justice template styles, a completely different technique is used for the example logo. This is the technique I’ve described above. In short, there is apparently a PHP script that reads the graphic elements from the SVG Logo file and inserts them into the HTML of the page. Any developer will confirm this immediately.

My question now is simply which PHP script does this and how you have implemented it in technical detail so that I can do it too.

Hi

I have to ask about it to our DEV team. I will let you know then. Allow me some time please.

Hi

Thank you, I understand that it will take some time. Developers are usually very busy. But I think, if you show them my text, they will understand the point immediately.

Thank you for your detailed explanation and for clarifying the behavior you are observing. I understand why you assumed a PHP-side manipulation of the SVG, and I appreciate the time you took to describe your findings.

First, let me apologize for the inconvenience. To address your question directly: there is no PHP script parsing the SVG and injecting its paths into the DOM for color manipulation. The color handling is done entirely on the frontend via CSS.

Here is how it currently works in the Justice template:

1. The example logo that ships with the template is provided as inline SVG in the DOM. Because the paths are inline, CSS is able to target them and change their fill color when the header becomes sticky.

2. When a user uploads a custom SVG through Template Styles, the SVG is still inserted as inline, but due to a different internal structure of the uploaded logo compared to the example logo, the CSS-based color manipulation does not work. The selectors used for the template’s color transitions cannot properly target the paths of the custom SVG, so the color change does not take effect.

3. There is no PHP logic responsible for recoloring or restructuring the SVG. Everything is handled through CSS selectors applied to inline SVG paths.

We fully acknowledge that this behavior is not intuitive, especially when different SVG structures result in different outcomes. After discussing internally, we have already aligned on an improvement for usability:

In an upcoming release of the Justice template, we will introduce a dedicated field for the sticky logo. This will allow users to assign a different logo for the sticky header state without relying on inline SVG path manipulation or CSS targeting assumptions.

If you prefer not to wait for that release, we can configure the dual-logo setup directly on your site. For that, we would only need temporary Super User access.

We appreciate your patience and your technical observations. If you would like us to proceed with the manual setup, just let us know and we will take care of it.

Thank you, Atick, a lot for your detailled explanations. Appreciated!

there is no PHP script parsing the SVG and injecting its paths into the DOM for color manipulation. The color handling is done entirely on the frontend via CSS.

Yes, that's how I analyzed it too. Color handling is done exclusively via CSS.

I then asked myself how the graphic code from the SVG file gets into the HTML code of the page. That's what I mean when I say that there is a PHP script for this.

I think I've found the PHP script:

/templates/justice/features/logo.php

The following file also seems to play a role:

templates/justice/headers/4-FullwidthLeft/header.php

It is perfectly clear that if these conditions are met, the color can be defined very easily using CSS.

I am very pleased that you will be implementing the option to change the color of the logo in the next release.

Thank you very much for offering to help me in advance. We are currently in the early evaluation phase of the new website and still have a lot of work ahead of us. So we can wait a little with the logo.

Thank you for your detailed analysis and feedback.

You are correct that the logo markup passes through the template’s PHP layer (/templates/justice/features/logo.php and the header file you mentioned), but this only outputs the SVG inline—it does not modify the paths or handle color changes. All visual modifications, including the sticky state behavior, are handled on the frontend by JavaScript and CSS. The color transitions work when the SVG structure matches the template’s selectors; otherwise, they won’t apply.

We’re glad that the upcoming sticky logo option will simplify this process by allowing separate logos for normal and sticky states. When you’re ready, we’re happy to assist with implementation, but there’s no urgency.

Thank you again for your insights and careful review.