CSS – Minor Customization

  • Resolved Angieatc

    (@angieatc)


    10 years, 10 months 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/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Siobhan

    (@siobhyb)

    10 years, 10 months ago

    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. 🙂

    Thread Starter Angieatc

    (@angieatc)

    10 years, 10 months 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.

    Siobhan

    (@siobhyb)

    10 years, 10 months ago

    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;
    }

    Thread Starter Angieatc

    (@angieatc)

    10 years, 10 months 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!

    Plugin Author Brandon Kraft

    (@kraftbj)

    Code Wrangler

    10 years, 10 months ago

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

    Thread Starter Angieatc

    (@angieatc)

    10 years, 10 months ago

    Yep I agree! Thank you very much.

    Siobhan

    (@siobhyb)

    10 years, 10 months ago

    You’re welcome. Glad you solved the problem 🙂

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘CSS – Minor Customization’ is closed to new replies.