Resource icon

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

Claudio Nunes

New Member
Very good work. I'll look later and do some tests. But from the video I realized that it has a lot of flexibility.
Hi! Thanks for this amazing tool.
Inspired by this I've created one that I would like to share with everyone. I hope that it would be useful to someone.

https://obsproject.com/forum/resources/animated-lower-thirds-with-dockable-control-panel.1057/

See how it works: https://youtu.be/DIpslG-u7k0

Once again, thank you for your work!
Very good work. I'll look later and do some tests. But from the video I realized that it has a lot of flexibility.
 

ukie

Member
Thank you for the plugin!

Two Issues I've:
1. On my Mac, when the scene with the browser source loads for the first time, the logo displays by default. Is it possible to have the logo be hidden by default?
2. Backspace does not work with the text fields on OSX. I can only overwrite entered text by selecting it and typing over.
 

sjames90

New Member
This is an awesome resource. Thank you so much for providing it to us!

Does anyone know how to resize the logo? I have replaced the logo with ours, but even if I resize the png in an editing software, it still shows the same size (just grainier). So somewhere there must be a location to do that. I just can't find it in the css file.
 

bmoldt

New Member
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.

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
 

DigitalRazor

New Member
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.

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>
 

JeffEly

New Member
Lots of people have answered this question.. Look above there should be an answer
I just went thru all 5 pages of comments and i cant find an answer to this question. I read it several times. but it was never answered. please provide
 

Dodgerules101

New Member
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!
 

RichieTee

Member
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!
Disable "Browser SourceHardware Acceleration" in OBS Settings
1600701596539.png
 

jeppius

New Member
Works like a charm. I wonder whether it would be possible to control messages from a streamdeck, feasible? it would be superb...
 

bmil26

New Member
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!
 

RichieTee

Member
how do i change background colour of the lower third where the name is being displayed

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.
 
Top