Justice Template - Logo Color Switching - How To Realize? - Question | JoomShaper

Justice Template - Logo Color Switching - How To Realize?

H

Hans

Template 1 month 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?

0
22 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 month ago #214255

Hi

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

-Regards.

0
H
Hans
Accepted Answer
1 month ago #214309

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?

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 month ago #214352

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.

0
H
Hans
Accepted Answer
1 month ago #214364

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.

0
H
Hans
Accepted Answer
1 month ago #214367

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.

0
H
Hans
Accepted Answer
1 month ago #214368

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.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 month ago #214411

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.

0
H
Hans
Accepted Answer
1 month ago #214440

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.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 month ago #214554

Hi

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

0
H
Hans
Accepted Answer
1 month ago #214556

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.

0
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 1 month ago #214627

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.

0
H
Hans
Accepted Answer
1 month ago #214661

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.

0
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 1 month ago #214691

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.

0
J
Jeanette
Accepted Answer
1 month ago #216065

Hi, This answers my question regarding changing the logo when scrolling the site. My logo is white and when scrolled the logo are not visible anymore cause of the color of the sticky header. I need the sticky header field option for the logo. Is this available now or can you help fix this? I have enclosed the login info.

0
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 1 month ago #216101

Hello Jeanette,

Thank you for reaching out. Could you please check now? I have added the option for the sticky header logo and also set a black version of your logo that was available in your media manager.

Please let me know if everything appears as expected or if any further adjustments are needed.

Best regards

0
H
Hans
Accepted Answer
1 month ago #216067

Hi, as Atick Eashrak Shuvo promised, he will provide a solution.

Our new site is still under development, so there is no rush for us yet. If we need it and Atick Eashrak Shuvo is not ready, we will see if we can reverse engineer it. I basically understand the principle.

0
J
Jeanette
Accepted Answer
1 month ago #216068

Hi Hans, I am sure they will provide a solution, but in my case the project is almost ready so i actually would need a solution or a temporary hack for this very soon.

0
H
Hans
Accepted Answer
1 month ago #216069

Let us hope, Atick Eashrak Shuvo will provide the solution soon. If not, just get back to me, I already have a solution in my mind. Should be feasible.

0
J
Jeanette
Accepted Answer
1 month ago #216129

Atick - waow, perfekt! Thank you so much, i really appreciate your help fixing this for me, especially since i will go over the site with my customer today :)

0
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 1 month ago #216139

You are very welcome. I am glad to hear that the solution worked as expected. Please feel free to reach out if you or your customer have any further questions during the review. I will be happy to assist.

I have a humble request: If you could spare a moment to leave us feedback, it would mean a lot to our team and inspire us to continue improving. You can share your review at the following links:

  1. Trustpilot Review
  2. SP Page Builder Review
  3. EasyStore Review

We truly appreciate your support!

0
J
Jeanette
Accepted Answer
1 month ago #216160

I have given a review at JED before so just gave you a review at Thrustpilot.

Keep up what you're doing - you are doing great! Your immediate and helpful support is very appreciated :) Thanks :)

0
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 1 month ago #216210

Thank you very much for taking the time to leave a review on both JED and Trustpilot — we truly appreciate your support.

Your kind words mean a lot to our team. We’re glad to hear that our prompt and helpful support has made a positive difference for you. Feedback like this motivates us to keep improving and delivering the best possible experience.

Thanks again for your encouragement, and please don’t hesitate to reach out if you need any further assistance.

0