[Pro] Help with styling Mail Chimp code

Freeway
1

Hi,
I have embedded a mail chimp form on my contact page:
http://www.jessicaliggero.com/contact.html

I would like to change the styling but have no idea how to alter the code. Here is what I want to change:

  1. Font = courier
  2. text boxes to have slightly rounded edges and be several pixels thicker
  3. Make the ‘subscribe’ button dark grey
  4. color of text box outline to be a light grey and when active to turn dark grey (match the color of the ‘subscribe’ button)
  5. Remove the current blue outer glow when active

I have a screen shot of how I would like the styling but do not see how I can post it here. Any help would be great thanks.

Jessica

http://www.jessicaliggero.com/contact.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

To show a screenshot here it firstly has to be uploaded to a publicly available server

Then add the following code to your post:

![screenshot](http://www.yoursite.com/yourimage.jpg)

Do that and then we will be able to provide some CSS to add to your page code using Page>Html Markup

However when you design your form with MC you may well have the option to choose a default look. Your current version uses the Classic Version.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

See if this works for you

http://www.deltadesign.co/mc-signup/

I have removed the reference to the Classic stylesheet in the markup item.

Then I moved all the styles into Page>Html Markup in the before section and tweaked them to suit your requirements.

Also added the code to remove the active glow and added the active border colour.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

See if this works for you

http://www.deltadesign.co/mc-signup/

I have removed the reference to the Classic stylesheet in the markup item.

Then I moved all the styles into Page>Html Markup in the before section and tweaked them to suit your requirements.

Also added the code to remove the active glow and added the active border colour.

D

Looks good!

So how should I paste the code into my site, exactly. Previously I’ve been putting the whole thing in ‘Insert’ then ‘markup item.’ Do I need to break it up and put some in the ‘HTML markup’ under the page menu?

Also do I grab the new code from viewing the page source and copying it there?
J

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

There is a downloadable FW file for you to dissect on that page.

All the code is in there.

Copy and paste if that makes it easy.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

So I figured it out and you would probably laugh if you knew how long it took me to do it. But here it is:
http://www.jessicaliggero.com/contact.html

Thank you for your help.
I am wondering if we can make 2 small adjustments.

  1. Make the font for ‘Email Address’, ‘First Name’ and ‘Last Name’ in bold and smaller to size 14 (it is currently 18?)

  2. Move the asterisk from inside of the text box to the right of email address above the box, see the URL below:

This is from mail chimp’s full form that I styled. I did not want to put something that large on one of my pages for a sign-up form but I liked the styling of the 3 text boxes so I thought that I would use the smaller classic form and adjust the styling to match the full form. For some reason mail chimp moved the asterisk to the inside with the classic form which I dislike.

thanks again,

Jessica

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Let me quick chime in here and point you to the following resource:

http://www.kimmich-digitalmedia.com/videos/013_thecodingepisodes_part6_the-paragraph

(and the following).

Start creating “real” styles rather than fiddling them in inspector. This helps you in most cases, cause additional things often enough follow some simple rules (body, paragraph, headings 1-x).

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options