Save/Cancel Button Background color

Forums Dynamic Forms for SharePoint Save/Cancel Button Background color

Viewing 3 reply threads
  • 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.

Viewing 3 reply threads
  • You must be logged in to reply to this topic.