No access to head or main css - how to style this form element?

**Katt** · 05-22-2009, 10:52 AM

I'm trying to help someone using a hosted shopping cart (MonsterCommerce). He has a registration/login page where he wants to change the appearance of the register button. The problem is, this shopping cart doesn't give you access to the <head> section of the html, or the main css, but it does allow a custom css stylesheet, which loads in the <head> after the main css.

To complicate the matter, the page has 3 buttons that all use the same class, they do not use an id but they do have unique names. Is there a way to use getelementbyname to code one of the 3 buttons without affecting the other two? Or some other way to achieve this?

I don't know if this matters, but the buttons are all made using the form element "button".

Thanks for any advice!

**Dubbya** · 05-22-2009, 01:26 PM

At this point, you'd be best off to style the element by class or #id as it doesn't appear that you can define styles according to the button "name". You can apply styles to a div id or class and a form id or class, but not by using name="button-name" for a specific element.

There may be an elaborate Javscript function that will allow you to mess with the elements according to the "name" delimiter but you'd have to look for one.

We could use a link to the page in question or at least some source code to mess with.

**Katt** · 05-22-2009, 02:38 PM

Hey thanks for the quick response Dubbya!

I'm posting the code from the page - the entire table that we're working with. Keep in mind we don't have direct access to this code (if we did we would clean it up!) but we can add code above this. I've added a comment to show the button we're wanting to style:

Code:

<table class="centercontent" width="896px">
  <tr>
    <td>
      <table border="0" class="default" width="100%" cellspacing="0" cellpadding="2">
        <tr>
          <td width="22%" class="ProdDisplay1"><font class="subtitle">New User?</font></td>
          <td width="4%" align="center" class="ProdDisplay1"><img border="0" src="Images/or_60x23.gif" width="60" height="23"></td>
          <td width="81%" class="ProdDisplay1"><font class="subtitle">Already Have An Account?</font></td>
        </tr>
<form name="frmLogin" action="login.asp?Auth=1" method="post">
        <tr>
          <td valign="top" class="sitewide">If you want to login, you will need to register an account first.
            <br><br>
<!-- This is the button we need to style -->
            <input type="button" class="storebuttons" value="Register" name="btnRegister" onclick="window.location.href='login.asp?Register=1';">
          </td>
          <td class="sitewide">&nbsp;</td>
          <td class="sitewide">
            <table width="100%" cellpadding="0" cellspacing="0">
              <tr>
                <td class="sitewide" colspan="2"><b>Store Members</b>,<br>Sign in for faster checkout!</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td class="sitewide" width="140">Username or Email Address:</td>
                <td class="sitewide"><input type="text" class="sitewideinput" name="txtusername" maxlength="100" tabindex="1" size="20" value=""></td>
              </tr>
              <tr>
                <td height="16" class="sitewide">Password:</td>
                <td class="sitewide"><input type="password" class="sitewideinput" name="txtPassword" maxlength="50" tabindex="1" size="20" value=""></td>
              </tr>
              <tr>
                <td class="sitewide" colspan="2"></td>
              </tr>
              <tr>
                <td height="22" class="sitewide" colspan="2">
                  <input type="submit" value="Login" name="btnLogin" class="storebuttons" ID="Submit1">
                </td>
              </tr>
              <tr>
                <td height="11" class="sitewide" colspan="2"></td>
              </tr>
              <tr>
                <td height="8" class="sitewide" colspan="2">
                  <input type="checkbox" name="intRememberMe"value="1"><b>Remember Me* <font size="1">(expires after 120 days)</font></b>
                </td>
              </tr>
              <tr>
                <td colspan="2">&nbsp;</td>
              </tr>
              <tr>
                <td class="sitewide" colspan="2">
                  <a class="sitewidelinks" title="Did you forget your account password? Click Here To Have Your Password Emailed To You." href="login.asp?Register=2">Forgot your password?</a>
                </td>
              </tr>
              <tr>
                <td height="29" class="sitewide" colspan="2"><br><b>*Account Security:</b><font size="1"> By using the &quot;Remember Me&quot; feature, any user that has access to your computer will also have access to shop here, view previous orders and re-order products. If you are using a public computer or you do not want your personal information displayed, please do not select this option. If you leave this option checked, our store will not be held liable for unauthorized access to your account. In addition, your browser must have cookies enabled for this feature to work properly.</td>
              </tr>
              <tr>
                <td height="34" width="468" colspan="2">&nbsp;</td>
              </tr>
            </table>
          </td>
        </tr>
</form>
      </table>
    </td>
  </tr>
</table>

**weegillis** · 05-22-2009, 03:37 PM

Originally Posted by Katt

... but it does allow a custom css stylesheet, which loads in the <head> after the main css.

Assuming the custom style sheet actually is the last to load would give you access to every selector in the DOM at load time. Your sheet can override most anything that isn't being dynamically acted upon by DOM and/or AJAX behaviors.

Does the CLASS attribute in input elements relate to a behavior that may have its own css properties? Or is it simply assigning a background-image?

**Katt** · 05-22-2009, 03:58 PM

The main stylesheet only styles the font for the class "storebuttons" - in fact, the entire stylesheet only has font styling and padding - nothing else.

I knew I could modify this class with the custom css but there's more than one button using this class on this page. I only want to modify the one named "btnRegister". That's why I'm stuck. I'm hoping there's a way to do this with javascript (getelementbyname maybe?)

Thanks for your response weegillis!

**weegillis** · 05-22-2009, 04:58 PM

getElementByTagName('input');
then,
query the list with,
getAttribute('name');
then query the value "btnRegister" to nail down the element. Once you've done this, your script can set the css as needed.

(Note: only example above, not exact code).

**Dubbya** · 05-22-2009, 05:22 PM

Yeah, that's one way to do it, but this is a working solution:

Here's the Javascript that'll allow you to modify the button's CSS styles.

You'll need to put this in the body of your page somewhere below where the button is rendered for it to work.

HTML Code:

<script type="text/javascript"> 
var e = document.getElementsByName("btnRegister")[0];
 e.style.backgroundColor = 'black';
 e.style.color = '#fff';
 e.style.fontSize = '10px';
 e.value = 'My Account';
</script>

Here's a handy reference for converting attributes from CSS to Javascript:
CSS Properties to JavaScript Reference

Good Luck!

**Katt** · 05-22-2009, 06:21 PM

Awesome! I will try that this weekend. Thank you very much!!!

**Katt** · 05-27-2009, 11:16 AM

Dubbya - that's awesome! It worked perfectly. I even figured out how to add positioning and a background image. Thanks!!!!

**Dubbya** · 05-27-2009, 11:18 AM

Yeah, I'm da man!! Lolz.

You pay me now, yes?

Thread: No access to head or main css - how to style this form element?

Thread Tools

Display

No access to head or main css - how to style this form element?

Re: No access to head or main css - how to style this form element?

Re: No access to head or main css - how to style this form element?

Re: No access to head or main css - how to style this form element?

Re: No access to head or main css - how to style this form element?

Re: No access to head or main css - how to style this form element?

Re: No access to head or main css - how to style this form element?

Re: No access to head or main css - how to style this form element?

Re: No access to head or main css - how to style this form element?

Re: No access to head or main css - how to style this form element?

Similar Threads

Form element / option box not indexing.

Applying class to design element via external style sheet

Posting Form Data to an Access (or SQL) Database

Like to collect form information online to Access DB.

Datasheet-style form - feedback wanted

Posting Permissions