Welcome to the nuBuilder Forums!

Join our community by registering and logging in.
As a member, you'll get access to exclusive forums, resources, and content available only to registered users.

Form tabs view modification

Questions related to using nuBuilder Forte.
Post Reply
Janusz
nuBuilder Team
Posts: 508
Joined: Fri Dec 28, 2018 1:41 pm
Location: Krakow, Poland
Has thanked: 11 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: 4581
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 76 times
Been thanked: 536 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: 508
Joined: Fri Dec 28, 2018 1:41 pm
Location: Krakow, Poland
Has thanked: 11 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