[Resolved] Help Adjusting Email Newsletter

[Sanu Kumar]

Hi
I installed the Mailchimp email newsletter plugin and try to give them a unique look.
I added this CSS:

.mc4wp-form input[type="email"] {
  background-color: white;
	line-height: 34px;
	margin-bottom: 10px;
	width: 400px;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  font-size: 15px;
}

@media (max-width: 767px) {
	.mc4wp-form input[type="email"] {
		width: 100%;
		margin-bottom: 10px;
	}
}
	
.mc4wp-form input[type=submit] {
	color: #ffffff;
	line-height: 34px;
	font-size: 16px;
	letter-spacing: 1px;
	width: 150px;
  border: none;
  border-radius: 2px;
	-webkit-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
	border-bottom: 5px;
	border-radius: 3px;
}

@media (max-width: 767px) {
	.mc4wp-form input[type="submit"] {
		width: 100%;
	}
}

but I want to make it something like this:

Currently it looks like this:

<br />online picture hosting sites<br />

I am aware that this is not related directly to the GeneratePress theme, but I would appreciate it really much if you could help out with this (unless it requires a significant amount of time from your side).

[David]

Hi there,

remove you current CSS and try adding this:

.mc4wp-form-fields,
.mc4wp-form-fields input[type="email"],
.mc4wp-form-fields input[type="submit"] {
    border-radius: 50px;
}
.mc4wp-form-fields,
.mc4wp-form-fields input[type="email"] {
    background-color: #fff;
}

.mc4wp-form-fields {
    padding: 8px;
    display: flex;
    max-width: 600px;
    margin: 10px auto;

}
.mc4wp-form-fields input[type="email"] {
    flex: 1;
    border: 0;
}

@media(max-width: 500px) {
    .mc4wp-form-fields {
        flex-wrap: wrap;
    }
    .mc4wp-form-fields input[type="submit"] {
        flex: 1;
    }
    .mc4wp-form-fields {
        border-radius: 30px;
    }
}

[Sanu Kumar]

Thanks David. It worked

[David]

Glad to be of help

[Sanu Kumar]

Hi

I need one small help again.

I am using this CSS to style the list into a numbered list and it works fine but this CSS is also affecting the comment section area and I want to exclude it from the comments area.

/* START CUSTOM NUMBERED LIST STYLE
*/
.entry-content ol {
	counter-reset: my-custom-counter;
  	list-style: none;
  	padding-left: 0px;
}

.entry-content ol li {
	margin: 0 0 0.5rem 0;
  	counter-increment: my-custom-counter;
  	position: relative;
}

.entry-content ol li::before {
	content: counter(my-custom-counter);
  	background: #39464d;
  	color: #fff;
  	font-size: 1.1rem;
  	font-weight: bold;
  	position: absolute;
  	--size: 35px;
  	left: calc(-1 * var(--size) - 10px);
  	line-height: var(--size);
  	width: var(--size);
  	height: var(--size);
  	top: 0;
  	transform: rotate(-10deg);
  	border-radius: 50%;
  	text-align: center;
}
/* END CUSTOM NUMBERED LIST STYLE
*/

could you help me out with this

[Elvin]

Hi Sanu,

I’m not sure I see the specific list you’re trying to style. Can you point us to it?

Also, can you assign a class to the ordered list you’re trying to style? Or perhaps, wrap it in a GenerateBlocks container block and add an Additional CSS class selector?

It’s so we can use the added class selector to specifically target the OL list you’re trying to style.

Let us know.

[Sanu Kumar]

If you see this post: https://www.masteryblogging.com/best-appsumo-deals/

I added the above CSS to achieve this and it works fine. Here you can see the screenshot

but that CSS is also affection the comments area as you see below

I only want to style numbered list ( NOT a bullet list as I am already using square shape instead of bullet). I only want to style numbered list.

[David]

I updated your CSS here:

https://generatepress.com/forums/topic/help-adjusting-email-newsletter/#post-1803954

It now will only apply to lists within the entry-content – ie. your post content, not outside of that.

[Sanu Kumar]

thanks David, you’re awesome!!!

[David]

Glad we could be of help

[Author]

Posts