littlelink-server icon indicating copy to clipboard operation
littlelink-server copied to clipboard

Gradient background

Open timothystewart6 opened this issue 4 years ago • 7 comments

it currently supports Dark and Light mode. A gradient that spans a few hex values would be nice.

timothystewart6 avatar Aug 14 '21 18:08 timothystewart6

Can be done once you gain access to the index.html

Example

<style>
body {
  background-image: url('https://i.imgur.com/somerandompicture.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #000000;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
</style>

jjjonesjr33 avatar Aug 26 '21 03:08 jjjonesjr33

Thanks! Will do this in code so that you don't have to map the volume and it's completely stateless.

timothystewart6 avatar Aug 26 '21 04:08 timothystewart6

This is a lovely idea! I second this!

kenjibailly avatar Nov 25 '21 18:11 kenjibailly

Any progress on this? :)

kenjibailly avatar Mar 16 '22 17:03 kenjibailly

not yet, will add soon!

timothystewart6 avatar Mar 16 '22 18:03 timothystewart6

Since this has not been built, for those who else are wondering if there is a a workaround. Here you go.

For Remote Images

This code pulls from an external image url.

Add Path, create the normalize.css file in the appdata docker folder location. Container Path: /usr/src/app/build/public/css/normalize.css Host Path: /mnt/user/appdata/littlelink/css/normalize.css

Use this code for normalize.css

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{background-image:url(https://i.imgur.com/something.png);background-size:cover;background-attachment:fixed;background-repeat:no-repeat;background-position: center;}margin>
/*# sourceMappingURL=normalize.css.map*/

Just replace the https://i.imgur.com/something.png in the code

For Locally Hosted Images

This code pulls stored images

Create a container path to store you images, then map the container to give it access to the images. Container Path: /usr/src/app/build/public/static/media/local Host Path: /mnt/user/appdata/littlelink/images

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{background-image:url(/static/media/local/Background.webp);background-size:cover;background-attachment:fixed;background-repeat:no-repeat;background-position: center;}margin>
/*# sourceMappingURL=normalize.css.map*/

I stored mine as a webp so it loads faster and just named it as Background in the folder /static/media/local/Background.webp

FYI

If you do Locally Hosted Images, you can use the path and store your profile image as well. Just change the location of AVATAR_URL: and AVATAR_2X_URL: to the mapped folder and the phone being used.

I stored mine as a webp so it loads faster and just named it as Profile in the folder /static/media/local/Profile.webp

jjjonesjr33 avatar Jun 19 '22 22:06 jjjonesjr33