Need some help with CSS

Resolved Polarwind
(@polarwind)

9 years, 9 months ago

I did some reading on this plugin support page and see that most design changes can be achieved by CSS. My WordPress theme supports custom CSS code.

To have the embedded code matched to my web design I need to change following:

1) I need an additional 5px marging above the first input field (to close to the text)

2) All input fields and button have full width, as well as the custom message that shows after completing the form. I would like a 10 px margin left and right.

3) the font of the place holder and entered text is to bold and is the wrong font.

4) The email field and button should be side by side.

As an example of a form that I use on my web site, I have included it on a test page, for comparison. I have been analysing the CSS code, but I need some help. If I can create a likewise CSS style derived from the original form, then I am a very happy man 🙂

The test page is here : http://Care4U.no/test/

Hope you have the time to take a look at this. Thank you in advance.

https://ww.wp.xz.cn/plugins/yikes-inc-easy-mailchimp-extender/

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

Plugin Contributor Tracy Levesque
(@liljimmi)

🏳️‍🌈 YIKES, Inc. Co-Owner

9 years, 9 months ago

Hello Polarwind,

Do you have a screen shot of the embed form you created that looks exactly the way you like? If I could look at that, it will be easier for me to make the form on the test page look exactly like that.

Thank you!
-Tracy

Thread Starter Polarwind
(@polarwind)

9 years, 9 months ago

Hi Tracy,
I’ve updated the test page at http://Care4U.no/test. Now you see both your form plugin and the default one that I use. If you should notice that on the default form the background color is missing from the lower part of the form, just resize your window a bit (make it smaller). This is the reason I want to use your plugin, as there is something in the CSS code that brakes my form. But it should show you the colors, the margins etc.

I hope this helps. Thank you 🙂

Plugin Contributor Tracy Levesque
(@liljimmi)

🏳️‍🌈 YIKES, Inc. Co-Owner

9 years, 9 months ago

Hi Polarwind,

Thank you very much that is very helpful.

First step, can you please set the form to be inline?
https://yikesplugins.com/support/knowledge-base/how-do-i-place-all-of-my-form-fields-on-one-line/

Even if it makes it look funky as first, it’ll be easier for me to style to look the way you like.

Thank you!
-Tracy

Thread Starter Polarwind
(@polarwind)

9 years, 9 months ago

Done 😉
Plugin Contributor Tracy Levesque
(@liljimmi)

🏳️‍🌈 YIKES, Inc. Co-Owner

9 years, 9 months ago
Hello!

Please give this a try. It may need some tweaking so let me know how it looks.
```
.yikes-easy-mc-form.yikes-easy-mc-form-1 label.label-inline.FNAME-label, .yikes-easy-mc-form.yikes-easy-mc-form-1 label.label-inline.LNAME-label {
	width: 50%;
	margin-top: 12px;
}

.yikes-easy-mc-form.yikes-easy-mc-form-1 label.label-inline.FNAME-label {
    padding-left: 10px;
}

.yikes-easy-mc-form.yikes-easy-mc-form-1 label.label-inline.EMAIL-label {
    padding-left: 10px;
	padding-right: 0;
	width: 70%;
}

.yikes-easy-mc-form.yikes-easy-mc-form-1 input[type="text"], .yikes-easy-mc-form.yikes-easy-mc-form-1 input[type="email"] {
    height: 42px;
    padding: 6px 12px;
    font-size: 20px;
    font-weight: 200;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
}

.yikes-easy-mc-form.yikes-easy-mc-form-1 input[type="email"] {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.yikes-easy-mc-form.yikes-easy-mc-form-1 .submit-button-inline-label {
	width: 27.4%;
}

.yikes-easy-mc-form.yikes-easy-mc-form-1 .submit-button-inline-label .yikes-easy-mc-submit-button.yikes-easy-mc-submit-button-1 {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	padding: 8px 10px;
}
```
Thread Starter Polarwind
(@polarwind)

9 years, 8 months ago

Thank you. There seems to be something fishy with the input[type=”text”] parameter. When I use that part in my custom css input field, my wp-admin becomes unaccessible, gives error 500. I had to rename the plugin folder to regain access.

I tested by adding the sections one by one. When I found out what section was giving the problem, I testet by only using one of the two parameters.

.yikes-easy-mc-form.yikes-easy-mc-form-1 input[type=”text”] {
height: 42px;
padding: 6px 12px;
font-size: 20px;
font-weight: 200;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
}

results in error 500.

.yikes-easy-mc-form.yikes-easy-mc-form-1 input[type=”email”] {
height: 42px;
padding: 6px 12px;
font-size: 20px;
font-weight: 200;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
}

works just fine.

Plugin Contributor Tracy Levesque
(@liljimmi)

🏳️‍🌈 YIKES, Inc. Co-Owner

9 years, 8 months ago

Hello

That is super strange CSS code should never cause a 500 error.

Either way, I’m glad you found a workaround.

Thank you!
-Tracy

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

The topic ‘Need some help with CSS’ is closed to new replies.