WordPress.org

Ready to get started?Download WordPress

Forums

Genesis eNews Extended
[resolved] CSS - Minor Customization (8 posts)

  1. Angieatc
    Member
    Posted 1 year ago #

    Here is the site I am working on: http://test.strosgirldesigns.com/2012/03/01/image-aligned-left/

    I cannot for the life of me get the Submit button to drop to the lower line unless I increase the percentage over 30%. I do not want to have a large submit button so I would like to keep it at 30% and would like to go lower.

    This is what I have in my CSS for the newsletter widget:

    #newsletter {
    	background-color: #222;
    	color: #fff;
    	line-height: 1.5;
    	margin: 20px;
    	padding: 32px;
    	padding: 2rem;
    	text-align: center;
    }
    
    #newsletter p {
    	color: #fff;
    	margin-bottom: 24px;
    	margin-bottom: 1.5rem;
    }
    
    #newsletter input {
    	margin: 5px 0 0;
    	width: 30%;
    }
    
    #newsletter h4 {
    	color: #fff;
    }
    
    #newsletter .enews #subbox,
    #newsletter .enews #subbox1,
    #newsletter .enews #subbox2 {
    	padding: 10px;
    	width: 50%;
    }

    What am I missing? Plus when I increase the submit button to 50% it moves it to the lower line but then the enter email address box is all offline.

    Thanks for an amazing plugin!

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

  2. Hi.

    To get the "Subscribe" button to drop to the next line, copy and paste the following CSS snippet into your style.css file:

    #subbutton {
    display: block;
    margin: auto;
    }

    Next, in order to stop the "Email Address" box from being 'off-line,' firstly locate the following code in your CSS file:

    .enews #subbox {
    	background-color: #f5f5f5;
    	border: 1px solid #aaa;
    	color: #666;
    	font-family: 'PT Sans', sans-serif;
    	font-size: 14px;
    	margin: 0 -7px 0 0;
    	padding: 6px 5px;
    	width: 160px;
    }

    Then delete the margin declaration from the given snippet so that you are left with the following:

    .enews #subbox {
    	background-color: #f5f5f5;
    	border: 1px solid #aaa;
    	color: #666;
    	font-family: 'PT Sans', sans-serif;
    	font-size: 14px;
    	padding: 6px 5px;
    	width: 160px;
    }

    I hope that works. Let me know if there's anything else you need help on. :)

  3. Angieatc
    Member
    Posted 1 year ago #

    I am missing something somewhere and can't find it.

    Here is what I have code wise for the Newsletter.

    #newsletter {
    	background-color: #222;
    	color: #fff;
    	line-height: 1.5;
    	margin: 20px;
    	padding: 32px;
    	padding: 2rem;
    	text-align: center;
    }
    
    #newsletter p {
    	color: #fff;
    	margin-bottom: 24px;
    	margin-bottom: 1.5rem;
    }
    
    #newsletter input {
    	margin: 5px 0 0;
    	width: 30%;
    }
    
    #newsletter h4 {
    	color: #fff;
    }
    
    #newsletter .enews #subbox,
    #newsletter .enews #subbox1,
    #newsletter .enews #subbox2 {
    	padding: 10px;
    	width: 50%;
    }
    
    #subbutton {
    display: block;
    margin: 0;
    }
    
    .enews #subbox {
            background-color: #f5f5f5;
            border: 1px solid #aaa;
            color: #666;
            font-family: 'PT Sans', sans-serif;
            font-size: 14px;
            padding: 6px 5px;
            width: 160px;
    }

    Nothing is working. It drops the subscribe button to the next line but everything is still out of alignment.

  4. You need to copy the #subbutton code snippet exactly as I gave it in my original reply i.e. the value for margin should be auto NOT 0

    Here it is again:

    #subbutton {
    display: block;
    margin: auto;
    }

    You didn't need to copy and paste the second code snippet I gave for .enews #subbox as it is already in your CSS file. It is now in there twice. The "Email Address" box is still out of line as the margin is still being called from this. Please delete the duplicate code that you inserted. If you can't locate the original code, copy and paste the following at the bottom of your newsletter code instead:

    .enews #subbox {
    margin-right: 0 !important;
    }

  5. Angieatc
    Member
    Posted 1 year ago #

    Thank you, I actually had to tweak it a little bit more. Here is my final code for it!

    `
    #newsletter {
    background-color: #222;
    color: #fff;
    line-height: 1.5;
    margin: 20px;
    padding: 32px;
    padding: 2rem;
    text-align: center;
    }

    #newsletter p {
    color: #fff;
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
    }

    #newsletter input {
    margin: 5px 0 0;
    width: 30%;
    }

    #newsletter h4 {
    color: #fff;
    }

    #newsletter .enews #subbox,
    #newsletter .enews #subbox1,
    #newsletter .enews #subbox2 {
    padding: 10px;
    width: 50%;
    }

    #newsletter #subbutton {
    display: block;
    margin: 5px auto 0;
    }

    .enews #subbox {
    background-color: #f5f5f5;
    border: 1px solid #aaa;
    color: #666;
    font-family: 'PT Sans', sans-serif;
    font-size: 14px;
    margin: 4px 0 0 0;
    padding: 6px 5px;
    width: 160px;
    }'

    THANKS AGAIN!

  6. Brandon Kraft
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Just wanted to drop a quick note to say thanks to @siobhyb for helping out. Much appreciated!

  7. Angieatc
    Member
    Posted 1 year ago #

    Yep I agree! Thank you very much.

  8. You're welcome. Glad you solved the problem :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.