Each widget can have 3 css files for each integration. All css files are places in the product css folder (the product for which we assigned the widget) so they’re applied only for this product/widget.
First css file that can be used is the main append file. The naming convention is the following:
widget_{{widget_name}}_append.css
Where widget_name is the name of the widget. For example if we have a widget with name testwidget which is being applied to a product called mydomain.test.com The path and the naming should be the following:
Path: resources/views/domains/mydomain_test_com/css
Filename: resources/views/domains/mydomain_test_com/css/widget_testwidget_append.css
The second css file that can be used is the main prepend file. It will be added to the widget css after the append css widget file.
The naming convention is the following:
widget_{{widget_name}}_prepend.css
Where widget_name is the name of the widget. For example if we have a widget with name testwidget which is being applied to a product called mydomain.test.com The path and the naming should be the following:
Path: resources/views/domains/mydomain_test_com/css
Filename: resources/views/domains/mydomain_test_com/css/widget_testwidget_prepend.css
If there’s a case where a widget has to be assigned more then once to an integration and this widget needs to have a unique css styles for the specific assignment only, the the widget page hash is being used.
For example if we have widget testwidget which is assigned more then one time to a mydomain.test.com product we can apply unique css for each assignment by using the page alias (MD5 hash) as filename.
If one of the assignments has page alias a47ec427f5bafd9fb2f672c9349efe4d the css file should be the following:
Path & Filename: resources/views/domains/mydomain_test_com/css/a47ec427f5bafd9fb2f672c9349efe4d.css
The css will be applied only to the a47ec427f5bafd9fb2f672c9349efe4d page.