5 Replies Latest reply: Mar 1, 2013 10:07 AM by Jiminy RSS

    Theme 26 CSS

    Jiminy
      Hi,

      I am using Theme 26 in Apex 4.2.1 and the "Use Theme Default" page template which is One Level Tabs - No Sidebar

      Within the CSS INLINE section I have added the following code but this does not seem to take effect:

      .display_only {
      font-weight:bold;
      }

      I have checked that the substitution string for #PAGE_CSS# is referenced which it is.

      Are there any other reasons why CSS would not be rendered when using the CSS INLINE section?

      JIM
        • 1. Re: Theme 26 CSS
          Mindmap
          Hello,
          It works fine with me .... Please try this:
          .display_only {
          font-weight:bold !important;
          }
          * You can see your page source to make sure that the CSS rule exists in the page source..


          Regards,
          Fateh
          • 2. Re: Theme 26 CSS
            Jiminy
            Hi Fateh,

            Brilliant that worked.

            Does this mean that their is some CSS that is overriding my overide?

            Thanks,

            JIM
            • 3. Re: Theme 26 CSS
              Mindmap
              Hello,
              I think so. But, I cannot tell anything since I do not see your page... Please consider the order:

              #APEX_CSS#
              #TEMPLATE_CSS#
              #THEME_CSS#
              #PAGE_CSS#


              Also, you may have some CSS in your regions. To achieve what want, just Add *!important* that I suppose you know what it does ....

              Make sure to use Fire bug in your browser and check the rules that are being overridden ....


              Best Regards,
              Fateh
              • 4. Re: Theme 26 CSS
                fac586
                JIM wrote:
                Hi,

                I am using Theme 26 in Apex 4.2.1 and the "Use Theme Default" page template which is One Level Tabs - No Sidebar

                Within the CSS INLINE section I have added the following code but this does not seem to take effect:

                .display_only {
                font-weight:bold;
                }

                I have checked that the substitution string for #PAGE_CSS# is referenced which it is.

                Are there any other reasons why CSS would not be rendered when using the CSS INLINE section?
                <tt>#PAGE_CSS#</tt> comes before the theme CSS (the <tt>link rel="stylesheet"</tt> element) 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#">
                  <script src="#IMAGE_PREFIX#themes/theme_26/js/4_2.js?v=#APEX_VERSION#"></script>
                </head>
                The theme CSS therefore overrides your "override". If you're doing a lot of template or page overrides I'd recommend modifying the page templates to move the <tt>#PAGE_CSS#</tt> and <tt>#TEMPLATE_CSS#</tt> substitution strings after the theme CSS reference:
                <!--[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#
                #THEME_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#">
                #TEMPLATE_CSS#
                #PAGE_CSS#
                  <script src="#IMAGE_PREFIX#themes/theme_26/js/4_2.js?v=#APEX_VERSION#"></script>
                </head>
                Specificity might also be an issue. See these threads for recent discussion on similar topics:

                <li>{thread:id=2489308}
                <li>{thread:id=2494467}
                • 5. Re: Theme 26 CSS
                  Jiminy
                  Hi Fac586,

                  I moved the #TEMPLATE_CSS# and #PAGE_CSS# under the style sheet but still no luck.

                  Ill take a look into Specificity. I have also found the Grid Layout is specifying class="regionColumns" so this maybe another avenue to inspect.

                  JIM