Rounded edged (border-radius) on view panels in a smartform

  • 22 January 2020
  • 1 reply
  • 86 views
M

Hi

 

I've recently been tasked with creating a custom theme for a client.

One of the things we want to do is have each view panel on the form display with rounded edges rather than the default sharp corners. Something like "border-radius: __px;" in the themes CSS file.

 

I've edited the themes main CSS file and have managed to give button controls a border-radius. But I've used the element inspector in the browser and added the border-radius property to many of the CSS classes that supposedly style the view divs on a form, but nothing works. As many classes as I change I am still met with shard edged views everytime I add changes and refresh the css.

 

If anyone can offer advice or an explaination as to why I can't get this right it would be greatly appreciated.

 

Thanks

 

Michael

1 reply

RaymondJVR
Userlevel 4
Badge +13

Hi Mikman54


 


I have done this before however there are some detail required to be sure the correct lines in the css files are indicated, as the lines in the css files that would need altering might differ from theme to theme and even from version to version.  


That being the case can you confirm the following:



  • Which theme have you chosen as a base to work from? 

  • What exact version of K2 you are working with?


 


On K2 Five - These were the files and css lines altered on a clean base of the Platinum theme to get the view radius corner affect for item view, list views and editable list views while present on a form.


 



Item Views


Affected View: Item View
Affected View Area: View Bottom Border-Radius (Bottom Corners)
Altered File: Platinum.css
Altered Files Row Line: 4229
Styling Added: border-radius: 0px 0px 10px 10px;


Affected View: Item View
Affected View Area: View Top Inner Border-Radius (Top Inner Corners)
Altered File: Platinum.css
Altered Files Row Line: 4225
Styling Added: border-radius: 10px 10px 0px 0px;


Affected View: Item View
Affected View Area: View Top Outer Border-Radius (Top Outer Corners)
Altered File: Platinum.css
Altered Files Row Line: 4221
Styling Added: border-radius: 10px 10px 0px 0px;

List Views and Editable List views


Affected View: List View & Editable List view
Affected View Area: View Bottom Border-Radius (Bottom Corners)
Altered File: Platinum.css
Altered Files Row Line: 4429
Styling Added: border-radius: 0px 0px 10px 10px;


Affected View: List View & Editable List view
Affected View Area: View Top Inner Border-Radius (Top Inner Corners)
Altered File: Platinum.css
Altered Files Row Line: 4355
Styling Added: border-radius: 10px 10px 0px 0px;


Affected View: List View & Editable List view
Affected View Area: View Top Outer Border-Radius (Top Outer Corners)
Altered File: Platinum.css
Altered Files Row Line: 4337
Styling Added: border-radius: 10px 10px 0px 0px;



Please take note of the following:
It is not recommended to change heights of toolbars / buttons or other elements, unless you are an expert with CSS, as this may break the responsive design that scales your forms nicely to mobile devices of various sizes also custom components and custom changes made to K2 objects and the K2 database are not directly supported by K2 product support.


 

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings