Datapolis Process System

Search:

Contents
:
IndexBookmarkPrint
Home > User Guide > Creating Workflows > Workflow Designer > Action Launch Forms [HIDDEN] > Quick Form > Custom Form Css

Custom Form Css

 

You can change the CSS file reference used in action form.
Follow the below PowerShell script example (the setting is web-scoped):

 

Add-PSSnapin "Microsoft.SharePoint.PowerShell"

$dpca = [Reflection.Assembly]::Load("Datapolis.WorkBox.Common, Version=1.1.0.0, Culture=neutral, PublicKeyToken=2c03c3097ac016b8")

 

$webUrl = "http://gasco-dev-ks/sites/DPSPL"

$newCssUrl = "/_layouts/15/Datapolis.WorkBox/WBActionForm_Custom.css"

 

$web = Get-SPWeb $webUrl

[Datapolis.WorkBox.Common.PowerShell.Configuration]::SetDefaultActionFormCss($web, $newCssUrl)

 

 

Default css file is "/_layouts/15/Datapolis.WorkBox/WBActionForm.css":

 

Use the original css file content to create you own unique action form styling:

.wb-progress {
    displaynone;
    background-colorWhite;
    width100%;
    height100%;
    text-aligncenter;
    vertical-alignmiddle;
    z-index50;
    positionabsolute;
    top0;
    left0;
}
 
.wb-progress-table {
    width100%; 
    height100%;  
    text-aligncenter;
    displaytable;
}
 
.wb-progress-div {
    displaytable-cell;
    vertical-alignmiddle;
    width500px;
    height300px;
    displayinline-block;
}
 
 
.wb-center {
    margin-leftauto;
    margin-rightauto;
}
 
.wb-progress-div {
    text-aligncenter;
    vertical-aligncentral;
}
 
.wb-progress-description-div {
    text-aligncenter;
    vertical-aligncentral;
    width600px;  
}
 
.wb-form {
    displayblock;
    width100%; 
    max-width720px;
}
 
.wb-form-informationbar {
    display:block;
    margin-top8px; 
    margin-bottom8px;
    max-width720px;
    width100%; 
}
 
.wb-fields {
    display:table;
    border-width0px;
    width100%; 
    max-width720px;
    border-collapsecollapse;
}
 
 
 
.wb-field {
    display:table-row;
    width100%;
}
 
.wb-field-label {
    display:table-cell;
    width300px;
    vertical-aligntop;
}
 
    .wb-field-label > div {
        display:table;
    }
 
.wb-field-body {
    display:table-cell;
    width100%; 
    max-width430px;
    floatleft;
}
 
.wb-field-label-title {
    display:table-row;
}
    .wb-field-label-title > div {
        displaytable-cell;
        white-spacenowrap;
    }
 
.wb-fade {
    opacity0.3;
}
 
.wb-field-label-desc {
    display:table-row;
}
 
    .wb-field-label-desc > div {
        displaytable-cell;
    }
 
 
 
.wb-field-label-title-text {
    text-alignjustify;
    displayinline-block;
    word-break:keep-all; 
    white-spacenowrap;
}
 
.wb-field-label-validation {
    padding-left3px;
}
 
.wb-field-label-desc-text {
    font-weightnormal;
    white-spacenormal !important;
    text-alignjustify;
    displayblock;
    word-breakbreak-all;
}
 
.wb-field-body-rtb {
    width390px;
}
 
.wb-field-body-text {
    width386px;
}
 
.wb-field-body-dropdown {
}
 
.wb-field-body-files {
}
 
.wb-field-body-fileslst { 
}
 
.wb-field-body-datetext { 
}
 
.wb-field-body-datedesc {
}
 
.wb-field-body-checkbox {   
}
 
.wb-field-body-people {   
    width386px;
}
 
.wb-field-body-radiolst {  
}
 
.wb-field-body-lstbox {  
}
 
.wb-field-body-combo { 
}
 
.wb-field--body-msg {  
}
 
.wb-field-body-valid {  
}
 
.wb-field-body-desc{  
}
 
.wb-fields-btns {
    displaytable;
    width100%; 
    border-collapsecollapse; 
    max-width720px;
    margin-top8px;
}
 
    .wb-fields-btns > div {
        displaytable-row;
    }
 
.wb-fields-btnspacer {
    displaytable-cell;
    width100%; 
}
 
.wb-fields-btnsep {
    displaytable-cell;
}
 
.wb-field-btncell {
    displaytable-cell;
    padding-top7px; 
    white-spacenowrap;
}
 
.wb-field-btn {
}
 
.wb-rtl {
    floatright;
}
 
.wb-ltr {
    floatleft;
}
 
.wb-substitution-picer {
    display:table;
    margin-top8px; 
    margin-bottom8px;
}
    .wb-substitution-picer > div {
        displaytable-row;
    }
 
.wb-substitution-picer-lbl {
    displaytable-cell;
    padding5px; 
    vertical-alignmiddle;
}
 
.wb-substitution-picer-ddl {
    displaytable-cell;
    padding5px; 
    vertical-alignmiddle;
}
 
    .wb-substitution-picer-ddl > select {
        floatright;
        min-width200px;
    }
 
.wb-table {
    display:table;
}
    .wb-table > div {
        display:table-cell;
    }
        .wb-table > div > div {
            display:table-cell;
        }