RPi_Cam_Web_Interface icon indicating copy to clipboard operation
RPi_Cam_Web_Interface copied to clipboard

Modify html/CSS

Open DidierMasse opened this issue 4 years ago • 7 comments

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 !

DidierMasse avatar Apr 26 '20 12:04 DidierMasse

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 style_minified.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.

roberttidey avatar Apr 26 '20 15:04 roberttidey

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 avatar Apr 26 '20 17:04 DidierMasse

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

thanks for you reply

DidierMasse avatar Apr 26 '20 17:04 DidierMasse

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.

roberttidey avatar Apr 27 '20 07:04 roberttidey

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

DidierMasse avatar Apr 27 '20 17:04 DidierMasse

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

roberttidey avatar Apr 28 '20 08:04 roberttidey

Yep it was some bad manipulation !

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

DidierMasse avatar Apr 28 '20 10:04 DidierMasse