Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. CSS with "mailchimp for wordpress" plugin Shortcode

CSS with "mailchimp for wordpress" plugin Shortcode

Scheduled Pinned Locked Moved General Discussion
8 Posts 2 Posters 794 Views
  • 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 Offline
    L Offline
    Lisa
    wrote on last edited by
    #1
    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
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      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
      0
      • L Offline
        L Offline
        Lisa
        wrote on last edited by
        #3

        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
        0
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #4

          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
          0
          • mariusjopenM mariusjopen

            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

            L Offline
            L Offline
            Lisa
            wrote on last edited by
            #5

            @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
            0
            • mariusjopenM mariusjopen

              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

              L Offline
              L Offline
              Lisa
              wrote on last edited by
              #6

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

              1 Reply Last reply
              0
              • mariusjopenM mariusjopen

                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

                L Offline
                L Offline
                Lisa
                wrote on last edited by
                #7

                @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
                0
                • mariusjopenM Offline
                  mariusjopenM Offline
                  mariusjopen
                  Global Moderator
                  wrote on last edited by
                  #8

                  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
                  0
                  Reply
                  • Reply as topic
                  Log in to reply
                  • Oldest to Newest
                  • Newest to Oldest
                  • Most Votes


                  I also code custom websites or custom Lay features.
                  šŸ’æ Email me here: šŸ’æ
                  info@laytheme.com

                  Before you post:
                  1. When using a WordPress Cache plugin, disable it or clear your cache.
                  2. Update Lay Theme and all Lay Theme Addons
                  3. Disable all Plugins
                  4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                  This often solves issues you might run into

                  When you post:
                  1. Post a link to where the problem is
                  2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                  3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                  Online Users
                  arminunruhA
                  arminunruh
                  Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                  laytheme.com
                  • Login

                  • Don't have an account? Register

                  • Login or register to search.
                  • First post
                    Last post
                  0
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Search