The question was discussed in the article by the link below.

https://community.bpmonline.com/articles/adding-custom-css-mobile-application

Hi Eugene,

Thank you, I tried Global CSS and its reflected except home screen which appearing just after successful login. Is it possible to apply custom css on home screen?

Muhammad Shajiuddin,

Unfortunately, it's not possible.

Dear Muhammad,

Unfortunately, there is no possibility to add custom styles to dashboards. We have backlogged your request and transfer it t our R&D department.

As for now, you can create your own widget, which can have custom CSS styles. Please see this article for instructions:

https://academy.bpmonline.com/documents/technic-sdk/7-12/adding-custom-dashboard-widget?document=

Regards,

Anastasia

Anastasia Botezat,

Hi, Thank you for reply. I already found a way to add custom css on portal dashboard.

Hello Muhammad!



In such case, you may add custom attributes or classes to html attributes basing on some condition. There is community article that describes how to achieve it: https://community.bpmonline.com/questions/how-add-custom-style-control-page-based-condition



Best regards,

Alex

Hello Muhammad,



In your case, the most simple way to achieve the task is to add desired class (or styles) to the dom element. https://gomakethings.com/two-ways-to-set-an-elements-css-with-vanilla-javascript/



https://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element



Regards,

Alex

Dear Ryan,

Please use this article: https://community.bpmonline.com/questions/how-add-custom-style-control-page-based-condition

You can ignore the part about conditions so that the CSS style should work as soon as you add it to the module after define.

Best regards,

Lily

Hi,



This didn't seem to work.

I created the module, gave it a title and a name, package "custom", added my css into the "LESS" area, saved it all, recompiled to make sure and no results.

This is what i tried:

.ts-sidebar-item-wrapper:hover {background-color:#f3b444;}

Please advise.



Thanks,

Ryan.

Dear Ryan,

Please follow the instructions form the topic I sent to you precisely. 

You need to follow the steps 1-3 but in the step 3 it is not obligatory to set any condition. 

Best regards,

Lily

Hi Ryan, 

I am trying to do the same thing as you right now, and I went through the documentation that Lily pointed out but i can not get it to work. 

Did you get your css style sheet to over ride the generic one, and if so how?

Thank you in advance

Hi Philip,

No I wasn't able to get it to work.  I tried those instructions multiple times. I assume there is a step missing out of the documentation.



Ryan.

Lily, 

Could you show us how to change the color of a field name without an business logic? It seems both Ryan and I are confused. There are probably others as well who have not said anything but are wondering that same thing. 



This would be greatly appreciated! :)   

I took another look at this and i think the problem is targeting the base view of the system instead of a page area like "opportunity". I created my own custom module name which may be wrong. 

Dear Ryan,

You need to create a new module with any name, then you need to create a replacing module that will have the default name of some page when you choose the parent object. That's why it is better to apply any changes in Section wizard on the page that you want to modify to make this replacing module be created automatically. Then you connect your css (new module) to the page with the help of code.

Philip, there is one more article about CSS style in bpm'online. It may be helpful: https://academy.bpmonline.com/documents/technic-sdk/7-12/advanced-settings-custom-detail-fields

Best regards,

Lily

Dear John,

When you open a template in the content designer, you can open any block in html view so that you have the access to the email body. Clicking on these icons, you can open any block in html view so that you can add your own css style:

All the changes that can be made to the email template in the Content designer are descibed here: https://academy.bpmonline.com/documents/studio/7-10/content-designer

Best regards,

Lily

Thank you for your reply, but I'm looking to add information in the RAW html page header, not the section content inside of the body tag.

<!DOCTYPE html>

<html>



<head>

  <title>Page Title</title>

</head>



<body>

   The content of the document......

</body>



</html>

https://www.w3schools.com/html/html_head.asp

Dear John,

Can you provide us with the business purpose you are trying to achieve? 

Lisa

Our marketing team has prebuilt html email templates we have used in previous products that have header links to web fonts, css libraries and other miscellanous items and files that make working with email clients easier, along with fixing issues dealing with rendering and responsive design.  If it can't be done, the team said they will work around it.  They use a web testing tool called emailonacid.com to test the compatibility of the email going out.  It shows how the email will look accross many email clients, and offers fixes and work arounds for rendering issues.

