Serenity: Login Page Background image (Except using the vegas)

Created on 12 Jul 2016 · 12Comments · Source: serenity-is/Serenity

Hi,
Is there a simpler way to set the login background to a .jpg without using the vegas scripts as illustrated on the https://github.com/volkanceylan/Serenity/wiki/Customizing-the-Login-Screen

I already followed the above illustration as it is but my image doesn't appear, so is there any other way?

Source

DavidMhluzi

Most helpful comment

Use Q.resolveUrl client side, or @Html.Content("~/some/path/to/image.jpg"), never use relative paths. Also avoid inline styles.

volkanceylan on 13 Jul 2016

👍2

All 12 comments

That way works. I I've successfully implemented in my project. Post your script in YourProject.Web\Modules\Membership\Account\AccountLogin.cshtml

Estrusco on 13 Jul 2016

😕1

Seems like I cant comment with code.

DavidMhluzi on 13 Jul 2016

Below is my add AccountLogin.cshtml code as per article. Am I missing something?

DavidMhluzi on 13 Jul 2016

mmm it seems correct.
Try to remove overlay, and increment delay at 5000 (50ms is really too little).

Also check if your images paths are correct.

Estrusco on 13 Jul 2016

If you are not planning on using a slide show version, you could do something very simple.

go into the AccountLogin.cshtml and add:

<body style="background-image:url('../../../Content/images/myImage.jpg');background-repeat:no-repeat;background-size: cover"></body>

and then you can edit the caption coloring on the site.membership.less file. This lets you have the chance to add a background image with the least amount of effort.

sayuga on 13 Jul 2016

If you're not going to use the slideshow, then don't choose to instantiate Vegas. You can customize the background image using CSS or plain JavaScript, though I'd probably just go with CSS instead. There's no reason to include the scripts unless you're going to use the slideshow. Additionally, make sure that all path names are correct. Visual Studio should provide IntelliSense when typing the path names. If you do use the Vegas library, I can create a Gist for you with the code that I used and provide you the link, and then we can compare implementations.

BTW, I wrote the article for the customization, I'm glad to see that it's helped some people. I'd like to help you get this resolved, if I can.

jsbUSMC on 13 Jul 2016

👍1

@jsbUSMC yes please provide me with the Gist link. @sayuga thank you I'll give it a try and get back to you.

DavidMhluzi on 13 Jul 2016

@sayuga I tried the suggested solution but still my I cant see my background image. Is it working from your side? Have you tried to put it directly to the AccountLogin.cshtml before?

DavidMhluzi on 13 Jul 2016

Here is the link to my gist for AccountLogin.cshtml

jsbUSMC on 13 Jul 2016

👍1

@DavidMhluzi it works fine for me. Here is my code so you can sample. I am just using standard html to call on the body tag and editing using HTML5. I will say, when I was using "~/" instead of the full "../../../" it wasn't properly pulling the image.

    @{
    ViewData["Title"] = "Login";
    ViewData["PageId"] = "Login";
    Layout = MVC.Views.Shared._LayoutNoNavigation;
    }

   // Added Body tag using HTML to add background image.// 
    //Image is stored in the Contents>images folder.     //
    //Make sure the image is in the right spot//

    <body style="background-image:url('../../../Content/images/Boston1.jpg');background-repeat:no-repeat;background-size: cover"></body> 



    <script id="Template_Membership_LoginPanel" type="text/template">
    <div>
    <center>
        <img src="../../../Content/images/CompanyLogo.png" align="top" />
        <h3>@Texts.Forms.Membership.Login.FormTitle</h3>
    </center>
    <form id="~_Form" action="">
        <div class="s-Form">
            <div class="fieldset ui-widget ui-widget-content ui-corner-all">
                <div id="~_PropertyGrid"></div>
                <div class="clear"></div>
            </div>
            <div class="buttons">
                <button id="~_LoginButton" type="submit" class="btn btn-primary">
                    @Texts.Forms.Membership.Login.SignInButton
                </button>
                <a href="@Url.Content("~/Account/ForgotPassword")">@Texts.Forms.Membership.Login.ForgotPassword</a>
                @*<a class="clear" href="@Url.Content("~/Account/SignUp")">@Texts.Forms.Membership.Login.SignUpButton</a>*@
            </div>
        </div>
    </form>
</div>
</script>


@if (SiteInitialization.SkippedMigrations)
{
<div class="alert alert-error alert-dismissible">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <h4><i class="icon fa fa-warning"></i> Warning!</h4>
    Dashboard skipped running migrations to avoid modifying an arbitrary database.
    If you'd like to run migrations on this database, remove the safety check 
    in SiteInitialization.RunMigrations method.
</div>
}

@if (ViewData["Activated"] != null)
{
<div class="alert alert-info alert-dismissible">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <h4><i class="icon fa fa-info"></i>@LocalText.Get("Dialogs.InformationTitle")</h4>
    @Texts.Forms.Membership.SignUp.ActivationCompleteMessage
</div>
}

<div class="page-content">
    <div id="LoginPanel">

    </div>
</div>

<script type="text/javascript">
jQuery(function() {
    new Dashboard.Membership.LoginPanel($('#LoginPanel')).init();
@if (ViewData["Activated"] != null)
{
    <text>
    $(function() { 
        $('#Dashboard_Membership_LoginPanel0_Username').val(@Html.Raw(Serenity.JSON.Stringify(ViewData["Activated"])));
        $('#Dashboard_Membership_LoginPanel0_Password').focus();
    });
    </text>
}
});
</script>

This is the way my current background is set up.

I manipulated the captions by going to site.membership.less

@import "site.mixins.less";
@White:#fff;
@defaultCaption:@White;

.s-LoginPanel {
    border: 2px solid #e7e7e7;
    padding: 40px;
    border-radius: 8px;
    width: 570px;
    margin: 60px auto auto auto;
    .form-styles(150px, 300px);

    h3 {
        font-size: 16px;
        margin: 16px 0 24px;
        color: @defaultCaption;
        font-style:oblique;
        font-weight:700;

    }

    .buttons {
        padding: 8px 0 0 158px;

        a {
            float: right;
            margin: 0 24px;
        }
    }

    .s-Form .field {
        padding: 8px;
    }

    .s-Form input {
        padding: 6px 10px;
    }

    .s-Form .caption {
        padding: 6px 10px;
        color: @defaultCaption;
        font-style:oblique;
    }
}

sayuga on 13 Jul 2016

👍1

Use Q.resolveUrl client side, or @Html.Content("~/some/path/to/image.jpg"), never use relative paths. Also avoid inline styles.

volkanceylan on 13 Jul 2016

👍2

Hi Guys,

The solutions you posted finally worked thank you very much for the time given and patience. I tried both @sayuga & @jsbUSMC solutions and the both produce the desired result. Now its up to me to decide which route to take. @volkanceylan thanx brother, I'll give that a shot too just to see the differences.

I think this thread can be closed now.

cheers,

DavidMhluzi on 13 Jul 2016

Was this page helpful?

0 / 5 - 0 ratings