This discussion is archived
8 Replies Latest reply: Jul 15, 2013 5:15 PM by William Wallace RSS

CSS file to customise template

William Wallace Newbie
Currently Being Moderated

HI

 

Apex: 4.2

Theme: 26

 

I am trying to customise a standard report template to show borders.

 

So as per docs, http://docs.oracle.com/cd/E23903_01/doc/doc.41/e21674/ui_custom_css.htm

I created a CSS file and uploaded and referenced it under page template just below #HEAD#.

 

My CSS code is as follows (taken from firebug in /i/themes/theme_26/css). I just added border: solid 1px which renders the border in firebug.

 

<script>
table.uReportStandard  tbody  tr  td {
    border-bottom: medium none;
    border-top: 1px solid #DDDDDD;
    line-height: 20px;
    padding: 4px 8px;
    border: solid 1px;
</script>

 

 

But with no border is showing when I run the page. Could anyone please help me find out what I should be doing to display borders? Bit lost how CSS is handled in APEX.

Cheers.

  • 1. Re: CSS file to customise template
    fac586 Guru
    Currently Being Moderated

    WilliamWallace wrote:

     

    HI

     

    Apex: 4.2

    Theme: 26

     

    I am trying to customise a standard report template to show borders.

     

    So as per docs, http://docs.oracle.com/cd/E23903_01/doc/doc.41/e21674/ui_custom_css.htm

    I created a CSS file and uploaded and referenced it under page template just below #HEAD#.

     

    Referenced how? Please show the page template code.

     

    My CSS code is as follows (taken from firebug in /i/themes/theme_26/css). I just added border: solid 1px which renders the border in firebug.

     

    <script>
    table.uReportStandard  tbody  tr  td {
        border-bottom: medium none;
        border-top: 1px solid #DDDDDD;
        line-height: 20px;
        padding: 4px 8px;
        border: solid 1px;
    </script>
    

    Well for a start, embedded CSS must be wrapped in the style element, not the script element, and if you have attached it as an external style sheet then it isn't wrapped in any HTML element at all.

    But with no border is showing when I run the page. Could anyone please help me find out what I should be doing to display borders? Bit lost how CSS is handled in APEX.

    Suggest you demostrate the problem with an example on apex.oracle.com.

  • 2. Re: CSS file to customise template
    William Wallace Newbie
    Currently Being Moderated

    Referenced how? Please show the page template code.

     

    Hi, I referenced it by as per line 25 below:

    <!--[if HTML5]><![endif]-->
    <!doctype html>
    <!--[if lt IE 7 ]> <html class="ie6 no-css3" lang="&BROWSER_LANGUAGE."> <![endif]-->
    <!--[if IE 7 ]>    <html class="ie7 no-css3" lang="&BROWSER_LANGUAGE."> <![endif]-->
    <!--[if IE 8 ]>    <html class="ie8 no-css3" lang="&BROWSER_LANGUAGE."> <![endif]-->
    <!--[if IE 9 ]>    <html class="ie9" lang="&BROWSER_LANGUAGE."> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html lang="&BROWSER_LANGUAGE."> <!--<![endif]-->
    <head>
    <!--[if !HTML5]>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <![endif]-->
      <meta charset="UTF-8">
      <title>#TITLE#</title>
      <link rel="icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
      <link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
      #APEX_CSS#
    #TEMPLATE_CSS#
    #THEME_CSS#
    #PAGE_CSS#
    #APEX_JAVASCRIPT#
    #TEMPLATE_JAVASCRIPT#
    #APPLICATION_JAVASCRIPT#
    #PAGE_JAVASCRIPT#
    <link rel="stylesheet" href="#WORKSPACE_IMAGES#custom.css" type="text/css">
    #HEAD#
    

     

    This is for Page Template : One Level Tabs - No Side Bar

     

     

    I changed the script to style, thanks for that.

     

    Uploaded the style sheet in Shared Components >> Cascading Style Sheets.

     

     

    I created a test case in apex.oracle.com

     

    Workspace: Timeline

    Username: guest

    password: p@$$word

    App 56416

    Page: 1

    Thanks for looking at it.

  • 3. Re: CSS file to customise template
    DaveWill Newbie
    Currently Being Moderated

    Load the page that uses the custom stylesheet using FireFox browser.   User the 'Web Console'  view of FireFox's developer tool (Tools -> Web Developerand -> Toggle Tools ) as it loads the page and see how the custom.css file is being loaded.  Do you see any errors or warnings that corresponds to the custom.css.

     

    When I attempted the same the browser reported the following message.

     

    [09:30:05.646] The stylesheet http://corona:7777/pls/int/wwv_flow_file_mgr.get_file?p_security_group_id=7648720609684158&p_flow_id=106&p_fname=customStyle.css was not loaded because its MIME type, "text/plain", is not "text/css". @ http://corona:7777/pls/int/f?p=106:2:2576740924225644:::::

  • 4. Re: CSS file to customise template
    fac586 Guru
    Currently Being Moderated

    WilliamWallace wrote:

     

    Referenced how? Please show the page template code.

     

    Hi, I referenced it by as per line 25 below:

    <!--[if HTML5]><![endif]-->

    <!doctype html>

    <!--[if lt IE 7 ]> <html class="ie6 no-css3" lang="&BROWSER_LANGUAGE."> <![endif]-->

    <!--[if IE 7 ]>    <html class="ie7 no-css3" lang="&BROWSER_LANGUAGE."> <![endif]-->

    <!--[if IE 8 ]>    <html class="ie8 no-css3" lang="&BROWSER_LANGUAGE."> <![endif]-->

    <!--[if IE 9 ]>    <html class="ie9" lang="&BROWSER_LANGUAGE."> <![endif]-->

    <!--[if (gt IE 9)|!(IE)]><!--> <html lang="&BROWSER_LANGUAGE."> <!--<![endif]-->

    <head>

    <!--[if !HTML5]>

      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <![endif]-->

      <meta charset="UTF-8">

      <title>#TITLE#</title>

      <link rel="icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">

      <link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">

      #APEX_CSS#

    #TEMPLATE_CSS#

    #THEME_CSS#

    #PAGE_CSS#

    #APEX_JAVASCRIPT#

    #TEMPLATE_JAVASCRIPT#

    #APPLICATION_JAVASCRIPT#

    #PAGE_JAVASCRIPT#

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

    #HEAD#

     

    This is for Page Template : One Level Tabs - No Side Bar


    It needs to go after #HEAD# and the theme CSS reference. As you are using the same selector as the theme CSS, the override needs to be the last rule applied in the cascade:

     

     

    <!--[if HTML5]><![endif]-->
    <!doctype html>
    <!--[if lt IE 7 ]> <html class="ie6 no-css3" lang="&BROWSER_LANGUAGE."> <![endif]-->
    <!--[if IE 7 ]>    <html class="ie7 no-css3" lang="&BROWSER_LANGUAGE."> <![endif]-->
    <!--[if IE 8 ]>    <html class="ie8 no-css3" lang="&BROWSER_LANGUAGE."> <![endif]-->
    <!--[if IE 9 ]>    <html class="ie9" lang="&BROWSER_LANGUAGE."> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html lang="&BROWSER_LANGUAGE."> <!--<![endif]-->
    <head>
    <!--[if !HTML5]>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <![endif]-->
      <meta charset="UTF-8">
      <title>#TITLE#</title>
      <link rel="icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
      <link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
      #APEX_CSS#
    #TEMPLATE_CSS#
    #THEME_CSS#
    #PAGE_CSS#
    #APEX_JAVASCRIPT#
    #TEMPLATE_JAVASCRIPT#
    #APPLICATION_JAVASCRIPT#
    #PAGE_JAVASCRIPT#
    #HEAD#
      <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
      <link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_26/css/4_2.css?v=#APEX_VERSION#">
    <link rel="stylesheet" href="#WORKSPACE_IMAGES#custom.css" type="text/css">
      <script src="#IMAGE_PREFIX#themes/theme_26/js/4_2.js?v=#APEX_VERSION#"></script>
    </head>

     

     

    I changed the script to style, thanks for that.

     

    That's only needed if the CSS is embedded in the HTML page. For an external style sheet like this, the file must only contain the CSS rules.

  • 5. Re: CSS file to customise template
    fac586 Guru
    Currently Being Moderated

    ac91bf5d-1ba9-4db4-b0c4-eba0123e94fa wrote:

     

    Please update your forum profile with a real handle instead of "ac91bf5d-1ba9-4db4-b0c4-eba0123e94fa".

    Load the page that uses the custom stylesheet using FireFox browser.   User the 'Web Console'  view of FireFox's developer tool (Tools -> Web Developerand -> Toggle Tools ) as it loads the page and see how the custom.css file is being loaded.  Do you see any errors or warnings that corresponds to the custom.css.

     

    When I attempted the same the browser reported the following message.

     

    [09:30:05.646] The stylesheet http://corona:7777/pls/int/wwv_flow_file_mgr.get_file?p_security_group_id=7648720609684158&p_flow_id=106&p_fname=customStyle.css was not loaded because its MIME type, "text/plain", is not "text/css". @ http://corona:7777/pls/int/f?p=106:2:2576740924225644:::::

    We have seen this before as a recurring problem when using Internet Explorer (particularly IE7/8) to upload CSS and JS files to the repository. No problem when Firefox is used. Try using a different browser to upload the files.

  • 6. Re: CSS file to customise template
    DaveWill Newbie
    Currently Being Moderated

    Please update your forum profile with a real handle instead of "ac91bf5d-1ba9-4db4-b0c4-eba0123e94fa".

    Done that, tnx.

     

    We have seen this before as a recurring problem when using Internet Explorer (particularly IE7/8) to upload CSS and JS files to the repository. No problem when Firefox is used. Try using a different browser to upload the files.

     

    Never used IE.  Have always being using FF and Chrome.  Happens with both.  When this happens the styles do not take effect.

     

    So I was wondering @WilliamWallace issue may also be related.

  • 7. Re: CSS file to customise template
    fac586 Guru
    Currently Being Moderated

    DaveWill wrote:

     

    Please update your forum profile with a real handle instead of "ac91bf5d-1ba9-4db4-b0c4-eba0123e94fa".

    Done that, tnx.

     

    We have seen this before as a recurring problem when using Internet Explorer (particularly IE7/8) to upload CSS and JS files to the repository. No problem when Firefox is used. Try using a different browser to upload the files.

     

    Never used IE.  Have always being using FF and Chrome.  Happens with both.  When this happens the styles do not take effect.

     

    So I was wondering @WilliamWallace issue may also be related.

    No, it's just a simple application of CSS cascade rules.

  • 8. Re: CSS file to customise template
    William Wallace Newbie
    Currently Being Moderated

    Many thanks fac586 for your help.

Legend

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