Proper way to add CSS to e-Newsletter.

I have added a HTML button following the solutions to the news latter:
https://premium.wpmudev.org/forums/topic/e-newsletter-how-do-you-add-in-html-view-for-the-newsletter-tinymce#post-1286424

And below is the button code that has been used:
'
<a target="_blank" href="#" class="button" style="
border: 0 #43454b;
background: #43454b;
color: #fff;
cursor: pointer;
padding: .6180469716em 1.41575em;
text-decoration: none;
font-weight: 600;
text-shadow: none;
display: inline-block;
outline: 0;
-webkit-appearance: none;
border-radius: 0;
">Read More
'

Now how can I add CSS that will changes the button hover color, please help?

  • Adam Czajczyk

    Hello eTech

    I hope you're well today and thank you for your question!

    The style used in newsletter template must be "sendable", so to say, so it has to be within the template file itself. So far, you have added an inline CSS to your button and that's fine but the "hover" style cannot be applied via inline style so you'll need to separate HTML and style.

    Taking into account the way you have created the button, I must say I'm not 100% sure if this will work correctly but you might try to do it this way (since your newsletter editor is supposed to accept HTML tags now):

    Change your code from this:

    <a target="_blank" href="#" class="button" style="
    border: 0 #43454b;
    background: #43454b;
    color: #fff;
    cursor: pointer;
    padding: .6180469716em 1.41575em;
    text-decoration: none;
    font-weight: 600;
    text-shadow: none;
    display: inline-block;
    outline: 0;
    -webkit-appearance: none;
    border-radius: 0;
    ">Read More</a>

    to this:

    <a target="_blank" href="#" class="button my-newsletter-button">Read More</a>

    and then somewhere above that add this:

    <style>
    .my-newsletter-button {
    border: 0 #43454b;
    background: #43454b;
    color: #fff;
    cursor: pointer;
    padding: .6180469716em 1.41575em;
    text-decoration: none;
    font-weight: 600;
    text-shadow: none;
    display: inline-block;
    outline: 0;
    -webkit-appearance: none;
    border-radius: 0;
    }
    .my-newsletter-button:hover {
    /* HERE COMES YOUR HOVER STYLE */
    }
    </style>

    However, such "structure" should actually be used on "template level" directly where the button code (<a... part from above) would be inside "<body>" section of the template and the "<style>" part would be inside the "<header> </header" part of the template code. Therefore, if that doesn't work, please check this page:

    https://premium.wpmudev.org/project/e-newsletter/#product-usage

    Scroll it down to the "Use Custom Themes" section and follow the steps there to create your own newsletter theme. Once you got a custom theme created you can then simply add the button code to the "template.html" file or just keep it as you have been adding it to the newsletter via TinyMCE and then put the style part into the style.css file inside your new custom theme - plugin should then "build up" a proper mail template based on this.

    Kind regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.