GithubHelp home page GithubHelp logo

Gradient background about littlelink-server HOT 6 OPEN

techno-tim avatar techno-tim commented on August 15, 2024 2
Gradient background

from littlelink-server.

Comments (6)

timothystewart6 avatar timothystewart6 commented on August 15, 2024 2

not yet, will add soon!

from littlelink-server.

jjjonesjr33 avatar jjjonesjr33 commented on August 15, 2024

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>

from littlelink-server.

timothystewart6 avatar timothystewart6 commented on August 15, 2024

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

from littlelink-server.

kenjibailly avatar kenjibailly commented on August 15, 2024

This is a lovely idea! I second this!

from littlelink-server.

kenjibailly avatar kenjibailly commented on August 15, 2024

Any progress on this? :)

from littlelink-server.

jjjonesjr33 avatar jjjonesjr33 commented on August 15, 2024

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

from littlelink-server.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.