The alfresco/logo/Logo widget declares a number of different CSS rules that allow us to easily change the logo that is rendered. Update the JavaScript controller to be the following:
model.jsonModel = {
widgets: [{
name: "alfresco/logo/Logo",
config: {
logoClasses: "surf-logo-large"
}
}]
};
If you make the changes to the source files in the deployed web application you can apply these changes simply by refreshing the web scripts by clicking the Refresh Web Scripts button on the web scripts home page http://<server>:<port>/share/service/index.
When you refresh the page you will now see the Surf logo displayed.
What we have done is to add some instantiation arguments to the alfresco/logo/Logo widget to override the default logoClasses attribute with a different CSS class that a selector was defined in the CSS resource associated with it. In the JSON model the name attribute refers to the name of the widget that you want to instantiate (technically it refers to the Module Identifier or MID) and config attribute is an object passed during instantiation of that widget.