Hello Orlando Browne

Sorry for the inconvenience. There could be any CSS issue that creates the issue. Please allow Bangladesh (BD) location access to view your site and investigate.

Best regards

@Ofi Khan... Tanks for your answer. The URLs are provided in the question..

Hi. First, do not use the IDs, but use the class name (CSS Class field in each addon). Then one line of code will be enough instead of two and it is cleaner and universally. And in the future, if you want somewhere else such a button, you will be enough to insert the same class name in CSS Class Field.

Secondly, your site is not available because of the settings of your Firewall for RU. Therefore, I can not say anymore seeing your code in the contextual environment. I think Ofi meant the same thing - he cannot access your site because of the firewall.

Yes, the firewall is blocking me to acces your site. Please turn it off to check your site.

Hi Pavel,

Thanks for your insight and advise. I will try that to start with. Hopefully it is enough to solve the issue. I wil get back with the result.

But just in case, I have allowed RU through the FW @Ofi Khan... also Bangladesh has been allowed. Sorry for misunderstanding before.

Hmm... Pavel, I tried your suggestion, but then both buttons do not display the image. Using ID at least one works...

I think the problem is simply in the wrong code. But I still can not see. Internal pages are not available. Only main URL is available.

And by the way vertical-align is used only for inline elements and table cells. Only for academic interest, that it will works, your button should have property display: table-cell or display:inline. But this outdated approach for the button is not used now.

Somehow the FW changes did not stick. Could you check again please at your convenience? Thanks..

Mysterious problem. I tried two identical code in the same place in custom.css, but for some reason it works alone, and the other is not.

You use too much comments, this can lead to syntactic errors.

Use the ID only in the extreme case when there is no other output. Now you have a lot of IDs used in CSS code. It is very difficult to edit and track changes. It is possible, to use the IDs is the cause of your problem, it is somewhere redefined elsewhere code or in the addon settings.

And good practice continue to use the custom.css file, but not Template Options -> Custom Code -> Custom CSS.

Hi Ofi Khan, (and @Pavel)

Thanks for your suggestions. Adding:

.claves-button::before {
    content: url(/images/qrs_images/claves_zonder_achtergrond_kleur.png);
    vertical-align: -75%;
}

to Template Options -> Custom Code -> Custom CSS and refering to "claves-button" (without quotations) in both of the add-ons' CSS Class option Solved the issue.

Could you explain why before it was working for only 1 button, and now when putting css. directy into template options it works allaround?

Before I was doing all of my CSS- styling trough: Extentions > templates > templates... Then selecting the helix template. Then: CSS > Custom.css What is the (main) difference? As both concern the same Template?

tahnks in advance for you answer.

Could you explain why before it was working for only 1 button, and now when putting css. directy into template options it works allaround?

As I mentioned above, your code and code provided byi Ofi is absolutely identical, but for some reason your code does not work, and the Ofi's code works. I checked every letter for the compliance of Latin writing, but did not find the reason. Riddle.

Code added to Template Options -> Custom Code -> Custom has a higher priority in front of any CSS files, since this code is added directly to < Head> </ Head>. But this is the reason why it is not worth using. It slows down the speed of your site. Now in your < Head> </ Head> a lot of code. Write the right code and continue using the custom.css file.

Please follow this documentation. It is better to use css/custom.css file for additional CSS.

Ah.. @Pavel, thanks for the explaination. It is only that small piece of code in de <head> ... </head> so should be ok i think? Also... with production mode on the css is (re)located in a seperate file for the page.

@Ofi khan, Yes i generally use css/custom.css file for additional CSS. So that is good. Thanks both.