Overriding the DOWNLOAD link styles.

Hi guys.

I cannot figure out how to override the styles of the download link that is generated. Details:

1) I am using:

* Lates WP
* Astra theme
* Elementor page editor
* Formidable Forms + Views
* e2pdf demo, testing features, single page demo

2) I am generating a view on a page and in the view I am embedding the pdf download link in the view as per:

[e2pdf-download id="2" dataset="[id]" ]

This works great but I need to style up the download link and make it look like a button and give it a larger clickable area. I have reviewed the documentation and tried to add additional css classes to change the text colour but that doesn't seem to work, the css classes that e2pdf generates seem to override my attempts.

3) I have tried a few ways to style up the link, this one works EXCEPT the colour of the text remains red, I cannot change it to white or another colour:

// in the view

<div class="elementor-element elementor-element-b9eef3d elementor-align-center elementor-widget elementor-widget-button" data-id="b9eef3d" data-element_type="widget" data-widget_type="button.default">
<div class="elementor-widget-container">
<div class="elementor-button-wrapper">
<div class="elementor-button-link elementor-button elementor-size-sm" role="button">


<span inline="true" style="color: #0000ff;">
[e2pdf-download id="2" dataset="[id]" style="color: #0000ff;" ]
</span>


</div>
</div>
</div>
</div>

Note, in the example I am not using an additional css class (did not work earlier) i tried inlining a style (obviously not supported according to docs) and wrapping the output in a <p> tag. Those don't work.


4) In addition, when the DOWNLOAD link is generated additional <br> and <p> tags are added which mess with the layout as I am trying to emulate a button. For example, here is what is rendered out for the code in the previous point:

// rendered out

<div class="elementor-element elementor-element-b9eef3d elementor-align-center elementor-widget elementor-widget-button" data-id="b9eef3d" data-element_type="widget" data-widget_type="button.default">
<div class="elementor-widget-container">
<div class="elementor-button-wrapper">
<div class="elementor-button-link elementor-button elementor-size-sm" role="button">

<p>
<span inline="true" style="color: #0000ff;">
<br>
<a rel="nofollow" id="e2pdf-download" class="e2pdf-download e2pdf-format-pdf" target="_blank" href="https://voxoi.com/test-03/?page=e2pdf-download&amp;uid=81772c5466e05e4c90c97553d06b76d8">Download PDF</a>
</br>
</span>
</p>

QUESTION #1: How do I override the class="e2pdf-download e2pdf-format-pdf" styles in a sane way? I need white text specifically but if I can actually access a css class as per docs that would work better.

QUESTION #2: How do I stop the addictional <br> and <p> tags from being generated to control the layout a little better?

NOTES: I can provide access to test site if required.

Thank you for your help!

Hi,

#1. E2Pdf doesn't add any styles by default to generated links. The style which you see is applied by your theme or built-in CSS in browser which has more priority on your code.

This code below:
- is incorrect as you apply CSS to the text inside "span" and not "a" tag...
- "style" is not correct attribute. It can be used only class="additional_class"...

<span inline="true" style="color: #0000ff;">
[e2pdf-download id="2" dataset="[id]" style="color: #0000ff;" ]
</span>

You need to add correct CSS or add custom class which will overwrite your current theme CSS Styles and which will have higher priority on the styles applied by your theme.

As an alternative you can try to build the link as follow:

<a style="color: #0000ff;" href="[e2pdf-download id='2' dataset='[id]' output='url']">Button</a>

It must be added via editing the source of "View" ("Text") + you need keep attention on quotes. It must be used "single" quotes inside shortcode and "double" quotes over href attribute (Screenshot attached).

#2. E2Pdf doesn't generate any "p" or "br" tags. It's generated by your theme or wysiwyg editor of view so try to review the source of Formidable Forms View and remove any spaces and new lines over added shortcode...

---

We would really appreciate your feedback at WordPress.org!