Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gradient background #3

Open
timothystewart6 opened this issue Aug 14, 2021 · 6 comments
Open

Gradient background #3

timothystewart6 opened this issue Aug 14, 2021 · 6 comments
Labels
enhancement New feature or request

Comments

@timothystewart6
Copy link
Contributor

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

@jjjonesjr33
Copy link

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>

@timothystewart6
Copy link
Contributor Author

timothystewart6 commented Aug 26, 2021

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

@kenjibailly
Copy link
Contributor

This is a lovely idea! I second this!

@kenjibailly
Copy link
Contributor

Any progress on this? :)

@timothystewart6
Copy link
Contributor Author

not yet, will add soon!

@jjjonesjr33
Copy link

jjjonesjr33 commented Jun 19, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants