Remove "Widget" Corner-Radius

Answered
0
0

Hi Team,

Can you please direct me on the settings to remove the border radius for the widget (am not sure if that is the correct component) in the attached image ( the border radius at the red circled areas).

  • You must to post comments
Best Answer
0
0

The areas you circled are affected by a few different components. You’ll want to use the Theme Builder to edit the JSON directly. Click on the “Editor” tab at the top of the theme builder to see the JSON.

See the picture I attached- I modified the borders to be different colors based on which component they were coming from. I also set the “radius” property to 50 in certain places in order to give it a curved radius.

Panel is in blue, and is a pretty close match to what you want to change.
"panel": {
"states": {
"default": {
"styles": {
"width": 1,
"style": "solid",
"color": "blue",
"radius": "50"
}
},

Resizer is in light green (“#00FF27”,)- it affects the outer border of the area you were looking at
"resizer": {
"states": {
"default": {
"styles": {
"width": 1,
"style": "solid",
"color": "#00FF27",
"radius": "50"
}
}
}

widget is in red, and affects the area you want- but also other areas all over the page.
"widget": {
"states": {
"default": {
"styles": {
"width": 1,
"style": "solid",
"color": "red",
"radius": "50"
}
},

splitter (part of the splitpane) is in yellow, it affects the colors of the lines in the middle
"splitpane": {
"text": "SplitPane",
"states": {
"default": {
}
},
"components": {
"splitter": {
"states": {
"default": {
"properties": {
"width": 9,
"height": 9,
"cursor": "default"
},
"styles": {
"fillColor": "Gray",
"backgroundColor": "Yellow",
"backgroundRepeat": "no-repeat",
"backgroundSize": "20px 20px",
"backgroundPosition": ["center", "center"]
}
},

I’ve also attached a zip file containing the full theme file that I used (Borderradius_differentColors.theme) It’s a modified version of the bootstrap=4 theme. If you want to focus in on the areas I changed, you can do a CTRL+F for the code snippets I shared, or do a textCompare line-by line with the bootstrap-4 theme.

HTH,
Julie

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.