WordPress.org

Ready to get started?Download WordPress

Forums

Genesis eNews Extended
[resolved] List of CSS elements (4 posts)

  1. Terence
    Member
    Posted 1 year ago #

    Hi,

    Thanks for sharing.

    I understand you don't want to end up customizing this plugin for all and sundry, so it would help you ~ and me/us ~ if you'd post a list of the CSS elements we need to address, for those of us not fortunate enough to have authors who created predefined CSS in the child theme we bought.

    It would also be very helpful, if you were feeling very generous, if you could post together with it, a sample (default?) css configuration and make them both available as a sticky on this forum.

    Might save you a lot of support questions.

    Would save us a lot of time, head-scratching and coffee.

    Many thanks.

    Terence.

    http://wordpress.org/extend/plugins/genesis-enews-extended/

  2. Brandon Kraft
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Sure. I'll copy it over to a new post and sticky it if this looks complete to you.

    If you have any specific questions that you're having trouble figuring out, please do post it.

    • Top-most container: .enews-widget
    • Second container (still has everything within it): .enews
    • The form itself: #subscribe
    • Text Before/After: No unique CSS. It'll auto-paragraph per WP standard. (so .enews p would hit it generally) You can add your own div tags in this space and specify your own classes if you need to customize this text more on a more granular level.
    • Form elements:
      • First name field: #subbox1
      • Last name field: #subbox2
      • E-mail field: #subbox
      • Submit button: #subbutton

    Here's a sample CSS (I think complete) based on the Executive theme (http://demo.studiopress.com/executive).

    .enews-widget {
    background-color: #222;
    margin: 0 0 30px;
    padding: 40px;
    }
    
    .enews #subbox, .enews #subbox1, .enews #subbox2 {
    background-color: #fff;
    box-sizing: border-box;
    color: #888;
    font-size: 10px;
    margin: 0 0 10px;
    padding: 15px;
    text-transform: uppercase;
    width: 100%;
    }
    
    .enews #subbutton {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #64c9ea;
    border-radius: 5px;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    }
  3. Terence
    Member
    Posted 1 year ago #

    Thanks very much Brandon. That helps a lot.

  4. TheGG
    Member
    Posted 1 year ago #

    Hi!

    Thanks so much for posting this, I've been searching for the very same thing! :)

    I used your code + was wondering if you might be able to help me align it correctly?

    I tried playing around with the padding + margins, but can't seem to get it to line up properly... I don't know what I'm doing wrong :/

    1. The whole thing is a tad wider than I need it to be (no wider than 309px).
    2. Title is too close to the edges on the top + left.
    3. Words + Bar / Button too close to left - if I make it wider, it ends up being too close to both edges.
    3. The spacing between words + Bar / Button are off.

    See My Example Here.

    Please help!

    Thanks! :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.