Save/Cancel Button Background color

Forums Dynamic Forms for SharePoint Save/Cancel Button Background color

This topic contains 3 replies, has 2 voices, and was last updated by  Craig Campbell 3 months, 4 weeks ago.

  • Author
    Posts
  • #20262

    Craig Campbell
    Participant

    Hi Alex, I am using this code to change the Save/Cancel/Edit buttons in my forms.
    What I would like to know is how I can change the background color of these buttons. Sorry I am a little illiterate when it come to JavaScript.
    {
    var inputs = document.getElementsByTagName(“input”);
    for(i = 0; i<inputs.length; i++)
    for(j = 0; j<inputs.length; j++)
    {
    if(inputs[i].type == “button” && inputs[i].value == “Save”)
    inputs[i].value = “Submit”;
    inputs[i].style.color = “Red”;
    if(inputs[j].type == “button” && inputs[j].value == “Cancel”)
    inputs[j].value = “Cancel Off-Board”;
    inputs[j].style.color = “Red”;
    }
    }

  • #20273

    Craig Campbell
    Participant

    Hi Alexander
    I figured out the background issue and I can change the text size, color and background color for all buttons in the Edit and New forms. But it will not allow me to change for the Edit Item in the Display form. I can change the Close button in the dsiplay form. Thanks so much for your help.

    Here is my code:
    {
    var inputs = document.getElementsByTagName(“input”);
    for(i = 0; i<inputs.length; i++)
    for(j = 0; j<inputs.length; j++)
    {
    if(inputs[i].type == “button” && inputs[i].value == “Edit Item”)
    inputs[i].value = “Make Changes”;
    inputs[i].style.color = “white”;
    inputs[i].style.background = “#849c32”;
    inputs[i].style.weight = “Bold”;
    inputs[i].style.width= “40px”;
    inputs[i].style.height = “auto”;
    // change button font size
    inputs[i].style.fontSize = “14px”;
    if(inputs[j].type == “button” && inputs[j].value == “Close”)
    inputs[j].value = “Exit”;
    inputs[j].style.color = “white”;
    inputs[j].style.background = “#849c32”;
    inputs[j].style.weight = “Bold”;
    inputs[j].style.width= “auto”;
    inputs[j].style.height = “auto”;
    // change button font size
    inputs[j].style.fontSize = “14px”;
    }
    }

  • #20291

    Alexander Bautz
    Keymaster

    Hi,
    You should use Custom CSS to style the buttons – like this:

    input[type="button"]{
        color:#ffffff;
        background-color:#849c32;
    }

    The Edit item button in DispForm is inserted after a timeout of 1000ms so you must wrap the code in Custom JS like this to run it after 1100ms:

    setTimeout(function(){
        jQuery("#dffs_editItemBtn").val("Make Changes");
    },1100);

    Alexander

  • #20318

    Craig Campbell
    Participant

    Thanks Alexander this works great now.

You must be logged in to reply to this topic.