Serenity: Changing Logo and Welcome Messages

Created on 2 May 2017  路  3Comments  路  Source: serenity-is/Serenity

Hello Volkan,
Please where can I change settings like

  1. The serenity logo
  2. The serenity welcome message on the serenity login page

Most helpful comment

For all which came here in the hope to just exchange an image file: "Unfortunately", with newer versions of SF, the logo and many other images are directly encoded as base64 blobs within site.theme.less.

This may bring a small performance benefit but is much harder to maintain (my personal opinion of course :-))

So open /Content/Site/site.theme.less and search for: .main-header .logo i {

You will find something like the following:

.main-header .logo i {
    width: 50px;
    height: 50px;
    float: left;
    background: url(data:image/png;base64,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) no-repeat center center;
}

Exchange the background part with something like: background: url(images/<your Logo>.png) no-repeat center center;

And then copy your new logo (<your Logo>.png) under /Content/site/images<your Logo>.png

Hope this helps somebody.

With kind regards,

John

All 3 comments

  1. have a look at views/shared/_layout.cshtml
  2. find the message in the project and change

1) Project\Project.Web\Content\site\images
2) Project\Project.Web\Modules\Texts.cs

For all which came here in the hope to just exchange an image file: "Unfortunately", with newer versions of SF, the logo and many other images are directly encoded as base64 blobs within site.theme.less.

This may bring a small performance benefit but is much harder to maintain (my personal opinion of course :-))

So open /Content/Site/site.theme.less and search for: .main-header .logo i {

You will find something like the following:

.main-header .logo i {
    width: 50px;
    height: 50px;
    float: left;
    background: url(data:image/png;base64,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) no-repeat center center;
}

Exchange the background part with something like: background: url(images/<your Logo>.png) no-repeat center center;

And then copy your new logo (<your Logo>.png) under /Content/site/images<your Logo>.png

Hope this helps somebody.

With kind regards,

John

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Pinellus picture Pinellus  路  3Comments

Akarsh03 picture Akarsh03  路  3Comments

newyearsoft picture newyearsoft  路  3Comments

GitHubOrim picture GitHubOrim  路  3Comments

StefanTheiner picture StefanTheiner  路  3Comments