[Ironguts25]

Hi,
ProcessMaker seems to default to the to the root folder for the location of the custom background image even though I have updated the path in my custom skin loginStyle.css file.

body.login {
background-color: #444;
background: url('../../shared/skins/myskinfolder/images/mybackgroundimage.jpg');
background-size: cover;
}

This change causes the background not to display even though the file is located in the custom skin image folder. However, when I have the custom image in the root public_html/images folder and use background: url('/images/mybackgroundimage.jpg'), it displays the custom background image properly.

Note, the same thing happens when trying to load a custom logo image in the custom skin layout.html file.

Am I missing something?

[zainab]

Place your custom image inside /shared/skins/skin-name/images folder and then try replacing your URL with the following URL and check if it works,
"/opt/processmaker/shared/skins/myskinfolder/images/mybackgroundimage.jpg"

else try,
"/images/mybackgroundimage.jpg"

Where is your file custom css file located?
Also have you given proper rights to your images directory?

[Ironguts25]

Image has always been in the /shared/skins/skin-name/images folder. However, no matter what I put in the url of loginStyle.css it cant find the file in that directory. The url "images/mybackgroundimage.jpg" actually points to the root public_html/images folder not the custom skin images folder so it works when the custom image file is copied to the public_html/images folder. Problem with that is the image file must manual be copied to the public_html/images folder when importing the custom skin into ProcessMaker.

The proper rights have been granted but the problem still remains.

[zainab]

Hello,

This can be achieved by the following:
When you create a new skin say "pmskin", create a symbolic link of this custom skin folder to the skin folder in public_html.
You can refer the command to do so:

Code: Select all

# ln -s /opt/processmaker/shared/skins/pmskin/ /opt/processmaker/workflow/public_html/skins/

This will keep a record for all the changes in public_html that are originally done in the custom skin folder.
Now, when you add a custom image for background in your /opt/processmaker/shared/skins/pmskin/images/ folder, it will be reflected in /opt/processmaker/workflow/public_html/skins/pmskin/images/ folder, and the image can be directly accessed.
And the path to image in loginStyle.css can be given as:

Code: Select all

body.login {
background-color: #444;
background: url('/skins/pmskin/images/mybackgroundimage.jpg');
background-size: cover;
}

Hope this helps.

[amosbatto]

We need to update our documentation on skins, because this isn't explained in the wiki. Sorry about that.

If you want to access a file located in the shared/skins/skin-name/images/ directory, you can use this URL:
http://domain/skin/skin-name/images/filename
For example:
http://processmaker.mycompany.com/skin/ ... dimage.jpg
In your CSS file, you can use:
background: url('/skin/myskin/images/mybackgroundimage.jpg');

[Ironguts25]

Thank you Amos! That works perfectly.

[richvle]

I'm modifying the layout.html on a DEV, QA, and PROD server. I can access images on the root using
img src="/images/logopm3login.png" as a relative path. So this solution, using the absolute path won't necessary work since I have a different server name, it's harder for deployment. I was hoping to use a relative path such as
../../opt/processmaker/shared/skins/corpcolors/images/headquartersPhoto.png

The WIKI says to use absolute path as well.

Any ideas anybody?

We need to update our documentation on skins, because this isn't explained in the wiki. Sorry about that.

If you want to access a file located in the shared/skins/skin-name/images/ directory, you can use this URL:
http://domain/skin/skin-name/images/filename
For example:
http://processmaker.mycompany.com/skin/myskin/images/mybackgroundimage.jpg
In your CSS file, you can use:
background: url('/skin/myskin/images/mybackgroundimage.jpg');