This discussion is archived
6 Replies Latest reply: Oct 1, 2012 3:25 AM by Mahmoud_Rabie RSS

How to edit #TEMPLATE_CSS# of a theme in APEX 4.2?

Mahmoud_Rabie Journeyer
Currently Being Moderated
Dear Experts,

How to edit #TEMPLATE_CSS# of a theme in APEX 4.2?

Best Regards
Mahmoud
  • 1. Re: How to edit #TEMPLATE_CSS# of a theme in APEX 4.2?
    fac586 Guru
    Currently Being Moderated
    See the item help for the File URLs and Inline items in the Cascading Style Sheet section of 4.2 Page Templates.
  • 2. Re: How to edit #TEMPLATE_CSS# of a theme in APEX 4.2?
    Mahmoud_Rabie Journeyer
    Currently Being Moderated
    Dear Paul,

    Thank you for your response. I mean how to see then edit the content which is substituted by #TEMPLATE_CSS#

    Best Regards
    Mahmoud
  • 3. Re: How to edit #TEMPLATE_CSS# of a theme in APEX 4.2?
    fac586 Guru
    Currently Being Moderated
    Mahmoud_Rabie wrote:

    Thank you for your response. I mean how to see then edit the content which is substituted by #TEMPLATE_CSS#
    The File URLs and Inline items are the content that replaces the <tt>#TEMPLATE_CSS#</tt> substitution string.

    See the Application Express 4.2 Early Adopter Feature Descriptions:
    >
    Feature : APEX 4.2 Early Adopter > Mobile Themes and Templates > Declarative support to specify inline CSS and CSS files
    Add new page and page template attributes "CSS file URL(s)" and "Inline CSS" to support declarative definition of CSS files and inline CSS which should be loaded for a page.
    >
    This enables us to include template-specific CSS only on those pages that actually require it, in preference to either repeating it in multiple page HTML Headers, or adding it to application-level CSS files and having it pointlessly loaded on pages that don't need it.

    In contrast to the old <tt>#HEAD#</tt> substitution string, not all of the new UI-related substitutions strings will always be replaced by content when the page is rendered. It will depend on whether the application/template actually uses them. These changes give us more granular control over the CSS and scripts that are included in a page.
  • 4. Re: How to edit #TEMPLATE_CSS# of a theme in APEX 4.2?
    Mahmoud_Rabie Journeyer
    Currently Being Moderated
    Dear Paul,

    To be more specific, I have the following
    <link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_22/css/theme_4_0.css" type="text/css" />
    in my page template.

    As I know, #TEMPLATE_CSS# is substituted by content of the above file.
    The question is, can I (through APEX 4.2) update this content directly to do tasks like adding or updating classes of the CSS?

    File URLs and Inline are empty (by default) and ready to be used to totally replace the content of #TEMPLATE_CSS#

    Is the only solution to update/edit the CSS of a theme, to download the CSS then paste it in Inline field (under CSS section of the template)?

    Best Regards
    Mahmoud
  • 5. Re: How to edit #TEMPLATE_CSS# of a theme in APEX 4.2?
    fac586 Guru
    Currently Being Moderated
    Mahmoud_Rabie wrote:
    Dear Paul,

    To be more specific, I have the following
    <link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_22/css/theme_4_0.css" type="text/css" />
    in my page template.

    As I know, #TEMPLATE_CSS# is substituted by content of the above file.
    No, it is not.

    As described above, <tt>#TEMPLATE_CSS#</tt> is replaced by the contents of the template's File URLs and Inline CSS properties. This feature enables template-level customization of the CSS included in the page. Try it: change <tt>#TEMPLATE_CSS#</tt> in the template to:
    <!-- TEMPLATE_CSS STARTS -->
    #TEMPLATE_CSS#
    <!-- TEMPLATE_CSS ENDS -->
    Now add a style to the Inline CSS property:
    body { background: black !important; }
    Run the page. View the page source in the browser and see what's happened to <tt>#TEMPLATE_CSS#</tt>...
    The question is, can I (through APEX 4.2) update this content directly to do tasks like adding or updating classes of the CSS?
    Not in the way you mean.
    File URLs and Inline are empty (by default) and ready to be used to totally replace the content of #TEMPLATE_CSS#
    Yes, <tt>#TEMPLATE_CSS#</tt> is replaced by the contents of the File URLs and Inline template properties. This does not affect the inclusion of any other CSS information, whether using new CSS substitution strings, <tt>&lt;link rel="stylesheet" ...&gt;</tt> elements, or embedded <tt>&lt;style&gt;</tt> declarations.
    Is the only solution to update/edit the CSS of a theme, to download the CSS then paste it in Inline field (under CSS section of the template)?
    No. If you want a custom theme the best way is:

    1. Copy the theme CSS to an accessible location in the file system (the best way) or APEX repository (if you don't have file system access).
    2. Create a new theme as a copy in APEX.
    3. Change the <tt>&lt;link rel="stylesheet" ...&gt;</tt> theme references in the new theme page templates to point to the new CSS location.
    4. Customize the CSS (tools like Coda that allow local and remote files to be modified are very helpful).
  • 6. Re: How to edit #TEMPLATE_CSS# of a theme in APEX 4.2?
    Mahmoud_Rabie Journeyer
    Currently Being Moderated
    Thank you, Paul

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points