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

asked 18 Sep '15, 11:02

Jan%20Willem%20Vermeer's gravatar image

Jan Willem V...
1431436
accept rate: 0%


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)

.bdf-component-label {
    font-style: normal !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

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.

.bdf-component-label {
    font-weight: normal !important;
}

CSS rule

Best Regards Serdar Gokcen

link

answered 18 Sep '15, 11:52

Serdar's gravatar image

Serdar ♦♦
100k4
accept rate: 13%

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:

.bdf-component-label {
    font-weight: normal !important;
}

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:

<label id="ext-comp-1023" class="bdf-simplepanel-bordertitle bdf-visual-element bdf-panel bdf-simplepanel " style="font-family: Arial; font-size: 11px; font-style: normal; font-weight: normal; text-decoration: none; color: rgb(0, 0, 0); line-height: 11px;">Identificatie</label>

So, i thought i only have to add this to my css file:

.bdf-simplepanel-bordertitle {
 font-weight: bold;
 color: red;
}

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:

.bdf-simplepanel-bordertitle {
 font-weight: bold !important;
 font-size: 12px !important;
 color: #000000 !important;
}

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

link

answered 19 Sep '15, 08:57

Jan%20Willem%20Vermeer's gravatar image

Jan Willem V...
1431436
accept rate: 0%

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

link

answered 21 Sep '15, 05:17

Serdar's gravatar image

Serdar ♦♦
100k4
accept rate: 13%

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×4
×4
×3
×2

Asked: 18 Sep '15, 11:02

Seen: 1,434 times

Last updated: 21 Sep '15, 05:17


© Copyright Gerger 2017