search

silvanmelchior / RPi_Cam_Web_Interface

A web interface for the RPi Cam
MIT License
1.54k stars 493 forks source link

Modify html/CSS #553

Open DidierMasse opened 4 years ago

DidierMasse commented 4 years ago

Hi community !

My RPi_Cam_Web_Interface work correctly ! But i want modify CSS file for better esthetic personalisation !

So somebody can explain me how architecture work ? Wich HTML for wich screen ? I try to find it wich tittle html but i find nothing ^^

Thanks !

roberttidey commented 4 years ago

There are 3 main web pages. Each is in generated on the fly by a corresponding php file.

1) index.php generates the html for the main preview screen which has the live preview, the control buttons and the various settings like camera settings.

2) preview.php generates the html for the screen containing the recorded images / videos. Thumbnail icons are shown for each recording and one may be clicked to view in high resolution. This page also allows filtering and downloading of recordings.

3) schedule.php generates the html for the screen containing the schedule settings which allows for automation of recordings and for automatic purging of old recordings. A copy of this file also runs continually in the background to provide the schedule service functions.

A fourth php motion.php supports control of external motion detection but it is recommended that internal motion detection is used and then this page is not used.

The style is contained primarily in the standard styleminified.css which provides some standard button shappes and tabs etc. preview.css has some specific style for the download page. Selective extra styling can be brought in by the styling can be overlaid by the es extra css files.

DidierMasse commented 4 years ago

So i open minified_style.css and it's write on only one line, i can't read it correctly for find "color".

How i have to do for change only color....?

DidierMasse commented 4 years ago

i can't re write all css but maybe with extra change file

thanks for you reply

roberttidey commented 4 years ago

the minified means that it has been made as small as possible. You can use https://unminify.com/ to make it readable. If you edit this you can use it without minifying, it just takes a little more space.

Yes you can put stuff into the extra css to overrule what is in the main style file. Look at es_Night.css to see how the colors are changed for a night scheme. This was put in for users who were using it outside with telescopes who wanted lower stray light.

Any css file which starts with es_ will become a selectable style in the system settings tab.

DidierMasse commented 4 years ago

No i'm just stupid, but when i change background-color for background: url(/.../.../...) it's same problem i can't select night profile

roberttidey commented 4 years ago

I select style 'night' from the system tab then press OK. Background goes black and buttons change color.

DidierMasse commented 4 years ago

Yep it was some bad manipulation !

Now it's work, thanks for all this information (: