Customizing MailPoet Subscriber Box

[anewcreation]

Hi Everyone, I've been trying for 2 hours to figure out or find code that I can place in my stylesheet that will change the background color, the font color, and the width of my MailPoet subscriber box that is in the side bar. I haven't been able to make it work. Has anyone else done this, if so, can you share the code that I would place in my stylesheet.

Thanks so much for your time.

Jeanne

http://hspmentor.com/

[Victor Font]

You would create a style block for #wysija-2.

#wysija-2 {
    background-color: #ff0000;
    color: #000000;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[anewcreation]

Hi Victor, Thank you so much for your post. I copy and pasted your code and placed it at the bottom of my style.css file, but for some reason, there was no change at all in the subscriber box. Jeanne

[jlknauff]

Jeanne,

Try this instead:

.widget_wysija {
    background-color: #ff0000;
    color: #000000;
}

[anewcreation]

Hi jlknauff, Thanks for looking into things. I copy and pasted the additional code you sent, there was still know change though. I appreciate that you tried. Jeanne

[jlknauff]

Do you have a caching plugin? If so, flush your cache, and do a hard refresh (ctrl + f5)

[anewcreation]

HI,

Whoops...embarrassing typo in last post, I meant to write "no change"! I tried clearing the cache and also restarted my computer, but there was still no change. Are you seeing a change on your computer? Here is a screenshot of what I'm viewing.

[jlknauff]

Are you sure you're editing the right file? I tried the changes that both Victor and I recommended and it changes the area you're trying to change.

(Right click to inspect in Chrome or with the Firebug extension in Firefox to see changes live in real time.)

[anewcreation]

Hi, It does seem like something strange like that is going on. It's odd that nothing is changing the design of the form. Here is screenshot so you can see the file I'm editing and the code that was placed. I really appreciate the fact that you are taking time out to look at my posts, thank you.

[jlknauff]

Hmmm...if you're changing the correct CSS, it definitely should change on the front end.

Try this...

.widget .widget_wysija

If that doesn't work, and if you don't mind a stranger poking around in there, I can log in and take a look tomorrow.

[blitzgeek]

I tried to edit in the Browser and it worked like a charm.
`/* MailPoet
--------------------------------------------- */
.widget_wysija {
background-color: #000000;
color: #fff;
}
.widget-title {
color: #64c9ea;
}

[anewcreation]

Hi jlknauff, Thanks so much for offering to look around on my site to see if you can figure out the problem. Unfortunately, the owner of the site didn't want me to do that.

I did a few tests. I edited something else in that same style.css file, the main website nav background color, and it changed. I wanted to make sure it wasn't the css file itself. So that eliminated that.

Yesterday, I was grabbing code from the internet and trying it on the mailpoet form, and one bit of code changed the submit button color. I deleted it since I didn't want that color, just testing. Today I tried that same code, and it didn't change anything. I wonder why it would change yesterday and not change today.

Thanks again for your time.

Jeanne

[Brad Dalton]

I think you can use the Genesis eNews Subscribe widget with MailPoet which should be easier to style.

---

Tutorials for StudioPress Themes.

[Christoph]

If you add code at the bottom of the style.css, make sure you are not writing it inside of a media query ( like you did in the screen shot above).

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[blitzgeek]

I don't know, why my screenshot above doesn't appear.
But i placed the code into line 990 and it worked without problems (done in Browser)

[anewcreation]

Hi Christoph,

Just making sure, your talking about the screenshot above that has the purple boxes around the code, right? I'm not sure what "not writing it inside of a media query" means. Can you explain this so I can change it. Thanks so much for your help!!!

Jeanne : )

[Christoph]

Hi Jeanne,

yes, that´s what I´m talking about.

The structure of media queries is

@media... {
all of your css code for that screen size
}

You placed the code inside of @media only screen and (max-width: 270px) {

The closing bracket } above your code is for .site-title not the media query.

Place your code outside of the media query or even better don't write code at the bottom of the style.css

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[anewcreation]

Hi Christoph,

Thanks for the info. I see what you are talking about now. Funny things is I didn't write the code that mentions the max-width of 270, it was already there when I opened the stye sheet. It didn't have anything to do with the MailPoet form so I didn't pay attention to it. I only added the part in the purple box. Thanks for pointing that out , your right, it doesn't look correct.

I also tried deleting the mailpoet plugin and reinstalling it, and that didn't work either.

Thanks for the information and tips.

Jeanne

[anewcreation]

This reply has been marked as private.

[jlknauff]

Christoph, shit, I'm 99% sure you just hit the nail on the head. 😉

[Author]

Posts