email field size text color

Hi,

The theme on your site appears to be on Thesis. Did you change things up?

You’d need to drop in CSS to modify those items. For example, changing #subbox { width: [some number]px;} would reduce the width of the e-mail box.

The widget overall uses .enews as a class, so you change apply changes like .enews {background: green;}, etc.

Do you use Google Chrome? Their Inspect Element tool is great at determining what CSS is impacting something on a site, which you can then use as a basepoint for modifying it.

Hi Brandon,

Yes I made a mistake and started over. I decided to upload Thesis and try it as well. I like Genesis more as a rule as it it is a simpler framework for me. (I am new and have limited knowledge in coding) But Thesis makes it real easy to edit css (at least for me).

Where would I drop in the css for Genesis? Is it in the style.css? Yes I use Google chrome.

Thanks for any and all help. Is there a place where I can see examples of css for enews widget code to modify or is chrome the best place?

Chrome makes the most sense since the plugin isn’t doesn’t have any styling. it depends fully on the theme (StudioPress themes for Genesis all use the right conventions to work out of the box with eNews).

For Genesis, you’ll want to use a child theme and either use the style.css or download/activate Jetpack, which has a Custom CSS component too if you don’t want to dive into actually editing files.

Ok sorry to be a bother, I switched back to Genesis. I am taking your advice and using the inspect element aspect but am still very new and I am not really understanding what I am looking at just yet.

I added this: #subbox {width: 1px;}
and tried entering every # from 1-100 and noticed no difference, am I doing something wrong?

Here is a link again: https://www.kenziezkorner.com/contact-page/

Sure, no problem.

CSS will use the most specific rule declaration first, meaning #subbox is applied, but if something is more specific (say .enews #subbox), it’ll use that in place of whatever is declared for #subbox.

In other usage, if you set something like h1 { color: blue;} to make all of your headers blue, you could later declare .sidebar h1 { color: red; } to “override” the blue and make h1 headers inside of a sidebar class red.

In your case, your site is using .enews #subbox: https://cloudup.com/covqKs9f82J
So, if you add

.enews #subbox {
width: 145px;
}

you’d be all set on that front.

Now, since it looks like your theme isn’t expecting the first name field, you can mix it up a bit. Copy/paste the entire .enews #subbox rule, paste it into your custom CSS but change up the declaration from .enews #subbox to .enews #subbox, .enews #subbox1, .enews #subbox2 {

With that, you’re telling the browser to apply those rules to any element in any three of those categories (which would be the email field, the first name field, and the last name field, respectively).

Cheers!

Sorry about the other account I hadn’t even realized I had another account. But they are both me.

Thanks again Brandon and on a side note I love Austin!

It is official, I feel like my head is gonna explode! Thank you so much for all the help.

David