Changing custom header CSS

  • Resolved dkchi2010

    (@dkchi2010)


    13 years, 3 months ago

    Site and CSS coding was previously created and now needs changingon http://www.snowcityarts.org. One change is the newsletter signup form. We want it to be only a link on the text “newsletter signup” and to go to the follow page: http://www.snowcityarts.org/contact.newsletter-sign-up.

    Normally,I would input <a>Newsletter Signup</a>

    However, when I do that the entire field disappears & even the new text doesn’t show up.

    This is the current code:

    '<form name="ccoptin" id="CC" action="http://visitor.constantcontact.com/d.jsp" target="_blank" method="post" >
                <input id="ccinput" type="text" name="ea" value="">
                <!--<input  class="submitLink cufon" type="submit" value="SIGNUP" />-->
				<input type="hidden" name="m" value="1102918733794">
				<input type="hidden" name="p" value="oi">
                <button type="submit" class="submitLink cufon">SIGNUP</button>

</form>'

    And this is the CSS code for that piece:

    '#header form#CC {
	position:absolute;
	width:210px;
	top: 16px;
	left: 486px;

}'

    [Please use the code buttons or backticks (not quotes) when posting code]

    Any help would be GREATLY appreciated, please.
    dk

Viewing 7 replies - 1 through 7 (of 7 total)
  • Odai Athamneh

    (@heyodai)

    13 years, 3 months ago

    Where is the signup form on the page? All I could find was a link.

    Thread Starter dkchi2010

    (@dkchi2010)

    13 years, 3 months ago

    The form is at the top of the page in the header where it sayd “email” and “signup.” The form leads to Constant Contact. We want to change it to a link to an internal page with a form that stays on our site.
    dk

    Odai Athamneh

    (@heyodai)

    13 years, 3 months ago

    Thanks, it seems obvious now but I couldn’t see it before.

    This code controls where the form directs to:

    action="http://visitor.constantcontact.com/d.jsp"

    So you could change that to keep the form working internally. However, if I’m understanding, you want to remove the form and replace it with a link?

    Thread Starter dkchi2010

    (@dkchi2010)

    13 years, 3 months ago

    I do want to remove the form, however in frustration I had replaced that code to the page and for whatever reason, it gave me a 404 error, even though the page is there as input.

    http://www.snowcityarts.org/contact/newsletter-sign-up

    I’m not sure if it has something to do with the ‘action’ or the .jsp

    Would much rather just replace it all with a text link.

    Thanks for your time.
    dk

    Odai Athamneh

    (@heyodai)

    13 years, 3 months ago

    I played around with things using Google Chrome’s “Inspect Element” tool, which lets you edit a website’s code on-the-fly. Here are some thoughts.

    I can see you already have part of the form commented out. Try going ahead and commenting the whole thing out, starting with

    <form name="ccoptin" id="CC" action="http://visitor.constantcontact.com/d.jsp" target="_blank" method="post">

    and ending at

    <button type="submit" class="submitLink cufon"><cufon class="cufon cufon-canvas" alt="SIGNUP" style="width: 52px; height: 13px;"><canvas width="61" height="18" style="width: 61px; height: 18px; top: -4px; left: -1px;"></canvas><cufontext>SIGNUP</cufontext></cufon></button>
</form>

    After that, I inserted a manual link like so:

    <a href="http://www.snowcityarts.org/contact.newsletter-sign-up" id="newsletterSignupLink">Newsletter Signup</a>

    (As an aside, is there supposed to be a period after “contact” in that URL, as opposed to a dash?)

    But the link is floating over the logo, and not easily visible. The form has this CSS code attached to it:

    @media screen
#header form#CC {
position: absolute;
width: 210px;
top: 16px;
left: 486px;

    We already added an ID to the new link (id="newsletterSignupLink"), so you just need to modify the CSS like so:

    @media screen
#header, form#CC, #newsletterSignupLink {
position: absolute;
width: 210px;
top: 16px;
left: 486px;

    And that worked when I did it in Chrome. Does it work for you?

    Thread Starter dkchi2010

    (@dkchi2010)

    13 years, 3 months ago

    Thank you Odai for your time and effort in this. I will work on it tonight and let you know.
    dk

    Thread Starter dkchi2010

    (@dkchi2010)

    13 years, 3 months ago

    YAY! Perfect!

    Thank you so very, very much!
    dk

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

The topic ‘Changing custom header CSS’ is closed to new replies.