Search code examples
cssvisual-studio-lightswitchlightswitch-2013

Lightswitch HTML - add image to command bar

I know this is possible to do, however my CSS skills aren't the best, so could someone help me or point me in the right direction.

What I am looking for: (to add an image at the bottom right of the command bar at the bottom of the Lightswitch HTML screen) enter image description here

the code that needs editing is in the msls-2.5.1.css file, under the tag of .msls-footer as far as I am aware, i want a static image adding on the very right, approx 8% as wide as the screen as to not distort the image to much.

Thankyou for any support on this, it is greatly appreciated!!

code that affects the size:

.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 that affects the colour of the command bar:

.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}*/);
}
Solution

  • This can easily be achieved by updating the user-customization.css file (located directly in your project's Content folder) and adding the following additional declarations for the msls-footer css rule: 

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

    This will augment the standard LightSwitch footer style and result in the following appearance:

    right aligned image

    In line with your question, the above example floats the msls-buttons-row to the left; it also uses the animated LightSwitch loader as a demonstration graphic (simply change the url to point to your desired image).

    If you'd like to size the image to 8% of the browser width, you can add an additional background-size declaration to the css rule e.g.:

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

    To display the following:

    sized example