8 Replies Latest reply on Apr 17, 2019 7:29 PM by Laury

    Customizing buttons layout and feel

    Laury

      Hi,

       

      I am using APEX 5.1.

      Does someone know how with the Universal Theme have customized buttons, with different color and shadow effect?

      Such effects could be done with one or more css files, but I see with this version of APEX that imported css files is depreciated.

       

      Thanks by advance for any tip(s).

       

      Kind Regards

        • 1. Re: Customizing buttons layout and feel
          fac586

          Laury wrote:

           

          I am using APEX 5.1.

          Does someone know how with the Universal Theme have customized buttons, with different color and shadow effect?

          Such effects could be done with one or more css files, but I see with this version of APEX that imported css files is depreciated.

          In the APEX 5.1 UT the rendering of page button controls is controlled using the Appearance settings in the button's property sheet:

           

          • Button Template
          • Hot
          • Template Options
          • CSS Classes
          • Icon

           

          You must be using the Page Designer to be able to access all of these attributes.

           

          To render report links as buttons and style dynamically created buttons, use the classes or mark-up generated by the Button Builder in the Universal Theme Sample Application (install the 5.1 version of this in your workspace from the Packaged Apps gallery).

           

          Button colours can be customised globally in the Buttons section of the Theme Roller, and individually using the color and status modifier classes defined in the Universal Theme.

          • 2. Re: Customizing buttons layout and feel
            Laury

            Hi,

             

            I do not understand eevrything you posted.

             

            In an older application, I had the a css file to customized the layout and feel of a button.

             

            Here is how it has been created:

             

            1) Create the style:

             

            Using a text editor, create the file mycss1.css and mycss2.css:

             

            .mycss2

            {

            font-family: Arial;

            color: Crimson;

            font-weight: 800;

            text-align :center;

            vertical-align: middle;

            width:90px;

            height:25px;

            background-color: LightSteelBlue;

            border: 2px solid;

            border-radius: 6px;

            box-shadow: 3px 3px LightSlateGray;

            }

             

            2) Load the css file:

             

            Application -> Shared Components -> Files -> Static Workspace Files

             

            3) Allow the display on the page:

             

            Application Page -> Edit -> HTML Header -> HTML Header:

             

            <link href="#WORKSPACE_IMAGES#mycss1.css" rel="stylesheet" type="text/css" />

            <link href="#WORKSPACE_IMAGES#mycss2.css" rel="stylesheet" type="text/css" />

             

            4) Make the change to apply to the template:

             

            Application Page -> Shared Components -> Templates

             

            Go to button (for instance).

            Chose: Button, Alternative 1 - Hot Button

            Make a copy as: Button, Alternative 1 - Hot Button MONE

             

            Edit -> Definition -> Normal Template:

             

            Change:

             

            -- origial

            <button value="#LABEL#" onclick="#JAVASCRIPT#" class="button-alt1" type="button" #BUTTON_ATTRIBUTES# id="#BUTTON_ID#">

              <span>#LABEL#</span>

            </button>

             

            to:

             

            -- modified to use CSS

            <button value="#LABEL#" onclick="#JAVASCRIPT#" class="mycss2" type="button" #BUTTON_ATTRIBUTES# id="#BUTTON_ID#">

              <span>#LABEL#</span>

            </button>

             

            => So, at that stage, button "Button, Alternative 1 - Hot Button" had been modify to use the mycss2 CSS file.

             

            How can I implement this functionality in the Universal Theme?

            How can I use that CSS file in the Universal Theme?

            Is it a good idea to "modify" a standard button (like it was in that application)?

             

            I do not understand the link you have sent to me.

            Why should I install the Universal Theme Sample Application?

             

            Kind Regards

            • 3. Re: Customizing buttons layout and feel
              Franck N

              Hi,

               

              if i did understood your issue very well,  this is pretty simple and you have 3 ways of achieving it.

               

              • In case of a single Button Modification on one Page:

              On the Page designer of your page just give a static id to your Button. for example: button_id the same way you will be  doing it for a component. of type region

               

              1. Scroll down to Attributes of your Button.
              2. For Static ID, enter value to identify

              Now adjust your css code as bellow using the assigned static id instead of using the css class selector:

               

              sometimes you might require to add the !important selector to override the default CSS settings from APEX in order to see the changes you are trying to display.

               

              #button_id{

              font-family: Arial;

              color: Crimson;

              font-weight: 800;

              text-align :center !important;

              vertical-align: middle;

              width:90px;

              height:25px;

              background-color: LightSteelBlue;

              border: 2px solid;

              border-radius: 6px;

              box-shadow: 3px 3px LightSlateGray;

              }

              • option 1: as you said you store the code in a css file and load the file on schared component & reference it on your page

              like bellow personally i will recommend to store the files in static application files in order to export it with the application export at the same time:

               

              • option2 just add the sample code directly on the app --> on your page---> inline Text Area
              • option 3 add your code on them Roller and save it as bellow:
              • In case it should be standard for all button on your app:

              then use the class selector for APEX Buttons: t-Button

               

              you can add the code in theme roller or via extern files and reference the css files in shared component for the whole application.

               

               

              Regards,

              Franck

              • 4. Re: Customizing buttons layout and feel
                Laury

                Hi,

                 

                I do not understand all your solutions.

                 

                Solution 1:

                 

                I create a button, I give it an ID, for instance "button_id".

                I defined the CSS associated with it, for instance:

                 

                #button_id{

                font-family: Arial;

                color: Crimson;

                font-weight: 800;

                text-align :center !important;

                vertical-align: middle;

                width:90px;

                height:25px;

                background-color: LightSteelBlue;

                border: 2px solid;

                border-radius: 6px;

                box-shadow: 3px 3px LightSlateGray;

                }

                 

                Then, I add this piece of code on:

                Page Designer -> Page Definition -> HTML Header -> HTML Header

                But still I don't see any change in the buuton layout.

                 

                What do you mean by Inline text area?

                Do you mean:

                Page Designer -> Page Definition -> CSS -> Inline?

                If yes, then I still do not see the changes with that button.

                 

                What template should I choose for this button?

                 

                Solution 2, and 3 you mentioned, I could not identify them om your post.

                 

                What is Theme Roller?

                 

                Kind Regards

                • 5. Re: Customizing buttons layout and feel
                  Franck N

                  Hi,

                   

                   

                  I do not understand all your solutions.

                   

                  Solution 1:

                   

                  Then, I add this piece of code on:

                  Page Designer -> Page Definition -> HTML Header -> HTML Header

                  But still I don't see any change in the buuton layout.

                   

                  What do you mean by Inline text area?

                  Do you mean:

                   

                  in HTML Header is defineltly wrong here is where you should add your code on your page:

                   

                  about theme roller:

                   

                  you have access theme roller while beeing logged on your application as well as in your workspace:

                  https://www.oracle.com/webfolder/technetwork/tutorials/obe/db/apex/r51/themeroller/themeroller.html

                   

                  regards,

                  Franck

                  • 6. Re: Customizing buttons layout and feel
                    Laury

                    Hi,

                     

                    Ok, three options thus.

                    Why is the beter option to choose?

                    Personally, I like more the second option, that make use of a CSs file at #WORKSPACE_IAMGWES#.

                     

                    Kind Regards

                    • 7. Re: Customizing buttons layout and feel
                      fac586

                      Laury wrote:

                       

                      Is it a good idea to "modify" a standard button (like it was in that application)?

                      Not in my opinion. Why do you think it was a good idea in the older app? What benefit did it offer to users?

                      I do not understand the link you have sent to me.

                      Why should I install the Universal Theme Sample Application?

                      To take full advantage of the features it provides:

                       

                      • Demonstrations of the capabilities of the Universal Theme
                      • Examples of how to customize it using built-in theme options
                      • Reference documentation describing utility classes and JavaScript events
                      • A Font APEX icon catalogue
                      • Code generators for icons and buttons

                       

                      The Button Builder is an interactive tool that generates the class attributes or HTML code required to render custom buttons (generally used to display controls in reports—the same effects can be achieved for page buttons using existing properties and template options).

                       

                      The ability to control the look and feel of Universal Theme and its components in a consistent way using the Theme Roller, template options, and predefined utility classes means that there is much less reason to resort to using external CSS to customise the appearance of applications.

                      1 person found this helpful
                      • 8. Re: Customizing buttons layout and feel
                        Laury

                        HI,

                         

                        fac586 schreef:

                         

                        Not in my opinion. Why do you think it was a good idea in the older app? What benefit did it offer to users?

                        I also agree with you. I never said it is good idea, I was just asking the question as an inherited of an application with some customizations on standard buttons. I do not know what benefits it offered to the users, I am quite happy with the standard features.

                         

                         

                        fac586 schreef:

                         

                        The Button Builder is an interactive tool that generates the class attributes or HTML code required to render custom buttons (generally used to display controls in reports—the same effects can be achieved for page buttons using existing properties and template options).

                         

                        The ability to control the look and feel of Universal Theme and its components in a consistent way using the Theme Roller, template options, and predefined utility classes means that there is much less reason to resort to using external CSS to customise the appearance of applications.

                        Yes, I have found it. Instead of "modifying" standard buttons - like it was -I just created a new one this way and set it with the properties it had.

                        The Theme Roller is something I still need to explore.

                         

                        Kind Regards