making changes to new Jetpack contact form via child style sheet

  • SFCohen

    #4380

    Yesterday I installed the latest Jetpack update (1.3) and realized I could use the new contact form instead of another plug-in that’s way more complicated than I need. The form doesn’t format correctly, however. (See http://www.visiblelightphoto.net/contact-form-test/)

    I contacted Jetpack support and they suggested removing the class .email starting at line 1077 of the style sheet; the revised code would look like this:

    .post-meta .post-author,
    .post-meta .edit-post,
    .post-meta .post-date-inline,
    .print {
    display: block;
    float: right;
    position: relative;
    }
    .post-meta .edit-post,
    .post-meta .post-date-inline,
    .print, {
    margin-left: 5px;
    }

    When I make these changes to the Graphene style sheet, everything comes out fine. I can’t figure out how to make the changes in the child style sheet. When I’ve made (minimal) tweaks to the child theme before, I’ve just added them to the bottom of the child style sheet and everything has been fine. This time I restored the Graphene (parent) css to the original, added the modified code to the child css, and nothing happened. Is there something else I need to do to make the child theme pick up these changes. (I’m really a novice at this – I can follow step by step instructions pretty well, though.)

    Thanks for your help! And thanks for creating Graphene – it’s really easy to use, (mostly) easy to customize, and a great learning opportunity as well.

    [=sfc=]

    SFCohen

    #28080

    Oh – forgot to ask: is there anything else in the theme that is affected by the .email class – i.e. am I creating any other problems for myself by making these changes?

    Mod

    Kenneth John Odle

    #28081

    Well, that page is gone from your blog, so I can’t see what’s going on there.

    But this is one of those instances where a plugin really should use a proprietary class name (.jp-email for instance) to avoid conflicts with the theme or other plugins.

    That said, you really shouldn’t edit the theme’s style sheet—that’s what you want to use a child theme for. The odd thing is that the plugin’s css should load after the child theme style sheet loads, thus, the plugin’s css for that class should override the child theme’s css for that class.

    What is probably happening is that the theme’s stylesheet is defining this class in ways that the plugin is not— and those extra definitions are what’s causing the problem.

    The easy way around this, I suppose, would be to copy the plugin’s code for the .email class and paste that into your child theme’s stylesheet, and then add any extra definitions the theme adds and reset them. In other words, if the plugin does not have a background for .email, but the theme does, then you would add background:none; to your child theme’s .email class.

    I’m not sure if that makes sense; it’s been a long day. Let me know if it doesn’t.

    Mod

    Kenneth John Odle

    #28082

    Wait a minute, that page is there. For some odd reason, if you include a URL in parentheses without putting spaces around it, bbPress will include the closing parenthesis in your URL, leading to a 404. (Weird, huh? I’m sure there’s a reason for it.) I didn’t notice this before, but it’s been a long day.

    The page is here:

    http://www.visiblelightphoto.net/contact-form-test/

    Mod

    Kenneth John Odle

    #28083

    You could also try other contact form plugins besides JetPack. (For some reason, I’ve never taken a liking to JetPack).

    As regards your second question, you can download a copy of the theme to your desktop (always a good idea for child theme development), open the theme files in a text editor and search for the string “.email”. I doubt if anything else is affected by this class, but I’m not sure.

    SFCohen

    #28084

    I’m sorry – I’m still confused. And I realize part of the problem is that I was inaccurate in titling the post. I’m not trying to edit the plug-in; I’m trying to edit the child theme css so the plug-in works right. Here’s how I’m thinking about this, and I’m happy for any advice you can offer at any level:

    1) I don’t use much of Jetpack (mostly the stats) but I’ve been assuming that since it’s done by the folks at Automattic it will have fewer compatibility issues than plugins developed by other people. Feel free to disabuse me of this idea if it’s wrong.

    2) I can’t find the class .email in the plug-in. In any event, I haven’t tried my hand at editing php yet so I wouldn’t know where to begin even if I did find it.

    3) When I edit the child theme, I’ve been tacking on changes to the end of the style sheet, for no particularly good reason other than it’s easy to find. Should I be doing something more sophisticated and is there ever a situation where order makes a difference? Or in other words, what am I doing wrong that when I edit the parent css it has the desired effect, but when I tack the edited lines onto the child css is does nothing?

    4) I did find another couple instances of the class .email in the Graphene style sheet, first at line 1091:

    .email img{
    vertical-align: bottom;
    }

    and again at line 1109:

    .email a:last-child {
    display: none;
    }
    .email a:first-child {
    display: inline;
    }

    Are any of these things that I would need to change in the child css to make the whole thing work? (And if so, why does it work if I don’t change them in the parent?)

    Thanks for your patience for reading this far… and thanks for helping out all us rank amateurs!

    SFCohen

    #28085

    OK, I’m still pondering this and I think I maybe now understand enough to ask the right question in a reasonably simple manner, so here goes:

    The parent theme css includes the following code:

    .post-meta .post-author,
    .post-meta .edit-post,
    .post-meta .post-date-inline, .email,
    .print {
    display: block;
    float: right;
    position: relative;
    }

    .post-meta .edit-post,
    .post-meta .post-date-inline,
    .email,
    .print, {
    margin-left: 5px;
    }

    I want to use a child theme to change it to:

    .post-meta .post-author,
    .post-meta .edit-post,
    .post-meta .post-date-inline,
    .print {
    display: block;
    float: right;
    position: relative;
    }

    .post-meta .edit-post,
    .post-meta .post-date-inline,
    .print, {
    margin-left: 5px;
    }

    The previous changes I’ve made using the child theme either change existing parameters (such as font) or add new statements that aren’t included in the parent theme.

    What I’m trying to do here is SUBTRACT something from the parent theme. It looks like what’s happening is that simply pasting the revised text into the child theme doesn’t work because it doesn’t remove the .email parameter that’s imported from the parent.

    So – how do I use the child theme to remove something from the parent as opposed to changing or adding to it?

    Thanks!

    [=sfc=]

    SFCohen

    #28086

    OK – got the answer from the Jetpack folks. I added the following code to the child theme:

    .email {
    margin-left: 0 !important;
    float: none !important;
    }

    and all is well.

    Admin

    Syahir Hakim

    #28087

    The next version will use a more Graphene-specific class for the email button, so conflicts like this will be less likely to occur.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!