3 Replies Latest reply on Oct 10, 2018 1:00 PM by -Max-

    how to change item label font size in Universal Theme - 42 *

    ar_dev_mea

      i have  used Universal Theme - 42 * for all application.item appearance to defined optional-Floating.its showing the label as gray color when the data available (not readable by end user as complaint).

      so how can i defined the CSS for entire application the label to be BOLD and block color font? i attach the snap for requirement.

       

      font to be bold.png

      our platform: apex.oracle.com

        • 1. Re: how to change item label font size in Universal Theme - 42 *
          Jeremy Webb

          If you use the page inspector in your browser, can you not find the classes around that item and then adjust the CSS accordingly?

          • 2. Re: how to change item label font size in Universal Theme - 42 *
            Kiran Pawar

            Hi ar_dev_mea,

            ar_dev_mea wrote:

             

            i have used Universal Theme - 42 * for all application.item appearance to defined optional-Floating.its showing the label as gray color when the data available (not readable by end user as complaint).

            so how can i defined the CSS for entire application the label to be BOLD and block color font? i attach the snap for requirement.

             

            font to be bold.png

            our platform: apex.oracle.com

            You have to use the Theme Roller to apply the following custom CSS to your Universal Theme for all the application-wide forms. Create a new Style and apply that style to your application:

            .t-Form-fieldContainer .t-Form-label {
                font-weight: bold !important;
                color: #000000 !important;
            }
            

             

            Following are the detailed steps about how you can do it using Theme Roller:

            • Run the application. Open Theme Roller. Open the Custom CSS section and paste the above given CSS

            OTN1.png

            • Close the Custom CSS and click the Save As button on Theme Roller and give a new name to your style and then click OK on the success message.

            OTN2.png

            • Choose your newly created Style and click the Set as Current button

            OTN3.png

            • Click OK button and close the Theme Roller

            OTN4.png

            • Reload your application and open a page containing form, new style will be applied

            OTN5.png

             

            Regards,

            Kiran

            • 3. Re: how to change item label font size in Universal Theme - 42 *
              -Max-

              Additionally to what Kiran Pawar said, I would only change the CSS slightly so that it's not using the important keyword.

              Something like this:

               

              /* CSS when the item has no value (label not floating) */
              .t-Form-fieldContainer--floatingLabel .t-Form-label {
                  color: rgba(0,0,0,.8); /* default value is rgba(0,0,0,.55) */
                  font-weight: 600;      /* default value is 400 */
              }
              
              /* CSS when the item has a value or is focused (label floating) */
              /* defaults to the values from previous class */
              .t-Form-fieldContainer--floatingLabel.is-active .t-Form-label,
              .t-Form-fieldContainer--floatingLabel.js-show-label .t-Form-label {
                  color: rgba(0,0,0,.8);
                  font-weight: 700;
              }
              

               

              The second class is not required but can be useful if you'd like to tweak the labels when they are floating.

               

              Regards

              Max