4 Replies Latest reply: Nov 14, 2012 11:01 AM by ShakeebRahman-Oracle RSS

    Copy template from another Theme

    Mindmap
      Hi,

      I am trying to create a Button template As a Copy of an Existing Template. My app uses theme 23 and I want to utilize the Large Button - Icon template in the theme 25 (Blue Responsive) in my application.

      - I copied the template to the theme 23, then edited the template and make :
      Reference Master Template From: 106: Large Button - Icon (25)
      Nevertheless, Buttons on my application that have:
      Button Style: Template Based Button
      Button Template : Copy of Large Button - Icon

      Shows up as HTML Button..

      Any idea about how can I utilize a template from another theme ??

      In the docs, it is written:
      Tip:
      Make sure you associate your template with the correct theme.

      But, I did not get it ....

      Best Regards,
      Fateh
        • 1. Re: Copy template from another Theme
          fac586
          Fateh wrote:

          I am trying to create a Button template As a Copy of an Existing Template. My app uses theme 23 and I want to utilize the Large Button - Icon template in the theme 25 (Blue Responsive) in my application.

          - I copied the template to the theme 23, then edited the template and make :
          Reference Master Template From: 106: Large Button - Icon (25)
          Nevertheless, Buttons on my application that have:
          Button Style: Template Based Button
          Button Template : Copy of Large Button - Icon

          Shows up as HTML Button..
          APEX themes consist of two components: HTML templates define the UI structure, and external CSS style sheets control how it is presented. Copying a template only provides the HTML structural component. It doesn't copy any external CSS, nor add references to the source theme CSS in the target theme templates.

          Although you've copied the template into theme 23, the external theme 23 CSS referenced by your application does not contain any rules that match the theme 25 button template. Specifically, the theme 25 "Large Button - Icon" template uses the HTML <tt>button</tt> element, whereas buttons in theme 23 are implemented using the HTML <tt>a</tt> link element [Question for Oracle: Why? What was the rationale for this backward semantic step in a supposedly HTML5 theme?] Theme 23's button styles are applied using rules with <tt>a</tt> element selectors:
          a.uButtonLarge {
              display: inline-block;
              font: bold 14px/30px Arial,sans-serif;
              text-decoration: none;
              -moz-border-radius: 3px;
              -webkit-border-radius: 3px;
              border-radius: 3px;
              border: 1px solid #888;
              -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.15);
              -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.15);
              box-shadow: 0 1px 0 rgba(0,0,0,0.15);
              background: #d4d4d4;
          }
          ...
          These don't match the <tt>button</tt>-based template from theme 25, so you get the browser default presentation for a <tt>button</tt> element.

          You need to either:

          1. Copy the relevant CSS rules from the theme 25 style sheets into style sheets referenced in your app.

          2. Create a new <tt>a</tt>-based button template that's compatible with the existing theme 23 button CSS rules, and extend this with additional HTML and CSS to provide the icon capability.

          My preference would be option 2 as it should give better results, with colours appropriate to theme 23 etc.
          • 2. Re: Copy template from another Theme
            Mindmap
            Thanks Paul,

            Actually, All what I want is to have a golden and blue buttons WITH ICON on theme 23. I want to utilize the feature elaborated here:
            http://apex.shak.us/post/35134643503/icons-in-buttons-theme-25-blue-responsive
            I already tried to copy the CSS rules using Firebug, then I tried to get it from the css file of theme 25, I noticed that Classes are scattered along the sheet. So, on both ways I end up to not avail.

            Is there an an way to get it ? or if it is easy to you, can you please get it for me ?
            • 3. Re: Copy template from another Theme
              fac586
              Fateh wrote:
              Thanks Paul,

              Actually, All what I want is to have a golden and blue buttons WITH ICON on theme 23. I want to utilize the feature elaborated here:
              http://apex.shak.us/post/35134643503/icons-in-buttons-theme-25-blue-responsive
              I already tried to copy the CSS rules using Firebug, then I tried to get it from the css file of theme 25, I noticed that Classes are scattered along the sheet.

              So, on both ways I end up to not avail.

              Is there an an way to get it ? or if it is easy to you, can you please get it for me ?
              Not easy even for me.

              Why not just switch to Theme 25?
              • 4. Re: Copy template from another Theme
                ShakeebRahman-Oracle
                Hi Fateh,

                While it is possible to do what you are asking, it is very complicated and requires several different steps. Here's how I would go about doing this:

                <ol>
                <li>You will need to copy the button templates from Theme 25 into Theme 23.</li>
                <li>You need to copy CSS from Theme 25's 4_2.css file that deals with the buttons and icons. You can copy this CSS and put it directly into your application via Page 0, or you can create a file on your file system, or upload the file through APEX. </li>
                <li>Depending on your approach, you will need to modify the image reference to the THeme 25 sprite image (as it uses a relative uri).</li>
                </ol>

                That being said, I would highly recommend switching to Theme 25 and modifying the styles to make some parts appear red versus trying to get bits of Theme 25 to work properly in the theme 23.

                Paul, to answer your question:
                [Question for Oracle: Why? What was the rationale for this backward semantic step in a supposedly HTML5 theme?]
                When developing Theme 23, I ran into some browser compatibility issues with older versions of IE. When using the <button> tag, there were some strange behaviors on hover and active state of the buttons when using background images. Anchors were more predictable so it made sense to use them at the time.

                Best,
                Shakeeb