Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    CSS with "mailchimp for wordpress" plugin Shortcode

    General Discussion
    2
    8
    522
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • L
      Lisa last edited by

      1. http://thoseunderdogs.de/category/updates
      2. Firefox

      Hey guys,

      does anyone know how to communicate with the mailchimp short code html inbox elements? I'm trying to change the design since 2 days now and I'm lost.

      alt text

      I changed the raw code and gave IDs to each box so I can change the look of each of them in CSS but I can't get the placeholder text and the grey outlines to change.
      Everything I'm doing with CSS seems to be additional and not changing the current design. Also I'm able to change the width but not the height of each box.
      And what I can't change at all, is the SUBSCRIBE button.

      EXAMPLE HTML

      <div id="input">
      <p id="feld1">
      <input type="email" name="EMAIL" placeholder="ENTER YOUR EMAIL" required="">
      </p>
      <p id="feld2">
      <input type="text" name="FNAME" placeholder="FIRST NAME">
      </p>
      <p id="feld3">
      <input type="text" name="LNAME" placeholder="LAST NAME">
      </p>
      <p id="feld4">
      <input type="text" name="MMERGE6" placeholder="COMPANY">
      </p>
      </div>

      <p id="feld5">
      <input type="submit" value="SUBSCRIBE">
      </p>

      EXAMPLE CSS**

      .mc4wp-form-fields {
      position: fixed;
      top: 500px;
      z-index: 1;
      left: 60px;
      width: 12%;
      height:3px;
      }

      #feld1 {
      border: 1px solid;
      border-color: #00ff00;
      margin: 5px;
      border-radius: 3px;
      }

      #feld2 {
      border: 1px solid;
      border-color: #00ff00;
      margin: 5px;
      border-radius: 3px;
      }

      #feld3 {
      border: 1px solid;
      border-color: #00ff00;
      margin: 5px;
      border-radius: 3px;
      }

      #feld4 {
      border: 1px solid;
      border-color: #00ff00;
      margin: 5px;
      border-radius: 3px;
      }

      #feld5 {
      margin: 5px;
      background-color:#00ff00;
      }

      alt text

      Is this because of the short code? Is there anything integrated behind it, so I just can't change the design, so I have to buy the pro version?!
      Or am I just missing something?

      I hope anyone is experienced with this already.

      Thanks,
      Lisa
      x

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Dear @Lisa
        because I don't see the code it is difficult to say what is wrong.

        But you can use the !important feature to overwrite the normal settings from Mailchimp.

        https://stackoverflow.com/questions/9245353/what-does-important-mean-in-css

        Let mw know if that worked.

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • L
          Lisa last edited by

          Hey @mariusjopen ,

          that's not working.
          The problem is, that I'm obviously not "talking" to the right elements.
          But you can see the code now. Maybe you know whats wrong then.

          Thank you
          x

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            Dear @Lisa

            but if you add this to your CUSTOM CSS code it works. At least for me:

            input[type="text"] {
                width: 200px !important;
                padding: 10px !important;
                border: 2px solid red !important;
                background: yellow !important;
            }
            

            Did I misunderstand your question?

            Best!

            Marius

            www.mariusjopen.world

            L 3 Replies Last reply Reply Quote 0
            • L
              Lisa @mariusjopen last edited by

              @mariusjopen Thanks Marius. Part of it works.
              What I still can't do, is reduce the height.
              It's still not reacting and it doesn't matter where I include "height".
              Also the integrated CSS from mailchimp for the submit button, is marked with !important. So I cant overwrite that one. I'd love to change the background color and get rid of the dark border-color. Any other ideas?

              thanks
              x

              1 Reply Last reply Reply Quote 0
              • L
                Lisa @mariusjopen last edited by

                @mariusjopen okay, got it. I had to code line-height, min-height and max-height. :)

                1 Reply Last reply Reply Quote 0
                • L
                  Lisa @mariusjopen last edited by

                  @mariusjopen the only thing is now still the background color of the submit button. Since the important tag is in the main CSS code already and I can'T figure out how to overwrite it. I'm happy if you could help me with that as well.

                  many thanks
                  x

                  1 Reply Last reply Reply Quote 0
                  • mariusjopen
                    mariusjopen Global Moderator last edited by

                    Dear @Lisa
                    again the website is blank :-)

                    But you just need to really, really search. I would do the same. Somewhere is a piece of CSS which you can overwrite.
                    Also google for change background colour for submit button

                    Best!

                    Marius

                    www.mariusjopen.world

                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post

                    Before you post

                    Use the Search Feature. Maybe there is already a solution to your issue.

                    1. Update Lay Theme and all Lay Theme Addons
                    2. Disable all Plugins
                    3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                    4. Now see if your problem solved itself
                    5. Go here, see if your problem is listed here:
                    Troubleshooting

                    When you post:
                    1. Post a link to where the problem is
                    2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                    Thanks!

                    Online Users

                    K
                    S
                    F
                    A
                    F
                    O
                    M
                    Y
                    M
                    P

                    Recent Topics

                    • K

                      Unable to update lay theme / to login wp admin

                    • S

                      Theme crashed - because of Polylang?

                    • A

                      New button feature not available

                    • A

                      carousel addon not working after update

                    laytheme.com