How theming is done in Plone-React using SemanticUI. Introduction and basic concepts of this CSS Framework, and how to effectively build a theme on Pastanaga UI (or build a completely new one from scratch. How to add new React components to the theme and apply the correct patterns. Apply a proven development workflow to build a theme using Create React App.
3. • Reinventing Plone: Roadmap to the Modern Web
• Volto
• Volto Extensibility Story
• Theming Volto
• Volto Case Studies
• Volto as Libary (create-volto-app)
Talks
You are here
29. Third party components
import '../theme/extras/extras.less';
src/client.js
Add an additional ‘extra’ entrypoint
// Place here all the extra non-SemanticUI CSS
// and make behave it like the SemanticUI ones
& { @import 'select'; }
30. Third party components
Add an inside ‘extra’ the variables/less pairs
@type : 'extra';
@element : 'select';
@import (multiple) '../../theme.config';
.loadUIOverrides();
// Place the content of the third party LESS
(or CSS) files here
31. Third party components
Add an inside ‘extra’ the variables/less pairs
@type : 'extra';
@element : 'select';
@import (multiple) '../../theme.config';
.loadUIOverrides();
// Place the content of the third party LESS
(or CSS) files here
select.less
32. Third party components
Add an inside ‘extra’ the variables/less pairs
@selectBorderColor: '#eee';
@selectFontSize: '1.5em';
// Place the content of the third party LESS
variables (if any) or add yours here
select.variables