Style

[StrattonStudios]

Hey @tdsymonds If i have a txt plug-in as a child to typedjs. The text block it just reverts to normal formatting after i save a view page.

Should styles be passed in json?

Thanks.

[tdsymonds]

No you shouldn't need to add any additional styles to make the plugin work. Can you please show me how your html is being output when rendering and are there any errors showing in the browser console? Thanks

[StrattonStudios]

Sorry I think i miss understood the configuration.

Page Editor Layout:

• 

Renders:

• 

When i have the typedjs plug-in an txt plugin and pass the strings via JSON it styles according to the selection. (Second/Bottom Line)

However if i add a text block as a child to the jstyped block (which i think i am miss understanding) it reverts to the "User Style Sheet". (Top/First Line). Am i not linking the template correctly?

• 

• 

Also I really dig the JS django plugins you have up on your hub, thanks for taking the time to help!

[tdsymonds]

No worries, good to hear that the plugins have been of use to somebody! I'm actually away (without a computer) this week which makes it hard for me to help you fully at the min.

Am I right in thinking you're adding the strings via json and the child text plugins? If I remember correctly you only need to do one, not both. Can you remove the child plugin and leave the strings in the json config and see if that works?

Is the typing effect working or is it just the styling? If it's just the styling you can add your own css to your other stylesheets.

Let me know how you get on and I'll have a better look into this for you next week. Thanks

[tdsymonds]

How did you get on with the above? I'm a little bit confused about the problem you're having if it relates to the typing effect or if it's just the styling? Could you please share some of the HTML output, the CSS and what you've entered for your JSON config if it helps clarify your problem?

In the meantime, I'm now back at my computer and I've setup the plugin with the three different approaches. I've imaginatevely named these plugins Test, Test 2 and Test 3. The Django CMS structure of these plugins can be seen in the below image:

The first plugin Test, has the simplest setup where the strings to be typed are in the JSON config. The config I've used is:

{
  strings: ["First sentence.", "Second sentence."],
  stringsElement: null,
  loop: true
}

NOTE: That for this and all the configurations I've added loop: true, this is optional but it just helps to make sure that the animation is working.

The second example Test 2 does not require any JSON config, however as per the above I've added the loop, so the config is:

{
   loop: true
}

This setup of the plugin types out the text in each of the child plugins. So in this scenario, the "first" is typed out followed by "second".

The third setup is to embed the typed.js plugin inside a text plugin. The nested plugin in my example contains the following JSON config:

{
  strings: ["First sentence.", "Second sentence."],
  stringsElement: null,
  loop: true
}

All of the above scenarios have worked for me, so if you setup the plugin like the above I would expect the typing effect to work. Please confirm if you've tried one of the above and it's not working.

If the problem you have relates to your styling, you can style the typed elements by simply adding something like the below to your stylesheet:

.typed {
    color: red;
}

Or am I misunderstanding here?

Thanks

[StrattonStudios]

Following up.

So my problem was not the typing animation, just the styling.

Adding typedjs to the text block (w/json config) the text will inherit the styling that is defined within the text plugin menu.

If a text block is the child of a typedJS block then you must define .typed-strings in your stylesheet. Idk why i missed that, sorry.

I will confirm and post the rendered html over the weekend.

Thanks again, G