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

[rpsharma]

Thanks my friend.

 

[bmoldt]

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

 

[DanielRios549]

There is no Git repository? I want to make some improvements and a pull request

 

[DigitalRazor]

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.

<!--//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

 <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]

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

 

[JeffEly]

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

Well....I guess reading more carefully would help...I found it on page 2. Sorry.

 

[RichieTee]

Well....I guess reading more carefully would help...I found it on page 2. Sorry.

Glad you did, if you have more issues please let us know.

 

[Dodgerules101]

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]

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

 

[jeppius]

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

 

[Dodgerules101]

Disable "Browser SourceHardware Acceleration" in OBS Settings
View attachment 61182

Thank you for your help. Greatly appreciated.

 

[bmil26]

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]

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

 

[RichieTee]

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.

 

[Gonzalez Silva]

Good Morning. How do I configure on Linux? the lower thirds. I installed Linux on my PC and I can't configure it.

 

[OMILES]

from1975 submitted a new resource:

Animated lower thirds with control panel - Lower thirds on the fly. Completely free!



yes is there a video on how to do this i am new to obs and still learnign it

 

[Felipe Fontenele]

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.

 

[andistudios]

The most amazing plugin I was looking for!
If I want to use some special characters (im my case brackets), the control panel resets the whole lower third. Is this a common problem and/or is there any solution for this?
Thanks!

 

[andistudios]

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.

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. :)

 

[jgcastror]

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)