StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Integrate custom Mailchimp into 411 Theme

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Integrate custom Mailchimp into 411 Theme

This topic is: not resolved

Tagged: , , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • April 29, 2014 at 8:09 pm #103021
    brett924
    Member

    So... I have to get this sign-up form: http://bestfiletmignon.us7.list-manage2.com/subscribe?u=b405d70ef5c48e87e601fb979&id=7de4abbbf7

    Into this page (as you see, I just cut and paste the code from the form page which obviously won't work).

    I know this is probably a simple fix, i.e. change the background to black, widen the post area a bit, get rid of whatever is causing the dead space above the form, but I'm not a code person.

    If there are obvious and simple suggestions, please shoot them my way. If I'm basically asking for a completely reworked stylesheet, then maybe it's more than what this forum is for.

    http://www.bestfiletmignonblog.com/email-subscribe/
    May 1, 2014 at 10:32 pm #103283
    Tom
    Participant

    Brett, place this code in the bottom of your style.css file. This will style the form itself. "Widen the post area a bit" is not really a trivial exercise, especially when the context of the site and content is unknown.

    .submit_container .button {
  height: 65px;
  width: 100%;
  font-size: 20px;
}

.field-group {
  border-radius: 4px;
  width: 100%;
  height: 65px;
}

.field-group input, .field-group textarea {
  font-size: 26px !important;
  padding: 10px !important;
}

.mergeRow label {
  font-size: 20px;
}

.mergeRow p{
  margin-bottom: 0px !important;
}

.mergeRow {
  margin-bottom: 50px;
}

/* optional */
.poweredBy {
  display: none !important;
}

    You can catch me on Twitter for an address to mail the steaks :).

    Choose your next site design from over 350 Genesis themes.
    [ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

    May 2, 2014 at 9:45 am #103332
    brett924
    Member

    Thanks Tom!

    I'll make sure to keep you on the list of 'folks who deserve steak' when I start getting paid. 🙂

    So that code should actually address issues in the Mailchimp form itself?

    What's driving me batty is the space between the top of the form and the top of the post area. I figure there's some code bloat in the Mailchimp form that is causing it, but I'm not sure what is allowed to be removed to keep the integrity of the Mailchimp code together.

    That said, I don't have any steak to give, so I'm going to keep on playing with it to see what I can come up with.

    thanks again for taking a look and working out all that CSS for the form. I think we hacks (not hackers, obviously), don't quite get what's involved. We see too much drag and drop and assume it's all pretty simple.

    May 2, 2014 at 11:29 am #103342
    Tom
    Participant

    I don't see a problem with the top spacing. I do see that I missed the asterisk for required fields.

    You should add this to the CSS above.

    label .asterisk {
  top: 10px !important;
}

    Choose your next site design from over 350 Genesis themes.
    [ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

    May 2, 2014 at 12:54 pm #103352
    brett924
    Member

    I'll add that.

    I actually cut a huge chunk of code out of the form's code and that did away with the top spacing (it was still there after I cut and paste the CSS you gave me) I'm not sure if cutting the code (just below) will screw up the Mailchimp list subscribes. I pasted it under all the CSS/html related to the form. It's starting to look a little messy.

    One quick question: The CSS you gave me - I put it in the little 'edit CSS' box, not at the bottom of the style.css file. I also put it in the actual text editor of the post (I'm guessing I should delete it out of one of those places.

    (got the code from the 'View Page Source' in Chrome for: http://eepurl.com/Ttlzb

    <html dir="ltr">
    <head>
    <title>Best Filet Mignon Email Subscription List</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    blah blah blah.... down to...

    empty: function(element) {
    if ( $('#MERGE0_mailcheck').length > 0 ){
    $('#MERGE0_mailcheck').remove();
    }
    return;
    }
    });
    });
    } catch(e){ console.log(e); }
    });
    </script>

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.