Questions and discussion about using ProcessMaker: user interface, running cases & functionality

Moderator: ArturoRobles

#788937
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?
Last edited by Ironguts25 on Fri Feb 17, 2017 8:01 pm, edited 1 time in total.
#788944
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?
#789009
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.
#789132
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.
#789183
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');
#827979
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?
amosbatto wrote: Thu Feb 16, 2017 4:58 pm 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');

Excellent read, Positive site, where did u come up[…]

Hello ProcessMakers! We are extremely proud to an[…]

How processmaker load cases on home page of user? […]

Hey everyone, I'd appreciate any help you might be[…]