Momentum Theme: How to create animated underlines and change custom SVGs?

Just installed the Newspaper theme with the Momentum demo earlier today. Has been working pretty great so far!

My website is: https://myartauction.org

1) In multiple sections on the demo site, there are animated underlines which trigger after a brief delay. How do you enable this animation and configure line color and position? The lines were working initially, but seem to have been disabled somewhere along the way while I was editing the website.

Example from demo: https://i.imgur.com/XAZ05di.png

2) There are custom SVGs that include an icon overlaid with a squiggle. Is it possible to change the icon? For instance, from a clock to a palette? Changing the icon under “General” settings doesn’t seem to make a difference.

Example from site: https://imgur.com/loNjHqW

3) Less of an issue, but is there a way to delete empty columns? I don’t seem to get the trashcan icon or the “Drag here to delete” message like when deleting a whole section.

Example from site: https://imgur.com/Vfyhg6X

Thanks!

Hi Bettina, thanks for your quick response!

1) Is there any more detail or documentation that you can share? The code is still present and unchanged in the HTML and CSS elements, so I am unsure why not displaying. I tried to import a new section from Cloud elements, and the default didn’t work as well. Part of the reason we selected Newspaper theme was that “No Coding Skills, just Click and Create”.

2) Is there additional information on how the custom SVGs are created and/or can be modified? We purchased the theme for the unique look and feel of the imagery. The custom SVGs don’t seem to be included in the imported media or within the PSD file. We want to keep the look and feel of the SVG with the squiggle, only to replace the icon to be more relevant.

3) Thanks, that worked!

Regarding #2, even if you can tell me which icon library was used to build the custom SVGs, that would help us to keep the graphic design consistent with the other icons. I’m not finding a match for the existing icons across any of the built-in libraries in the theme, e.g. Font Awesome, Typicons, Open Iconic, tagDiv Multi-purpose, or Font Newspaper.

Sorry for the ongoing thread.

Regarding #1, in case helpful, the underlines do seem to be showing in responsive mobile view (though not animated; but still there!). However not working at all in desktop on any browser, e.g. Edge, Chrome, Firefox.

https://imgur.com/r06vVml

Is there a way to re-add the HTML & CSS elements to a section that doesn’t already include? In the case of this section, the HTML & CSS fields aren’t there, even when importing new from Cloud elements.

https://i.imgur.com/XAZ05di.png

Thanks Bettina, I’ll do that. Appreciate your follow-up!

Hello Support,

I can’t figure out how to change the underline colors in the ‘column titles’ I looked for CSS and HTML codes on home page, but I didn’t find any that relates to ‘td-momentum-load’ I only found the below CSS code under theme panel >> custom CSS
am I missing any HTML code? how do I adjust the colors of those underlines? please guide me. Thanks!

.td_block_separator.td-momentum-load {
transition: all 0.4s ease-in;
transition-delay: 0.5s;
}
.td_block_separator.td-momentum-load.td-momentum-in-viewport.td-load-hero {
width: 260px !important;
}
.td_block_separator.td-momentum-load.td-momentum-in-viewport.td-load-center {
width: 200px !important;
}
.td_block_separator.td-momentum-load.td-momentum-in-viewport.td-load-left {
width: 220px !important;
}

.td_block_separator.td-momentum-load.td-load-delay {
transition-delay: 1s;
}
.td_block_separator.td-momentum-load.td-load-delay-1 {
transition-delay: 4s;
}
.td_block_separator.td-momentum-load.td-load-delay-hero {
transition-delay: 3s;
}

Hi Bettina,

Thanks for getting back so quick. Just to make sure, are you referring to the underlines as in this screen: https://app.screenclip.com/ivbW

I am still having problems locating that HTML or CSS does you mentioned, and what I have is for the animated element on top which is fine, so if you could share the HTML or CSS code that adjust these colored lines that would be great. I tried to change the colors from the Website Manager, but It didn’t change these lines.

also, is there a guide on how to use the momentum pro template, or how to edit things around, I am still struggling with few things like how to add services, or change the template of services. Thanks again!

I have the same problem.

There it is just a seperator and you can change the color.

But what about the animated “underscores” of headlines? I can not find a seperator element nor find a extra class or some custom html or css.

View post on imgur.com

Thank you. That worked.