Mashup Builder > Mashups > Custom CSS > Custom CSS Tutorial
  
Custom CSS Tutorial
Prerequisites
Following are the prerequisites for this demo:
A running instance of ThingWorx 8.2
FileRepositoryHomeMashup extension: the extension can be found at the ThingWorx Marketplace.
Sample Tutorial Files
Setup
1. Install the FileRepositoryHomeMashup extension.
2. Import the following files: Mashups_CustomCssTutorialMashup and Things_SampleCssFileRepo in ThingWorx.
3. Open the SampleCssFileRepo thing in ThingWorx Composer, and then click the Mashup link.
4. Upload the tutorial-buttons.css file.
Procedure
Adding Mashup CustomClass
1. Open the Things_SampleCssFileRepo file in Composer, and then preview the Mashup. The Mashup consist of a set of buttons in a fieldset to which CSS rules are applied.
2. In the Workspace tab, click Mashup.
3. From the property panel, add myMashupClass to the CustomClass field.
4. Click the Custom CSS tab and enter the following CSS code:
.myMashupClass .widget-fieldset .widget-button {
box-shadow: 5px 5px 5px #888888;
}
5. Click Save, and then preview the mashup. The drop shadows appear for the buttons in the fieldset.
Adding Widget CustomClass
1. Go to the Design tab and under the Workspace tab, select button-3.
2. In the property panel, add myButtonClass to the CustomClass field.
3. To add a CSS rule block, click the Custom tab and enter the following CSS code:
.myButtonClass .widget-button .widget-button-text {
text-transform: uppercase;
}
4. Click Save, and then preview the mashup. The second button still has the drop shadow, but the text appears in uppercase.
Binding Widget CustomClass
1. Go to the Design tab and under the Workspace tab, select eventsrouter-6.
2. Bind the output from eventsrouter-6 to the CustomClass of button-4.
3. Click the Custom CSS tab and enter the following CSS code:
.myButtonClass .widget-button .widget-button-text {
text-transform: uppercase;
}


.myBoundButtonClass1 .widget-button,
.myBoundButtonClass1 .widget-button .button-element {
border-radius: 15px 0 15px 0;
}

.myBoundButtonClass2 .widget-button,
.myBoundButtonClass2 .widget-button .button-element {
border-radius: 0 15px 0 15px;
}
4. Click Save, and then preview the mashup.
5. Click the first Apply button to add myBoundButtonClass1 to the third fieldset button, and then click the second Apply button. The button border radius changes based on which CSS class is applied.
Importing a CSS file
We need to import a CSS file that adds an animation and opacity changes to the button widgets in a fieldset. The file contains the following code:
@keyframes buttonSlideIn {

0% { left: 100px; opacity: 0 }

100% { left: 0; opacity: 1 }

}

.widget-fieldset .widget-button {

animation: buttonSlideIn 2s;

opacity: 0.5;

}

.widget-fieldset .widget-button:hover {

opacity: 1;
1. In Composer, click the Custom CSS tab and enter the following CSS code:
@import url("/Thingworx/FileRepositories/SampleCssFileRepo/css/tutorial-buttons.css");
2. Click Save, and then preview the mashup. The buttons animate, moving in from the right and fading in. Once the animation is complete (2 seconds), the buttons is 50% opaque until you rollover the buttons.