Change Button Style Dropdown

0
Hi, is it possible to change the button style dropdowns that are given in studio pro. We would like to set up standard ones for use throughout the app  
asked
3 answers
0

I believe you are asking if you can add your own styles to the dropdown, such as ButtonStyleBen.  If that is the case, I do not believe it is possible to modify the values in this list.  You can of course customize what Default, Primary, Danger, Etc represent from a style perspective. 

 

With that being said, there might be a configuration file stored with the styles if you look through the folder structure of Studio Pro, and that might be a way to add to the dropdown.  It has to be stored somewhere.

answered
-1

Hi, in case you are using the Dropdown widget you can customize its color by creating a custom class that targets the select element.

// SCSS
.my-class {
  select {
    background-color: red;
 }
}

// CSS
.my-class select {
  background-color: red;
}

 

 

 

 

answered
-1

If I understand correctly you want to change the options for buttons in the Button style selector? If that’s correct you can try changing the configuration in a settings.json file located in your theme folder.

This is jut an example fo the parameters you can configure for a given widget
 

"DataGrid":[
  {
    "name":"Style",
    "type":"Dropdown",
    "description":"Choose one of the following styles to change the appearance of the data grid.",
    "options":[
      {
        "name":"Striped",
        "class":"datagrid-striped"
      },
      {
        "name":"Bordered",
        "class":"datagrid-bordered"
      },
      {
        "name":"Lined",
        "class":"datagrid-lined"
      }
    ]
  },
  {
    "name":"Hover style",
    "type":"Toggle",
    "description":"Enable data grid hover to make the rows hoverable.",
    "class":"datagrid-hover"
  },
  {
    "name":"Row size",
    "type":"Dropdown",
    "description":"Increase or decrease the row spacing of the data grid row.",
    "options":[
      {
        "name":"Small",
        "class":"datagrid-sm"
      },
      {
        "name":"Large",
        "class":"datagrid-lg"
      }
    ]
  }
],

 

answered