Resource icon

Free Animated lower thirds with control panel 2020-04-12

Download
Overview Reviews (21) History Discussion
lajambe said:
This is absolutely fantastic. Thanks you so much for the tip. I'm very new to html, and I have a follow-up question. How can I change the colors in the lower third text to a bright white (#FFFFFF). If someone could point me in the right direction, this rookie would greatly appreciate it. Cheers.
Click to expand...

Did you get an answer?

I would love to know the exact same thing the font colors fade away in my in my screen

Bill Moldt
 
kadesemowo said:
Thanks @RichieTee for the feedback. Deeply appreciated.
When using colour picker (HTML5 or js), the (colour selector) popup doesn't comes up. This works outside the OBS (dock) though.
My understanding is that OBS (dock) doesn't allow ContextMenu or direct interaction.
This is different for Browser source in OBS.
Possibly, there is something that needs to be enabled. I trust the community will assist in this regard. If so, then with css and js, we can have one instance of colour picker and possibly instantiate it for all the different text fields.

Hence, in the 'version' that was uploaded, the colour picker (native HMTL5 or js), was commented out.
HTML: 
<!--//NotUsedAsOBSDoesntAllowContextMenu--// input type="color" id="lower-thirds-name-color"-->

[Currently]
For line 1, colour can be selected from the drop down (substituted colour picker).
For line two, users can select or simply type the colour they want/prefer. Obviously, this has a limitation of: typing correctly, and the typed colour recognised.



Thanks. Yes, that is correct. Will look at fixing the 'bug'; .click, .change ....

It's got to do with the difference between colour selector for line 1 and line 2.
For line 1, it's simply
HTML: 
 <select> <option> ... </select> ... <input ...>. [/CODE

For line 2, it's
[CODE=html]<input type="text" ...>
<datalist id="color-list">
<select name="fxn-color2">
<option value="light grey" selected> light grey</option>
... ...
</select ...

[Walkaround]
user should simply type in their desired colour. for line 2.
Click to expand...

this might fix it and not require said 'walk-a-round' ~I got it to work with the pull down when the dock is launched.

I think this may be drag 'n' drop for the third line ( I will test that out later.. gotta change a few things..
but here is what worked:

<input id="lower-thirds-name" placeholder="Name and surname ... Type/select 4m predefined list">
<div class="color-select-line2" id="colorselect2">
<label for="name-color2">Line-2: choose a color:</label>
<select name="2nd-line-color" id="l3rd-fxn-color" placeholder="select">
<option value="light grey" selected> light grey</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="maroon">Maroon</option>
<option value="yellow">Yellow</option>
<option value="white">White</option>
<option value="orange">Orange</option>
</select>
</div>
 
Hoping someone can guide me why this amazing addon will not work for me. I have tried numerous times to get this to work. I am using windows 10 and OBS 25.0.8 64 bit. I can copy the files in and enable the control panel and add the browser source if I restart OBS I can see the lower thirds. I cannot show or hide the lower third text. Is there some setting I might be missing?

Please help!
 
Dodgerules101 said:
Hoping someone can guide me why this amazing addon will not work for me. I have tried numerous times to get this to work. I am using windows 10 and OBS 25.0.8 64 bit. I can copy the files in and enable the control panel and add the browser source if I restart OBS I can see the lower thirds. I cannot show or hide the lower third text. Is there some setting I might be missing?

Please help!
Click to expand...
Disable "Browser SourceHardware Acceleration" in OBS Settings
1600701596539.png
 
Works like a charm. I wonder whether it would be possible to control messages from a streamdeck, feasible? it would be superb...
 
I am not great at CSS. Is there any way to use this terrific tool and be able to put a hyperlink in the wording? Something like the first line might say "To get a PDF of todays program" and the second line would say "you can find it here " with "here" being a hyper link to the file I want to share. I fooled with it a bit and the control panel does accept the "href" html syntax but then only passes the text to the browser source. I see streams where folks have a slide in (some form of overlay I think) that is clickable but this way would be great, especially since the lower third allows for "on the fly" editing. Thank you for listening to a newby!
 
bjnz said:
how do i change background colour of the lower third where the name is being displayed
Click to expand...

1) go to the "browser-source.html" file, it will be located in the "Lower thirds" folder
2) Open in a note editor such as NotePad++ or even the default Notepad on Windows.
3) Modify this line from
<div id="lower-third">
to
<div id="lower-third" style="background-color:#d3d3d3;box-sizing: border-box;border-radius: 8px;">

4) Save the file and cheers.

Explanation of the code added:
Background-Color: light grey
border-radius: make the border a bit like a circle, not a perfect square.
 
Best plugin of all that I use, I know how hard it is to do. I would like to leave a suggestion: Increasing the number of lower thirds (there are only 4), for many, like me, would be very useful. I think if the user could put the number of lowerthirds he can work with it would be nice.
 
Felipe Fontenele said:
Best plugin of all that I use, I know how hard it is to do. I would like to leave a suggestion: Increasing the number of lower thirds (there are only 4), for many, like me, would be very useful. I think if the user could put the number of lowerthirds he can work with it would be nice.
Click to expand...
I'm also new to the plugin... but i quickly figured out, that you can create up to 10 lower third presets on each one of the four layers, so you can get 40 lower thirds in total with a maximum of four individual styles. :)
 
Same as above, I think this is really a great tool and getting improvements from time to time. I would suggest: 1) Option to add more layers, from 4 to 5..., 2) Option to edit the shape of the shadow behind the text, rounded corners for example 3) I am also having issues with some special characters like accents (in spanish)
 
You must log in or register to reply here.
Back
Top