Page 1 of 1
Custom fonts in skin
Posted: Tue Jul 10, 2018 11:07 pm
by amosbatto
Where in a process maker install should you put fonts you want to call from your skin's css file? and what should the url be for the location within the css file?
Re: Custom fonts in skin
Posted: Tue Jul 10, 2018 11:19 pm
by amosbatto
Place the font files in this directory for a manual install:
<install-directory>/processmaker/workflow/public_html/fonts/
In a Bitnami install, the directory is:
<install-directory>/processmaker-3.X.X.bX-X/apps/processmaker/htdocs/workflow/public_html/fonts/
Then, add the following to your .css file in the skin:
Code: Select all@font-face {
font-family: "myfont";
src: url('../fonts/myfont-Bold.ttf') format('truetype'),
url('../fonts/myfont-Italics.ttf') format('truetype'),
url('../fonts/myfont-Regular.ttf') format('truetype');
}
Then, you can use the font name in your CSS definitions.
See:
https://developer.mozilla.org/en-US/doc ... t-face/src
Re: Custom fonts in skin
Posted: Mon Apr 08, 2019 1:06 pm
by mohamad
Dear Amosbatto,
I added my fonts to below dirctory
D:\processmaker64-2\ProcessMaker3.4\new-processmaker\apps\processmaker\htdocs\workflow\public_html\fonts
Also, I added them to below dirctory
D:\processmaker64-2\ProcessMaker3.4\new-processmaker\apps\processmaker\htdocs\workflow\public_html\skins\neoclassic\fonts
After that, I added some codes in the below directory:
D:\processmaker64-2\ProcessMaker3.4\new-processmaker\apps\processmaker\htdocs\shared\skins\mohamad\css\style.css
@font-face {
font-family: "Yekan";
src: url('/skins/neoclassic/fonts/Yekan.woff') format('woff'), url('/skins/neoclassic/fonts/Yekan.ttf') format('truetype'), url('/skins/neoclassic/fonts/Yekan.svg') format('svg');
}
I did not see any change in PM workflow. I want to have my special font in dynaforms and the other parts? how can I do that?
I would be appreciated if you could help me with this.
Looking forward to your valuable comments.
Kind Regards
Re: Custom fonts in skin
Posted: Mon Apr 08, 2019 11:36 pm
by amosbatto
I wrote up instruction on how to add fonts to ProcessMaker:
https://www.pmusers.com/index.php/Add_f ... ocessMaker
Re: Custom fonts in skin
Posted: Tue Apr 09, 2019 3:41 am
by mohamad
Dear Amosbatto,
I'm deeply grateful for your perfect answers. All of them are excellent and easy to understand.
Re: Custom fonts in skin
Posted: Wed Apr 10, 2019 12:12 pm
by amosbatto
Mohamad, I don't have time to figure out Jalali dates. Sorry.
Re: Custom fonts in skin
Posted: Wed Jul 08, 2020 2:48 am
by FitBoy01
The Verdana, Geneva font family is web safe so you will not need to add files to the font folder.
The classes that handle the editors css are as follow:
Code: Select all.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top;
background: transparent;
text-decoration: none;
color: #333333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
text-shadow: none;
float: none;
position: static;
width: auto;
height: auto;
white-space: nowrap;
cursor: inherit;
-webkit-tap-highlight-color: transparent;
line-height: normal;
font-weight: normal;
text-align: left;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
direction: ltr;
}
So to change the font family and size you will need to add this to your css file.
Code: Select all.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
font-family: Verdana,Geneva,sans-serif;
font-size: 11px;
}
The file that has the above code needs to be called after the Bootstrap.min.css file in the header otherwise it will be overwritten.
Hope that helps.
Re: Custom fonts in skin
Posted: Wed Nov 11, 2020 12:54 am
by mikeljems1
In the Presentation section, in the Skin field, click the properties icon. Select the application into which you want to upload the custom fonts.
https://surveydetails.com/www-mshare-net-websurvey/