• Resolved Christine

    (@christineferguson)


    I purchased my theme from StudioPress and it came with a customized version of the Genesis eNews widget. That widget has since been removed, and I am trying to figure out how to style the JetPack e-mail subscription widget to match the eNews widget I had before.

    I contacted the theme author and she said I need a knowledge of CSS and pHP, and then I could copy the CSS classes from the eNews widget and apply them to JetPack. I have no experience with this sort of thing and now the eNews widget is gone entirely, so I’m using Firebug Lite to try and copy the CSS class for the subscribe box from the theme preview at the author’s website.

    Can anybody here give me some clearer instruction on what I need to do? I don’t even know what to read to try and educate myself.

    Thanks.

    http://wordpress.org/extend/plugins/jetpack/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter Christine

    (@christineferguson)

    Oh, the theme demo can be found here if anybody’s curious as to what I’m looking at.

    My website is here.

    Thread Starter Christine

    (@christineferguson)

    Okay, I was able to copy and paste the #header .widget-wrap CSS from the theme preview, which gave me the green box, but I’m having trouble with the widget title. I’ve tried copying and pasting the .widget-area h4 CSS, but it won’t override the CSS that is currently there for that class. When I view it using Firebug it shows both my override attempt and the dominating CSS, but my custom CSS isn’t doing anything. Any tips to point me in the right direction?

    Thanks.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    You should indeed be able to copy the form’s style by copying the CSS from the eNews subscription form.

    Try adding the following code to your theme’s stylesheet:
    https://gist.github.com/jeherve/4995873

    Thread Starter Christine

    (@christineferguson)

    That worked! Thank you so much!

    Do you know how I can take away the white line under the text on the submit button? The “submit” CSS in my stylesheet has a “text-decoration: none” line, but for some reason it’s not applying to the active text on the submit button. The line goes away when you hover over the button though.

    Also, do you know where I need to go to change the text that’s displayed in the e-mail box in the form? Right now it says “email address”, but I’d like it to say “Enter your e-mail address here”.

    I am Googling and trying to find the answers to my questions, but I thought I’d ask in case you can help. Thank you very much.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    Do you know how I can take away the white line under the text on the submit button?

    The white line is added by the background image that is applied to all submit buttons. You should be able to solve the issue by defining a specific height for the button, like so:

    .jetpack_subscription_widget input[type="submit"] {
        float: right;
        height: 31px;
        margin-top: 5px;
        padding-top: 8px;
        text-decoration: none;
        width: 40px;
    }

    (I have also changed the padding to make sure “Go” was centered)

    Also, do you know where I need to go to change the text that’s displayed in the e-mail box in the form? Right now it says “email address”, but I’d like it to say “Enter your e-mail address here”.

    Jetpack doesn’t allow you to change that value, I’m afraid.

    Thread Starter Christine

    (@christineferguson)

    Thank you again for all of your help. I greatly, GREATLY appreciate it. I’m going to continue reading about CSS and hopefully work my way up to a point where I can troubleshoot this stuff myself. But in the meantime, thank you again.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Help customizing the look of the widget’ is closed to new replies.