I have put together a “lower-thirds banner” generator on my website, where users can easily tailor the various parameters of the banner, including the text, the colours, the speed of animation, the fonts and font-sizes, the icon to use etc.
See here for instructions: Resources for Shotcut
EDIT - various problems were reported but they are all now fixed, thanks to Namna and Paul2.
Hi @Elusien
Nice one, very cool but either there is a bug or I’m using it incorrectly.
The screenshot below shows the steps I used.
In step 2, I copied the code from the fontawesome site and pasted.
I then press the “Rerun animation and create HTML” button.
The generated code shows the icon’s code (as can be seen in step 4) but the
animation has not updated on the page.
Mea Culpa, I managed to reproduce the problem. I’ll fix it now.
EDIT: Fixed version now on the website (@Paul2)
Nope, no change.
Maybe the changes have not been applied yet on your server, although I did refresh the page a few times.
I notice also now that even the default icon when your app loads “fab fa-twitter”,
is not the correct one.
It shows just an empty square
whereas the actual icon should be:
Am I going crazy? …
Does the Twitter icon show when you are on my App page and not when you run the resulting HTML? Or is it missing when you are on the APP page? What browser are you using?
Are you online when you run the resulting HTML since it access fontawesome icons via the directive:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet">
EDIT: Ignore this - you appear to be reloading from your browser cache, not from my website. See below post.
You are not picking up my changes. Can you do a HARD Reload (right click the browser reload button - or press CTRL while clicking the reload), or clear the browser cahe.
Yep, reloaded the webpage and am online.
Can’t see the twitter icon in both cases.
Browser is Chrome running on MacOS.
Perhaps others can chime in and let us know if works for them.
I have changed the default icon to the HTML5 icon “<i class="fab fa-html5"></i>” can you check that when you visit my webpage this is the text that is in the box., which will prove you are pickg up the new version. It is definitely working for me, so I’m at a loss. I’m using Chrome too, but on Windows 10.
EDIT: The code near the bottom of the window should say:
<div class="icon"><span class="icon_code"><i class="fab fa-html5"></i>"></span></div>Je suis aussi sous OSX et Chrome,
J’ai bien rechargé la page (html5) et l’icone n’est toujours pas bonne
I’m also on OSX and Chrome,
I have reloaded the page (html5) and the icon is still not good
Thank you Can you please show me what the output says at the bottom for:
<div class="icon"> .....Thanks for the confirmation.
I think I found the problem.
Line 177 of your generated code.
It is:
It should be:
<div class="icon"><span class="icon_code"><i class="fab fa-html5"></i>"></span></div>
Thank you both for this. I have now fixed the webpage. It should not say:
<div class="icon"><span class="icon_code"><i class="fab fa-html5"></i></span></div>
It’s strange that the wrong code worked on my Chrome browser on Windows 10.
Sorry, but it doesn’t work.
EDIT : Do you edit your post ?
OK, I really should look more carefully. I have now fixed this and updated the app yet again. I cannot understand why my system is quite happy with these typos, but yours isn’t.
I just fed it through the W3C HTML validator and it came out as having no more problems.
With Firefox
It seems that the size isn’t good
There seems to be a problem with Fontawesome and Firefox, see here:
I will see if there is a way to get round it.
Thanks @Elusien the generated code is all good now, on Chrome at least.
I have not tried Firefox or Safari.
It however still does not update the icon on your app, it always just shows an empty block.
Perhaps your server is blocking it as it sees it as a cross-site script when you link
to an external site for the icon?
Just a guess, not a server guru.
Everything else like colours, text etc is updated when “rerun”.
I’m really at a loss to explain why the icon does not update. I have tried several different icons and each one updates perfectly.
I’ll go through the code in the morning (it’s now midnight here) and see if I can see why it happens for you but not me.
You couls always edit the resulting HTML code manually. But I appreciate that isn’t a long-term fix.
Not a problem for me, but can understand it may be for others.
A related question on this, since I (and others) can’t use ShareX and only OBS (don’t use Windows),
what browser component does OBS use?
Is it the same code base as Firefox (so it will have the size issues), or is it more like
Chrome where it works perfectly?
