Using jquery to Change Social Sign On Buttons

[Anonymous]

Has anyone used jquery to change the social sign-on button? Specifically, I have this page:
http://info.getsatisfaction.com/Q313_Sketchbook_BenNorris_registration-test.html

You can see that the Facebook button looks awful. This is because the font size for the text in the button is too big to fit in the button width. Using the developer tools in Firefox, I can change the width of the class cf_sign_on_button to 90px and have the button work correctly.

So I've been trying to do this dynamically using this jquery...
 $jQ(".cf_sign_on_button").css("width", "90px");

The full jquery html block is below. I know the block is working because the button text is properly changed. Any ideas of whether I'm doing something wrong or if the way the code is inserted makes it impossible for me to change?

<script>
    // Change the text in the button by replacing Download Now with different text
     var $jQ = jQuery.noConflict();
     // Use jQuery via $j(...)
     $jQ(document).ready(function(){
         $jQ("#mktFrmSubmit").val("     Download Now     ");
         // change the div width for the facebook button
         $jQ(".cf_sign_on_button").css("width", "90px");
     });
</script>

Thanks for any insights!
Sheila

[Anonymous · Accepted solution]

You should be able to add this CSS to a custom HTML block and achieve the results you are wanting:

<style>

.cf_sign_on_button {

width: 90px !important;

}

</style>

[Anonymous]

Kenny,
This worked. I have to remember to use the !important. So simple.
Thank you so much!!
Sheila

[Anonymous]

Kenny beat me to it.

Not sure how you would do this with jQuery, but this might work for you:

<style>

.cf_widget_socialsignon .cf_sign_on_button {

width:90px !important;

}

</style>

Always remember to test to see if this affects anything else!

[Anonymous]

Where do we add the custom HTML, on Marketo?

<style>

.cf_sign_on_button {

width: 90px !important;

}

</style>

[Anonymous]

Hi Tina,
It can go on the landing page simply by dragging in an HTML block and copying the code in there.

If you want to add it across all of your landing pages, then you would add it into your landing page templates.
Regards,
Sheila

[Anonymous]

Hi Sheila,

Thank you.  We are embedding the form into our website.  Would I have to ask my programmer to do this, or could i acheive this within Marketo?

Best, 
Tina