WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Changing custom header CSS (8 posts)

  1. dkchi2010
    Member
    Posted 1 year 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

  2. Odai Athamneh
    Member
    Posted 1 year ago #

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

  3. dkchi2010
    Member
    Posted 1 year 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

  4. Odai Athamneh
    Member
    Posted 1 year 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?

  5. dkchi2010
    Member
    Posted 1 year 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

  6. Odai Athamneh
    Member
    Posted 1 year 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?

  7. dkchi2010
    Member
    Posted 1 year ago #

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

  8. dkchi2010
    Member
    Posted 1 year ago #

    YAY! Perfect!

    Thank you so very, very much!
    dk

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags