I posted the following question “How to style a link control in page heading control (mobile)” on the xpages forum and received some guidance (thanx).
After a closer look at the solution in the teamroom template, I was not 100% happy with it. Basically if you will add another Button (or Link) control in the Page Heading control right action facet, there is an overlap. Also the presentation and coloring differs somewhat.
In order to avoid this I modified the following definition in mobile.css:
.mblLoginText a {
display: inline-block;
width: auto;
min-width: 40px;
max-width: 60px;
height: 28px;
margin: 0;
padding: 0 5px;
overflow: hidden;
line-height: 28px;
font-family: inherit;
font-size: 13px;
font-weight: bold;
text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
text-overflow: ellipsis;
text-decoration: none;
text-align: center;
white-space: nowrap;
color: #fff;
background: none;
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #8da3c0),
color-stop(0.5, #5877a2),
color-stop(0.5, #476999),
color-stop(1, #4a6c9b));
-webkit-border-radius: 6px;
border: 1px solid #57606c;
border-right-color:#9cacc0;
border-bottom-color:#4a6c9b;
-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, 0.25);
}
Here is an example how the Link control is rendered compared with a Button control:
