css styling trouble

  • Resolved codpin

    (@codpin)


    11 years, 4 months ago

    Hello!

    First of all, grats for this awesome plugin you developed. I’ve searched all day for a good plugin that would let me integrate a mailchimp newsletter into my wordpress site and I was really disappointed by the majority of them.

    I’m just starting out with wordpress developing and my css skills are fairly limited. I’m trying to add a form into a landing page and I want to make the form’s design consistent with the rest of the page.

    The landing page can be viewed here: http://freelunch.catalingoleanu.ro/

    What I want to accomplish here is:

    1. To make the width of the form at least 400px. As it is now, the width is determined by the largest element in it. While I understand that, I still want to set a minimum width of at least 400px.

    2. Make the fields and submit button the same height. Right now the submit button is much taller than the fields. I want the fields a bit taller also.

    3. Make the vertical spacing between elements to be the same. Right now, the spacing between the fields is nice, but the spacing between the last field and the submit button is much larger. Also the bottom padding of the submit button is larger than the top padding of the first field.

    I’m sorry if there are too many requests. I’ve tried my best so far to customize it, but I’m stuck on these last details.

    Thanks!

    https://ww.wp.xz.cn/plugins/yikes-inc-easy-mailchimp-extender/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Evan Herman

    (@eherman24)

    11 years, 4 months ago

    Hi Codpin,

    What you are asking to achieve can all be carried out by a little CSS tweaks to your theme.

    For number 1, you simply want to add a width to the element housing the form. It looks like the class names are the same for other elements on your page, so you may want to add a custom id or class name to your element. When you do this should work :

    #yks-mc-form-container {
  width: 100%;
  min-width: 400px;
}

    2)

    .ykfmc-submit {
  height: 32px;
}

    3)
    For this one, you’ll need to adjust the height and the top margin. I’m not 100% sure, but you’ll need to adjust the following :

    .yks-mailchimpFormDivSubmit {
  margin-top: 0;
}

    Let us know if that helps at all!

    Thanks,
    Evan

    Thread Starter codpin

    (@codpin)

    11 years, 4 months ago

    Wow, fast response! You’re a rockstar!

    Number 2 worked wonders. I managed to changed the height of the submit button.

    But the first problem, I can’t seem to understand how to add a custom id or class to the element. Noob here.

    Thanks!

    Plugin Author Evan Herman

    (@eherman24)

    11 years, 4 months ago

    Hi Codpin,

    I’m not sure how or where you are entering your shortcode, and I’m not sure how your theme constructs its pages. It looks to me like you’ve wrapped our short code in another short code which wraps the form in a div with the class freelunchslidernewsletter.

    Without access to your theme, I’m not sure what’s really going on.

    Evan

    Thread Starter codpin

    (@codpin)

    11 years, 4 months ago

    Thanks Evan!

    I’ve finally managed to get it working and I’m really excited! Now it looks really good.

    I’ll mark this topic as resolved now.

    Thanks again for the quick replies!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘css styling trouble’ is closed to new replies.

Tags