Order of generated <LINK ....> elements when using <loadScr
I am trying to leverage the benefits of using the skinability of richfaces and link to properties defined in the respective xxx.skin.properties file in my stylesheets.
The process I have followed is:
add new properties to the xxx.skin.properties file
create a custom.xcss file referencing the properties in xxx.skin.properties
include the custom.xcss into the respective page using
When inspecting the page source and referenced css files, the css has been generated and included into the page as expected except that the reference to the custom.xcss files are placed into the list before css files derived as a result of specific component usage. ( in this example I with to override default calendar css classes, etc)
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:hx="http://java.sun.com/jsf/html_extended"> <head> <title>Project Management - Time Capture</title> <link rel='stylesheet' type='text/css' href='/symmetry/a4j_3_1_2.GAtheme/symmetry/stylesheet/site.xcss/DATB/eAH7l5ZnAQAGQgIL' /> <link rel='stylesheet' type='text/css' href='/symmetry/a4j_3_1_2.GAtheme/symmetry/stylesheet/calendar.xcss/DATB/eAH7l5ZnAQAGQgIL' /> <link rel='stylesheet' type='text/css' href='/symmetry/a4j_3_1_2.GAtheme/symmetry/stylesheet/projectManagement/section.xcss/DATB/eAH7l5ZnAQAGQgIL' /> <link rel='stylesheet' type='text/css' href='/symmetry/a4j_3_1_2.GAtheme/symmetry/stylesheet/projectManagement/timeRecording/timeCapture.xcss/DATB/eAH7l5ZnAQAGQgIL' /> <link rel='stylesheet' type='text/css' href='/symmetry/a4j_3_1_2.GAcss/toolBar.xcss/DATB/eAH7l5ZnAQAGQgIL' /> <link rel='stylesheet' type='text/css' href='/symmetry/a4j_3_1_2.GAtheme/symmetry/stylesheet/projectManagement/headerBar.xcss/DATB/eAH7l5ZnAQAGQgIL' /> <link rel='stylesheet' type='text/css' href='/symmetry/a4j_3_1_2.GAcss/panel.xcss/DATB/eAH7l5ZnAQAGQgIL' /> <link rel='stylesheet' type='text/css' href='/symmetry/a4j_3_1_2.GAorg/richfaces/renderkit/html/css/calendar.xcss/DATB/eAH7l5ZnAQAGQgIL' /> <link rel='stylesheet' type='text/css' href='/symmetry/a4j_3_1_2.GAorg/richfaces/renderkit/html/css/dragIndicator.xcss/DATB/eAH7l5ZnAQAGQgIL' /> <link rel='stylesheet' type='text/css' href='/symmetry/a4j_3_1_2.GAcss/tree.xcss/DATB/eAH7l5ZnAQAGQgIL' /> <link rel='stylesheet' type='text/css' href='/symmetry/a4j_3_1_2.GAcss/dropdownmenu.xcss/DATB/eAH7l5ZnAQAGQgIL' /> <link rel='stylesheet' type='text/css' href='/symmetry/a4j_3_1_2.GAcss/menucomponents.xcss/DATB/eAH7l5ZnAQAGQgIL' /> <link rel='stylesheet' type='text/css' href='/symmetry/a4j_3_1_2.GAcss/table.xcss/DATB/eAH7l5ZnAQAGQgIL' /> <link rel='stylesheet' type='text/css' href='/symmetry/a4j_3_1_2.GAorg/richfaces/renderkit/html/css/modalPanel.xcss/DATB/eAH7l5ZnAQAGQgIL' /> <script type='text/javascript' src='/symmetry/Scripts/site.js'></script> <script type='text/javascript' src='/symmetry/Scripts/projectManagement/timeRecording/timeCapture.js'></script> <script type='text/javascript' src='/symmetry/a4j_3_1_2.GAorg.ajax4jsf.javascript.AjaxScript'></script> <script type='text/javascript' src='/symmetry/a4j_3_1_2.GAorg/ajax4jsf/javascript/scripts/form.js'></script> .......
How can I change the ordering to after the links to css files derived from component usage so that I can leverage both the benefit of xcss and css cascading.
Using a <link ..../> tag rather than <loadScript ..../> places the included css files after the files referenced as a result of component usage, but then I don't get the benefit of skinability references in these normal css files.
Any assistance will be appreciated