Controlling order of XPages CSS using mobile theme

问题

When using the XPages Mobile theme the CSS files I add to the page as resources are added before the CSS files provided by IBM as part of the mobile theme.

Example:

<xp:this.resources>
  <xp:styleSheet href="css/font-awesome/css/font-awesome.css"></xp:styleSheet>
  <xp:styleSheet href="/mobile.css"></xp:styleSheet>
</xp:this.resources>

Generate the following HTML

<link rel="stylesheet" type="text/css" href="/redpill/graph.nsf/css/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="/redpill/graph.nsf/mobile.css">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/dojoroot-1.8.1/dojox/mobile/themes/iphone/iphone.css">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.extlib/css/customMobile.css">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.extlib/css/customIphone.css">

Is there a way to force my own custom controls to be added after IBM's? It is more challenging (but not impossible) to control the style when my own CSS is listed first in the chain.

回答1:

This answer assumes that using the mobile tools doesn't change the way objects are loaded.

I use a theme, and my CSS files appear after the generated CSS files.

<theme extends="webstandard">
    <resource>
        <content-type>text/css</content-type>
        <href>crmStyle.css</href>
    </resource>
</theme>

Generates the following on pages using the theme:

<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/dojoroot-1.8.1/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/dojoroot-1.8.1/ibm/domino/widget/layout/css/domino-default.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/webstandard/xsp.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/webstandard/xspLTR.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/webstandard/xspSF.css">
<link rel="stylesheet" type="text/css" href="/Path/crmStyle.css">

To test CSS files with mobile theme, I did the following:

Created new page m_Landing. Added CSS File as Resource.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex" xmlns:xc="http://www.ibm.com/xsp/custom" themeId="MyTheme">
    <xp:this.resources>
        <xp:styleSheet href="/crmStyle.css"></xp:styleSheet>
    </xp:this.resources>
</xp:view>

Generated HTML:

<head>
<title></title>
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.8.1/dojo/dojo.js" djConfig="locale: 'en-us'"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.8.1/ibm/xsp/widget/layout/layers/xspClientDojo.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" type="text/css" href="/Path/crmStyle.css">
</head>

回答2:

I found a solution. I am not sure it complies with the W3 spec but I can simply add the link in the Body by placing it as XML code inside the XPage.

<link rel="stylesheet" type="text/css" href="/redpill/graph.nsf/mobile.css"></link>

来源：https://stackoverflow.com/questions/18959874/controlling-order-of-xpages-css-using-mobile-theme

标签

css

mobile

xpages