Okay
  Public Ticket #2299538
Newsletter Styling
Closed

Comments

  • mishrenee started the conversation
    February 13, 2020 at 4:15pm

    Hi there,

    I am working in localhost so unfortunately cannot give you access.  I am trying to configure the style of the Newsletter signup in the footer to look the same in the demo. Originally it was there and looking great, but I cut/paste the shortcode from one footer widget box to another (rearranging the footer layout) and suddenly it went weird/reverted to a basic style.  Could you please advise if there is styling required and what the code is for that?  Thank you kindly. 

    Attachment of desired look taken from another persons query.

  •  675
    Neuron replied
    February 14, 2020 at 9:44am

    Hi,

    I've prepared you a contact form like that.

    So, please import the contact form first, you can find it on the attachments. Also, for the styling like on the image, add the following style in Appearance > Customize > Additional CSS.

    .newsletter-icon {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
    }
.wpcf7-email {
        color: #fff;
        border: none;
        border-bottom: 1px solid #fff;
        padding-left: 0;
    }
.wpcf7-email ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      color: #fff;
      opacity: 1; /* Firefox */
    }
.wpcf7-email :-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: #fff;
    }
.wpcf7-email ::-ms-input-placeholder { /* Microsoft Edge */
      color: #fff;
    }

    Feel free to ask for anything you need.

    Kind Regards

    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • mishrenee replied
    February 14, 2020 at 1:03pm

    Hi,

    Thanks for this, however the XML form template you sent through doesn't have a "Submit" function in there, so the icon appears but it cannot be clicked/does not have a submit action attached to it.  Furthermore, when I apply that custom CSS it just moves the icon to a weird spot - please see attached image.

  •  675
    Neuron replied
    February 17, 2020 at 2:18pm

    Hi,

    I am very sorry for the late reply, we did not work on the weekend.

    Well, I am not able to help you until you go onlinefrown.png

    Can you please try to use these plugin.

    - https://wordpress.org/plugins/cf7-styler/

    - https://wordpress.org/plugins/contact-form-7-skins/

    I've heard from different customers that it helped them design easily the forms.

    Kind Regards

    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.