Custom CSS in SharePoint Factory Web Apps

Labels
AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(183) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Monday, August 6, 2012PrintSubscribe
Custom CSS in SharePoint Factory Web Apps

Cascading style sheets use rules to change the look and formatting of the contents of web pages. Code On Time applications rely on CSS exclusively for theming. SharePoint Factory is a special web application designed to work inside of Microsoft SharePoint Portal– all cascading style sheets and elements are compiled as binary resources. The application webpart will link the resources to the pages dynamically at runtime.

Let’s create a custom CSS rule that will work in a SharePoint Factory web application packaged as a SharePoint webpart using Municipal theme.

In the [My Documents]/Code OnTime/Client/Themes folder, create a text file. Rename the file to a cascading style sheet that matches the name of the theme. In the example below, Municipal theme will be used, so the file was named “Municipal.css”.

New CSS file added in Client/Themes folder of the code generator.

Open the file, and paste in the following rule.

@import "../../Library/_Client/Themes/_Shared/jquery.ui.all.css";

table.DataView tr.CategoryRow td.Fields div.Item div.Value input, 
table.DataView tr.CategoryRow td.Fields div.Item div.Value select, 
table.DataView tr.CategoryRow td.Fields div.Item div.Value textarea
{
    font-weight:bold;
}

The highlighted segment of the path in the Municipal.css file is a relative path to the jQuery UI stylesheets packaged with the code generation library.

Save the file. Restart the web application generator. Holding Shift, click on a project name to skip to the Summary page. Regenerate the project.

Navigate to any page with a data view, and edit a record. The rule will be applied to all input fields, rendering text bold.

CSS rule applied to all input fields of the web application, rendering text bold.