Xataface Application Framework
There are two ways to include custom CSS files with your module and its actions:
Using the Dataface_Application::addHeadContent() has the benefit of loading your CSS file at the beginning of the page load rather than at the end of it. Therefore your styles will be picked up immediately.
Another benefit of using the Dataface_CSSTool is that it allows you to bundle multiple small CSS files together at run-time in a network-friendly compressed format. This might allow you to organize your CSS files more logically and make it easier to maintain them moving forward (because it decouples the production format from the development format).
For this tutorial we are going to use the Dataface_CSSTool to include a style-sheet with our
hello_world action. We are just going to create some simple styles to demonstrate the steps involved in loading a custom CSS file.
We begin by creating a
css directory inside our module's directory. It will be located at:
Further we're going to add a directory structure underneath this
Now that we have our directory structure let's create a CSS file at
With the following contents:
So all we're doing here is changing the color of the "world" part of "Hello World" so that it is red.
cssDirectory with the CSS Tool
hello_world action we now need to register our
css directory. We do this with the following code:
The Dataface_CSSTool::addPath() method takes 2 parameters:
Now that we have added the
css directory to the paths in the CSS Tool, we just need to import the CSS File. We will do this using the
hello_world action now looks like:
hello_world.js script now looks like:
Point your web browser to the hello_world action again and it should look like:
Notice that the word "world" is now in red.