THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
...
Tapestry includes a built-in style sheet, tapestry.css, in all HTML documents (documents that have an outer <html> element and a nested <head> element), as part of the "core" JavaScript stack. The For Tapestry 5.4 and later, the core JavaScript stack also includes the CSS for Bootstrap 3.1.1.
Tapestry 5.5.0 and later also includes Bootstrap 4.3.1. To use it, just add @ImportModule(Bootstrap4Module.class) to your application's module class (normal AppModule.java):
| Code Block | ||||
|---|---|---|---|---|
| ||||
@ImportModule(Bootstrap4Module.class)
public class AppModule {
. . . |
Tapestry 5.5.0 and later also allows you to have Tapestry not provide any CSS at all. To do that, just add @ImportModule(NoBootstrapModule.class) to your module class. In this case, you'll need to set the tapestry.default-stylesheet (SymbolConstants#DEFAULT_STYLESHEET) configuration symbol to tell Tapestry what's your main CSS file. Otherwise, an exception will be thrown and the webapp won't start.
Adding your own CSS
A page or component (for example, a layout component) that is rendering the <head> tag can add a style sheet directly in the markup.
| Code Block | ||
|---|---|---|
| ||
<head> <link href="/css/site.css" rel="stylesheet" type="text/css"/> . . . |
If you want to leverage Tapestry's localization support, you may want to make use of an expansion and the "asset:" or "context:" binding prefix:
| Code Block | ||
|---|---|---|
| ||
<head>
<link href="${context:css/site.css}" rel="stylesheet" type="text/css"/>
. . .
|
The "context:" prefix means that the remainder of the expansion is a path to a context asset, a resource in the web application root (src/main/webapp in your workspace). By contrast, the "asset:" prefix tells Tapestry to look in the class path. See Assets CSS.
Using the @Import annotation
Another approach to adding a style sheet is to include an @Import annotation (starting with Tapestry 5.2) on your component class:
| Code Block | ||||
|---|---|---|---|---|
| ||||
@Import(stylesheet="context:css/site.css")
public class MyComponent
{
}
|
(For Tapestry 5.0 and 5.1, use the deprecated @IncludeStyleSheet annotation instead.)
As with included JavaScript libraries, each style sheet will only be added once, regardless of the number of components that include it via the annotation.
...
The SymbolConstants.BOOTSTRAP_ROOT ("tapestry.bootstrap-root") symbol tells Tapestry where the Bootstrap css CSS file is. You can override that symbol (see Configuration 85459407) to have it point to your own version of Bootstrap (or even to an empty file if you want to eliminate Bootstrap entirely).
...
For the above, your bootstrap.css file would be in your app's META-INF/assets/css folder.