Thanks John

Dear John,

As far as I understand you are looking for the tools to alter the headers that will appear in the subject field. In this case we do not have one, because there is a chance that the altered subject will not be read correctly by the email clients. All other customizations can be done with the help of the Content Designer as was suggested by Lily above.

Lisa

1. Create a new module. Name it and write your CSS in the less tab of the module. Leave the source code of the module empty.

.label-wrap .t-label[iscategoryred="true"] {
	color: red;
}

2. Create a replacing client module for the opportunity page (just modify the page with the section wizard and it will create the replacing client module automatically)

3. Use the following code to implement your CSS to the field based on condition.

define("OpportunityPageV2", ["ConfigurationConstants", "css!UsrOpportunityCss"], function(ConfigurationConstants) {
	return {
		entitySchemaName: "Opportunity",
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		attributes: {},
		methods: {
			isCategoryRed: function() {
				var result = {
					isCategoryRed: false
				};
				var typeId = this.get("Type") ? this.get("Type").value:null;
				if (typeId === ConfigurationConstants.Opportunity.Type.PartnerSale) {
					result.isCategoryRed = true;
				}
				return result;
			}
		},
		rules: {},
		diff: /**SCHEMA_DIFF*/[
			{
				"operation": "merge",
				"parentName": "OpportunityPageGeneralBlock",
				"propertyName": "items",
				"name": "Category",
				"values": {
					"domAttributes": {
						"bindTo": "isCategoryRed"
					}
				}
			}
		]/**SCHEMA_DIFF*/
	};
});

4. Enjoy

Hello Team, there is a way to apply this with 3 diferent logic? I need to change color depende of the value of one field.

Hello Federico,



Yes, it's possible to do that too. Please follow the steps below:

 

1. Add another colors in CSS :

2.  Use the following code to implement the logic

define("CasePage", ["ConfigurationConstants", "css!UsrCasePageCSS"], function(ConfigurationConstants) {

    return {

        entitySchemaName: "Case",

        attributes: {},

        methods: {

            ServiceItemColor: function() {

                var result = {

                    isCategoryRed: false,

                    isCategoryYellow: false

                };

                var categoryId = this.get("Category") ? this.get("Category").value:null;

                if (categoryId === "1b0bc159-150a-e111-a31b-00155d04c01d") {

                    result.isCategoryRed = true;

                } else {

                    result.isCategoryYellow = true; 

                }

                return result;

            }

        },

        diff: /**SCHEMA_DIFF*/[

            {

                "operation": "merge",

                "propertyName": "items",

                "name": "CaseAccount",

                "values": {

                    "domAttributes": {

                        "bindTo": "ServiceItemColor"

                    }

                }

            }

        ]/**SCHEMA_DIFF*/

    };

});

With 3 different logic you will need to add one more condition in "else if" block and to add third color to CSS.

Here we can see that color of Account changed to red if Case Category has "Incident" value:

And color of Account would be yellow if Case Category has "Service request" value:

Best Regards,

Tetiana Bakai

Will this still work in Freedom UI pages?

keith schmitt,

Yes. I should have a full article written up this next week outlining all the steps to do this on a Freedom UI page. The steps are basically the following: 

1) In order for this to work, you have to place the control inside a container - such as 1 Column container (and remove all the spacing, border, etc so you can't tell it's in a container). You'll be adding the style to the container, not the control itself (hopefully this changes in future versions, the controls don't seem to expose a settable property for the classes or style, only the containers do)

2) Add an attribute to contain the CSS classes (we'll bind this to the container from #1)

viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
	"attributes": {
		"MyStyleClasses": {
			value: []		
		}
	}
}/**SCHEMA_VIEW_MODEL_CONFIG*/,

3) Bind the attribute to a "classes" property of the container you added in #1 by adding the following to the container:

"classes": "$MyStyleClasses"

4) Now, you can wire up a change request handler. See article here

5) In the change event, check whatever conditions you have and add or remove the CSS classes to the attribute:

if (someCondition) {
	request.$context.MyStyleClasses.push("my-css-class");
}
else {
	request.$context.MyStyleClasses = [];
}

6) Lastly, add some CSS to the page to set the style for my-css-class. When the condition is met, the CSS class will be added to the container, and removed when it doesn't meet the conditions.

Ryan