This is the last part of the 3-part series of Portal Connector secrets. In this post, I’m going to share with you some insight into The Portal Connector Modular CSS Architecture.
What is Modular CSS?
Modular CSS is a scalable, maintainable, semantic and predictable approach to writing CSS. Its very organized and easy to use. Basically, when you see there are repeated paterns in your style sheets these can be combined for re-usable purposes.
Sitefinity by default uses Bootstrap v3.3, it’s a front-end framework to do all the heavy lifting of website design such as the responsiveness of your site, liquid layouts and all the other utility styling etc. This Bootstrap framework is purely modular CSS and it is very user-friendly.
Let’s look at how we are using this Modular CSS approach for TPC Widgets.
TPC Widgets with Modular CSS
Here is all the list of base classes that we use on TPC widgets,
Base
/*Base*/
.tpc {}
.tpc-read-only{}
.tpc-drop-down{}
.tpc-check-box{}
.tpc-radio-button{}
“.tpc” Using this class, you can target all the TPC widgets on the page or on the form.
“.tpc-read-only” Using this class, you can target all of the default read only widgets on any of the Portal Connector forms
“.tpc-drop-down” Using this class, you can target all of the default dropdown widgets on any of the Portal Connector forms
“.tpc-check-box” Using this class, you can target all of the default checkbox widgets in any of the Portal Connector forms
“.tpc-radio-button” Using this class, you can target all of the radio widget in any of the Portal Connector forms.
Form Widgets
Here is the list of classes that we use for Portal Connector form widgets. All of these classes are based on the “tpc” class.
/*Form Widgets*/
.tpc.tpc-form {}
.tpc.tpc-form-configuration {}
.tpc.tpc-boolean{}
.tpc.tpc-boolean.tpc-check-box{}
.tpc.tpc-boolean.tpc-drop-down{}
.tpc.tpc-boolean-switch{}
.tpc.tpc-boolean.tpc-radio-button{}
.tpc.tpc-datetime{}
.tpc.tpc-file-upload{}
.tpc.tpc-activities {}
.tpc.tpc-barcode {}
.tpc.tpc-image {}
.tpc.tpc-lookup{}
.tpc.tpc-activities {}
.tpc.tpc-notes {}
.tpc.tpc-pay-button {}
.tpc.tpc-picklist {}
.tpc.tpc-picklist.tpc-check-box {}
.tpc.tpc-picklist.tpc-drop-down {}
.tpc.tpc-picklist.tpc-radio-button {}
.tpc.tpc-qrcode{}
.tpc.tpc-querystring{}
.tpc.tpc-rating{}
.tpc.tpc-rulesmanager {}
.tpc.tpc-sharepoint-grid {}
.tpc.tpc-signature{}
.tpc.tpc-static-value{}
.tpc.tpc-static-value.tpc-user {}
.tpc.tpc-status {}
.tpc.tpc-subgrid{}
.tpc.tpc-submit-button { }
.tpc.tpc-text-field {}
.tpc.tpc-text-field-numeric{}
.tpc.tpc-text-field-textarea{}
.tpc.tpc-text-field-password{}
.tpc.tpc-validator{}
.tpc.tpc-workflow{}
Read Only
Here is a list of Read Only classes that are used in the Portal Connector widgets read only views.
/* Read Only*/
.tpc.tpc-barcode.tpc-read-only{}
.tpc.tpc-datetime.tpc-read-only{}
.tpc.tpc-boolean.tpc-read-only{}
.tpc.tpc-image.tpc-read-only{}
.tpc.tpc-lookup.tpc-read-only{}
.tpc.tpc-picklist.tpc-read-only{}
.tpc.tpc-qrcode.tpc-read-only{}
.tpc.tpc-rating.tpc-read-only{}
.tpc.tpc-signature.tpc-read-only{}
.tpc.tpc-status.tpc-read-only{}
.tpc.tpc-text-field.tpc-read-only{}
Page Widgets
Here is a list of Page widget classes that are used in the Portal Connector Page widgets.
/*Page Widget*/
.tpc.tpc-chart {}
.tpc.tpc-grid {}
.tpc.tpc-listView {}
.tpc.tpc-map {}
.tpc.tpc-register {}
.tpc.tpc-scheduler {}
.tpc.tpc-user-invite {}
.tpc tpc-powerbi{}
.tpc.tpc-powerbi-embeded-report {}
.tpc.tpc-kb-detail {}
.tpc.tpc-kb-list {}
.tpc.tpc-kb-search {}
.tpc.tpc-form-flow {}
Scenarios
There are different ways of using these classes for your benefit, here is a scenario of using these classes.
Add styles to all of the Portal Connector widgets:
.tpc{
border:1px solid red;
}
Add styles to all of the read only fields:
.tpc-read-only{
display:none;
}
In summary you can use any of these Moduler CSS classes to modify the look of any of the Portal Connector widgets easily.
That's it for this Portal Connector Secrets series! In case you missed them, check out Part 1 and Part 2.