Using jquery to Change Social Sign On Buttons | Community
Skip to main content
A
Anonymous
August 21, 2013
Solved

Using jquery to Change Social Sign On Buttons

  • August 21, 2013
  • 6 replies
  • 1520 views
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
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by
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>

6 replies

A
Anonymous
Accepted solution
August 21, 2013
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>
A
Anonymous
August 21, 2013
Kenny,
This worked. I have to remember to use the !important. So simple.
Thank you so much!!
Sheila
A
Anonymous
August 21, 2013
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!
A
Anonymous
November 7, 2014
Where do we add the custom HTML, on Marketo?

<style>
.cf_sign_on_button {
width: 90px !important;
}
</style>
A
Anonymous
November 7, 2014
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
A
Anonymous
November 7, 2014
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
 
Terms & ConditionsAccessibility statement

Loading footer...