Home Forums Newsletter Plugin Support Form Style Adjustments

  • This topic has 0 replies, 1 voice, and was last updated 5 years ago by Anonymous.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #243297
    Anonymous
    Inactive

    Hi,

    I’ve been using the Form Style page (https://www.thenewsletterplugin.com/documentation/subscription-forms-style) to adjust the style of the form, which was working fairly well but I’m running into some problems.

    Right now, I have two forms on my site, one in the footer and one as a widget in the sidebar. The footer one looks great; I’m trying to adjust the style of the sidebar widget.

    I’d like to see the following changes:

    1) The first name field should have a gray background color. I successfully did this with the email field, and used the same line(“background-color: #DFDEDA!important;”) in the “.tnp-widget input.tnp-name” part of the code, but it isn’t appearing and I’m unsure why.

    2) All of the text in this widget should be left-aligned, while still keeping all of the other widgets center- aligned.

    3) I’d like the Name and Email box to be the same length as the widget container (and automatically resize to fit in the widget container as it gets bigger or smaller on resized desktop browswers, mobile, tablet, etc.).

    This is my website URL: https://onimpactreturns.com/
    Currently, this is the Custom Styles code that I have set in the Advanced Settings:

    .tnp-widget-minimal input.tnp-submit {
    background-color: #FDD434!important;
    color: #000000!important;
    font-weight: bold;!important;
    width: auto!important;
    }
    .tnp-widget-minimal input.tnp-email {
    color: #FDD434!important;
    font-weight: bold;!important;
    width: auto!important;
    }

    .tnp-widget input.tnp-submit {
    background-color: #FDD434!important;
    color: #000000!important;
    font-weight: bold;!important;
    width: auto!important;
    }
    .tnp-widget input.tnp-email {
    color: #000000!important;
    font-weight: bold;!important;
    width: auto!important;
    background-color: #DFDEDA!important;
    }
    .tnp-widget input.tnp-name {
    color: #000000!important;
    font-weight: bold;!important;
    width: auto!important;
    background-color: #DFDEDA!important;
    }

    Hopefully someone can help me with this and would appreciate any help – thank you in advance!
    Stephanie

Viewing 1 post (of 1 total)
  • You must be logged in to reply to this topic.