Lightswitch HTML - 将图像添加到命令栏

Question

我知道这是可能的，但是我的CSS技能不是最好的，所以有人可以帮助我或指出我正确的方向。

我在寻找：（在Lightswitch HTML屏幕底部的命令栏右下方添加图片）

需要编辑的代码在msls-2.5.1.css文件中，在.msls-footer的标记下，据我所知，我想在最右边添加静态图像，大约8％为屏幕宽，不会扭曲图像。

谢谢你对此有任何支持，非常感谢!!

影响大小的代码：

.msls-footer {
    width: 100%;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .msls-footer.ui-page-footer-fixed {
        padding-bottom: 0;
    }

.msls-footer-content {
    margin-right: auto;
}

    .msls-footer-content:not(.msls-footer-content-active) {
        display: none;
    }

cod会影响命令栏的颜色：

.ui-bar-a {
    border: 1px solid #456f9a /*{a-bar-border}*/;
    background: #244689 /*{a-bar-background-color}*/;
    color: #fff /*{a-bar-color}*/;
    font-weight: bold;
    text-shadow: 0 /*{a-bar-shadow-x}*/ 1px /*{a-bar-shadow-y}*/ 1px /*{a-bar-shadow-radius}*/ #3e6790 /*{a-bar-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #244689 /*{a-bar-background-start}*/), to( #244689 /*{a-bar-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #244689 /*{a-bar-background-start}*/, #244689 /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient( #244689 /*{a-bar-background-start}*/, #244689 /*{a-bar-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient( #244689 /*{a-bar-background-start}*/, #244689 /*{a-bar-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient( #244689 /*{a-bar-background-start}*/, #244689 /*{a-bar-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient( #244689 /*{a-bar-background-start}*/, #244689 /*{a-bar-background-end}*/);
}

Answer 1

这可以通过更新user-customization.css文件（直接位于项目的Content文件夹中）并为msls-footer css规则添加以下附加声明来轻松实现：

.msls-footer {
    background-image: url(images/ajax-loader.gif); 
    background-repeat: no-repeat;
    background-position: right;
}

这将增强标准LightSwitch页脚样式并导致以下外观：

根据您的问题，上面的示例将msls-buttons-rows浮动到左侧;它还使用动画LightSwitch加载程序作为演示图形（只需更改网址指向您想要的图像）。

如果您想将图片大小调整为浏览器宽度的8％，可以在css规则中添加额外的背景大小声明，例如：

.msls-footer {
    background-image: url(images/ajax-loader.gif); 
    background-repeat: no-repeat;
    background-position: right;
    background-size: 8% 100%
}

显示以下内容：