Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • April 11, 2018 at 12:04 am #940079
    hazelallturf

    Hi,

    I have added a mailchimp form to my footer. Within the mailchimp form I have coded a customer css in html which is exactly how I would like to form to display. The enfold theme however is overriding the coding I think as it is nothing like I have designed.

    The full code is:

    <style>
    .email {
    text-align: center;
    font-size: 12px;
    padding: 20px 80px;
    border-color: #000000;
    border-bottom: 0px;
    }

    ::placeholder {
    color: #000000;
    }

    .button {
    color: #000000;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 0px 0px;
    cursor: pointer;
    border: #000000;
    padding: 20px 118.5px;
    border-color: #000000;
    background-color: #ffffff;
    border: 2px solid #000000;

    }
    </style>
    <p>
    <input type=”email” class=”email” name=”EMAIL” placeholder=”NAME@EMAIL.CO.UK” required />
    <br>
    <input type=”submit” class=”button” value=”SUBSCRIBE” />
    </p>

    Please can you advise how to use this code instead of the enfold set css?

    I have used https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro to build my css.

    Many thanks

    April 11, 2018 at 12:18 am #940095
    Jordan Shannon

    Hey hazelallturf,

    Have you added your css to quick css? Also, add !important next to your declarations so then take precedence.

    Best regards,
    Jordan Shannon

    April 11, 2018 at 12:22 am #940101
    hazelallturf

    Hi Jordan,

    I tried adding the css to quick css I don’t think I was referencing it correctly.

    How do I make sure the correct part of the footer gets reference?

    Many thanks

    April 11, 2018 at 1:06 am #940119
    Jordan Shannon

    Hi,

    You would want to use #footer.

    Best regards,
    Jordan Shannon

    April 11, 2018 at 1:11 am #940121
    hazelallturf

    I already have some custom CSS widgets making up my footer.

    I don’t want them to take the MailChimp CSS.

    How would I specifically target that one section of text in a footer widget?

    April 11, 2018 at 1:16 am #940122
    Jordan Shannon

    Hi,

    I understand. Use #mc4wp-form-1

    Best regards,
    Jordan Shannon

    April 11, 2018 at 10:01 am #940341
    hazelallturf

    Hi,

    Still struggling to get this working, can you please review my code below.

    QUICK CSS:

    #mc4wp-form-1 {
    .email {
    text-align: center;
    font-size: 12px;
    padding: 20px 80px;
    border-color: #000000;
    border-bottom: 0px;
    }

    ::placeholder {
    color: #000000;
    }

    .button {
    color: #000000;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 0px 0px;
    cursor: pointer;
    border: #000000;
    padding: 20px 118.5px;
    border-color: #000000;
    background-color: #ffffff;
    border: 2px solid #000000;

    }
    }

    MAILCHIMP FORM:

    <p>
    <input type=”email” class=”email” name=”EMAIL” placeholder=”NAME@EMAIL.CO.UK” required />
    <br>
    <input type=”submit” class=”button” value=”SUBSCRIBE” />
    </p>

    Thanks.

    April 12, 2018 at 12:10 am #940697
    Jordan Shannon

    Hi,

    Can you screenshot the look you would like to achieve?

    Best regards,
    Jordan Shannon

    April 12, 2018 at 12:15 am #940700
    hazelallturf

    Hi Jordan,

    Please see https://ibb.co/nKETcH.

    Luke

    April 13, 2018 at 12:04 pm #941434
    Ismael

    Hi,

    Thanks for the info.

    Please use the following css codes instead.

    
#top .footer_color .mc4wp-form input[type="submit"] {
    color: #000000;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 0;
    cursor: pointer;
    border-color: #000000;
    background-color: #ffffff;
    border: 1px solid #000000;
    width: 238px;
    padding: 20px;
    margin-left: -5px;
}

#top .footer_color .mc4wp-form input[type="email"] {
    text-align: center;
    font-size: 12px;
    padding: 20px;
    border-color: #000000 !important;
    border-bottom: 0px;
    background-color: #f8f8f8;
    color: #000000 !important;
    margin: 0;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #000000 !important;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #000000 !important;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #000000 !important;
}
:-moz-placeholder { /* Firefox 18- */
  color: #000000 !important;
}

    Best regards,
    Ismael

    April 13, 2018 at 3:18 pm #941545
    hazelallturf

    Hi Ismal,

    I’ve just removed my CSS code in Quick CSS and replaced it with the code you suggested above.

    I am not seeing any change?

    Sorry to be a pain.

    Thanks

    April 14, 2018 at 12:57 pm #941897
    Victoria

    Hi hazelallturf,

    The code works when put to custom.css and there might be a syntax error in quick css and so the styles after the error are not applied.
    You can try putting the code at the top of the quick css.

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    • This reply was modified 6 years, 8 months ago by Victoria.
    April 14, 2018 at 3:10 pm #941936
    hazelallturf

    Hi,
    Tried to move it to top with no improvement.

    Please find temp log in details.

    April 17, 2018 at 3:39 am #942876
    Ismael

    Hi,

    Did you copy the code from your email? The symbols are usually converted to something else when you do that. We fixed the css codes. Please remove the browser cache prior to checking the page.

    Best regards,
    Ismael

    April 22, 2018 at 1:08 am #944998
    hazelallturf

    Hi Ismael,

    Thanks you for sorting this. I just have a small point.

    It looks perfect on the home screen however when I go to a product page it is unaligned and missing borders. Can you please have a look to see what you think?

    Thanks

    April 23, 2018 at 7:17 pm #945483
    Jordan Shannon

    Hi,

    The log info you provided above is no longer working for me. Can you check this again?

    Best regards,
    Jordan Shannon

    April 23, 2018 at 7:19 pm #945486
    hazelallturf

    Hi Jordan,

    Sorted now please try again.

    Thanks

    April 25, 2018 at 5:04 am #946379
    Ismael

    Hi,

    Thank you for the update. We adjusted the css codes a bit. Please note that this modification may require additional css media queries.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • You must be logged in to reply to this topic.