Welcome to the nuBuilder Forums!

Register and log in to access exclusive forums and content available only to registered users.

Form tabs view modification

Questions related to using nuBuilder Forte.
Post Reply
Janusz
nuBuilder Team
Posts: 506
Joined: Fri Dec 28, 2018 1:41 pm
Location: Krakow, Poland
Has thanked: 8 times
Been thanked: 18 times

Form tabs view modification

Unread post by Janusz »

Is if possible to modify the form tabs like: hight, color fonts,..etc ?

https://drive.google.com/open?id=1z0El- ... mcs-H3eLc1
If you like nuBuilder, please leave a review on SourceForge
kev1n
nuBuilder Team
Posts: 4305
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 71 times
Been thanked: 446 times
Contact:

Re: Form tabs view modification

Unread post by kev1n »

Font family, type size, colors, and other styles can be controlled with CSS for each kind of element.

https://www.w3schools.com/css/css_intro.asp

Then place the CSS under SETUP -> HEADER between the <style> </style> tags:

That's one of my styles. Other elements are styled too (not just the tabs). Customise it as you like:

Code: Select all

 .nuTabHolder {
     background-color: #f4f4f4;
     overflow: hidden;
     border-width: 1px 0px 0px 0px;
     background-color: #fafafa;
     background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
     background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
     background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
     background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
     background-repeat: repeat-x;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
}
 .nuTabSelected {
     background-color: white;
}
.nuSection{
     font-family: "Segoe UI", Helvetica, "Helvetica Neue", Arial, sans-serif;
}
 body {
     padding: 0px;
     margin: 0px;
     font-family: "Segoe UI", Helvetica, "Helvetica Neue", Arial, sans-serif;
}
 .nuCalendarColor {
     background-color : #9ed7df;
}
 .nuSubformScrollDiv {
     background-color: #f9f9f9;
}
 .nuSubform {
     background-color: white;
}
 .nuEditBody {
     background-color: #fafafa;
}
 .nuBrowseBody {
     background-color: white;
}
 .nuBrowseTable {
     border-color: #ecf0f5;
}
 .nuSelectBrowse {
     background-color: #D6EAF8 !important;
     border-color: #D6EAF8 !important;
}
 .nuBrowseTitle {
     background-color: #eef2f3;
     height: 54px;
     border-bottom-color: #D6DBDF;
}
 .nuReadonly {
     background: #F0F0F0;
     border: 1px solid rgba(0, 0, 0, 0.05);
     cursor: not-allowed;
}
 .nuCalculator {
     background-color: #F0F0F0;
}
 .nuLookupCode {
     background-color: #dbedfd;
}
 .nuBreadcrumbHolder {
     padding: 20px 0px 5px 0px;
}
 .nuButton {
     border-radius: 4px;
     background-color: #2a8bcc;
}
 .nuActionButton {
     border-radius: 4px;
}
 .nuCellEven{
     background-color: #f5f9fa;
}
 .nuCellOdd{
     background-color: white;
}
Janusz
nuBuilder Team
Posts: 506
Joined: Fri Dec 28, 2018 1:41 pm
Location: Krakow, Poland
Has thanked: 8 times
Been thanked: 18 times

Re: Form tabs view modification

Unread post by Janusz »

Thanks - works fine.
If you like nuBuilder, please leave a review on SourceForge
Post Reply