Page 1 of 1

Background Image

PostPosted: Fri Oct 12, 2018 7:51 am
by hansg
Hi,

I know this isn't strictly vicidial related but...

I am trying to add a simple generic background image to the agent.php page. I want the image to be fullscreen behind the login box. I have tried a couple of methods but html/php is not my strong point.

Could someone give me a bit of help with this please?

Re: Background Image

PostPosted: Sun Oct 14, 2018 11:56 am
by williamconley
1) you didn't post your installer with version.

2) Vicidial doesn't have an agent.php page, it has a vicidial.php page, thus the requirement for your installation method.

3) In Vicidial:

In /srv/www/htdocs/agc/vicidial.php there are many instances of "<body onresize", each one represents a different method of drawing the page. One for "relogin", one for "if agent login is first instead of phone login", etc.

For instance, this will result in a ... very interesting "relogin" page (this is the page the agents are sent to when they log out, offering a pre-filled-in form for relogin, handy to bookmark for simplistic workstation login):
Code: Select all
nano +1160 /srv/www/htdocs/agc/vicidial.php

if ($relogin == 'YES')
        {
        echo "<title>"._QXZ("Agent web client: Re-Login")."</title>\n";
        echo "</head>\n";
    echo "<body onresize=\"browser_dimensions();\" onload=\"browser_dimensions();\" style='background-image:url(\"./images/vicidial_admin_web_logo.png\");'>\n";

The only change to the code is the style of the <body tag.

4) This is a support request not a General Discussion. Moving to the proper board.

Re: Background Image

PostPosted: Mon Oct 15, 2018 4:56 am
by hansg
Thanks William.

Don't know where I got agent.php from, I knew it was vicidial.php

Thanks for the info on that though, got it working. I am just playing around a little bit to possibly make it look a little different.

Re: Background Image

PostPosted: Wed Oct 17, 2018 6:28 am
by hansg
I have the background image displaying now.

Only problem I have is trying to have the background adjust to different screen resolutions/sizes. I have tried a few different methods to make it the correct size but the image either multiplies if the screen resolution is bigger than the image or it shows part of the image if the resolution is less.

I'm probably doing something stupid. How can I change this to adjust properly?

Code: Select all
echo "<title>"._QXZ("Agent web client: Re-Login")."</title>\n";
        echo "</head>\n";
    echo "<body onresize=\"browser_dimensions();\" onload=\"browser_dimensions();\" style='background-image:url(\"./images/background_image.jpg");'>\n";

Re: Background Image

PostPosted: Wed Oct 17, 2018 8:56 am
by blackbird2306
Try it with:
Code: Select all
echo "<body onresize=\"browser_dimensions();\" onload=\"browser_dimensions();\" style='background-image:url(\"./images/vicidial_admin_web_logo.png\"); background-repeat: no-repeat; background-position: left; background-size: auto;'>\n";

and change the property values according to your wishes:
background-position:
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
https://www.w3schools.com/cssref/pr_background-position.asp

background-size:
auto, cover ...
https://www.w3schools.com/cssref/css3_pr_background-size.asp

And there would be no harm in taking a look at the CSS basics (very useful for your purpose changing vicidial design).
https://www.w3schools.com/css/default.asp