how can I set css with xe:pageTreeNode in Xpages - css

Question

I'm new with css completely, thanks god there have many articles on the net, just like "CSS for IBM Notes and Domino XPages Developers", but I'm still confused with it, now go to the problem I meet, I didn't use my own create theme but the native bootstrap4 theme
here is my code (part of)
<xe:applicationLayout id="applicationLayout1">
<xp:callback facetName="facetMiddle" id="facetMiddle">
</xp:callback>
<xp:this.facets>
<xe:navigator id="navigator1" xp:key="LeftColumn">
<xe:this.treeNodes>
<xe:pageTreeNode page="/View.xsp">
</xe:pageTreeNode>
<xe:pageTreeNode page="/View_ip.xsp" imageHeight="27px" imageWidth="27px">
<xe:this.image>
<![CDATA[#{javascript:var nr=2 ; nr> 0 ? (Math.min(nr, 10) + '.gif') : '';}]]>
</xe:this.image>
</xe:pageTreeNode>
</xe:this.treeNodes>
</xe:navigator>
</xe:this.treeNodes>
</xe:navigator>
</xp:this.facets>
<xe:this.configuration>
<xe:simpleResponsiveConfiguration collapseLeftColumn="true" collapseLeftTarget=".applayout-column-left"
collapsedLeftMenuLabel="Menu" navbar="false" pageWidth="fluid" invertedNavbar="true">
</xe:simpleResponsiveConfiguration>
</xe:this.configuration>
</xe:applicationLayout>
yes...i used Knut's idea about the badge,thanks for that~ Knut
html code(part of):
<div class="applayout-main" id="view:_id1:_id2:applicationLayout1">
<div role="main" class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 hidden-sm-down applayout-column-left sidebar">
<ul role="tree" id="view:_id1:_id2:navigator1" class="nav nav-pills nav-stacked xspNavigator">
<li class="nav-item">
<a role="treeitem" href="/OA/VVUS.nsf/View.xsp" class="nav-link">
All Documents
</a>
</li>
<li class="nav-item">
<a role="treeitem" href="/OA/VVUS.nsf/View_ip.xsp" class="active nav-link">
<img src="/OA/VVUS.nsf/2.gif" height="27px" width="27px">
In Process
</a>
</li>
</ul>
and this is what I want to show to user:
basically, I need this image float right always, that means I need add css myself, as I said beginning I have no idea with it although I read many people's article, and try this on my code, the interesting thing is it worked with below css...
<style type="text/css" media="print">
#applicationLayout1 {
background-color:blue;
}
.xspNavigator .nav-item img {
float:right;
}
</style>
2018/01/06 update....yes, that's the media="print" thing...I used this css file before, but never try to remove it....How am I so stupid...thanks you guys help...and one more thing for me to do....reinstall my system....
<style type ="text/css">
.xspNavigator .nav-item img {
float:right;
}
</style>
2018/01/10:final update, I think I found the problem is...I removed not only media="print",but also tags...and everything go to the peace....
.xspNavigator .nav-item img {
float:right;
}
I know it works because ".xspNavigator .nav-item img", the strange thing is if I remove the #applicationLayout1 , it will be back like this, just no effect with css anymore...I really really can't understand why....
so...what's my css file problem? thanks

Answer 1

Remove media="print" from the STYLE tag.

Answer 2

Remove the media="print" part because it tells the browser to only use the CSS when printing.