Justice Template - Logo color switching - how to realize? - Forum | JoomShaper
Staff replied Templates

Justice Template - Logo color switching - how to realize?

Asked by Hans 9 months ago Last activity 7 months ago

In the Justice Template the Logo color is switching from white to black in the sticky header.

That looks very nice.

You can simulate it here: Justice Details

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

Screenshot 1

https://imgur.com/a/dDQbmdS

Screenshot 2, switching marked in blue

https://imgur.com/a/74OV2KF

If you now insert the logo as an SVG file in Template Options as specified, this effect is lost.

A white logo that was previously visible on a blue background is then no longer visible in the white header.

How can I embed an SVG file so that the logo's color switches again, just like in the original template?

16 replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
9 months ago

Hi

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

-Regards.

Hans Asked this
9 months ago

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?

Mehtaz Afsana Borsha Staff
9 months ago

Hi,

We have used a transparent background color for that. If you need any further help, you can share your site URL once it is available. That will help me check your issue.

-Regards.

Hans Asked this
9 months ago

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.

Hans Asked this
9 months ago

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.

Hans Asked this
9 months ago · edited

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.

Mehtaz Afsana Borsha Staff
9 months ago

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.

Hans Asked this
9 months ago

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.

Mehtaz Afsana Borsha Staff
9 months ago

Hi

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

Hans Asked this
9 months ago

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.

Atick Eashrak Shuvo Staff
9 months ago

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.

Log in to reply.