Hi, it appears that labels for textfields are always bold and bordertitles are always "normal". We regard the contents of the textfields the most important so we want prompts by default in normal font. Bordertitles however should be in bold because we use them as titles for "item groups". What is the EASIEST way to change these fonts? Kind regards, Jan Willem Vermeer |
Hi Jan, To alter these kind of attributes non-component parts of Formspider, you need to tweak your FS CSS files or define a new custom CSS for your application. If the changes you need to do are application specific, then you should create a new CSS file and set it as your custom CSS from application settings dialog in Formspider IDE. (Do not forget to put your CSS file under tomcat/formspider/apps/APP_NAME/css/ folder.) If you want the changes to affect all Formspider applications, then you can make changes in Formspider skin file that you're using. ( tomcat/formspider/css/skins/ ). On the other hand, you have to know the names CSS rule(s) to make specific style changes. To achieve this information, the best way is using browsers' developer tools. Specifically, in Google Chrome, when you press F12 developer tools window will be opened. There is a magnifier icon on the left uppermost corner of developer tools. first click this icon, then select the part of a Formspider app of which you want to make style change. On the right side, then, yu will see the applied CSS rules of this part. For e.g., for the labels shown in bold, when you do as I said above, you'll see that there is a rule: (please see the attachment)
this tell us that every element that has this rule will be in bold. you have to change as "font-weight: normal !important;" in skin files or create a custom CSS fiel and add the following rule. Then add it to you app.
Best Regards Serdar Gokcen |
Thanks Serdar, I have done this: 1) Create an empty file pms-style.css in directory /apps/<application name="">/css. 2) Added this name as Custom CSS to the application 3) Added these lines to the file:
4) Deleted all temporary files 5) Run the application again - YES - it works ! All prompts are normal font now. So far so good. But now i want to do a similar trick to the bordertitle. They should get a different color and bold. In the developer window is see this:
So, i thought i only have to add this to my css file:
But that does not work... The element inspector shows this style, but both lines are striked through. So they do not change the style. Offcourse i tried the classes bdf-visual-element, bdf-panel, bdf-simplepanel as well, but they do not work too. In the end i discovered that the addition !important is crucial to get this working:
Now it works! The border title is shown in 12px and bold black. I have searched the internet for "css important" and get the impression that it is dirty coding... I am also worried about the inline styling. Why do all elements have inline styles? Normally inline styles always overrule style classes. I have tried to find out where they are coming from, but can find no setting anywhere for this. Can you explain why there are inline styles? Kind regards, Jan Willem |
Hi Jan, First of all, it is great to hear that you solved your issues. Now, we come to your comments and questions. That's right that using !important is not a best practice or it's not a recommended keyword either. However, it is invented for a reason just like your scenario: to overwrite styles that generally you cannot do via CSS. You require it to overwrite inline styling. To the inline styling, we're using inline styling for Formspider fonts. When you set font-color or font-style to a panel it's written as inline so that it's guaranteed that you got your styling. However, FS components and containers inherits default Formspider font styles when it's not entered too. That's why you see inline font stylings. Best Regards, Serdar Gokcen |